frst-components 0.37.0 → 0.38.0

package/dist/esm/src/components/calendar/calendarStyle.js

@@ -0,0 +1,185 @@
+import styled from 'styled-components';
+import Card from '@mui/material/Card';
+import Stepper from '@mui/material/Stepper';
+import FormControl from '@mui/material/FormControl';
+import Select from '@mui/material/Select';
+import CheckIcon from '@mui/icons-material/Check';
+import LoginIcon from '@mui/icons-material/Login';
+import Box from '@mui/material/Box';
+import Step from '@mui/material/Step';
+import CardActions from '@mui/material/CardActions';
+import StepConnector, { stepConnectorClasses } from '@mui/material/StepConnector';
+import { styled as styled$1 } from '@mui/material/styles';
+
+const Container = styled(Card) `
+  height: 100%;
+  box-shadow: none !important;
+  border: 1px solid #c4c4c4 !important;
+  box-sizing: border-box !important;
+  border-radius: 8px !important;
+  padding: 24px !important;
+`;
+const Title = styled.span `
+  font-size: 20px !important;
+  color: #ff4d0d !important;
+`;
+const TextDescription = styled.span `
+  font-size: 14px !important;
+  color: #222222 !important;
+`;
+const ContainerDescription = styled.div `
+  padding-top: 26px !important;
+`;
+styled.div `
+  padding-top: 35px !important;
+`;
+const CheckIconCustom = styled(CheckIcon) `
+  color: white !important;
+  font-size: 19px !important;
+`;
+const LoginIconCustom = styled(LoginIcon) `
+  color: white !important;
+  font-size: 20px !important;
+`;
+const FormControlSelect = styled(FormControl) `
+  .MuiInputLabel-formControl {
+    color: rgba(0, 0, 0, 0.6) !important;
+    margin-top: 5px !important;
+  }
+`;
+const DropDownList = styled(Select) `
+  max-width: 350px !important;
+  height: 40px !important;
+  & > div {
+    border: 1px solid #e8e8e8 !important;
+  }
+  .MuiSelect-select {
+    border: none !important;
+  }
+  .MuiSelect-icon {
+    color: #000 !important; // for icon drop down icon color
+  }
+  &.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
+    border-color: #ff4d0d !important;
+    border-width: 1px !important;
+  }
+`;
+const LabelDateStepper = styled.label `
+  font-size: 14px !important;
+  line-height: 14px !important;
+`;
+const LabelTitleStepper = styled.label `
+  overflow: hidden; !important;
+  display: block !important;
+  max-height: 1.33rem !important;
+;
+`;
+const ContainerStepper = styled.div `
+  margin-top: 10px !important;
+`;
+const CustomStepper = styled(Stepper) `
+  height: 100px !important;
+  overflow-x: auto !important;
+  overflow-y: hidden !important;
+  box-sizing: content-box !important;
+  scroll-behavior: smooth !important;
+  padding-bottom: 30px !important;
+`;
+const CustomStep = styled(Step) `
+  padding: 0px !important;
+  min-width: 150px !important;
+`;
+const BoxStepper = styled(Box) `
+  width: 100% !important;
+  padding-top: 20px !important;
+  text-align: center !important;
+  overflow: hidden !important;
+  height: 120px !important;
+`;
+const LabelTimeMentoring = styled.label `
+  font-size: 16px !important;
+  color: #ff4d0d !important;
+  font-weight: bolder !important;
+`;
+const BoxLabelTimeMentoring = styled.div `
+  padding-top: 30px !important;
+  padding-bottom: 16px !important;
+`;
+const LabelSchedule = styled.span `
+  font-size: 16px !important;
+`;
+const LabelScheduleClick = styled.span `
+  color: #0645ad !important;
+  font-size: 16px !important;
+  font-weight: bolder !important;
+  cursor: pointer !important;
+`;
+const ActionContainer = styled(CardActions) `
+  padding: 0px !important;
+`;
+const ColorlibConnector = styled$1(StepConnector)(({ theme }) => ({
+    [`&.${stepConnectorClasses.alternativeLabel}`]: {
+        top: 40,
+        left: 'calc(-54% + 7px)',
+        right: 'calc(40% + 20px)',
+        [`&.MuiStepLabel-labelContainer`]: {
+            [`&.Mui-active`]: {
+                backgroundColor: 'red'
+            }
+        }
+    },
+    [`&.${stepConnectorClasses.active}`]: {
+        [`& .${stepConnectorClasses.line}`]: {
+            backgroundColor: '#ff4d0d'
+        }
+    },
+    [`&.${stepConnectorClasses.completed}`]: {
+        [`& .${stepConnectorClasses.line}`]: {
+            backgroundColor: '#000'
+        }
+    },
+    [`& .${stepConnectorClasses.line}`]: {
+        height: 1,
+        border: 0,
+        backgroundColor: '#ff4d0d',
+        borderRadius: 1
+    }
+}));
+const ColorlibStepIconRoot = styled$1('div')(({ ownerState }) => ({
+    backgroundColor: '#000',
+    zIndex: 1,
+    color: '#fff',
+    display: 'flex',
+    borderRadius: '50%',
+    justifyContent: 'center',
+    alignItems: 'center',
+    boxShadow: 'none !important',
+    ...(ownerState.active && {
+        backgroundColor: '#ff4d0d',
+        width: 32,
+        height: 32,
+        boxShadow: 'none !important'
+    }),
+    ...(ownerState.completed && {
+        backgroundColor: '#000',
+        width: 24,
+        height: 24,
+        boxShadow: 'none !important'
+    }),
+    ...(!ownerState.active &&
+        !ownerState.completed && {
+        backgroundColor: '#ff4d0d',
+        width: 24,
+        height: 24,
+        boxShadow: 'none !important'
+    }),
+    ...(ownerState.active &&
+        ownerState.completed && {
+        backgroundColor: '#000',
+        width: 24,
+        height: 24,
+        boxShadow: 'none !important'
+    })
+}));
+
+export { ActionContainer, BoxLabelTimeMentoring, BoxStepper, CheckIconCustom, ColorlibConnector, ColorlibStepIconRoot, Container, ContainerDescription, ContainerStepper, CustomStep, CustomStepper, DropDownList, FormControlSelect, LabelDateStepper, LabelSchedule, LabelScheduleClick, LabelTimeMentoring, LabelTitleStepper, LoginIconCustom, TextDescription, Title };

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

@@ -0,0 +1,60 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import '../../shared/global.css.js';
+import { useState, useEffect } from 'react';
+import { FRSTButton } from '../../shared/globalComponentsStyle.js';
+import { Container, Title, ContainerDescription, TextDescription, FormControlSelect, DropDownList, BoxLabelTimeMentoring, LabelTimeMentoring, ActionContainer, LabelSchedule, LabelScheduleClick, BoxStepper, CustomStepper, ColorlibConnector, CustomStep, LabelDateStepper, ContainerStepper, LabelTitleStepper, ColorlibStepIconRoot, CheckIconCustom, LoginIconCustom } from './calendarStyle.js';
+import { WarningIcon } from '../../shared/icons.js';
+import { useTranslation } from 'react-i18next';
+import { CardContent, MenuItem, Tooltip, StepLabel } from '@mui/material';
+
+function getStepIcon(props) {
+    const { active, completed } = props;
+    return (jsx(ColorlibStepIconRoot, { ownerState: { completed, active }, children: completed ? jsx(CheckIconCustom, {}) : active ? jsx(LoginIconCustom, {}) : jsx("div", {}) }));
+}
+function getMissedStepIcon() {
+    return (jsx(ColorlibStepIconRoot, { ownerState: { completed: true, active: true }, children: jsx("div", {}) }));
+}
+function StepsComponent(props) {
+    const { t } = useTranslation();
+    let { events } = props;
+    return (jsx(BoxStepper, { children: jsx(CustomStepper, { alternativeLabel: true, connector: jsx(ColorlibConnector, {}), children: events && events.length > 0 && events?.map((event) => (jsxs(CustomStep, { completed: event.completed, active: event.today, children: [jsxs(LabelDateStepper, { children: [event.day, " ", t(`calendar.monthsInitials.${event.month}`)] }), jsx(ContainerStepper, { children: jsx(Tooltip, { title: event.title, children: jsx(StepLabel, { StepIconComponent: event.completed && !event.present ? getMissedStepIcon : getStepIcon, children: jsx(LabelTitleStepper, { children: event.title }) }) }) })] }, event.id))) }) }));
+}
+/**
+ * @param {CalendarProps} props
+ */
+function CalendarCard(props) {
+    const { t } = useTranslation();
+    const [module, setModule] = useState(0);
+    const [moduleEvents, setModuleEvents] = useState([]);
+    const [moduleSelector, setModuleSelector] = useState(false);
+    const handleChange = (event) => {
+        let val = event.target?.value;
+        setModule(val);
+        if (props.trails[val].events)
+            setModuleEvents(props.trails[val].events);
+    };
+    useEffect(() => {
+        if (props.trails[0]) {
+            if (props.trails[0].events)
+                setModuleEvents(props.trails[0].events);
+            if (props.trails.length > 1)
+                setModuleSelector(true);
+        }
+    }, [props.trails]);
+    return (jsx("div", { style: { height: '100%' }, children: props.loading ?
+            jsx(Container, { className: 'shimmer' })
+            :
+                jsx(Container, { children: jsxs(CardContent, { style: { padding: '0px' }, children: [jsx(Title, { children: t('calendar.title') }), moduleSelector &&
+                                jsxs(ContainerDescription, { children: [jsx(TextDescription, { children: t('calendar.card.description') }), jsx(FormControlSelect, { fullWidth: true, children: jsx(DropDownList, { id: "module-id", value: module, onChange: handleChange, children: props.trails?.map((item, index) => {
+                                                    return jsxs(MenuItem, { value: index, children: [item.name, " - ", item.moduleID] }, index);
+                                                }) }) })] }), moduleEvents?.length === 0 &&
+                                jsxs("div", { style: { display: 'flex', justifyContent: 'center', alignItems: 'center', marginTop: '140px', paddingBottom: '32px' }, children: [jsx(WarningIcon, {}), jsx("span", { style: { paddingLeft: '8px' }, children: t('calendar.notAvailable') })] }), moduleEvents && jsx(StepsComponent, { events: moduleEvents, short: props.short }), moduleEvents && moduleEvents.length > 0 &&
+                                jsx(BoxLabelTimeMentoring, { children: props.trails[module]?.nextEvent ?
+                                        jsxs(LabelTimeMentoring, { children: [t('calendar.card.mentoringSchedule'), " ", t(`calendar.weekdays.${props.trails[module].nextEvent.weekday}`), " @ ", props.trails[module]?.nextEvent.hour] })
+                                        :
+                                            jsx(LabelTimeMentoring, { children: t(`calendar.noMoreEvents`) }) }), jsxs(ActionContainer, { children: [props.short &&
+                                        jsxs(LabelSchedule, { children: [jsx(LabelScheduleClick, { onClick: props.showFullPageAction, children: t('globals.clickHere') }), ' ', t('calendar.card.fullSchedule')] }), props.trails[module]?.joinEventAction &&
+                                        jsx(FRSTButton, { style: { marginLeft: 'auto' }, variant: "contained", onClick: props.trails[module]?.joinEventAction, children: t('calendar.card.joinEvent') })] })] }) }) }));
+}
+
+export { CalendarCard as default };

package/dist/esm/src/components/card-trail/cardTrailStyle.js

@@ -0,0 +1,29 @@
+import styled from 'styled-components';
+import { Box, CardContent } from '@mui/material/';
+
+const HeaderImage = styled(Box) `
+    width: 320px;
+    height: 200px;
+    cursor: ${({ $notstarted }) => $notstarted ? 'no-drop' : 'pointer'};
+    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5)), url('${({ $image }) => $image}');
+    filter: grayscale(${({ $notstarted }) => $notstarted ? '1' : '0'});
+    background-size: contain;
+`;
+const MyBox = styled(Box) `
+    padding: 0px;
+    height: 245px;
+    padding-top: 12px;
+`;
+const MyCardContent = styled(CardContent) `
+    cursor: ${({ $notstarted }) => $notstarted ? 'no-drop' : 'pointer'};
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: ${({ $hasmentor }) => $hasmentor ? 'space-between' : 'flex-start'};
+`;
+const WrapperDate = styled.div `
+    display: ${({ $notstarted }) => $notstarted ? 'flex' : 'none'};
+    margin-bottom: 7px;
+`;
+
+export { HeaderImage, MyBox, MyCardContent, WrapperDate };

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

@@ -0,0 +1,50 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { CardContainer, TitleCard, TextDescription, TitleMentoring, GridFooter, GridNameMentoring, NameMentoring, ProgressBox, ProgressBar, ProgressLabel } from './moduleStyle.js';
+import { Grid } from '@mui/material/';
+import Avatar from '../avatar/index.js';
+import { ThemeProvider } from 'styled-components';
+import { FRSTTheme } from '../../theme/index.js';
+import { LinkedinIconMentor } from '../../shared/icons.js';
+import { HeaderImage, MyBox, MyCardContent, WrapperDate } from './cardTrailStyle.js';
+
+function CardTrail(props) {
+    const redirectToD2L = async () => {
+        if (props?.notStarted)
+            return;
+        let URL = await props.action();
+        return window.open(URL);
+    };
+    const getAlign = () => {
+        if (props.variant == 'primary' && props.notStarted) {
+            if (props.start || props.mentor?.name)
+                return +true;
+            if (!props.start || !props.mentor?.name)
+                return +false;
+        }
+        if (props.variant == 'primary' && !props.notStarted) {
+            if (props.start && !props.mentor?.name)
+                return +false;
+            if (!props.start && props.mentor?.name)
+                return +false;
+            if (!props.start && !props.mentor?.name)
+                return +false;
+        }
+        return +true;
+    };
+    return (jsx(ThemeProvider, { theme: FRSTTheme, children: jsxs(CardContainer, { children: [!props?.notStarted && props.variant == 'primary' &&
+                    jsx(PercentageProgress, { progress: props.progress }), jsx(HeaderImage, { onClick: redirectToD2L, "$image": props.bannerImage, "$notstarted": +props?.notStarted }), jsx(MyBox, { children: jsxs(MyCardContent, { "$notstarted": +props?.notStarted, "$hasmentor": getAlign(), children: [jsx(TitleCard, { onClick: redirectToD2L, children: props.name }), jsx(TextDescription, { onClick: redirectToD2L, children: props.description }), props.variant == 'primary' ?
+                                jsxs(Fragment, { children: [props.start &&
+                                            jsxs(WrapperDate, { onClick: redirectToD2L, "$notstarted": +props?.notStarted, children: [jsxs("b", { children: [props.labels?.dateStart ? props.labels?.dateStart : 'Data de início', ":\u00A0"] }), props.start] }), props.mentor?.name &&
+                                            jsxs(Fragment, { children: [jsx(TitleMentoring, { onClick: redirectToD2L, children: props.labels?.mentor ? props.labels?.mentor : 'Mentor(a)' }), jsx(MentorComponent, { mentor: props.mentor, notstarted: +props?.notStarted })] })] })
+                                :
+                                    jsx(Fragment, { children: jsxs(WrapperDate, { onClick: redirectToD2L, "$notstarted": +true, style: { margin: '0px' }, children: [jsxs("b", { children: [props.labels?.dateStart ? props.labels?.dateStart : 'Data de início', ":\u00A0"] }), props.start] }) })] }) })] }) }));
+}
+function MentorComponent(props) {
+    return jsx(Fragment, { children: jsxs(GridFooter, { container: true, spacing: 2, onClick: () => { props.mentor.linkedin && window.open(`${props.mentor.linkedin}`, '_blank'); }, style: { margin: '0px', cursor: 'pointer' }, children: [jsx(Avatar, { size: "32px", alt: "Mentoring", src: props.mentor?.avatar ? props.mentor.avatar : "https://certificates-mentor.s3.amazonaws.com/frst-avatar-default.png", disabled: props?.notStarted }), jsx(GridNameMentoring, { item: true, children: jsx(NameMentoring, { children: props.mentor?.name }) }), props.mentor.linkedin && jsx(LinkedinIconMentor, {})] }) });
+}
+function PercentageProgress({ progress }) {
+    return jsx(Fragment, { children: progress && (jsx(ProgressBox, { children: jsx(Grid, { container: true, spacing: 0, alignItems: "center", children: progress > 0 &&
+                    jsxs(Fragment, { children: [jsx(Grid, { item: true, xs: 10, children: jsx(ProgressBar, { variant: "determinate", value: progress }) }), jsx(Grid, { item: true, xs: 2, children: jsxs(ProgressLabel, { children: [progress, "%"] }) })] }) }) })) });
+}
+
+export { CardTrail as default };

package/dist/esm/src/components/card-trail/moduleStyle.js

@@ -0,0 +1,92 @@
+import styled from 'styled-components';
+import { Box, LinearProgress, Grid, Typography, Card } from '@mui/material/';
+
+const ProgressBox = styled(Box) `
+  z-index: 1 !important;
+  float: right !important;
+  padding-left: 10% !important;
+  padding-right: 10% !important;
+  margin-top: 160px !important;
+  position: relative !important;
+`;
+const ProgressBar = styled(LinearProgress) `
+  width: 128px !important;
+  height: 13px !important;
+  border-radius: 100px !important;
+  background-color: rgba(245, 94, 14, 0.5) !important;
+  & .MuiLinearProgress-bar{
+    padding-left: 10px !important;
+    background-color: ${({ theme }) => theme.colors.primary1} !important;
+  }
+`;
+const ProgressLabel = styled.label `
+  display: inline-block !important;
+  width: 32px !important;
+  height: 16px !important;
+  font-size: 16px !important;
+  color: white !important;
+`;
+const GridNameMentoring = styled(Grid) `
+  padding: 0 !important;
+  max-width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+styled(Grid) `
+  padding: 0 !important;
+`;
+const GridFooter = styled(Grid) `
+  display: flex;
+  align-items: center;
+  height: 50px;
+  margin: 0;
+  gap: 5px;
+`;
+const NameMentoring = styled.span `
+  font-size: 14px !important;
+`;
+const TitleMentoring = styled.span `
+  display: block !important;
+  font-size: 14px !important;
+  font-weight: 500 !important;
+`;
+const TextDescription = styled(Typography) `
+  margin-top: 10px !important;
+  white-space: normal !important;
+  height: 101px !important;
+  overflow: hidden !important;
+  display: -webkit-box;
+  -webkit-line-clamp: 6; 
+  -webkit-box-orient: vertical;
+  text-overflow: ellipsis;
+  font-size: 15px !important;
+  line-height: 1.1 !important;
+`;
+const TitleCard = styled.div `
+  height: 32px !important;
+  font-size: 16px !important;
+  font-weight: bold !important;
+  white-space: normal !important;
+`;
+const CardContainer = styled(Card) `
+  max-width: 345px !important;
+  height: 445px !important;
+  width: 282px !important;
+  box-shadow: none !important;
+  border: 1px solid #c4c4c4;
+
+  background: #FBFBFB;
+  border: 1px solid #E8E8E8;
+  box-sizing: border-box !important;
+  border-radius: 4px !important;
+  display: inline-block !important;
+  margin-right: 24px !important;
+  margin-bottom: 24px !important;
+
+  &:hover {
+    border: 1px solid ${({ theme }) => theme.colors.secondary2} !important;
+  }
+`;
+
+export { CardContainer, GridFooter, GridNameMentoring, NameMentoring, ProgressBar, ProgressBox, ProgressLabel, TextDescription, TitleCard, TitleMentoring };

package/dist/esm/src/components/card-trail-carousel/index.js

@@ -0,0 +1,15 @@
+import { jsx } from 'react/jsx-runtime';
+import '../../shared/global.css.js';
+import { ThemeProvider } from 'styled-components';
+import { FRSTTheme } from '../../theme/index.js';
+import ScrollContainer from '../scroll-container/index.js';
+import CardTrail from '../card-trail/index.js';
+
+function CardTrailCarousel({ objectCards, marginsArrowButton, move, isVisibleButtons, sizeArrowButton, horizontalMarginInternScroll, positionArrowButton, marginTopArrrowButton, label }) {
+    function renderCard(item, index) {
+        return jsx(CardTrail, { variant: item.variant, name: item.name, progress: item.progress, start: item.start, description: item.description, mentor: item.mentor, action: item.action, notStarted: item.notStarted, bannerImage: item.bannerImage, labels: label ? label : { mentor: 'Mentor(a)', dateStart: "Data de Início" } }, index);
+    }
+    return (jsx(ThemeProvider, { theme: FRSTTheme, children: jsx(ScrollContainer, { stepMove: move ? move : 380, isVisibleControlsButtons: isVisibleButtons, sizeArrowButton: sizeArrowButton, marginsArrowButton: marginsArrowButton, horizontalMarginInternScroll: horizontalMarginInternScroll, positionArrowButton: positionArrowButton ? positionArrowButton : '', marginTopArrrowButton: marginTopArrrowButton ? marginTopArrrowButton : '20px', children: jsx("div", { children: objectCards.map(renderCard) }) }) }));
+}
+
+export { CardTrailCarousel as default };

package/dist/esm/src/components/cardLT/AvatarWithInfo/avatarWithInfo.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.avatarWithInfo-module_container__Y-yUf {\n  /* width: 100%; */\n  height: fit-content;\n  padding: 4px 16px 4px 4px;\n  display: inline-flex;\n  justify-content: space-between;\n  align-items: center;\n  \n  border: 1px solid #BDBDBD;\n  border-radius: 25px;\n  background-color: #FFF;\n  font-size: 16px;\n  \n  flex-direction: row;\n  flex-wrap: nowrap;\n  font-family: 'Work Sans';\n  flex-wrap: wrap;\n}";
+var style = {"container":"avatarWithInfo-module_container__Y-yUf"};
+styleInject(css_248z);
+
+export { style as default };

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

@@ -0,0 +1,16 @@
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import style from './avatarWithInfo.module.css.js';
+import Avatar from '../../avatar/index.js';
+import Vector from './vector.js';
+
+///-----------------------------------------
+/// Componente
+/**
+ *
+ * @componente Planet: Componente responsável por gerenciar os controles dos steps das missões
+ */
+function AvatarWithInfo(props) {
+    return (jsx(Fragment, { children: jsxs("div", { className: style.container, style: { ...props.style }, onClick: () => props?.onClick ? props.onClick() : {}, children: [jsx(Avatar, { size: '40px', src: props.fotoAvatar, isActiveClick: !!props?.onClick }), jsx("span", { style: { fontWeight: 600, marginLeft: 8, marginRight: 4 }, children: props.nomeCompleto }), " ", props.cargo ? jsx(Vector, {}) : '', " ", jsx("span", { style: { fontWeight: 400, marginLeft: 4, marginRight: 8, textAlign: 'center' }, children: props.cargo })] }) }));
+}
+
+export { AvatarWithInfo as default };

package/dist/esm/src/components/cardLT/AvatarWithInfo/vector.js

@@ -0,0 +1,13 @@
+import { jsx, Fragment } from 'react/jsx-runtime';
+
+///-----------------------------------------
+/// Componente
+/**
+ *
+ * @componente
+ */
+function Vector(props) {
+    return (jsx(Fragment, { children: jsx("svg", { width: "4", height: "4", viewBox: "0 0 4 4", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M2 4C1.46957 4 0.960859 3.78929 0.585786 3.41421C0.210713 3.03914 0 2.53043 0 2C0 1.46957 0.210713 0.960859 0.585786 0.585786C0.960859 0.210713 1.46957 0 2 0C2.53043 0 3.03914 0.210713 3.41421 0.585786C3.78929 0.960859 4 1.46957 4 2C4 2.53043 3.78929 3.03914 3.41421 3.41421C3.03914 3.78929 2.53043 4 2 4Z", fill: props.color ? props.color : "#757575" }) }) }));
+}
+
+export { Vector as default };

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

@@ -0,0 +1,7 @@
+import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".BannerProblem-module_container__iitVU {\n  padding: 50px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  position: relative;\n  flex-direction: row;\n  flex-wrap: wrap;\n  background-color: white;\n  font-family: 'Work Sans';\n  font-style: normal;\n\n}\n\n@media (max-width:570px) {\n\n  .BannerProblem-module_container__iitVU {\n    padding: 10px !important;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    position: relative;\n    flex-direction: row;\n    flex-wrap: wrap;\n    background-color: white;\n    font-family: 'Work Sans';\n    font-style: normal;\n  \n  }\n  }\n\n.BannerProblem-module_titleProblem__BeJIN{\n  font-weight: 700;\n  font-size: 18px;\n  word-wrap: break-word;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 4px;\n}\n\n.BannerProblem-module_created__OrSsa{\n  font-size: 12px;\n\n  font-family: 'Work Sans';\n  font-style: normal;\n  font-weight: 400;\n  font-size: 12px;\n  line-height: 14px;\n  /* identical to box height, or 117% */\n\n  display: flex;\n  align-items: center;\n  letter-spacing: -0.02em;\n\n  color: #757575;\n}\n\n.BannerProblem-module_description__olZ05{\n  font-style: normal;\n  font-weight: 600;\n  font-size: 32px;\n  text-align: left;\n  display: flex;\n  margin-top: 8px;\n  width: 100%;\n  color: #FF4D0D;\n  margin-bottom: 0px;\n}\n\n@media(max-width: 880px){\n  .BannerProblem-module_description__olZ05{\n    word-wrap: break-word;\n  }\n}\n\n.BannerProblem-module_missaoTitle__300kZ{\n  font-style: normal;\n  font-weight: 600;\n  font-size: 16px;\n  display: flex;\n  align-items: center;\n  width: 100%;\n  \n  color: #0645AD;\n}\n\nh2{\n  font-family: 'Work Sans';\n  font-style: normal;\n  font-weight: 700;\n  font-size: 16px;\n  display: flex;\n  align-items: center;\n  width: 100%;\n  margin-top: 16;\n  margin-bottom: 0;\n}\n\nh3{\n  font-family: 'Work Sans';\n  font-style: normal;\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 21px;\n  margin: 0;\n  word-wrap: break-word;\n}\n\n.BannerProblem-module_contentInput__YXpxk {\n  background-color: #F2F2F2; \n  border-width: 1px; \n  border-radius: 4px;\n  padding: 24px 16px 24px 16px;\n  border: 1px solid #BDBDBD;\n}\n\n.BannerProblem-module_contentInput__YXpxk input {\n  width: 100% !important;\n  margin: 4px;\n  padding: 16px;\n  border-radius: 8px;\n  border: 1px solid #BDBDBD;\n  background-color: white;\n}\n\n.BannerProblem-module_goal_invite__B0T5N svg {\n  max-width: none;\n  max-height: none !important;\n}\n";
+var style = {"container":"BannerProblem-module_container__iitVU","titleProblem":"BannerProblem-module_titleProblem__BeJIN","created":"BannerProblem-module_created__OrSsa","description":"BannerProblem-module_description__olZ05","missaoTitle":"BannerProblem-module_missaoTitle__300kZ","contentInput":"BannerProblem-module_contentInput__YXpxk","goal_invite":"BannerProblem-module_goal_invite__B0T5N"};
+styleInject(css_248z);
+
+export { style as default };