frst-components 0.37.0 → 0.38.0

package/dist/esm/src/components/FI/bannerProblemFeed/bannerProblemFeedStyles.js

@@ -0,0 +1,156 @@
+import styled from 'styled-components';
+
+const achievementHeader = styled.div `
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    flex-direction: row;
+    
+    height: 96px;
+    padding: 20px 32px;
+    border-top-left-radius: 8px;
+    border-top-right-radius: 8px;
+    word-wrap: break-word;
+
+    ${({ theme }) => theme.fonts.textMessageComponentsBodyBold};
+    color: ${({ theme }) => theme.colors.shadeWhite};
+`;
+const bannerContainer = styled.div `
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    flex-direction: column;
+    border: 1px solid ${({ theme }) => theme.colors.borderPrimary}; 
+    background-color: ${({ theme }) => theme.colors.shadeWhite};
+    padding: 24px;
+    position: relative;
+`;
+const headerContent = styled.div `
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: row;
+`;
+const userInfo = styled.div `
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    flex-direction: column;
+
+    font-family: 'Work Sans';
+    color: ${({ theme }) => theme.colors.neutralsGrey1};
+    margin-left: 16px;
+`;
+const problemTitle = styled.div `
+    font-family: 'Work Sans';
+    color: ${({ theme }) => theme.colors.primary1};
+    font-size: 24px;
+    font-weight: 600;
+    text-align: center;
+    margin-top: 24px;
+    word-wrap: break-word;
+`;
+const tagContent = styled.div `
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: wrap;
+    margin-top: 24px;
+    gap: 8px;
+`;
+const lastUpdatedText = styled.div `
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    flex-direction: row;
+    ${({ theme }) => theme.fonts.textMessageComponentsBodySmall};
+    margin-top: 16px;
+`;
+const stepsContainer = styled.div `
+    display: flex;
+    justify-content: flex-start;
+    align-items: flex-start;
+    flex-direction: column;
+    width: 100%;
+    border: 1px solid ${({ theme }) => theme.colors.borderPrimary}; 
+    border-radius: 8px;
+    background-color: ${({ theme }) => theme.colors.shadeWhite};
+    padding: 24px;
+    margin-bottom: 24px;
+`;
+const stepsTitle = styled.span `
+    ${({ theme }) => theme.fonts.header2};
+    font-size: 24px !important;
+`;
+const stepsLabel = styled.span `
+    font-family: 'Work Sans';
+    font-size: 16px;
+    font-weight: 700;
+    color: ${({ theme }) => theme.colors.neutralsGrey1};
+    margin-top: 16px;
+    word-wrap: break-word;
+`;
+const stepsValueText = styled.span `
+    font-family: 'Work Sans';
+    font-size: 16px;
+    font-weight: 400;
+    color: ${({ theme }) => theme.colors.neutralsGrey1};
+    margin-top: 8px;
+    word-wrap: break-word;
+`;
+const topHeaderTag = 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 8px;
+
+`;
+styled.div `
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.2);
+    color: white;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 9999;
+    opacity: ${props => props?.show ? '1' : '0'};
+    transition: opacity 0.2s ease-in-out;
+    border-radius: 8px;
+    user-select: none;
+`;
+styled.img `
+    transform: rotate(180deg);
+    transform: scaleY(-1);
+    width: 30%;
+    background-color: rgba(255, 255, 255, 0.8);
+
+    border-radius: 50%;
+    user-select: none;
+    padding: 1%;
+
+    // border: 0.5vw solid #0645ad;
+`;
+const WorkInfo = styled.span `
+    font-weight: 400;
+    font-size: 16;
+    max-width: 21ch;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+`;
+
+export { WorkInfo, achievementHeader, bannerContainer, headerContent, lastUpdatedText, problemTitle, stepsContainer, stepsLabel, stepsTitle, stepsValueText, tagContent, topHeaderTag, userInfo };

package/dist/esm/src/components/FI/bannerProblemFeed/index.js

@@ -0,0 +1,161 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { FRSTTheme } from '../../../theme/index.js';
+import { ThemeProvider } from 'styled-components';
+import { achievementHeader, bannerContainer, topHeaderTag, headerContent, userInfo, WorkInfo, problemTitle, tagContent, lastUpdatedText, stepsContainer, stepsTitle, stepsLabel, stepsValueText } from './bannerProblemFeedStyles.js';
+import Avatar from '../../avatar/index.js';
+import Tag from '../../tag/index.js';
+import StepsProgress from '../../DS/steps-progress/index.js';
+import { useState, useEffect } from 'react';
+import Slider from '@mui/material/Slider';
+import { withStyles } from '@material-ui/styles';
+import Button from '../../buttons/index.js';
+import FeedInteraction from '../feedInteraction/index.js';
+import Tooltip from '../../DS/tooltip/index.js';
+
+function BannerProblemFeed(props) {
+    const [selectedStep, setSelectedStep] = useState(props.stepActive);
+    const learningIcon = 'https://i.gyazo.com/4e0807b581bf9780f07a27516a809a21.png';
+    const achievementIcon = 'https://i.gyazo.com/9b192733f4947946a3f47080ae12727f.png';
+    // const [stateLatestComment, setStateLatestComment] = useState(props.latestComment)
+    // useEffect(() => {
+    //     setStateLatestComment(props.latestComment)
+    // }, [props.latestComment]);
+    const [stateTotalComments, setStateTotalComments] = useState(props.qtdComments);
+    useEffect(() => {
+        setStateTotalComments(props.qtdComments);
+    }, [props.qtdComments]);
+    const [definedSteps, setDefinedSteps] = useState(getStepsChallenge(props.language, props.stepProblem, setSelectedStep, props.onSelectedStep) || []);
+    useEffect(() => {
+        setDefinedSteps(getStepsChallenge(props.language, props.stepProblem, setSelectedStep, props.onSelectedStep));
+    }, [props.language, props.stepProblem, props.onSelectedStep]);
+    useEffect(() => {
+        setSelectedStep(props.stepActive);
+    }, [props.stepActive]);
+    const CustomSlider = withStyles({
+        root: {
+            color: "#FF4D0D",
+            height: 3,
+            padding: "13px 0",
+        },
+        track: {
+            color: "#FF4D0D",
+        },
+        disabled: {
+            color: '#FF4D0D',
+        }
+    })(Slider);
+    const marks = [
+        {
+            value: 1,
+            label: '1'
+        },
+        {
+            value: 2,
+            label: '2'
+        },
+        {
+            value: 3,
+            label: '3'
+        },
+        {
+            value: 4,
+            label: '4'
+        },
+        {
+            value: 5,
+            label: '5'
+        }
+    ];
+    const RenderSteps = () => {
+        return (jsx(Fragment, { children: selectedStep === 1 ?
+                jsxs(stepsContainer, { children: [jsx(stepsTitle, { children: props.step1Title }), jsxs(stepsLabel, { children: [props.textIndicator, ":"] }), jsx(stepsValueText, { children: props.indicatorValue }), jsxs(stepsLabel, { children: [props.textIndicatorSituation, ":"] }), jsx(stepsValueText, { children: props.indicatorSituationValue }), jsxs(stepsLabel, { children: [props.textIndicatorObjective, ":"] }), jsx(stepsValueText, { children: props.indicatorObjectiveValue }), jsxs(stepsLabel, { children: [props.textResultsFuture, ":"] }), jsx(stepsValueText, { children: props.resultsFutureValue })] })
+                : selectedStep === 2 ?
+                    jsxs(stepsContainer, { children: [jsx(stepsTitle, { children: props.step2Title }), jsxs(stepsLabel, { style: { color: FRSTTheme['colors'].primary1 }, children: [props.textHypotheses, ":"] }), jsx(stepsValueText, { children: props.hypothesesValue }), jsxs(stepsLabel, { style: { color: FRSTTheme['colors'].primary1 }, children: [" ", props.language === 'en-US' ? 'Action 1' : 'Ação 1', " "] }), jsxs(stepsLabel, { children: [props.textResponsableAction, ":"] }), jsx(stepsValueText, { children: props.ResponsableActionValue }), jsxs(stepsLabel, { children: [props.textDate, ":"] }), jsx(stepsValueText, { children: props.dateValue }), jsxs(stepsLabel, { children: [props.textWhatToDo, ":"] }), jsx(stepsValueText, { children: props.whatToDoValue }), jsxs(stepsLabel, { children: [props.textSuccessAction, ":"] }), jsx(stepsValueText, { children: props.successActionValue })] })
+                    : selectedStep === 3 ?
+                        jsxs(stepsContainer, { children: [jsx(stepsTitle, { children: props.step3Title }), jsxs(stepsLabel, { style: { color: FRSTTheme['colors'].primary1 }, children: [props.textTestMade, ":"] }), jsx(stepsValueText, { children: props.testMadeValue }), jsxs(stepsLabel, { children: [props.textSuccessTest, ":"] }), jsx("div", { style: { width: '100%', marginBottom: 32, marginTop: 12 }, children: jsx(CustomSlider, { value: props.successTestValue, min: 1, max: 5, marks: marks, disabled: true }) })] })
+                        : selectedStep === 4 ?
+                            jsxs(stepsContainer, { children: [jsx(stepsTitle, { children: props.step4Title }), props.textMainAchievement ?
+                                        jsxs(Fragment, { children: [jsxs(stepsLabel, { style: { color: FRSTTheme['colors'].primary1 }, children: [props.textMainAchievement, ":"] }), jsx(stepsValueText, { children: props.mainAchievementValue })] })
+                                        : props.textMainLearning ?
+                                            jsxs(Fragment, { children: [jsxs(stepsLabel, { style: { color: FRSTTheme['colors'].primary1 }, children: [props.textMainLearning, ":"] }), jsx(stepsValueText, { children: props.mainLearningValue })] })
+                                            : null] })
+                            : selectedStep === 5 ?
+                                jsxs(stepsContainer, { children: [jsx(stepsTitle, { children: props.step5Title }), jsxs(stepsLabel, { style: { color: FRSTTheme['colors'].primary1 }, children: [props.textNextSteps, ":"] }), jsx(stepsValueText, { children: props.nextStepsValue })] })
+                                : null }));
+    };
+    return (jsxs(ThemeProvider, { theme: FRSTTheme, children: [props.mainAchievementValue || props.mainLearningValue ?
+                jsxs(achievementHeader, { style: { backgroundColor: props.isSuccessCase ? '#444' : '#4B2961' }, children: [jsx("img", { src: props.mainAchievementValue ? achievementIcon : learningIcon, width: '56', height: '56' }), jsx("span", { style: { marginLeft: 16, wordBreak: 'break-word', overflow: 'hidden', display: '-webkit-box', WebkitLineClamp: 3, WebkitBoxOrient: 'vertical' }, children: props.mainAchievementValue ? props.mainAchievementValue : props.mainLearningValue })] })
+                : null, jsxs(bannerContainer, { style: { borderTopLeftRadius: props.mainAchievementValue || props.mainLearningValue ? 0 : 8, borderTopRightRadius: props.mainAchievementValue || props.mainLearningValue ? 0 : 8 }, children: [props.topHeaderTagText &&
+                        jsx(topHeaderTag, { background: props.topHeaderTagBgColor, color: props.topHeaderTagColor, children: props.topHeaderTagText }), jsx(headerContent, { children: props.onClickUserInfo ?
+                            jsxs(Tooltip, { direction: "bottom", content: props.textVisitProfile ? props.textVisitProfile : 'Visitar perfil', trigger: 'hover', width: '101px', height: '32px', style: { top: '10px', textAlign: 'center' }, children: [jsx(Avatar, { isActiveClick: true, onClick: () => props.onClickUserInfo ? props.onClickUserInfo() : {}, size: "54px", src: props.isSuccessCase ? 'https://i.gyazo.com/e9608cb76d36242de07661bee9da60dd.png' : props.userAvatar }), jsxs(userInfo, { onClick: () => props.onClickUserInfo ? props.onClickUserInfo() : {}, style: { cursor: 'pointer' }, children: [jsx("span", { style: { fontWeight: 600, fontSize: 20 }, children: props.isSuccessCase ?
+                                                    (props.language === 'pt-BR' ? 'Case de sucesso'
+                                                        : props.language === 'en-US' ? 'Success case'
+                                                            : props.language === 'es' ? 'Caso de exito'
+                                                                : props.language === 'pt-PT' ? 'Case de sucesso'
+                                                                    : null)
+                                                    : props.userName }), jsx("span", { style: { fontWeight: 400, fontSize: 16 }, children: props.userPosition }), jsx(WorkInfo, { children: props.userCompany })] })] })
+                            :
+                                jsxs(Fragment, { children: [jsx(Avatar, { size: "54px", src: props.isSuccessCase ? 'https://i.gyazo.com/e9608cb76d36242de07661bee9da60dd.png' : props.userAvatar }), jsxs(userInfo, { children: [jsx("span", { style: { fontWeight: 600, fontSize: 20 }, children: props.isSuccessCase ?
+                                                        (props.language === 'pt-BR' ? 'Case de sucesso'
+                                                            : props.language === 'en-US' ? 'Success case'
+                                                                : props.language === 'es' ? 'Caso de exito'
+                                                                    : props.language === 'pt-PT' ? 'Case de sucesso'
+                                                                        : null)
+                                                        : props.userName }), jsx("span", { style: { fontWeight: 400, fontSize: 16 }, children: props.userPosition }), jsx(WorkInfo, { style: { fontWeight: 400, fontSize: 16 }, children: props.userCompany })] })] }) }), jsxs(problemTitle, { children: [" ", props.problemTitle, " "] }), jsx(tagContent, { children: props.problemTags?.map((item, index) => (item &&
+                            jsx(Tag, { style: { color: '#000 !important' }, title: item, color: "#E4E1FF", selected: false, inverted: false }, index))) }), jsxs(lastUpdatedText, { children: [jsxs("span", { style: { fontWeight: 700 }, children: [props.lastUpdated, ":"] }), jsxs("span", { children: ["\u00A0", props.lastUpdatedStep] })] }), jsx("div", { style: {
+                            width: '100%',
+                            paddingTop: 30,
+                            paddingBottom: 16,
+                            marginTop: 16,
+                            marginBottom: 4,
+                            borderTop: `1px solid ${FRSTTheme['colors'].borderPrimary}`,
+                            display: 'flex', justifyContent: 'center'
+                        }, children: jsx("div", { style: { width: '95%' }, children: jsx(StepsProgress, { definedSteps: definedSteps, stepSelected: selectedStep }) }) }), jsx(RenderSteps, {}), jsx(Button, { label: props.textButton, variant: 'expandedPrimary', handleClick: () => props.onClickButton() })] }), !props.hideInteraction &&
+                jsx(FeedInteraction, { isChallengeReview: true, id: props.id, isLiked: props.isLiked, qtdComments: stateTotalComments, qtdLikes: props.qtdLikes, textAvaluation: props.textAvaluation, textAvaluationTitle: props.textAvaluationTitle, isDisabledAvaluation: props.isDisabledAvaluation, textComments: props.textComments, textDeslike: props.textDeslike, textLikes: props.textLikes, 
+                    // latestComment={stateLatestComment}
+                    // textLatestComment={props.textLatestComment} 
+                    textImpacto: props.textImpacto, ratingImpacto: props.ratingImpacto, textRelevancia: props.textRelevancia, ratingRelevancia: props.ratingRelevancia, 
+                    // userCommentPlaceholder={props.userCommentPlaceholder}
+                    // onCommentChange={props.onCommentChange}
+                    handleLikeClick: props.handleLikeClick, handleImpactoChange: props.handleImpactoChange, handleRelevanciaChange: props.handleRelevanciaChange, 
+                    // textSaveCommentBtn={props.textSaveCommentBtn}
+                    // handleSaveCommentBtn={props.handleSaveCommentBtn}
+                    userAvatar: props.avatar, textTotalView: props.textTotalView, handleClickTextTotalViews: props.handleClickTextTotalViews, isCommentV2: props?.isCommentV2, childrenCommentV2: props?.childrenCommentV2 })] }));
+}
+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;
+}
+
+export { BannerProblemFeed as default };

package/dist/esm/src/components/FI/bannerSRG/bannerSRGStyle.js

@@ -0,0 +1,217 @@
+import styled from 'styled-components';
+
+const ContainerTotal = styled.div `
+    width: 100%;
+    min-height: 508px;
+    background-image: url("${({ bannerNormal, bannerLarge, isExtendedVersion }) => isExtendedVersion ? bannerLarge : bannerNormal}");
+    background-repeat: no-repeat;
+    background-position: top;
+    background-size: cover;
+
+    display: flex;
+    flex-direction: column;
+
+    @media (max-width: 870px) {
+        background-image: url("${({ bannerResponsive }) => bannerResponsive}");
+        height: 745px;
+    }
+`;
+const VersionExtended = styled.div `
+    height: ${({ isExtendedVersion, heightExtended }) => isExtendedVersion ? heightExtended ? heightExtended : '508px' : '0px'};
+    @media (max-width: 870px) {
+        display: none;
+    }
+`;
+const ContainerBanner = styled.div `
+    width: 100%;
+    height: 508px;
+
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    flex-wrap: wrap;
+
+    & > div:nth-child(5) {
+        display: none;
+    }
+    @media (max-width: 1500px) {
+        padding: 20px !important;
+    }
+
+    @media (max-width: 1200px) {
+        & > div:nth-child(1) {
+            display: none !important;
+        }
+    }
+
+    @media (max-width: 870px) {
+        height: 745px;
+
+        & > div:nth-child(2) {
+            min-width: 100%;
+        }
+        & > div:nth-child(3) {
+            min-width: 360px;
+            max-width: 360px;
+
+            & > div:nth-child(2) {
+                margin-bottom: 0px;
+            }
+            & > button {
+                display: none;
+            }
+        }
+        & > div:nth-child(4) {
+            min-width: 100%;
+            max-width: 100%;
+            display: flex;
+            justify-content: center;
+
+            & > div:nth-child(1) {
+                width: 270px;
+                margin-left: 0px;
+
+                & > div:nth-child(1) {
+
+                }
+            }
+        }
+        & > div:nth-child(5) {
+            min-width: 100%;
+            min-width: 360px;
+            display: flex;
+            align-self: flex-end;
+            margin-bottom: 40px;
+            & > button {
+                width: 360px;
+                max-width: 100%;
+            }
+        }
+    }
+`;
+const WrapperContent = styled.div `
+    flex: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+`;
+const WrapperContentMain = styled.div `
+    flex: 1;
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    flex-direction: column;
+    & button {
+        width: fit-content;
+        white-space:  nowrap;
+    }
+`;
+const WrapperContentHelper = styled.div `
+    flex: 1;
+    display: flex;
+    justify-content: flex-start;
+    align-items: flex-end;
+    flex-direction: row;
+`;
+const TitleSRG = styled.div `
+    font-family: 'Work Sans';
+    font-style: normal;
+    font-weight: 700;
+    font-size: 24px;
+    line-height: 130%;
+    white-space:  nowrap;
+
+    display: flex;
+    align-items: center;
+    letter-spacing: 0.01em;
+
+    color: ${({ theme }) => theme.colors.shadeWhite};
+    margin-bottom: 24px;
+    
+`;
+const DescriptionSRG = styled.div `
+    font-family: 'PT Sans';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 18px;
+    line-height: 23px;
+    display: flex;
+    align-items: center;
+
+    color: ${({ theme }) => theme.colors.shadeWhite};
+    margin-bottom: 24px;
+`;
+const SpeechBubble = styled.div `
+    flex-direction: column;
+    display: flex;
+    justify-content: flex-end;
+    align-items: flex-end;
+
+    background: ${({ theme }) => theme.colors.messageAlert2};
+    border: 1.5px solid ${({ theme }) => theme.colors.borderSecondary2};
+    border-radius: 8px;
+    padding: 16px;
+    
+    width: 160px;
+    margin-right: 22px;
+    margin-left: 50px;
+
+    &:before {
+        content: "";
+        position: absolute;
+        border-top: 10px solid transparent;
+        border-bottom: 10px solid transparent;
+        border-left: 20px solid ${({ theme }) => theme.colors.borderSecondary2}; 
+        border-right: 10px solid transparent;
+        margin-right: -46px;
+        margin-bottom: 0px;
+    }
+
+    &:after {
+        content: "";
+        position: absolute;
+        border-top: 10px solid transparent;
+        border-bottom: 10px solid transparent;
+        border-left: 20px solid ${({ theme }) => theme.colors.messageAlert2}; 
+        border-right: 10px solid transparent;
+        margin-right: -44px;
+        margin-bottom: 0px;
+    }
+
+    & a {
+        align-self: flex-start;
+    }
+`;
+const HelperText = styled.div `
+    font-family: 'PT Sans';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 21px;
+
+    color: ${({ theme }) => theme.colors.neutralsGrey1};
+    margin-bottom: 8px;
+`;
+const FrstSocials = styled.div `
+    display:flex;
+    justify-content: center;
+    align-center: center;
+    flex-direction: row;
+    margin-top: 24px;
+    margin-bottom: 32px;
+    position: absolute;
+    right: 120px;
+    top: 60px;
+    @media (max-width: 1500px) {
+        right: 40px;
+    }
+`;
+const ItemFrstSocials = styled.button `
+    border: none;
+    background: none;
+    cursor: pointer;
+    margin-left: 11px;
+`;
+
+export { ContainerBanner, ContainerTotal, DescriptionSRG, FrstSocials, HelperText, ItemFrstSocials, SpeechBubble, TitleSRG, VersionExtended, WrapperContent, WrapperContentHelper, WrapperContentMain };

package/dist/esm/src/components/FI/bannerSRG/index.js

@@ -0,0 +1,15 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import '../../../shared/global.css.js';
+import { ThemeProvider } from 'styled-components';
+import { FRSTTheme } from '../../../theme/index.js';
+import Button from '../../buttons/index.js';
+import LateralMenu from '../../lateral-menu/index.js';
+import { SiteIcon, LinkedinIcon, InstagramIcon, YoutubeIcon, SpotifyIcon, PodCastIcon, AddIcon } from '../../../shared/icons.js';
+import { ContainerTotal, ContainerBanner, WrapperContent, FrstSocials, ItemFrstSocials, WrapperContentMain, TitleSRG, DescriptionSRG, WrapperContentHelper, SpeechBubble, HelperText, VersionExtended } from './bannerSRGStyle.js';
+
+function BannerSRG(props) {
+    return (jsx(ThemeProvider, { theme: FRSTTheme, children: jsxs(ContainerTotal, { isExtendedVersion: props?.isExtendedVersion, bannerLarge: props?.bannerSRG?.large, bannerNormal: props?.bannerSRG?.normal, bannerResponsive: props?.bannerSRG?.responsive, style: { ...props.style }, children: [jsxs(ContainerBanner, { children: [jsxs(WrapperContent, { style: { maxHeight: '240px', height: '240px', display: 'flex', alignItems: 'flex-start', marginTop: '-100px' }, children: [props && props.social &&
+                                    jsxs(FrstSocials, { children: [props.social.onClickSite && jsxs(ItemFrstSocials, { onClick: () => props.social.onClickSite(), children: [" ", jsx(SiteIcon, {}), " "] }), props.social.onClickLinkedin && jsxs(ItemFrstSocials, { onClick: () => props.social.onClickLinkedin(), children: [" ", jsx(LinkedinIcon, {}), " "] }), props.social.onClickInstagram && jsxs(ItemFrstSocials, { onClick: () => props.social.onClickInstagram(), children: [" ", jsx(InstagramIcon, {}), " "] }), props.social.onClickYoutube && jsxs(ItemFrstSocials, { onClick: () => props.social.onClickYoutube(), children: [" ", jsx(YoutubeIcon, {}), " "] }), props.social.onClickSpotify && jsxs(ItemFrstSocials, { onClick: () => props.social.onClickSpotify(), children: [" ", jsx(SpotifyIcon, {}), " "] }), props.social.onClickPodCast && jsxs(ItemFrstSocials, { onClick: () => props.social.onClickPodCast(), children: [" ", jsx(PodCastIcon, {}), " "] })] }), jsx(LateralMenu, { variant: 'primary', channel: '', name: props.lateralMenu.name, hiddenButtonHeader: true, avatar: props.lateralMenu.avatar, button: props.lateralMenu.button, listOptions: props.lateralMenu.listOptions })] }), jsx(WrapperContent, { children: jsx("img", { src: props.logoSRG }) }), jsxs(WrapperContentMain, { children: [jsx(TitleSRG, { children: props?.labels?.textTitle ? props?.labels?.textTitle : 'Space Race Game' }), jsx(DescriptionSRG, { children: props?.labels?.textDescription }), jsx(Button, { variant: 'primary', label: props?.newProject?.label ? props.newProject?.label : 'Criar novo projeto', handleClick: () => props.newProject.action(), startIcon: jsx(AddIcon, { fill: '#FFFFFF' }) })] }), jsxs(WrapperContentHelper, { children: [jsxs(SpeechBubble, { children: [jsx(HelperText, { children: props.labels.textHelperDescription }), jsx(Button, { variant: 'link', label: props?.acessHere?.label ? props.acessHere.label : 'Acesse aqui', handleClick: () => props.acessHere.action(), style: { color: '#21bffc' } })] }), jsx("img", { src: props.avatarSRG })] }), jsx(WrapperContent, { children: jsx(Button, { variant: 'primary', label: props?.newProject?.label ? props.newProject?.label : 'Criar novo projeto', handleClick: () => props.newProject.action(), startIcon: jsx(AddIcon, { fill: '#FFFFFF' }) }) })] }), jsx(VersionExtended, { isExtendedVersion: props.isExtendedVersion, heightExtended: props.heightExtended })] }) }));
+}
+
+export { BannerSRG as default };