frst-components 0.36.9 → 0.38.0

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

@@ -0,0 +1,312 @@
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { useState, useEffect, useLayoutEffect } from 'react';
+import TextIcon from '../TextIcon/index.js';
+import Rating from '../Rating/index.js';
+import RatingCurtidas from '../RatingCurtidas/index.js';
+import Select from 'react-select';
+import Tooltip from '../../DS/tooltip/index.js';
+import StepsProgress from '../../DS/steps-progress/index.js';
+import { SawBadgeIcon, EditIcon, Brain, CompanyIcon, Mail, WithoutTrail, WithTrail, GoalInviteIcon, GoalViewsIcon } from '../../../shared/icons.js';
+import Tag from '../../tag/index.js';
+import AvatarWithInfo from '../AvatarWithInfo/index.js';
+import Button from '../../buttons/index.js';
+import style from './BannerProblem.module.css.js';
+import { SpanHeaderTag, Steps } from './styles.js';
+
+function BannerProblem(props) {
+    const [Idioma, setIdioma] = useState(props.missionIdioma ? props.missionIdioma : 'pt-BR');
+    const [Edit, setEdit] = useState(false);
+    const [tagListShow, setTagListShow] = useState(props.tagData ? props.tagData : []);
+    /// States para controle de Edição
+    const [TrilhaId, setTrilhaId] = useState(props.trilhaId ? props.trilhaId : null);
+    const [TrilhaDescricaoSelecionada, setTrilhaDescricaoSelecionada] = useState(props.trilha ? props.trilha : '');
+    const [Tag1, setTag1] = useState(props.tags && props.tags.length >= 1 ? props.tags[0] : '');
+    const [Tag2, setTag2] = useState(props.tags && props.tags.length >= 2 ? props.tags[1] : '');
+    const [Tag3, setTag3] = useState(props.tags && props.tags.length >= 3 ? props.tags[2] : '');
+    const [TituloProblema, setTituloProblema] = useState(props.problema ? props.problema : '');
+    /// States para controle de elementos do Banner
+    const [TrilhaBanner, setTrilhaBanner] = useState(props.trilha ? props.trilha : '');
+    const [Tags, setTags] = useState(props.tags ? props.tags : []);
+    // const [selectedTags, setSelectedTags] = useState([{label: '', value:''},{label: '', value:''},{label: '', value:''}]);
+    useState([
+        props.tags && props.tags.length >= 1 ? props.tags[0] : '',
+        props.tags && props.tags.length >= 2 ? props.tags[1] : '',
+        props.tags && props.tags.length >= 3 ? props.tags[2] : ''
+    ]);
+    const customStyles = {
+        option: (styles, { isFocused, isSelected, isDisabled }) => ({
+            ...styles,
+            background: isFocused
+                ? '	#FFC6B7'
+                : isSelected
+                    ? '#FF4D0D'
+                    : undefined,
+            color: isFocused ? '#000'
+                : isSelected ? '#fff'
+                    : isDisabled ? '#ccc'
+                        : undefined,
+            zIndex: 1
+        }),
+        menu: base => ({
+            ...base,
+            zIndex: 100
+        }),
+        control: (styles) => ({
+            ...styles,
+            marginTop: 12
+        }),
+    };
+    useEffect(() => {
+        setTrilhaId(props.trilhaId ? props.trilhaId : null);
+        setTrilhaDescricaoSelecionada(props.trilha ? props.trilha : '');
+        setTag1(props.tags && props.tags.length >= 1 ? props.tags[0] : '');
+        setTag2(props.tags && props.tags.length >= 2 ? props.tags[1] : '');
+        setTag3(props.tags && props.tags.length >= 3 ? props.tags[2] : '');
+        setTituloProblema(props.problema ? props.problema : '');
+        /// States para controle de elementos do Banner
+        setTrilhaBanner(props.trilha ? props.trilha : '');
+        setTags(props.tags ? props.tags : []);
+    }, [props]);
+    useEffect(() => {
+        setIdioma(props.missionIdioma ? props.missionIdioma : 'pt-BR');
+    }, [props.missionIdioma]);
+    const handleEdit = () => {
+        if (Edit === true) {
+            let titleInEditing = TituloProblema;
+            (document.getElementById("idEdit-fieldTitleProblem")) &&
+                (titleInEditing = document.getElementById("idEdit-fieldTitleProblem").innerText);
+            setTituloProblema(titleInEditing);
+            setTrilhaBanner(TrilhaDescricaoSelecionada);
+            setTags([Tag1, Tag2, Tag3]);
+            console.log(`Titulo: ${TituloProblema}`);
+            props.onClickSave([titleInEditing, TrilhaDescricaoSelecionada, [Tag1, Tag2, Tag3]]);
+        }
+        setEdit(!Edit);
+    };
+    useEffect(() => {
+        setTagListShow(props.tagData ? filterTagsSelected(props.tagData, [Tag1, Tag2, Tag3]) : []);
+    }, [Tag1, Tag2, Tag3]);
+    // 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 showChallengeTitle = () => {
+        let title = props.textTitleProblem ? props.textTitleProblem : 'Desafio';
+        title = props.isVerified ? 'Desafio verificado' : title;
+        return title;
+    };
+    const [selectedStep, setSelectedStep] = useState(props?.stepActive);
+    const [definedSteps, setDefinedSteps] = useState(getStepsChallenge(Idioma, props?.stepProblem, setSelectedStep, props?.onSelectedStep) || []);
+    useEffect(() => {
+        setDefinedSteps(getStepsChallenge(Idioma, props?.stepProblem, setSelectedStep, props?.onSelectedStep));
+    }, [Idioma, props.stepProblem, props.onSelectedStep]);
+    useEffect(() => {
+        setSelectedStep(props.stepActive);
+    }, [props.stepActive]);
+    const MOBILEWIDTH = 650;
+    return (jsx(Fragment, { children: jsxs("div", { className: style.container, style: { ...props.style }, children: [props.topHeaderTagText && (jsx(SpanHeaderTag, { background: props.topHeaderTagBgColor, color: props.topHeaderTagColor, children: props.topHeaderTagText })), jsxs("div", { style: {
+                        width: '100%',
+                        display: 'flex',
+                        justifyContent: 'space-between',
+                        flexDirection: 'row',
+                        alignItems: 'center'
+                    }, children: [jsxs("span", { className: style.titleProblem, children: [showChallengeTitle(), props.isVerified && (jsx(Tooltip, { direction: "bottom", content: props.verifiedTooltipContent, trigger: "hover", width: "361px", height: "54px", style: { top: '10px', textAlign: 'center' }, children: jsx(SawBadgeIcon, {}) }))] }), props.isEditable && (jsx(Button, { label: Edit
+                                ? props.textButtonLinkEditSave
+                                    ? props.textButtonLinkEditSave
+                                    : 'Salvar Alterações'
+                                : props.textButtonLinkEdit
+                                    ? props.textButtonLinkEdit
+                                    : 'Editar', variant: "link", handleClick: () => handleEdit(), startIcon: jsx(EditIcon, {}) }))] }), Edit ? (jsx("div", { style: {
+                        marginTop: '8px',
+                        marginBottom: '8px',
+                        backgroundColor: 'rgb(242, 242, 242)',
+                        border: '1px solid rgb(189, 189, 189)',
+                        borderRadius: '8px',
+                        padding: '24px 16px',
+                        width: '100%'
+                    }, children: jsx("div", { id: 'idEdit-fieldTitleProblem', "data-gramm": "false", contentEditable: "true", role: "textbox", "aria-multiline": "true", suppressContentEditableWarning: true, style: {
+                            fontStyle: 'normal',
+                            fontWeight: '600',
+                            fontSize: '32px',
+                            textAlign: 'left',
+                            display: 'flex',
+                            width: '100%',
+                            color: '#FF4D0D',
+                            backgroundColor: 'rgb(242, 242, 242)',
+                            border: 'none',
+                            wordBreak: 'break-word'
+                        }, children: TituloProblema }) })) : (jsx("h1", { className: style.description, children: TituloProblema })), jsx("div", { style: {
+                        display: 'flex',
+                        justifyContent: 'space-between',
+                        position: 'relative',
+                        width: '100%',
+                        borderBottom: '1px solid #CCCCCC'
+                    }, children: jsxs("div", { style: { display: 'inline-flex', width: '100%' }, children: [jsxs("div", { style: { width: '100%', maxWidth: 600 }, children: [jsxs("div", { style: { display: 'flex', flexDirection: 'column', width: 'fit-content', paddingTop: '16px' }, children: [jsx("span", { className: style.created, children: props.dataCriacao }), 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: jsx(AvatarWithInfo, { cargo: props.cargo, nomeCompleto: props.nome, fotoAvatar: props.avatar, style: { marginBottom: 8, marginTop: 24, cursor: props.onClickUserInfo ? 'pointer' : 'auto' }, onClick: () => (props.onClickUserInfo ? props.onClickUserInfo() : {}) }) })) : (jsx(AvatarWithInfo, { cargo: props.cargo, nomeCompleto: props.nome, fotoAvatar: props.avatar, style: { marginBottom: 8, marginTop: 24 } }))] }), jsx(TextIcon, { style: { margin: '10px' }, description: props.area, svg: jsx(Brain, {}) }), props.company && jsx(TextIcon, { style: { width: '80%', margin: '10px' }, flexStart: true, description: props.company, svg: jsx(CompanyIcon, {}) }), jsx(TextIcon, { style: { margin: '10px' }, description: adapterEmail(props.email, size[0]), svg: jsx(Mail, {}) }), Edit && props.isVisibleEditTrail ? (jsx(Fragment, { children: jsxs("div", { style: {
+                                                marginTop: 12,
+                                                backgroundColor: '#F2F2F2',
+                                                borderWidth: 1,
+                                                borderRadius: 4,
+                                                padding: '24px 16px 24px 16px',
+                                                border: '1px solid #BDBDBD'
+                                            }, children: [jsx("h3", { style: { marginBottom: 12, textAlign: 'left', width: '100%', fontSize: 16 }, children: props.textTrailLabel
+                                                        ? props.textTrailLabel
+                                                        : 'Deseja vincular este novo problema a uma Trilha de Aprendizagem?' }), jsx(Select, { id: 'select', styles: customStyles, options: props.trilhaData ? props.trilhaData : [], value: props.trilhaData.filter(function (temp) {
+                                                        return temp.value === TrilhaId;
+                                                    }), placeholder: props.placeholderSelectTrail ? props.placeholderSelectTrail : 'Selecione uma trilha', onChange: (e) => {
+                                                        setTrilhaId(e.value);
+                                                        setTrilhaDescricaoSelecionada(e.label);
+                                                    } })] }) })) : (jsx(Fragment, { children: TrilhaBanner === '' ? (jsx(TextIcon, { style: { margin: '10px' }, description: props.textIconDescription ? props.textIconDescription : 'Ainda não está vinculado a uma trilha', svg: jsx(WithoutTrail, {}) })) : (jsx(TextIcon, { style: { margin: '10px' }, description: TrilhaBanner, svg: jsx(WithTrail, {}) })) })), jsx("div", { style: { marginTop: 16, marginBottom: 26, maxWidth: !Edit ? '400px' : '100%' }, children: Edit && props.isVisibleEditTags ? (jsx(Fragment, { children: jsxs("div", { className: style.contentInput, children: [jsx("h3", { style: { marginBottom: 12, textAlign: 'left', width: '100%', fontSize: 16 }, children: props.textContentInput
+                                                            ? props.textContentInput
+                                                            : 'Busque e selecione até três palavras-chave:' }), jsx(Select, { id: 'select', styles: customStyles, options: tagListShow, value: tagListShow.filter(function (temp) {
+                                                            return temp.value === Tag1;
+                                                        }), placeholder: props.placeholderSelectTag ? props.placeholderSelectTag : 'Selecione uma Tag', onChange: (e) => {
+                                                            setTag1(e.value);
+                                                        } }), jsx(Select, { id: 'select', styles: customStyles, options: tagListShow, value: tagListShow.filter(function (temp) {
+                                                            return temp.value === Tag2;
+                                                        }), placeholder: props.placeholderSelectTag ? props.placeholderSelectTag : 'Selecione uma Tag', onChange: (e) => {
+                                                            setTag2(e.value);
+                                                        } }), jsx(Select, { id: 'select', styles: customStyles, options: tagListShow, value: tagListShow.filter(function (temp) {
+                                                            return temp.value === Tag3;
+                                                        }), placeholder: props.placeholderSelectTag ? props.placeholderSelectTag : 'Selecione uma Tag', onChange: (e) => {
+                                                            setTag3(e.value);
+                                                        } })] }) })) : (jsx(Fragment, { children: Tags?.map((item, key) => item && (jsx(Tag, { title: item, style: { color: '#000 !important', marginRight: 8, marginTop: 8 }, color: '#E4E1FF', selected: false, inverted: false }, key))) })) }), size[0] <= MOBILEWIDTH || Edit ? (jsxs("div", { style: {
+                                            display: 'flex',
+                                            flexDirection: 'row',
+                                            justifyContent: 'flex-start',
+                                            alignItems: 'center',
+                                            flexWrap: 'wrap',
+                                            width: '100%'
+                                        }, children: [jsx(Rating, { titulo: props.ratingTitleImpact ? props.ratingTitleImpact : 'Impacto', descricaoAvaliacao: props.descriptionImpacto, qtdeAvaliacao: props.qtdeAvaliacao, nota: props.notaAvaliacao, tipoVisualizacao: 1, style: { margin: 0 }, nomeAvaliacao: props.ratingLikesEvaluation ? props.ratingLikesEvaluation : 'avaliação' }), jsx(Rating, { titulo: props.ratingTitleRelevance ? props.ratingTitleRelevance : 'Relevância', descricaoAvaliacao: props.descriptionRelevancia, qtdeAvaliacao: props.qtdeRelevancia, nota: props.notaRelevancia, tipoVisualizacao: 1, style: { margin: 0 }, nomeAvaliacao: props.ratingLikesEvaluation ? props.ratingLikesEvaluation : 'avaliação' }), props.curtidas && (jsx(RatingCurtidas, { titulo: props.ratingTitleLikes ? props.ratingTitleLikes : 'Curtidas', qtdeCurtidas: props.curtidas, tipoBotao: 2, style: { margin: 0 }, descricaoCurtida: props.ratingLikesDescription ? props.ratingLikesDescription : 'pessoas' }))] })) : null, jsxs("div", { style: { display: 'flex', flexDirection: 'row', gap: '32px' }, children: [props.showButtonInvite && (jsx(Button, { variant: "link", label: props.textGoalInviteBtn, startIcon: jsx("div", { style: { width: '26px', marginBottom: '-2px', marginRight: '8px' }, children: jsx(GoalInviteIcon, { width: "26px", height: "26px" }) }), handleClick: props.onClickMessage, style: { paddingTop: '0px', paddingBottom: '16px' } })), props.showButtonViews && (jsx(Button, { variant: "link", label: props.textGoalViewsBtn, startIcon: jsx("div", { style: { width: '20px', marginBottom: '-1px', marginRight: '8px' }, children: jsx(GoalViewsIcon, { width: "20px" }) }), handleClick: props.onClickViewsBtn, style: { paddingTop: '0px', paddingBottom: '16px' } }))] })] }), size[0] > MOBILEWIDTH && Edit === false ? (jsxs("div", { style: { position: 'absolute', right: 0, flexFlow: 'column', justifyContent: 'flex-end', width: '20%' }, id: "avaliations-banner-problem", children: [jsx(Rating, { titulo: props.ratingTitleImpact ? props.ratingTitleImpact : 'Impacto', descricaoAvaliacao: props.descriptionImpacto, qtdeAvaliacao: props.qtdeAvaliacao, nota: props.notaAvaliacao, tipoVisualizacao: 1, nomeAvaliacao: props.ratingLikesEvaluation ? props.ratingLikesEvaluation : 'avaliação' }), jsx(Rating, { titulo: props.ratingTitleRelevance ? props.ratingTitleRelevance : 'Relevância', descricaoAvaliacao: props.descriptionRelevancia, qtdeAvaliacao: props.qtdeRelevancia, nota: props.notaRelevancia, tipoVisualizacao: 1, nomeAvaliacao: props.ratingLikesEvaluation ? props.ratingLikesEvaluation : 'avaliação' }), props.curtidas && (jsx(RatingCurtidas, { titulo: props.ratingTitleLikes ? props.ratingTitleLikes : 'Curtidas', qtdeCurtidas: props.curtidas, tipoBotao: 2, descricaoCurtida: props.ratingLikesDescription ? props.ratingLikesDescription : 'pessoas' }))] })) : null] }) }), jsxs("div", { style: { width: '100%', display: 'flex', flexDirection: 'column' }, children: [jsx("div", { style: { marginTop: '20px' }, children: jsx(ButtonsProcessSteps, { idioma: Idioma, definedSteps: props?.stepProblem, selectedStep: selectedStep, setSelectedStep: (e) => {
+                                    setSelectedStep(e);
+                                    props?.onSelectedStep(e);
+                                }, hasContinueProps: props?.hasContinueButton, onClickContinue: () => props.onClickContinue() }) }), jsx(Steps, { children: jsx(StepsProgress, { definedSteps: definedSteps, stepSelected: selectedStep }) })] }), jsx("div", { style: {
+                        marginTop: 18,
+                        width: '100%',
+                        borderRadius: 8,
+                        border: '1px solid #BDBDBD',
+                        padding: 16,
+                        paddingLeft: 32,
+                        paddingRight: 32
+                    }, children: props.children })] }) }));
+    function adapterEmail(email, widthScreen) {
+        let newEmail = email;
+        if (widthScreen < 450) {
+            let indexBreak = email.indexOf("@");
+            newEmail = `${email.slice(0, indexBreak - 1)} 
+${email.slice(indexBreak)}`;
+        }
+        return newEmail;
+    }
+    function filterTagsSelected(dataOrigin, selectedsTags) {
+        let optFiltered = dataOrigin.map((item) => {
+            if (selectedsTags.includes(item.label)) {
+                item.isDisabled = true;
+            }
+            else {
+                item.isDisabled = false;
+            }
+            return item;
+        });
+        return optFiltered;
+    }
+}
+function getStepsChallenge(language, stepProblem, setSelectedStep, onSelectedStep) {
+    let translate = {
+        "pt-BR": ["Definição", "Hipóteses", "Testes", "Resultados", "Próximos Passos"],
+        "es": ["Definición", "Hipótesis", "Pruebas", "Resultados", "Próximos pasos"],
+        "en-US": ["Definition", "Hypotheses", "Tests", "Results", "Next Steps"],
+        "pt-PT": ["Definição", "Hipóteses", "Testes", "Resultados", "Próximos Passos"],
+    };
+    let steps = [
+        { step: 1, active: false, name: translate[language][0], action: () => {
+                onSelectedStep(1);
+                setSelectedStep(1);
+            } },
+        { step: 2, active: false, name: translate[language][1], action: () => {
+                onSelectedStep(2);
+                setSelectedStep(2);
+            } },
+        { step: 3, active: false, name: translate[language][2], action: () => {
+                onSelectedStep(3);
+                setSelectedStep(3);
+            } },
+        { step: 4, active: false, name: translate[language][3], action: () => {
+                onSelectedStep(4);
+                setSelectedStep(4);
+            } },
+        { step: 5, active: false, name: translate[language][4], action: () => {
+                onSelectedStep(5);
+                setSelectedStep(5);
+            } },
+    ];
+    let maxStep = Math.min(stepProblem, steps.length);
+    for (let i = 0; i < maxStep; i++) {
+        steps[i].active = true;
+    }
+    return steps;
+}
+function ButtonsProcessSteps({ selectedStep, definedSteps, setSelectedStep, idioma, onClickContinue, hasContinueProps }) {
+    const [anhorsBtn, setAnchorsBtn] = useState(getTranslateBtnNextPrevSteps()['pt-BR']);
+    const [hasContinuePropsState, sethasContinueProps] = useState(false);
+    useEffect(() => {
+        sethasContinueProps(hasContinueProps);
+    }, [hasContinueProps]);
+    useEffect(() => {
+        try {
+            setAnchorsBtn(getTranslateBtnNextPrevSteps()[idioma]);
+        }
+        catch (e) {
+            setAnchorsBtn(getTranslateBtnNextPrevSteps()['pt-BR']);
+        }
+    }, [idioma]);
+    return jsxs(Fragment, { children: [selectedStep == 1 && definedSteps > 1 &&
+                jsx("div", { style: { width: '100%', display: 'flex', justifyContent: 'flex-end' }, children: jsx(Button, { handleClick: () => setSelectedStep(2), label: anhorsBtn.next, variant: "link", style: { height: '40px' } }) }), selectedStep > 1 && selectedStep < definedSteps &&
+                jsxs("div", { style: { width: '100%', display: 'flex', justifyContent: 'space-between' }, children: [jsx(Button, { handleClick: () => setSelectedStep(selectedStep - 1), label: anhorsBtn.previous, variant: "link", style: { height: '40px' } }), jsx(Button, { handleClick: () => setSelectedStep(selectedStep + 1), label: anhorsBtn.next, variant: "link", style: { height: '40px' } })] }), selectedStep == definedSteps && definedSteps != 5 && definedSteps != 1 &&
+                jsxs("div", { style: { width: '100%', display: 'flex', justifyContent: 'space-between' }, children: [jsx(Button, { handleClick: () => setSelectedStep(selectedStep - 1), label: anhorsBtn.previous, variant: "link", style: { height: '40px' } }), hasContinuePropsState ? jsx(Button, { handleClick: () => onClickContinue(), label: anhorsBtn.continueChallenge, variant: "primary", style: { height: '40px' } }) : jsx("div", { children: " " })] }), selectedStep == definedSteps && definedSteps == 5 &&
+                jsx("div", { style: { width: '100%', display: 'flex', justifyContent: 'flex-start' }, children: jsx(Button, { handleClick: () => setSelectedStep(selectedStep - 1), label: anhorsBtn.previous, variant: "link", style: { height: '40px' } }) }), selectedStep == definedSteps && definedSteps == 1 &&
+                jsx("div", { style: { width: '100%', display: 'flex', justifyContent: 'flex-end' }, children: hasContinuePropsState ? jsx(Button, { handleClick: () => onClickContinue(), label: anhorsBtn.continueChallenge, variant: "primary", style: { height: '40px' } }) : jsx("div", { children: " " }) })] });
+}
+function getTranslateBtnNextPrevSteps() {
+    const traducaoPTBR = {
+        next: "Ver fase seguinte >",
+        nextShort: "Próx. >",
+        previous: "< Ver fase anterior",
+        previousShort: "< Ant.",
+        continueChallenge: "Continuar desafio"
+    };
+    const traducaoES = {
+        next: "Ver fase siguiente >",
+        nextShort: "Próx. >",
+        previous: "< Ver fase anterior",
+        previousShort: "< Ant.",
+        continueChallenge: "Continuar desafío"
+    };
+    const traducaoENUS = {
+        next: "View next phase >",
+        nextShort: "Next >",
+        previous: "< View previous phase",
+        previousShort: "< Previous",
+        continueChallenge: "Continue challenge"
+    };
+    const traducaoPT = {
+        next: "Ver fase seguinte >",
+        nextShort: "Próx. >",
+        previous: "< Ver fase anterior",
+        previousShort: "< Ant.",
+        continueChallenge: "Continuar desafio"
+    };
+    return {
+        "pt-BR": traducaoPTBR,
+        "es": traducaoES,
+        "en-US": traducaoENUS,
+        "pt-PT": traducaoPT
+    };
+}
+
+export { BannerProblem as default };

package/dist/esm/src/components/cardLT/BannerProblem/styles.js

@@ -0,0 +1,30 @@
+import styled from 'styled-components';
+
+const SpanHeaderTag = styled.span `
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    padding: 4px 16px;
+    gap: 10px;
+    position: absolute;
+    right: -1px;
+    top: -1px;
+    background: ${({ background }) => background || '#940059'};
+    color: ${({ color }) => color || '#FFFFFF'};
+    border-radius: 0px 0px 0px 8px;
+`;
+const Steps = styled.div `
+    width: 100%;
+    padding-left: 5%;
+    padding-right: 5%;
+    padding-top: 30px;
+
+    @media screen and (max-width:600px){
+    padding-left: 2% !important;
+    padding-right: 0% !important;
+    font-size: 13px !important;
+}
+`;
+
+export { SpanHeaderTag, Steps };

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

@@ -0,0 +1,7 @@
+import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".MessageBox-module_container__6oBFw {\n  min-width: 200px;\n  padding: 8px;\n  min-height: 30px;\n  margin-top: 8px;\n  font-size: 14px;\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}\n\n.MessageBox-module_square__bUGB6{\n  height: 20px;\n  width: 20px;\n  display: inline-flex; \n  justify-content: center; \n  align-items: center;\n  margin-right: 8px;\n}\n\n.MessageBox-module_success__OT-qh{\n  \n  border-Width: 2;\n  border: 1px solid;\n  border-color: #2CA92A;\n  background-color: #D1F6D1;\n  color: #222;\n}\n\n.MessageBox-module_success__OT-qh:hover{\n  background-color: #2CA92A !important;\n  color: white;\n}\n\n.MessageBox-module_successNoHover__0-hv8{\n  \n  border-Width: 2;\n  border: 1px solid;\n  border-color: #2CA92A;\n  background-color: #D1F6D1;\n  color: #222;\n}\n\n.MessageBox-module_warning__WFHrV{\n  border-Width: 2;\n  border: 1px solid;\n  border-color: #FFC200;\n  background-color: #FEF0D4;\n  color: #222;\n}\n\n.MessageBox-module_warning__WFHrV:hover{\n  background-color: #FFC200 !important;\n  color: white;\n}\n\n.MessageBox-module_warningNoHover__9REga{\n  border-Width: 2;\n  border: 1px solid;\n  border-color: #FFC200;\n  background-color: #FEF0D4;\n  color: #222;\n}\n\n.MessageBox-module_error__PzfdG{\n  border-Width: 2;\n  border: 1px solid;\n  border-color: #EA0000;\n  background-color: #FFE5E5;\n  color: #222;\n}\n\n.MessageBox-module_error__PzfdG:hover{\n  background-color: #EA0000 !important;\n  color: white;\n}\n\n.MessageBox-module_errorNoHover__wBfkm{\n  border-Width: 2;\n  border: 1px solid;\n  border-color: #EA0000;\n  background-color: #FFE5E5;\n  color: #222;\n}\n\n.MessageBox-module_notificacao__TIUt0{\n  border-Width: 2;\n  border: 1px solid;\n  border-color: #757575;\n  background-color: #F2F2F2;\n  color: #0645AD;\n  font-weight: 700;\n}\n\n.MessageBox-module_notificacao__TIUt0:hover{\n  background-color: #F2F2F2 !important;\n  \n}\n\n.MessageBox-module_notificacao__TIUt0 span {\n  color: #757575 !important;\n  font-weight: 400;\n}\n\n.MessageBox-module_notificacaoNoHover__NHKEm{\n  border-Width: 2;\n  border: 1px solid;\n  border-color: #757575;\n  background-color: #F2F2F2;\n  color: #0645AD;\n  font-weight: 700;\n}\n\n.MessageBox-module_notificacaoNoHover__NHKEm span {\n  color: #757575 !important;\n  font-weight: 400;\n}\n\n.MessageBox-module_notificacaoErro__-Daph{\n  border-Width: 2;\n  border: 1px solid;\n  border-color: #EA0000 ;\n  background-color: #FFE5E5;\n  color: #222;\n}\n\n.MessageBox-module_notificacaoErro__-Daph:hover{\n  background-color: #EA0000 !important;\n  color: white;\n}\n\n.MessageBox-module_notificacaoErroNoHover__kW518{\n  border-Width: 2;\n  border: 1px solid;\n  border-color: #EA0000 ;\n  background-color: #FFE5E5;\n  color: #222;\n}";
+var style = {"container":"MessageBox-module_container__6oBFw","square":"MessageBox-module_square__bUGB6","success":"MessageBox-module_success__OT-qh","successNoHover":"MessageBox-module_successNoHover__0-hv8","warning":"MessageBox-module_warning__WFHrV","warningNoHover":"MessageBox-module_warningNoHover__9REga","error":"MessageBox-module_error__PzfdG","errorNoHover":"MessageBox-module_errorNoHover__wBfkm","notificacao":"MessageBox-module_notificacao__TIUt0","notificacaoNoHover":"MessageBox-module_notificacaoNoHover__NHKEm","notificacaoErro":"MessageBox-module_notificacaoErro__-Daph","notificacaoErroNoHover":"MessageBox-module_notificacaoErroNoHover__kW518"};
+styleInject(css_248z);
+
+export { style as default };

package/dist/esm/src/components/cardLT/MessageBox/icons/errorIcon.js

@@ -0,0 +1,13 @@
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+
+///-----------------------------------------
+/// Componente
+/**
+ *
+ * @componente
+ */
+function ErrorIcon() {
+    return (jsx(Fragment, { children: jsxs("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("path", { d: "M11.3327 0.666504L0.666016 11.3332", stroke: "white", strokeWidth: "1.2", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M0.666016 0.666504L11.3327 11.3332", stroke: "white", strokeWidth: "1.2", strokeLinecap: "round", strokeLinejoin: "round" })] }) }));
+}
+
+export { ErrorIcon as default };

package/dist/esm/src/components/cardLT/MessageBox/icons/successIcon.js

@@ -0,0 +1,13 @@
+import { jsx, Fragment } from 'react/jsx-runtime';
+
+///-----------------------------------------
+/// Componente
+/**
+ *
+ * @componente
+ */
+function SuccessIcon() {
+    return (jsx(Fragment, { children: jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M13.3327 4L5.99935 11.3333L2.66602 8", stroke: "white", strokeWidth: "1.2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }));
+}
+
+export { SuccessIcon as default };

package/dist/esm/src/components/cardLT/MessageBox/icons/warningIcon.js

@@ -0,0 +1,13 @@
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+
+///-----------------------------------------
+/// Componente
+/**
+ *
+ * @componente
+ */
+function WarningIcon() {
+    return (jsx(Fragment, { children: jsxs("svg", { width: "2", height: "12", viewBox: "0 0 2 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("path", { d: "M1 0.666992V8.00033", stroke: "white", strokeWidth: "1.2", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M1 10.667L1 11.3337", stroke: "white", strokeWidth: "1.2", strokeLinecap: "round", strokeLinejoin: "round" })] }) }));
+}
+
+export { WarningIcon as default };

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

@@ -0,0 +1,59 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import style from './MessageBox.module.css.js';
+import SuccessIcon from './icons/successIcon.js';
+import ErrorIcon from './icons/errorIcon.js';
+import WarningIcon from './icons/warningIcon.js';
+import { SaveIcon, CloseIcon } from '../../../shared/icons.js';
+
+///-----------------------------------------
+/// Componente
+/**
+ *
+ * @componente
+ */
+function MessageBox(props) {
+    const MapBorderColor = [
+        '#2CA92A',
+        '#FFC200',
+        '#EA0000',
+        '#757575',
+        '#EA0000',
+    ];
+    const MapIconList = [
+        jsx(SuccessIcon, {}),
+        jsx(WarningIcon, {}),
+        jsx(ErrorIcon, {}),
+        jsx(SaveIcon, {}),
+        jsx(SaveIcon, { fill: 'red' })
+    ];
+    return (jsxs("div", { style: { position: 'relative' }, children: [jsxs("div", { className: props.hasHover ?
+                    `${props.tipoVisualizacao === 1 ? style.success
+                        : props.tipoVisualizacao === 2 ? style.warning
+                            : props.tipoVisualizacao === 3 ? style.error
+                                : props.tipoVisualizacao === 4 ? style.notificacao
+                                    : props.tipoVisualizacao === 5 ? style.notificacaoErro
+                                        : ''} ${style.container}`
+                    :
+                        `${props.tipoVisualizacao === 1 ? style.successNoHover
+                            : props.tipoVisualizacao === 2 ? style.warningNoHover
+                                : props.tipoVisualizacao === 3 ? style.errorNoHover
+                                    : props.tipoVisualizacao === 4 ? style.notificacaoNoHover
+                                        : props.tipoVisualizacao === 5 ? style.notificacaoErroNoHover
+                                            : ''} ${style.container}`, style: {
+                    cursor: props.onClick ? 'pointer' : 'default',
+                    ...props.style
+                }, onClick: props.onClick, children: [jsx("div", { className: style.square, style: { backgroundColor: MapBorderColor[props.tipoVisualizacao - 1] }, children: MapIconList[props.tipoVisualizacao - 1] }), jsxs("div", { style: { display: 'inline-flex', width: 'calc(100% - 30px)' }, children: [props.texto, jsxs("span", { children: [" \u00A0", props.descricao ? props.descricao : ''] })] })] }), props.hasClickExit &&
+                jsxs("div", { style: {
+                        display: 'inline-flex',
+                        position: 'absolute',
+                        width: '40px',
+                        height: '100%',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                        right: 0,
+                        top: 0,
+                        cursor: 'pointer'
+                    }, onClick: props.onClickExit, children: [" ", jsx(CloseIcon, { width: '9' }), " "] })] }));
+}
+
+export { MessageBox as default };

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

@@ -0,0 +1,7 @@
+import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = "@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=VT323&display=swap');\n\n.Rating-module_container__yehpg {\n  width: 150px;\n  padding: 8px;\n  height: 80px;\n  display: flex;\n  justify-content: 'flex-start';\n  align-items: 'center';\n  position: relative;\n  margin-left: 16px;\n  flex-direction: row;\n  flex-wrap: wrap;\n  font-family: 'Work Sans';\n  \n}\n\n.Rating-module_titulo__mPtNy{\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  font-size: 16px;\n  font-weight: 600px;\n}\n\n.Rating-module_content__fqIyW{\n  display: flex;\n  width: 100%;\n  justify-content: flex-start;\n  align-items: flex-start;\n  \n}\n\n.Rating-module_star__Wzye9{\n  display: inline-flex;\n  width: 35px; \n  height: 35px; \n  position: relative; \n  justify-content: center; \n  align-items: center;\n}\n\n.Rating-module_avaliacao__AOld-{\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  width: 100px;\n  height: 100%;\n  margin-left: 4px;\n}\n";
+var style = {"container":"Rating-module_container__yehpg","titulo":"Rating-module_titulo__mPtNy","content":"Rating-module_content__fqIyW","star":"Rating-module_star__Wzye9","avaliacao":"Rating-module_avaliacao__AOld-"};
+styleInject(css_248z);
+
+export { style as default };

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

@@ -0,0 +1,26 @@
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import style from './Rating.module.css.js';
+import StarIcon from './starIcon.js';
+
+///-----------------------------------------
+/// Componente
+/**
+ *
+ * @componente
+ */
+function Rating(props) {
+    const MapColorStar = [
+        '#FFC200',
+        '#000000',
+        '#FFFFFF',
+    ];
+    const MapColorNumberStar = [
+        '#FFFFFF',
+        '#FFFFFF',
+        '#FFC200',
+        '#FF4D0D',
+    ];
+    return (jsx(Fragment, { children: jsxs("div", { className: style.container, style: { ...props.style }, children: [jsx("div", { className: style.titulo, style: { display: 'flex', justifyContent: 'flex-start', alignItems: 'center', fontSize: 16, fontWeight: 600 }, children: props.titulo }), jsxs("div", { className: style.content, style: { display: 'flex', width: '100%', justifyContent: 'flex-start', alignItems: 'flex-start' }, children: [jsxs("div", { className: style.star, style: { display: 'inline-flex', width: 35, height: 35, position: 'relative', justifyContent: 'center', alignItems: 'center' }, children: [jsx(StarIcon, { color: MapColorStar[props.tipoVisualizacao - 1] }), jsx("span", { style: { position: 'absolute', fontSize: 10, color: MapColorNumberStar[props.tipoVisualizacao - 1], fontWeight: 'bold', top: 12, textAlign: 'center' }, children: props.nota })] }), jsxs("div", { className: style.avaliacao, style: { justifyContent: props.descricaoAvaliacao ? 'flex-start' : 'center' }, children: [jsx("span", { style: { fontSize: 14, fontWeight: 600 }, children: props.descricaoAvaliacao }), jsx("span", { style: { fontSize: 12, fontWeight: 400 }, children: `${props.qtdeAvaliacao} ${props.qtdeAvaliacao > 1 ? props.nomeAvaliacao : props.nomeAvaliacao}` })] })] })] }) }));
+}
+
+export { Rating as default };

package/dist/esm/src/components/cardLT/Rating/starIcon.js

@@ -0,0 +1,13 @@
+import { jsx, Fragment } from 'react/jsx-runtime';
+
+///-----------------------------------------
+/// Componente
+/**
+ *
+ * @componente
+ */
+function StarIcon(props) {
+    return (jsx(Fragment, { children: jsx("svg", { width: "30", height: "30", viewBox: "0 0 30 30", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M14.0989 0.872803C14.4623 0.117576 15.5377 0.117574 15.9011 0.872801L19.7145 8.7983C19.8581 9.09663 20.14 9.30458 20.4674 9.35367L29.0382 10.6388C29.8501 10.7606 30.1775 11.7548 29.5967 12.3352L23.3644 18.5625C23.1358 18.791 23.0316 19.1159 23.085 19.4348L24.5511 28.2045C24.6883 29.025 23.8221 29.6445 23.09 29.2495L15.4748 25.1411C15.1785 24.9812 14.8215 24.9812 14.5252 25.1411L6.91 29.2495C6.17789 29.6445 5.31171 29.025 5.44888 28.2045L6.91505 19.4348C6.96835 19.1159 6.86424 18.791 6.63556 18.5625L0.403279 12.3352C-0.17751 11.7548 0.149858 10.7606 0.961814 10.6388L9.53263 9.35367C9.86003 9.30458 10.1419 9.09663 10.2855 8.79831L14.0989 0.872803Z", fill: props.color }) }) }));
+}
+
+export { StarIcon as default };

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

@@ -0,0 +1,7 @@
+import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = "@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=VT323&display=swap');\n\n.RatingCurtidas-module_container__Ns11t {\n  width: 150px;\n  padding: 8px;\n  height: 80px;\n  display: flex;\n  justify-content: 'flex-start';\n  align-items: 'center';\n  position: relative;\n  margin-left: 16px;\n  flex-direction: row;\n  flex-wrap: wrap;\n  font-family: 'Work Sans';\n  \n}\n";
+var style = {"container":"RatingCurtidas-module_container__Ns11t"};
+styleInject(css_248z);
+
+export { style as default };

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

@@ -0,0 +1,15 @@
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import style from './RatingCurtidas.module.css.js';
+import RocketButton from '../RocketButton/index.js';
+
+///-----------------------------------------
+/// Componente
+/**
+ *
+ * @componente
+ */
+function RatingCurtidas(props) {
+    return (jsx(Fragment, { children: jsxs("div", { className: style.container, style: { ...props.style }, children: [jsx("div", { style: { display: 'flex', justifyContent: 'flex-start', alignItems: 'center', fontSize: 16, fontWeight: 600 }, children: props.titulo }), jsxs("div", { style: { display: 'flex', width: '100%', justifyContent: 'flex-start', alignItems: 'flex-start' }, children: [jsx("div", { style: { display: 'inline-flex', width: 40, height: 40, justifyContent: 'center', alignItems: 'center', position: 'relative' }, children: jsx(RocketButton, { tipoBotao: props.tipoBotao }) }), jsx("div", { style: { display: 'inline-flex', width: 90, marginLeft: 4 }, children: jsxs("div", { style: { display: 'flex', flexDirection: 'column', flexWrap: 'wrap', width: 100 }, children: [jsx("span", { style: { fontSize: 14, fontWeight: 600 }, children: props.qtdeCurtidas ? props.qtdeCurtidas : 0 }), jsx("span", { style: { fontSize: 12, fontWeight: 400 }, children: props.descricaoCurtida })] }) })] })] }) }));
+}
+
+export { RatingCurtidas as default };

package/dist/esm/src/components/cardLT/RocketButton/RocketButtonIcon.js

@@ -0,0 +1,13 @@
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+
+///-----------------------------------------
+/// Componente
+/**
+ *
+ * @componente
+ */
+function RocketButtonIcon(props) {
+    return (jsx(Fragment, { children: jsx("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', borderRadius: 25, background: props.colorSecundaria ? props.colorSecundaria : '#FF4D0D', width: 32, height: 32, margin: 0 }, children: jsxs("svg", { width: "28", height: "28", viewBox: "0 0 28 28", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("path", { d: "M7.15625 16.9915C6.89922 17.3907 6.69141 17.82 6.54102 18.2657H8.85977V15.2771C8.18164 15.72 7.60195 16.3024 7.15625 16.9915ZM19.141 15.2771V18.2657H21.4598C21.3094 17.82 21.1016 17.3907 20.8445 16.9915C20.4037 16.3065 19.8232 15.7222 19.141 15.2771ZM17.391 8.71729L14.0004 4.69775L10.6098 8.71729V18.2657H17.391V8.71729ZM14.0004 12.2501C13.6569 12.2431 13.3299 12.1017 13.0895 11.8563C12.8491 11.611 12.7144 11.2811 12.7144 10.9376C12.7144 10.5941 12.8491 10.2642 13.0895 10.0188C13.3299 9.77347 13.6569 9.63211 14.0004 9.6251C14.3438 9.63211 14.6709 9.77347 14.9113 10.0188C15.1517 10.2642 15.2864 10.5941 15.2864 10.9376C15.2864 11.2811 15.1517 11.611 14.9113 11.8563C14.6709 12.1017 14.3438 12.2431 14.0004 12.2501Z", fill: props.colorPrimaria ? props.colorPrimaria : '#FFF', fillOpacity: "0.35" }), jsx("path", { d: "M23.625 20.125C23.625 17.0734 21.8367 14.4375 19.25 13.2098V8.67617C19.25 8.26328 19.1051 7.86406 18.8371 7.54961L14.6699 2.60859C14.4949 2.40078 14.2461 2.29688 14 2.29688C13.7539 2.29688 13.5051 2.40078 13.3301 2.60859L9.16289 7.54961C8.89674 7.86471 8.7505 8.26372 8.75 8.67617V13.2098C6.16328 14.4375 4.375 17.0734 4.375 20.125H8.6543C8.59141 20.3219 8.55859 20.5352 8.55859 20.7758C8.55859 21.3801 8.76641 21.9707 9.14375 22.4383C9.45175 22.8207 9.85968 23.1103 10.3223 23.275C10.9539 24.7516 12.3895 25.7031 14 25.7031C14.7957 25.7031 15.5668 25.468 16.2258 25.025C16.8711 24.593 17.3715 23.9887 17.675 23.275C18.1374 23.1113 18.5454 22.8226 18.8535 22.441C19.2314 21.9692 19.4377 21.383 19.4387 20.7785C19.4387 20.5488 19.4086 20.3301 19.3539 20.1277L23.625 20.125ZM8.85938 18.2656H6.54062C6.69102 17.8199 6.89883 17.3906 7.15586 16.9914C7.60156 16.3023 8.18125 15.7199 8.85938 15.277V18.2656ZM10.6094 13.2098V8.71719L14 4.69766L17.3906 8.71719V18.2656H10.6094V13.2098ZM17.1746 21.443C17.0324 21.525 16.8684 21.5578 16.707 21.5359L16.1738 21.4703L16.0973 22.0008C15.9496 23.0371 15.0473 23.8191 14 23.8191C12.9527 23.8191 12.0504 23.0371 11.9027 22.0008L11.8262 21.4676L11.293 21.5359C11.1309 21.5553 10.9669 21.5217 10.8254 21.4402C10.5875 21.3035 10.4398 21.0492 10.4398 20.773C10.4398 20.4832 10.6012 20.2426 10.8391 20.1223H17.1637C17.4043 20.2453 17.5629 20.4859 17.5629 20.773C17.5602 21.052 17.4125 21.309 17.1746 21.443ZM19.1406 18.2656V15.277C19.8228 15.7221 20.4033 16.3064 20.8441 16.9914C21.1012 17.3906 21.309 17.8199 21.4594 18.2656H19.1406V18.2656Z", fill: props.colorPrimaria ? props.colorPrimaria : '#FFF' }), jsx("path", { d: "M12.6875 10.9375C12.6875 11.2856 12.8258 11.6194 13.0719 11.8656C13.3181 12.1117 13.6519 12.25 14 12.25C14.3481 12.25 14.6819 12.1117 14.9281 11.8656C15.1742 11.6194 15.3125 11.2856 15.3125 10.9375C15.3125 10.5894 15.1742 10.2556 14.9281 10.0094C14.6819 9.76328 14.3481 9.625 14 9.625C13.6519 9.625 13.3181 9.76328 13.0719 10.0094C12.8258 10.2556 12.6875 10.5894 12.6875 10.9375Z", fill: props.colorPrimaria ? props.colorPrimaria : '#FFF' })] }) }) }));
+}
+
+export { RocketButtonIcon as default };

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

@@ -0,0 +1,26 @@
+import { jsx, Fragment } from 'react/jsx-runtime';
+import RocketButtonIcon from './RocketButtonIcon.js';
+
+///-----------------------------------------
+/// Componente
+/**
+ *
+ * @componente
+ */
+function RocketButton(props) {
+    const MapColorPrimaria = [
+        '#FF4D0D',
+        '#FFFFFF',
+        '#FFFFFF',
+        '#222222'
+    ];
+    const MapColorSecundaria = [
+        '#FFFFFF',
+        '#FF4D0D',
+        '#CCCCCC',
+        '#FFFFFF'
+    ];
+    return (jsx(Fragment, { children: jsx("div", { children: jsx(RocketButtonIcon, { colorPrimaria: MapColorPrimaria[props.tipoBotao - 1], colorSecundaria: MapColorSecundaria[props.tipoBotao - 1] }) }) }));
+}
+
+export { RocketButton as default };

package/dist/esm/src/components/cardLT/StepsMission/Planet.module.css.js

@@ -0,0 +1,7 @@
+import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = "@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=VT323&display=swap');\n\n.Planet-module_container__YS3oo {\n  width: 100px;\n  height: 100px;\n  display: flex;\n  justify-content: 'center';\n  align-items: 'center';\n  position: relative;\n  margin-left: 16px;\n\n  text-align: center;\n  font-size: 26px;\n  font-family: 'VT323', monospace;\n  color: white;\n  -webkit-text-stroke: 0.5px black;\n  text-shadow:2px 0 0 black,0 2px 0 black,-2px 0 0 black,0 -2px 0 black;\n}\n\n.Planet-module_label__bZgzb {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: absolute;\n  padding: 2px;\n  border: 2px dashed white;\n  bottom: 0;\n  left: 8px;\n  right: 8px;\n  width: calc(100% -16px);\n}\n@media (max-width: 600px) {\n  .Planet-module_label__bZgzb {\n    font-size: 22px;\n    text-shadow: none;\n    -webkit-text-stroke: 0%;\n    color: black;\n  }\n}\n\n@media (max-width: 540px) {\n  .Planet-module_label__bZgzb {\n    font-size: 18px;\n    text-shadow: none;\n    -webkit-text-stroke: 0%;\n    color: black;\n  }\n}\n\n@media (max-width: 470px) {\n  .Planet-module_label__bZgzb {\n    font-size: 16px;\n    text-shadow: none;\n    -webkit-text-stroke: 0%;\n    color: black;\n  }\n}\n\n@media (max-width: 400px) {\n  .Planet-module_label__bZgzb {\n    font-size: 14px;\n    text-shadow: none;\n    -webkit-text-stroke: 0%;\n    color: black;\n  }\n}\n\n.Planet-module_block__yUjqK {\n  position: absolute;\n  justify-content: center;\n  align-items: center;\n  display: flex;\n  padding: 4px;\n  \n  bottom: 16px;\n  left: 0;\n  right: 0;\n  top: 0;\n  /* width: calc(100% -16px); */\n  \n}\n\n.Planet-module_block__yUjqK img {\n  width: 50%;\n  height: 50%;\n  object-fit: contain;\n  margin-top: 0;\n}\n\n.Planet-module_imgAtive__dgis2 {\n  filter: grayscale(0);\n  opacity: 1;\n  height: 100% !important;\n  width: 100% !important;\n  object-fit: contain;\n  margin-left: 2px;\n}\n\n.Planet-module_imgAtive__dgis2:hover {\n  cursor: pointer\n}\n\n.Planet-module_imgInative__RXloV {\n  filter: grayscale(1);\n  opacity: 1;\n  height: 100% !important;\n  width: 100% !important;\n  object-fit: contain;\n  margin-left: 2px;\n}\n\n.Planet-module_imgInative__RXloV:hover {\n  cursor: pointer;\n}\n\n.Planet-module_imgBlocked__txZ4a {\n  filter: grayscale(1);\n  opacity: 0.5;\n  height: 100% !important;\n  width: 100% !important;\n  object-fit: contain;\n  margin-left: 2px;;\n}\n\n.Planet-module_imgBlockedL__xcI-B:hover {\n  cursor: not-allowed;\n}\n\n.Planet-module_missaoTitle__RbGDH{\n  font-style: normal;\n  font-weight: 600;\n  font-size: 16px;\n  display: flex;\n  align-items: center;\n  \n  color: #0645AD;\n}";
+var style = {"container":"Planet-module_container__YS3oo","label":"Planet-module_label__bZgzb","block":"Planet-module_block__yUjqK","imgAtive":"Planet-module_imgAtive__dgis2","imgInative":"Planet-module_imgInative__RXloV","imgBlocked":"Planet-module_imgBlocked__txZ4a","imgBlockedL":"Planet-module_imgBlockedL__xcI-B","missaoTitle":"Planet-module_missaoTitle__RbGDH"};
+styleInject(css_248z);
+
+export { style as default };