frst-components 0.36.9 → 0.38.0

package/dist/esm/src/components/LXP/contentThumbnails/contentThumbnailsStyle.js

@@ -0,0 +1,184 @@
+import styled from 'styled-components';
+
+const Container = styled.div `
+  width: 270px;
+  height: fit-content;
+  background: linear-gradient(180deg, #ee4c15 0%, #cc362d 100%);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  box-sizing: border-box;
+  padding-top: 16px;
+
+  > .frame {
+    width: 100%;
+    height: fit-content;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    position: relative;
+    box-sizing: border-box;
+    background: #f18624;
+    padding: 8px 12px 16px 8px;
+    gap: 7.75px;
+  }
+`;
+const Image = styled.img `
+  height: 189px;
+  width: 100%;
+  border-radius: 6.56px;
+  object-position: center;
+  object-fit: cover;
+  box-shadow: 0px 14.760848999023438px 32.801883697509766px -12.300708770751953px #cc362d;
+`;
+const Content = styled.div `
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  position: relative;
+  width: 100%;
+`;
+const Typography = styled.p `
+  font-family: 'Work Sans';
+  font-style: normal;
+  font-weight: 700;
+  font-size: 20px;
+  line-height: 23px;
+  display: flex;
+  align-items: center;
+  margin-right: 20px;
+  color: ${({ theme }) => theme.colors.shadeWhite};
+  word-wrap: break-word;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 4; /* start showing ellipsis when 3rd line is reached */
+  white-space: pre-wrap;
+  text-overflow: ellipsis;
+`;
+const Select = styled.div `
+  background: none;
+  width: 20px;
+  height: 20px;
+  position: absolute;
+  right: 0;
+  top: 0;
+  cursor: pointer;
+
+  &:hover {
+    opacity: 0.5;
+  }
+`;
+const ContainerCard = styled.div `
+  width: 270px;
+  height: 76px;
+  background-color: ${({ theme }) => theme.colors.shadeWhite};
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 8px;
+  gap: 8px;
+  position: relative;
+  overflow: hidden;
+  border-bottom: 1px solid ${({ theme }) => theme.colors.borderPrimary};
+
+  &:hover {
+    background-color: ${({ theme }) => theme.colors.neutralsGrey9};
+  }
+
+  &:active {
+    background-color: ${({ theme }) => theme.colors.neutralsGrey6};
+  }
+
+  &:hover .trash {
+    display: inline-block;
+    /* background-color: red; */
+  }
+`;
+styled.div `
+  width: 17.29px;
+  height: 51px;
+  margin-left: -11px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+`;
+const Title = styled.div `
+  width: 166px;
+  margin-left: 12px;
+  word-wrap: break-word;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2; /* start showing ellipsis when 3rd line is reached */
+  white-space: pre-wrap;
+  text-overflow: ellipsis;
+`;
+const IconTrash = styled.div `
+  cursor: pointer;
+  height: fit-content;
+   transition: all 0.2s  ;
+  display: none;
+  align-self: center;
+  align-content: flex-end;
+`;
+// ##############TRILHA##############
+const ContainerTrilha = styled.div `
+  width: 270px;
+  height: 499px;
+  background-color: ${({ theme }) => theme.colors.primary2};
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+`;
+const ContainerChoice = styled.div `
+  width: 232px;
+  height: 75px;
+  position: absolute;
+  top: 0;
+  margin: 20px;
+`;
+const TypographyChoice = styled.p `
+  font-family: 'PT Sans';
+  font-style: normal;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 21px;
+  color: #ffffff;
+  padding-bottom: 8px;
+  white-space: nowrap;
+`;
+const SelectChoice = styled.select `
+  width: 232px;
+  height: 48px;
+  border-radius: 8px;
+  border: 1px solid #e0e0e0;
+  color: #9c9c9c;
+  padding-left: 10px;
+`;
+const ImageChoice = styled.img `
+  width: 232px;
+  height: 310px;
+  margin-bottom: 70px;
+  border-radius: 8px;
+  position: absolute;
+  object-fit: cover;
+  bottom: 0;
+`;
+const ContentChoice = styled.div `
+  display: flex;
+  flex-direction: row;
+  position: absolute;
+  margin-top: 425px;
+`;
+const OptionChoice = styled.option `
+  color: #9c9c9c;
+`;
+
+export { Container, ContainerCard, ContainerChoice, ContainerTrilha, Content, ContentChoice, IconTrash, Image, ImageChoice, OptionChoice, Select, SelectChoice, Title, Typography, TypographyChoice };

package/dist/esm/src/components/LXP/contentThumbnails/index.js

@@ -0,0 +1,77 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import '../../../shared/global.css.js';
+import { ThemeProvider } from 'styled-components';
+import { FRSTTheme } from '../../../theme/index.js';
+import { Container, Image, Content as Content$1, Typography, Select, ContainerTrilha, ContainerChoice, TypographyChoice, SelectChoice, OptionChoice, ImageChoice, ContentChoice, ContainerCard, Title, IconTrash } from './contentThumbnailsStyle.js';
+import VectorDown from './vectorDown.js';
+import VectorUp from './vectorUp.js';
+import { useState, useEffect } from 'react';
+import { Content, Video, PodCast, QuizSucessError, Quiz, Certificate, TrashIcon } from '../../../shared/icons.js';
+import { DragDropContext, Droppable, Draggable } from '@hello-pangea/dnd';
+import HeaderVectorElipses from '../thumbnails/headerVectorElipses.js';
+
+// import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd'
+var typeContent;
+(function (typeContent) {
+    typeContent[typeContent["Content"] = 0] = "Content";
+    typeContent[typeContent["Video"] = 1] = "Video";
+    typeContent[typeContent["PodCast"] = 2] = "PodCast";
+    typeContent[typeContent["QuizSucessError"] = 3] = "QuizSucessError";
+    typeContent[typeContent["Quiz"] = 4] = "Quiz";
+    typeContent[typeContent["Certificate"] = 5] = "Certificate";
+})(typeContent || (typeContent = {}));
+function ContentThumbnails({ label, contentList, variant, src, disabled, icon, onChange, handleClick, handleReloadItens, title, removeContentList, onChangeOrder, isOpen }) {
+    const defaultImg = 'https://i.gyazo.com/35d9c18bbdc6a48d843b0aa24ab2499e.png';
+    const iconList = [
+        jsx(Content, { fill: '#EE4C15' }),
+        jsx(Video, { fill: '#EE4C15' }),
+        jsx(PodCast, { fill: '#EE4C15' }),
+        jsx(Content, { fill: '#EE4C15' }),
+        jsx(QuizSucessError, { fill: '#EE4C15' }),
+        jsx(Quiz, { fill: '#EE4C15' }),
+        jsx(Certificate, { fill: '#EE4C15' })
+    ];
+    const [contentListData, setContentListData] = useState(contentList ? contentList : []);
+    const [up, setUp] = useState(isOpen);
+    const reorder = (list, startIndex, endIndex) => {
+        const result = Array.from(list);
+        const [removed] = result.splice(startIndex, 1);
+        result.splice(endIndex, 0, removed);
+        return result;
+    };
+    const change = () => {
+        {
+            up ? setUp(false) : setUp(true);
+            return handleReloadItens();
+        }
+    };
+    useEffect(() => {
+        setContentListData(contentList ? contentList : []);
+    }, [contentList]);
+    const onDragEnd = (result) => {
+        if (!result.destination) {
+            return;
+        }
+        const reorderedItems = reorder(contentListData, result.source.index, result.destination.index);
+        setContentListData(reorderedItems);
+        onChangeOrder(reorderedItems);
+    };
+    function Exibir() {
+        return (jsx(DragDropContext, { onDragEnd: onDragEnd, children: jsx(Droppable, { droppableId: "contentListData", children: (provided) => (jsx("div", { style: { backgroundColor: '#D1D5DB', height: contentListData.length > 0 ? 'auto' : '100vh', width: 270 }, ref: provided.innerRef, children: contentListData?.map((item, index) => {
+                        return (jsx(Draggable, { draggableId: item.title, index: index, children: (provided) => (jsxs(ContainerCard, { ref: provided.innerRef, ...provided.draggableProps, children: [jsx(HeaderVectorElipses, { provided: provided, direction: 'column' }), jsxs("div", { onClick: () => {
+                                            handleClick(item);
+                                        }, style: {
+                                            display: 'flex',
+                                            flexDirection: 'row',
+                                            alignItems: 'center',
+                                            height: '100%',
+                                            cursor: 'pointer'
+                                        }, children: [iconList[item.type], jsx(Title, { children: item.title })] }), jsx(IconTrash, { className: "trash", onClick: () => {
+                                            removeContentList(item);
+                                        }, children: jsx(TrashIcon, { fill: '#C00F00' }) })] })) }, index));
+                    }) })) }) }));
+    }
+    return (jsx(ThemeProvider, { theme: FRSTTheme, children: variant === 'individualCourse' ? (jsxs("div", { children: [jsx(Container, { className: (variant = 'individualCourse'), children: jsxs("div", { className: "frame", children: [jsx(Image, { src: src || defaultImg }), jsxs(Content$1, { children: [jsx(Typography, { children: title }), jsx(Select, { onClick: change, children: up ? jsx(VectorUp, {}) : jsx(VectorDown, {}) })] })] }) }), jsx("div", { children: up ? jsx(Exibir, {}) : null })] })) : variant === 'trilha' ? (jsxs("div", { children: [jsxs(ContainerTrilha, { className: (variant = 'trilha'), children: [jsxs(ContainerChoice, { children: [jsx(TypographyChoice, { children: "Escolha o curso que deseja editar" }), jsx(SelectChoice, { placeholder: title, value: title, onChange: onChange, children: jsx(OptionChoice, { value: title, children: title }) })] }), jsx(ImageChoice, { src: src || defaultImg }), jsxs(ContentChoice, { children: [jsx(Typography, { children: title }), jsx(Select, { onClick: change, children: up ? jsx(VectorUp, {}) : jsx(VectorDown, {}) })] })] }), up ? (jsx("div", { style: { backgroundColor: '#D1D5DB', width: 270 }, children: jsx(Exibir, {}) })) : null] })) : null }));
+}
+
+export { ContentThumbnails as default, typeContent };

package/dist/esm/src/components/LXP/contentThumbnails/vectorDown.js

@@ -0,0 +1,13 @@
+import { jsx, Fragment } from 'react/jsx-runtime';
+
+///-----------------------------------------
+/// Componente
+/**
+ *
+ * @componente
+ */
+function VectorDown(props) {
+    return (jsx(Fragment, { children: jsx("svg", { width: "18", height: "10", viewBox: "0 0 18 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M17 1L9 9L1 0.999999", stroke: "white", strokeWidth: "1.2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }));
+}
+
+export { VectorDown as default };

package/dist/esm/src/components/LXP/contentThumbnails/vectorUp.js

@@ -0,0 +1,13 @@
+import { jsx, Fragment } from 'react/jsx-runtime';
+
+///-----------------------------------------
+/// Componente
+/**
+ *
+ * @componente
+ */
+function VectorUp(props) {
+    return (jsx(Fragment, { children: jsx("svg", { width: "18", height: "10", viewBox: "0 0 18 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M1 9L9 1L17 9", stroke: "white", strokeWidth: "1.2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }));
+}
+
+export { VectorUp as default };

package/dist/esm/src/components/LXP/fileUpload/fileUploadStyles.js

@@ -0,0 +1,88 @@
+import styled from 'styled-components';
+
+const LandscapeContainer = styled.label `
+    width: 544px;
+    height: 240px;
+    border-radius: 8px;
+    background-color: ${({ theme }) => theme.colors.neutralsGrey7};
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    box-sizing: border-box;
+    position: relative;
+    object-fit: cover;
+    border: none; 
+    
+    & input{
+        display: none;
+    }
+`;
+const PortraitContainer = styled.label `
+    width: 180px;
+    height: 240px;
+    border-radius: 8px;
+    background-color: ${({ theme }) => theme.colors.neutralsGrey7};
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    box-sizing: border-box;
+    object-fit: cover;
+    border: none; 
+    
+    & input{
+        display: none;
+    }
+`;
+const UploadCam = styled.div `
+    width: 48px;
+    height: 47.02px;
+    background-color: ${({ theme }) => theme.colors.neutralsGrey4};
+    border-radius: 50px; 
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    visibility: visible;      
+`;
+const TextFileUpload = styled.div `
+    margin-top: 95px;
+    font: 'PT Sans';
+    font-weight: 700;
+    font-size: 16px;  
+    line-height: 21px;  
+    color: ${({ theme }) => theme.colors.neutralsGrey4};
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;   
+`;
+const ImgLandscape = styled.img `
+    width: 544px;
+    height: 240px;
+    border-radius: 8px;    
+    position: absolute;
+    object-fit: cover; 
+    color: ${({ theme }) => theme.colors.neutralsGrey4};
+
+    .oculto {
+        visibility: hidden;
+    }
+`;
+const ImgPortrait = styled.img `
+    width: 180px;
+    height: 240px;
+    border-radius: 8px;    
+    position: absolute;
+    object-fit: cover; 
+    color: ${({ theme }) => theme.colors.neutralsGrey4};
+
+    .oculto {
+        visibility: hidden;
+    }
+`;
+
+export { ImgLandscape, ImgPortrait, LandscapeContainer, PortraitContainer, TextFileUpload, UploadCam };

package/dist/esm/src/components/LXP/fileUpload/index.js

@@ -0,0 +1,21 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import '../../../shared/global.css.js';
+import { ThemeProvider } from 'styled-components';
+import { FRSTTheme } from '../../../theme/index.js';
+import { LandscapeContainer, ImgLandscape, UploadCam, TextFileUpload, PortraitContainer, ImgPortrait } from './fileUploadStyles.js';
+import { useState } from 'react';
+
+function FileUpload({ variant, src, alt, disabled, startIcon, style, handleClick, selectedFile }) {
+    const [uploadFile, setUploadFile] = useState({});
+    const handleFileSelected = (file) => {
+        setUploadFile(file);
+        selectedFile([selectedFile]);
+    };
+    return (jsx(ThemeProvider, { theme: FRSTTheme, children: variant === 'landscape' ?
+            jsxs(LandscapeContainer, { style: { ...style }, className: variant = 'landscape', htmlFor: 'fileSelector', children: [jsx("input", { type: "file", id: 'fileSelector', accept: '.jpg, .jpeg, .png', onChange: (e) => handleFileSelected(e.target.files[0]) }), jsx(ImgLandscape, { src: src, alt: alt }), jsx(UploadCam, { className: 'oculto', children: startIcon }), jsxs(TextFileUpload, { children: [jsx("p", { children: "Clique para" }), jsx("p", { children: "adicionar imagem" })] })] })
+            : variant === 'portrait' ?
+                jsxs(PortraitContainer, { style: { ...style }, className: variant = 'portrait', htmlFor: 'fileSelector', children: [jsx("input", { type: "file", id: 'fileSelector', accept: '.jpg, .jpeg, .png', onChange: (e) => handleFileSelected(e.target.files[0]) }), jsx(ImgPortrait, { src: src, alt: alt }), jsx(UploadCam, { className: 'oculto', children: startIcon }), jsxs(TextFileUpload, { children: [jsx("p", { children: "Clique para" }), jsx("p", { children: "adicionar imagem" })] })] })
+                : null }));
+}
+
+export { FileUpload as default };

package/dist/esm/src/components/LXP/headerContent/headerContent.js

@@ -0,0 +1,218 @@
+import styled, { css } from 'styled-components';
+
+const Container = styled.div `
+  display: flex;
+  position: relative;
+`;
+const HeaderImage = styled.div `
+  display: flex;
+  justify-content: flex-start;
+  height: 200;
+  align-items: flex-start;
+  flex-direction: column;
+  position: relative;
+  -webkit-transition: width 0.4s ease-in-out;
+  transition: width 0.4s ease-in-out;
+  color: #fff;
+  background-image: url(${(props) => props.img});
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center;
+
+  /* ${(props) => props.tmnDescription < 164 &&
+    css `
+      section {
+        visibility: hidden;
+      }
+    `}
+  @media (max-width: 834px) {
+    height: ${(props) => props.height ?? '450px'};
+    ${(props) => props.tmnDescription >= 134 &&
+    css `
+      section {
+        visibility: inherit;
+      }
+    `}
+  }
+*/
+  ${(props) => props.onDisplay
+    ? css `
+          width: 100%;
+        `
+    : css `
+          width: 0px;
+        `}
+
+  @media (max-width: 414px) {
+    height: ${(props) => props.height ?? '450px'};
+  }
+  @media (max-width: 320px) {
+    height: ${(props) => props.height ?? '450px'};
+  }
+`;
+const Content = styled.div `
+  width: 100%;
+  height: ${(props) => props.height ?? '450px'};
+  padding: 64px;
+  background: linear-gradient(52deg, #111111 0%, rgba(17, 17, 17, 0) 100%);
+
+  ${(props) => !props.onDisplay &&
+    css `
+      display: none;
+    `}
+
+  @media (max-width: 414px) {
+    padding: 2rem;
+  }
+`;
+const ListCounters = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 8px;
+
+  position: absolute;
+  margin-bottom: 36px;
+  bottom: 0;
+  right: 50%;
+`;
+const Counters = styled.button `
+  width: 11px;
+  height: 11px;
+  box-sizing: border-box;
+  border-radius: 100%;
+  border: none;
+  background-color: ${({ selected, theme }) => (selected ? theme.colors.primary1 : theme.colors.neutralsGrey5)};
+`;
+const Title = styled.h2 `
+  font-size: 40px;
+  font-weight: 700;
+  max-width: 60vw;
+  margin-top: 0;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  @media (max-width: 320px) {
+    word-break: break-word;
+    font-size: 25px;
+  }
+`;
+const Description = styled.div `
+  font-size: 16px;
+  font-weight: 400;
+  max-width: 44rem;
+  transition: all 0.9s ease-in-out;
+  display: -webkit-box;
+
+  @media (max-width: 834px) {
+    max-width: 34rem;
+  }
+
+  @media (max-width: 414px) {
+    word-break: break-word;
+  }
+  @media (max-width: 320px) {
+    font-size: 12px;
+  }
+
+  &.short {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+`;
+const SpaceProgressAndButton = styled.div `
+  display: flex;
+  gap: 28px;
+  align-items: center;
+  cursor: pointer;
+  @media (max-width: 414px) {
+    flex-direction: column;
+  }
+  @media (max-width: 320px) {
+    font-size: 14px;
+  }
+`;
+styled.div `
+  margin-left: 24px;
+  margin-bottom: 2rem;
+
+  @media (max-width: 414px) {
+    margin-left: 0;
+    margin-top: 1rem;
+  }
+  button {
+    @media (max-width: 320px) {
+      font-size: 14px;
+    }
+  }
+`;
+const SpaceButtonTop = styled.div `
+  button {
+    @media (max-width: 320px) {
+      font-size: 14px;
+    }
+  }
+`;
+const SpaceButtonTopViewMore = styled.section `
+  display: flex;
+  cursor: pointer;
+  align-items: center;
+  gap: 10px;
+
+  &.open {
+    margin-top: -10px;
+  }
+  &.closed {
+    margin-top: 0;
+  }
+
+  > span {
+    transform: rotate(90deg);
+
+    &.open {
+      animation: 0.2s open both;
+    }
+    &.closed {
+      animation: 0.2s closed both;
+    }
+  }
+  a {
+    color: #649af3;
+    font-weight: 700;
+  }
+
+  @keyframes open {
+    to {
+      transform: rotate(450deg);
+    }
+  }
+
+  @keyframes closed {
+    to {
+      transform: rotate(-90deg);
+    }
+  }
+`;
+const StyleHeaderInProgress = styled.div `
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: space-between;
+
+  > section {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+  }
+`;
+
+export { Container, Content, Counters, Description, HeaderImage, ListCounters, SpaceButtonTop, SpaceButtonTopViewMore, SpaceProgressAndButton, StyleHeaderInProgress, Title };

package/dist/esm/src/components/LXP/headerContent/index.js

@@ -0,0 +1,45 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import Button from '../../buttons/index.js';
+import ProgressBar from '../progressBar/index.js';
+import { useState, useEffect } from 'react';
+import { FRSTTheme } from '../../../theme/index.js';
+import { Container, HeaderImage, Content, ListCounters, Counters, StyleHeaderInProgress, Title, Description, SpaceButtonTopViewMore, SpaceButtonTop, SpaceProgressAndButton } from './headerContent.js';
+import { ArrowScrollRight } from '../../../shared/icons.js';
+import { ThemeProvider } from 'styled-components';
+
+function HeaderContent(props) {
+    const [selectedContent, setSelectedContent] = useState(0);
+    const [zeroHeigthDescription, setzeroHeigthDescription] = useState(false);
+    const [textView, setTextView] = useState(props.textViewMore);
+    useEffect(() => {
+        const timer = setTimeout(() => {
+            setSelectedContent(selectedContent < props.listaRecomendacao.length - 1 ? selectedContent + 1 : 0);
+            setzeroHeigthDescription(false);
+            setTextView(props.textViewMore);
+        }, props.autoplayTime ? props.autoplayTime : 10000);
+        return () => clearTimeout(timer);
+    }, [selectedContent]);
+    function addHeigthDescription() {
+        if (zeroHeigthDescription) {
+            setzeroHeigthDescription(false);
+            setTextView(props.textViewMore);
+        }
+        else if (!zeroHeigthDescription) {
+            setzeroHeigthDescription(true);
+            setTextView(props.textViewLess);
+        }
+    }
+    function RecomendationHeader(item) {
+        const hasSeeMore = item.description.length >= 164;
+        return (jsxs(StyleHeaderInProgress, { children: [jsxs("section", { children: [jsx(Title, { children: item.title }), jsx(Description, { className: !zeroHeigthDescription ? 'short' : '', zeroHeigthDescription: zeroHeigthDescription, children: item.description }), hasSeeMore && (jsxs(SpaceButtonTopViewMore, { className: zeroHeigthDescription ? 'open' : 'closed', zeroHeigthDescription: zeroHeigthDescription, onClick: addHeigthDescription, children: [jsx(Button, { label: textView, variant: "link", style: { color: '#649AF3', fontWeight: '900' } }), jsx("span", { className: !zeroHeigthDescription ? 'open' : 'closed', children: jsx(ArrowScrollRight, { fill: "#649AF3", width: "13px", height: "13px", strokeWidth: '4' }) })] }))] }), jsx(SpaceButtonTop, { onClick: item.onClick, children: item.labelButton && jsx(Button, { label: item.labelButton, variant: "primary" }) })] }));
+    }
+    function InProgressHeader(item) {
+        const hasSeeMore = item.description.length >= 164;
+        return (jsxs(StyleHeaderInProgress, { children: [jsxs("section", { children: [jsx(Title, { title: item.title, children: item.title }), jsx(Description, { className: !zeroHeigthDescription ? 'short' : '', zeroHeigthDescription: zeroHeigthDescription, children: item.description }), hasSeeMore && (jsxs(SpaceButtonTopViewMore, { className: zeroHeigthDescription ? 'open' : 'closed', zeroHeigthDescription: zeroHeigthDescription, onClick: addHeigthDescription, children: [jsx(Button, { label: textView, variant: "link", style: { color: '#649AF3', fontWeight: '900' } }), jsx("span", { className: !zeroHeigthDescription ? 'open' : 'closed', children: jsx(ArrowScrollRight, { fill: "#649AF3", width: "13px", height: "13px", strokeWidth: '4' }) })] }))] }), jsxs(SpaceProgressAndButton, { children: [jsx(ProgressBar, { value: item.progresso, label: item.channel, style: { width: 200 } }), item.labelButton && jsx(Button, { label: item.labelButton, variant: "primary", handleClick: item.onClick })] })] }));
+    }
+    return (jsx(ThemeProvider, { theme: FRSTTheme, children: jsxs(Container, { style: { ...props.style }, children: [props.listaRecomendacao.map((item, index) => {
+                    return (jsx(HeaderImage, { img: item.bgImg, tmnDescription: item.description.length, onDisplay: index === selectedContent, style: { ...props.style }, children: jsx(Fragment, { children: item.typeOfHeader === 'inProgress' ? (jsx(Content, { height: props?.height, onDisplay: index === selectedContent, children: InProgressHeader(item) })) : (jsx(Content, { height: props?.height, onDisplay: index === selectedContent, children: RecomendationHeader(item) })) }) }, index));
+                }), jsx(ListCounters, { children: Array.from({ length: props.listaRecomendacao.length }).map((_, index) => (jsx(Counters, { selected: index === selectedContent, onClick: () => setSelectedContent(index) }, index))) })] }) }));
+}
+
+export { HeaderContent as default };