frst-components 0.37.0 → 0.38.0

package/dist/esm/src/components/IJ/participantCardOld/participantCardStyle.js

@@ -0,0 +1,293 @@
+import styled from 'styled-components';
+
+const WrapperCard = styled.div `
+    display: flex;
+    flex-direction: column;
+    width: 282px;
+    height: fit-content;
+    min-height: ${({ variant }) => variant == 'secondary' ? '169px' : ''};
+    justify-content: space-around;
+    padding: 17px;
+    padding-top: 14px;
+
+    background: ${({ theme }) => theme.colors.shadeWhite};
+    border: 1px solid ${({ theme, variant }) => variant != 'secondary' ? theme.colors.borderPrimary : 'none'};
+    border-radius: 8px;
+
+    box-shadow: 0px 0px 5px ${({ variant }) => variant == 'secondary' ? 'rgba(0, 0, 0, 0.2)' : '#0000000'};
+`;
+styled.div `
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+`;
+const UserInfo = styled.div `
+    display: flex;
+    flex-direction: row;
+    cursor: pointer !important;
+`;
+const DescriptionUser = styled.div `
+        display: flex;
+        flex-direction: column;
+        margin-left: 13px;
+    `;
+const NameUser = styled.div `
+            font-family: 'PT Sans';
+            font-style: normal;
+            font-weight: 700;
+            font-size: 16px;
+            line-height: 110%;
+
+            display: flex;
+            align-items: center;
+
+            color: #222222;
+            word-break: normal;
+            
+            width: 200px;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            display: -webkit-box;
+            -webkit-line-clamp: 1;
+            -webkit-box-orient: vertical;
+            word-wrap: break-word;
+
+        `;
+const EmailUser = styled.div `
+            font-family: 'PT Sans';
+            font-style: normal;
+            font-weight: 700;
+            font-size: 14px;
+            line-height: 16px;
+            display: flex;
+            align-items: center;
+
+            color: #9C9C9C;
+            margin-top: 5px;
+            word-break: normal;
+            
+            width: 200px;
+
+            text-overflow: ellipsis;
+            overflow: hidden;
+            display: -webkit-box;
+            -webkit-line-clamp: 1;
+            -webkit-box-orient: vertical;
+            word-wrap: break-word;
+        `;
+const UserAdditionalInfo = styled.div `
+    display: flex;
+    flex-direction: column;
+    margin-top: 15px;
+`;
+const Area = styled.div `
+        font-family: 'PT Sans';
+        font-style: normal;
+        font-weight: ${({ variant }) => variant == 'secondary' ? '400' : '700'};
+        font-size: 16px;
+        line-height: 110%;
+        /* or 18px */
+
+        display: flex;
+        align-items: center;
+
+        /* neutrals/grey_1 */
+
+        color: #222222;
+        max-width: 100%;
+            
+        max-width: 100%;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        display: -webkit-box;
+        -webkit-line-clamp: 1;
+        -webkit-box-orient: vertical;
+        word-wrap: break-word;
+    `;
+const Position = styled.div `
+        font-family: 'PT Sans';
+        font-style: normal;
+        font-weight: 400;
+        font-size: 16px;
+        line-height: 110%;
+        /* or 18px */
+        
+        display: flex;
+        align-items: center;
+        
+        /* neutrals/grey_1 */
+        
+        color: #222222;
+            
+        max-width: 100%;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        display: -webkit-box;
+        -webkit-line-clamp: 1;
+        -webkit-box-orient: vertical;
+        word-wrap: break-word;
+    `;
+const FooterButton = styled.div `
+    display: flex;
+    flex-direction: row;
+    margin-top: 15px;
+    justify-content: space-around;
+    align-items: center;
+    white-space: nowrap;
+`;
+const ButtonSend = styled.div `
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding-left: 0px;
+    padding: 4px 16px;
+    gap: 8px;
+
+    width: 149px;
+    height: 32px;
+
+    /* primary_1 */
+
+    background: ${({ theme }) => theme.colors.primary1};
+    border-radius: 8px;
+
+    font-family: 'Work Sans';
+    font-style: normal;
+    font-weight: 700;
+    font-size: 14px;
+    line-height: 14px;
+    color: ${({ theme }) => theme.colors.shadeWhite};
+    cursor: pointer;
+    margin-left: -13px;
+
+
+`;
+const ButtonRemove = styled.div `
+    font-family: 'Work Sans';
+    font-style: normal;
+    font-weight: 700;
+    font-size: 14px;
+    line-height: 14px;
+    color: #0645AD;
+    cursor: pointer;
+`;
+const ButtonSendV2 = styled.div `
+    width: fit-content;
+    height: 14px;
+
+    font-family: 'PT Sans';
+    font-style: normal;
+    font-weight: 700;
+    font-size: 14px;
+    line-height: 14px;
+
+    display: flex;
+    align-items: center;
+
+    color: #0645AD;
+    cursor: pointer;
+
+`;
+const WrapperButtons = styled.div `
+    display: flex;
+    flex-direction: row;
+    gap: 6px;
+    justify-content: flex-start;
+    align-items: center;
+    opacity: ${({ status }) => status == 'success' ? '0' : '1'};
+
+    transition: all 1s ease-in-out;
+`;
+const ButtonRemoveV2 = styled.div `
+    font-family: 'PT Sans';
+    font-style: normal;
+    font-weight: 700;
+    font-size: 14px;
+    line-height: 110%;
+
+    text-align: right;
+
+    /* neutrals/neutral_2 */
+
+    color: #444444;
+    cursor: pointer;
+
+    &:hover {
+        color: ${({ theme }) => theme.colors.neutralsGrey1};
+    }
+    &:active {
+        color: ${({ theme }) => theme.colors.neutralsGrey3};
+    }
+`;
+const ButtonOrV2 = styled.div `
+    font-family: 'PT Sans';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 110%;
+    /* or 13px */
+
+    display: flex;
+    align-items: center;
+
+    color: #000000;
+    cursor: pointer;
+`;
+const ButtonSuccess = styled.div `
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 4px 16px;
+    gap: 8px;
+
+    width: 159px;
+    height: 32px;
+
+    /* message/success_2 */
+
+    background: #D1F6D1;
+    /* message/success_1 */
+
+    border: 1px solid #1BA853;
+    border-radius: 8px;
+
+    width: 163px;
+    height: 32px;
+    cursor: default;
+    white-space: nowrap;
+
+    font-family: 'Work Sans';
+    font-style: normal;
+    font-weight: 700;
+    font-size: 14px;
+    line-height: 14px;
+    /* identical to box height */
+
+    display: flex;
+    align-items: center;
+
+    /* neutrals/grey_1 */
+
+    color: #222222;
+`;
+const ButtonSuccessV2 = styled.div `
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    font-family: 'PT Sans';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 18px;
+
+    color: #000000;
+    gap: 8px;
+    margin-left: 8px;
+    margin-bottom: 7px;
+
+    opacity: ${({ status }) => status == 'success' ? '1' : '0'};
+
+    transition: all 1s ease-in-out;
+`;
+
+export { Area, ButtonOrV2, ButtonRemove, ButtonRemoveV2, ButtonSend, ButtonSendV2, ButtonSuccess, ButtonSuccessV2, DescriptionUser, EmailUser, FooterButton, NameUser, Position, UserAdditionalInfo, UserInfo, WrapperButtons, WrapperCard };

package/dist/esm/src/components/IJ/thumbListContent/index.js

@@ -0,0 +1,28 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { FRSTTheme } from '../../../theme/index.js';
+import { ThemeProvider } from 'styled-components';
+import { containerThumbContent, loadingImageThumb, loadingThumbContent, loadingContent, shadedThumb, imageThumbContent, ProgressAndImg, IconPlayVideo, InfCanal, ImgCanal, NameCanal, iconsThumbAndProgress, IconAndProgress, ProgressIcon, iconsThumb, infoThumbContent, tagThumbContentContainer, tagThumbContent, descriptionThumbContent, viewMoreContent } from './thumbListContentStyles.js';
+import { useState, useEffect, useMemo } from 'react';
+import { ThumbVideo, ThumbPodcast, ThumbTexto } from '../../../shared/icons.js';
+import Button from '../../buttons/index.js';
+import ProgressBar from '../../LXP/progressBar/index.js';
+
+function ThumbListContent(props) {
+    const [showMore, setShowMore] = useState(false);
+    const [tagVisualized, setTagVisualized] = useState(props.valueProgress);
+    const [isSelected, setIsSelected] = useState(props?.isSelected);
+    useEffect(() => {
+        setTagVisualized(props.valueProgress);
+    }, [props.valueProgress]);
+    useMemo(() => {
+        if (props.isSelected)
+            setIsSelected(props?.isSelected);
+    }, [props.isSelected]);
+    const MAX_CHARACTERS = 150;
+    return (jsx(ThemeProvider, { theme: FRSTTheme, children: props.isLoading ? (jsxs(containerThumbContent, { style: { ...props.style }, children: [jsx(loadingImageThumb, {}), jsxs(loadingThumbContent, { children: [props.title && jsx(loadingContent, { children: "a" }), jsx(loadingContent, { children: "a" }), jsx(loadingContent, { children: "a" }), jsx(loadingContent, { children: "a" }), jsx(loadingContent, { children: "a" })] })] })) : (jsxs(containerThumbContent, { style: { ...props.style }, children: [props.imageSrc ? (tagVisualized > 0 ? (jsx(shadedThumb, { children: jsx(imageThumbContent, { style: { backgroundImage: `url(${props.imageSrc})` }, onClick: props.onClickThumb, children: jsx(ProgressAndImg, { children: jsx(ProgressBar, { label: "", value: props.valueProgress }) }) }) })) : (jsxs(Fragment, { children: [jsx(imageThumbContent, { style: { backgroundImage: `url(${props.imageSrc})` }, onClick: props.onClickThumb, children: jsxs(IconPlayVideo, { children: [' ', jsx(IconPlay, {}), ' '] }) }), jsxs(InfCanal, { id: 'DadosCanal', href: props.urlCanal, children: [jsx(ImgCanal, { src: props.imageSrcCanal }), jsx(NameCanal, { children: props.nameCanal })] })] }))) : tagVisualized > 0 ? (jsx(shadedThumb, { onClick: props.onClickThumb, children: jsxs(iconsThumbAndProgress, { children: [props.typeThumbContent === 'video' ? jsx(ThumbVideo, { width: "74", height: "74" }) : null, props.typeThumbContent === 'podcast' ? (jsx(IconAndProgress, { children: jsx(ThumbPodcast, { width: "74", height: "74" }) })) : null, props.typeThumbContent === 'question' ? jsx(ThumbTexto, { width: "74", height: "74" }) : null, props.typeThumbContent === 'textual' ? jsx(ThumbTexto, { width: "74", height: "74" }) : null, jsx(ProgressIcon, { children: jsx(ProgressBar, { label: "", value: props.valueProgress }) })] }) })) : (jsxs(iconsThumb, { onClick: props.onClickThumb, children: [props.typeThumbContent === 'video' ? (jsx("div", { children: jsx(ThumbVideo, { width: "74", height: "74" }) })) : null, props.typeThumbContent === 'podcast' ? (jsx("div", { children: jsx(ThumbPodcast, { width: "74", height: "74" }) })) : null, props.typeThumbContent === 'question' ? (jsx("div", { children: jsx(ThumbTexto, { width: "74", height: "74" }) })) : null, props.typeThumbContent === 'textual' ? (jsx("div", { children: jsx(ThumbTexto, { width: "74", height: "74" }) })) : null] })), jsxs(infoThumbContent, { onClick: props.onClickThumb, tagVisualized: props.tagValue, isSelected: props?.isSelected, children: [props.tagValue !== 'notVisualized' ? (jsxs(Fragment, { children: [props.tagValue === 'vizualized' ? (jsx(tagThumbContentContainer, { children: jsx(tagThumbContent, { tagVisualized: props.tagValue, children: props.textProgressVisualized }) })) : null, props.tagValue === 'inProgress' ? (jsx(tagThumbContentContainer, { children: jsx(tagThumbContent, { tagVisualized: props.tagValue, children: props.textProgressInProgress }) })) : null] })) : null, props.title ? jsx("span", { children: props.title }) : null, jsx(descriptionThumbContent, { showText: showMore, isSelected: props?.isSelected, children: props.description.length > MAX_CHARACTERS ? (jsx(Fragment, { children: showMore ? props.description : `${props.description.slice(0, MAX_CHARACTERS)}...` })) : (props.description) })] }), jsx(viewMoreContent, { children: jsx(Button, { variant: "link", label: showMore ? props.textViewLessButton : props.textViewMoreButton, handleClick: () => setShowMore(!showMore), style: { fontSize: 12, color: props?.isSelected ? '#E5E7EB' : '#444444' } }) })] })) }));
+    function IconPlay() {
+        return (jsx(Fragment, { children: jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "33", height: "33", viewBox: "0 0 33 33", fill: "none", children: [jsx("g", { filter: "url(#filter0_d_1_13248)", children: jsx("path", { d: "M22.7851 17.6767C23.3898 17.273 23.3898 16.3841 22.7851 15.9803L14.8446 10.6786C14.1668 10.2261 13.2583 10.7119 13.2583 11.5269V22.1302C13.2583 22.9451 14.1668 23.4309 14.8446 22.9784L22.7851 17.6767Z", fill: "white" }) }), jsx("defs", { children: jsxs("filter", { id: "filter0_d_1_13248", x: "0", y: "0", width: "32.6364", height: "32.6364", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB", children: [jsx("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }), jsx("feColorMatrix", { in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), jsx("feMorphology", { radius: "20.3983", operator: "erode", in: "SourceAlpha", result: "effect1_dropShadow_1_13248" }), jsx("feOffset", { dy: "3.05975" }), jsx("feGaussianBlur", { stdDeviation: "2.54979" }), jsx("feColorMatrix", { type: "matrix", values: "0 0 0 0 1 0 0 0 0 0.301961 0 0 0 0 0.0509804 0 0 0 0.4 0" }), jsx("feBlend", { mode: "multiply", in2: "BackgroundImageFix", result: "effect1_dropShadow_1_13248" }), jsx("feBlend", { mode: "normal", in: "SourceGraphic", in2: "effect1_dropShadow_1_13248", result: "shape" })] }) })] }) }));
+    }
+}
+
+export { ThumbListContent as default };

package/dist/esm/src/components/IJ/thumbListContent/thumbListContentStyles.js

@@ -0,0 +1,250 @@
+import styled from 'styled-components';
+
+const containerThumbContent = styled.div `
+  display: grid;
+  grid-template-columns: 0.75fr 1fr;
+  position: relative;
+  min-width: 250px;
+  height: auto;
+  cursor: pointer;
+  background-color: ${({ theme }) => theme.colors.shadeWhite};
+  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2) !important;
+
+`;
+const loadingImageThumb = styled.div `
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: linear-gradient(90deg, rgba(123, 129, 136, 0) 6.43%, rgba(123, 129, 136, 0.2) 22.38%), #d9d9d9;
+  -webkit-animation-duration: 4s;
+  -webkit-animation-fill-mode: forwards;
+  -webkit-animation-iteration-count: infinite;
+  -webkit-animation-name: placeholderShimmer;
+  -webkit-animation-timing-function: linear;
+`;
+const iconsThumbAndProgress = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  background-color: #ee8736;
+  flex-direction: column;
+`;
+const iconsThumb = styled.div `
+  display: flex;
+  height: 100%;
+  min-height: 144px;
+  background-color: #ee8736;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+`;
+const imageThumbContent = styled.div `
+  height: 100%;
+  background-repeat: no-repeat;
+  background-size:cover !important;
+  background-position: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  border-radius: 6.733px;
+  align-items: center;
+  margin-left: -1px;
+  background: rgba(0, 0, 0, 0.30);
+
+`;
+const loadingThumbContent = styled.div `
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-start;
+  flex-direction: column;
+  padding: 16px 16px 16px 16px;
+  gap: 4px;
+`;
+const loadingContent = styled.div `
+  background: linear-gradient(90deg, rgba(123, 129, 136, 0) 6.43%, rgba(123, 129, 136, 0.2) 22.38%), #d9d9d9;
+  color: transparent;
+  border-radius: 16px;
+  width: 100%;
+  height: 0.45em;
+
+  -webkit-animation-duration: 4s;
+  -webkit-animation-fill-mode: forwards;
+  -webkit-animation-iteration-count: infinite;
+  -webkit-animation-name: placeholderShimmer;
+  -webkit-animation-timing-function: linear;
+
+  &:first-child {
+    width: 50%;
+    margin-bottom: 8px;
+  }
+  &:last-child {
+    width: 30%;
+  }
+
+`;
+const IconPlayVideo = styled.div `
+width: 133px;
+height: 119px;
+border-radius: 8px;
+flex-shrink: 0;
+background-color: rgba(0, 0, 0, 0.30);
+/* background-color: red; */
+position: relative;
+left: 0px;
+display: flex;
+align-items: center;
+justify-content: center;
+
+
+`;
+const infoThumbContent = styled.div `
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-start;
+  flex-direction: column;
+  font-size: 16px;
+  padding: 0px 0px 32px 0px;
+  gap: 4px;
+  font-family: 'PT Sans';
+  word-wrap: break-word;
+  background: ${(props) => props?.isSelected && '#F26818'};
+  span {
+    color: ${(props) => (props?.isSelected ? '#F8FAFC' : '#F26818')};
+    font-size: 16px;
+    font-weight: 700;
+    padding-top: ${(props) => (props.tagVisualized === 'notVisualized' ? '16px' : '0px')};
+    padding-right: 16px;
+    padding-bottom: 0px;
+    padding-left: 16px;
+  }
+`;
+const tagThumbContentContainer = styled.div `
+  height: 30px;
+  width: 100%;
+  display: flex;
+  justify-content: end;
+`;
+const tagThumbContent = styled.div `
+  height: 24px;
+  background: ${(props) => (props.tagVisualized === 'vizualized' ? '#2ca92a' : '#851F41')};
+  width: 91px;
+  border-radius: 0px 0px 0px 8px;
+  color: #ffff;
+  text-align: center;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 16px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  display: ${(props) => props?.isSelected && 'none'};
+`;
+const descriptionThumbContent = styled.div `
+  font-size: 13px;
+  font-weight: 700;
+  font-style: normal;
+  line-height: normal;
+  font-family: PT Sans;
+  color: ${(props) => (props?.isSelected ? '#F9FAFB' : '#222222')};
+  padding: 10px 0px 0px 0px;
+  width: 135px;
+  overflow: hidden;
+  text-overflow: ${(props) => (props.showText ? 'none' : 'ellipsis')};
+  display: ${(props) => (props.showText ? 'flex' : '-webkit-box')};
+  -webkit-line-clamp: ${(props) => (props.showText ? 'none' : 3)};
+  -webkit-box-orient: ${(props) => (props.showText ? 'none' : 'vertical')};
+  position: relative;
+  left: 8.83px;
+`;
+const viewMoreContent = styled.div `
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  margin: 0px 16px 12px 0px;
+  user-select: none;
+`;
+const NameCanal = styled.p `
+
+color: var(--neutrals-neutral_2, #444);
+font-family: PT Sans;
+font-size: 10px;
+font-style: normal;
+font-weight: 400;
+line-height: normal;
+position: relative;
+right: 10px;
+pointer-events: none;
+
+`;
+const ImgCanal = styled.img `
+
+width: 24px;
+height: 24px;
+flex-shrink: 0;
+border-radius: 40px;
+background-size:cover !important;
+pointer-events: none;
+
+
+
+`;
+const InfCanal = styled.a `
+
+width: 130px;
+height: 30px;
+position:absolute;
+display: inline-flex;
+align-items: center;
+gap: 16px;
+right: 10px;
+top:82px;
+border-top: 0.5px solid #E2E8F0;
+text-decoration: none;
+display: none;
+
+
+`;
+const shadedThumb = styled.div `
+  position: relative;
+  height: 100%;
+  :after {
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    content: '';
+    background: linear-gradient(360deg, #2d2c2c 7.86%, rgba(117, 117, 117, 0) 61.43%);
+    z-index: 1;
+  }
+`;
+const ProgressAndImg = styled.div `
+  padding: 0.3rem 0.5rem;
+  z-index: 99;
+  position: absolute;
+  width: 100%;
+`;
+const ProgressIcon = styled.div `
+  position: absolute;
+  bottom: 2px;
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  z-index: 10;
+  padding-bottom: 0.3rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+`;
+const IconAndProgress = styled.div `
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+`;
+
+export { IconAndProgress, IconPlayVideo, ImgCanal, InfCanal, NameCanal, ProgressAndImg, ProgressIcon, containerThumbContent, descriptionThumbContent, iconsThumb, iconsThumbAndProgress, imageThumbContent, infoThumbContent, loadingContent, loadingImageThumb, loadingThumbContent, shadedThumb, tagThumbContent, tagThumbContentContainer, viewMoreContent };

package/dist/esm/src/components/IncrementarIdeia/icrementarIdeiaStyles.js

@@ -0,0 +1,115 @@
+import styled, { css } from 'styled-components';
+
+const ContainerComentario = styled.div `
+  width: 100%;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: ${(props) => (props.activeComentario ? 'flex-start' : 'center')};
+  padding: 4px 16px 4px 4px;
+  background: #f2f2f2;
+  border: ${(props) => (props.activeComentario ? '2px solid #757575' : '1px solid #bdbdbd')};
+  border-radius: ${(props) => (props.activeComentario ? '16px' : '100px')};
+  padding: 0.5rem;
+  font-family: 'Work Sans';
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #222222;
+
+  ${(props) => props.error &&
+    css `
+      background: #ffe0e0;
+      border: 2px solid #c00f00;
+    `}
+
+  cursor: pointer;
+  :hover {
+    border: 1px solid #f26818;
+  }
+`;
+const imagemComentario = styled.div `
+  ${(props) => props.activeComentario &&
+    css `
+      padding-top: 0.5rem;
+    `}
+`;
+const IpuntComentario = styled.textarea `
+  width: 100%;
+  background: #f2f2f2;
+  height: ${(props) => (props.activeComentario ? '100' : '17px')};
+  border: none;
+  padding: 0rem 0.5rem 0rem 0.5rem;
+  font-family: 'Work Sans';
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #222222;
+  overflow: hidden;
+  resize: none;
+
+  ${(props) => props.activeComentario &&
+    css `
+      margin-bottom: 1rem;
+      padding-top: 1rem;
+    `}
+
+  ${(props) => props.error &&
+    css `
+      background: #ffe0e0;
+    `}
+`;
+const imagemAndIput = styled.div `
+  display: flex;
+  flex-direction: row;
+  ${(props) => !props.activeComentario &&
+    css `
+      align-items: center;
+    `}
+`;
+const containerCountAndEmojis = styled.div `
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+`;
+const valueCount = styled.div `
+  width: 3rem;
+  font-family: 'Work Sans';
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 16px;
+  display: flex;
+  align-items: center;
+  color: #757575;
+  padding-bottom: 0.5rem;
+  padding-left: 0.5rem;
+`;
+const valueEmoji = styled.div `
+  padding-bottom: 0.5rem;
+  padding-right: 0.5rem;
+`;
+const containerError = styled.div `
+  margin-top: 1rem;
+  display: flex;
+  flex-direction: row;
+  width: 300px;
+  align-items: center;
+  svg {
+    margin-right: 0.5rem;
+  }
+  p {
+    font-family: 'Work Sans';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 14px;
+    color: #923534;
+  }
+`;
+
+export { ContainerComentario, IpuntComentario, containerCountAndEmojis, containerError, imagemAndIput, imagemComentario, valueCount, valueEmoji };