frst-components 0.36.9 → 0.38.0

package/dist/esm/src/components/LXP/thumbnails/thumbnailsStyle.js

@@ -0,0 +1,188 @@
+import styled from 'styled-components';
+
+styled.div `
+  width: 180px;
+  min-width: 180px;
+  height: ${(props) => `${props.showSwitchIndividual ? '352px' : '300px'}`};
+  border-radius: 8px;
+  border: 1px solid ${({ theme }) => theme.colors.neutralsGrey5};
+  background-color: ${({ theme }) => theme.colors.shadeWhite};
+  box-sizing: border-box;
+  position: relative;
+  padding-top: 8px;
+  z-index: 9999px;
+  user-select: none;
+`;
+styled.div `
+  position: absolute;
+  width: 155px;
+  height: 205px;
+  margin-top: 24px;
+  margin-left: 12px;
+  border-radius: 4px;
+  z-index: 1;
+  background-color: #00000090;
+
+  padding: 0;
+  border: none;
+  display: ${(props) => `${props.active ? 'flex' : 'none'}`};
+  justify-content: center;
+  align-items: center;
+`;
+styled.div `
+  display: flex;
+  justify-content: center;
+`;
+const ContainerMain = styled.div `
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`;
+const Typography = styled.div `
+  font-family: 'PT Sans';
+  font-style: normal;
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 21px;
+  color: ${({ theme }) => theme.colors.shadeBlack};
+  white-space: wrap;
+`;
+const IconVertical = styled.div `
+  margin-left: 150px;
+  margin-top: 10px;
+  width: 34px;
+  cursor: pointer;
+  position: absolute;
+`;
+styled.div `
+  display: flex;
+  gap: 6px;
+  margin-top: 45px;
+  position: absolute;
+`;
+styled.span `
+  font-family: 'PT Sans';
+  font-style: normal;
+  font-size: 16px;
+  line-height: 21px;
+  text-align: right;
+  width: 120px;
+  color: ${({ theme }) => theme.colors.shadeBlack};
+`;
+/* ################addNew############################ */
+styled.div `
+  width: 177px;
+  height: 352px;
+  border-radius: 8px;
+  border: 1px dashed ${({ theme }) => theme.colors.neutralsGrey5};
+  background-color: ${({ theme }) => theme.colors.neutralsGrey6};
+  box-sizing: border-box;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+`;
+const ContainerEllipse = styled.button `
+  width: 46px;
+  height: 46px;
+  border-radius: 50%;
+  border: none;
+  background-color: ${({ theme }) => theme.colors.neutralsGrey4};
+  cursor: pointer;
+  padding-top: 5px;
+`;
+const TypographyAdd = styled.div `
+  font-family: 'Work Sans';
+  font-style: normal;
+  font-weight: 700;
+  font-size: 16px;
+  width: 140px;
+  line-height: 19px;
+  color: ${({ theme }) => theme.colors.neutralsGrey4};
+  text-align: center;
+  word-wrap: break-all !important;
+  white-space: pre-wrap;
+`;
+// container card
+const CardDragAndDrop = styled.div `
+  display: flex;
+  width: 195px;
+  min-width: 195px;
+  padding: 8px;
+  flex-direction: column;
+  align-items: center;
+  /* justify-content: space-between; */
+  gap: 8px;
+  border-radius: 8px;
+  background: #fff;
+  user-select: none;
+  position: relative;
+
+  &.add {
+    align-items: center;
+    justify-content: center;
+    border-radius: 8px;
+    border: 1px dashed  #BDBDBD;
+    background: #E0E0E0;
+  }
+
+  &.loading {
+    gap: 8px;
+    justify-content: flex-start;
+  }
+
+  > .thumbnails_img {
+    width: 100%;
+    height: 162px;
+    border-radius: 4px;
+    object-position: center;
+    object-fit: cover;
+    width: 100%;
+    object-fit: cover;
+    filter: ${(props) => `grayscale(${props.active ? '0' : '1'})`};
+  }
+`;
+// LOADINGS
+const LoadingContainer = styled.div `
+  width: 100%;
+  height: 100%;
+  display: inline-block;
+  position: relative;
+  z-index: 9999px;
+  user-select: none;
+  border-radius: 8px;
+  object-fit: cover;
+  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%), #e9eaea;
+  -webkit-animation-duration: 4s;
+  -webkit-animation-fill-mode: forwards;
+  -webkit-animation-iteration-count: infinite;
+  -webkit-animation-name: placeholderShimmer;
+  -webkit-animation-timing-function: linear;
+
+  &.loading_img {
+    width: 100%;
+    height: 162px;
+    border-radius: 4px;
+  }
+  &.loading_text {
+    height: 20px;
+    width: 100%;
+    border-radius: 20px;
+  }
+
+  &.loading_button {
+    width: 50%;
+    align-self: flex-end;
+    align-content: flex-end;
+    display: inline-block;
+    margin-top: 16px;
+  }
+`;
+
+export { CardDragAndDrop, ContainerEllipse, ContainerMain, IconVertical, LoadingContainer, Typography, TypographyAdd };

package/dist/esm/src/components/LXP/thumbnails/vectorCross.js

@@ -0,0 +1,13 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+///-----------------------------------------
+/// Componente
+/**
+ *
+ * @componente
+ */
+function VectorCross(props) {
+    return (jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("path", { d: "M12.2051 1.53845V22.8718", stroke: "#EBEBEB", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M1.53809 12.2051H22.8714", stroke: "#EBEBEB", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })] }));
+}
+
+export { VectorCross as default };

package/dist/esm/src/components/LXP/thumbnails/vectorEllipse.js

@@ -0,0 +1,13 @@
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+
+///-----------------------------------------
+/// Componente
+/**
+ *
+ * @componente
+ */
+function VectorEllipse(props) {
+    return (jsx(Fragment, { children: jsxs("svg", { width: "5", height: "5", viewBox: "0 0 5 5", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("ellipse", { cx: "2.57143", cy: "2.35", rx: "1.65", ry: "1.57143", transform: "rotate(-90 2.57143 2.35)", fill: "url(#paint0_angular_4285_2572)" }), jsx("ellipse", { cx: "2.57143", cy: "2.35", rx: "1.65", ry: "1.57143", transform: "rotate(-90 2.57143 2.35)", fill: "url(#paint1_radial_4285_2572)", fillOpacity: "0.6" }), jsx("ellipse", { cx: "2.57143", cy: "2.35", rx: "1.65", ry: "1.57143", transform: "rotate(-90 2.57143 2.35)", stroke: "#BDBDBD", strokeWidth: "0.1" }), jsxs("defs", { children: [jsxs("radialGradient", { id: "paint0_angular_4285_2572", cx: "0", cy: "0", r: "1", gradientUnits: "userSpaceOnUse", gradientTransform: "translate(2.57143 2.35) rotate(90) scale(1.57143 1.65)", children: [jsx("stop", { stopColor: "#757575" }), jsx("stop", { offset: "0.526042", stopColor: "#757575", stopOpacity: "0" })] }), jsxs("radialGradient", { id: "paint1_radial_4285_2572", cx: "0", cy: "0", r: "1", gradientUnits: "userSpaceOnUse", gradientTransform: "translate(2.57143 2.35) rotate(90) scale(1.57143 1.65)", children: [jsx("stop", { offset: "0.380208", stopColor: "white" }), jsx("stop", { offset: "1", stopColor: "#EBEBEB", stopOpacity: "0" })] })] })] }) }));
+}
+
+export { VectorEllipse as default };

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

@@ -0,0 +1,11 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import '../../../shared/global.css.js';
+import { ThemeProvider } from 'styled-components';
+import { FRSTTheme } from '../../../theme/index.js';
+import { Tooltip as Tooltip$1, Tooltiptext } from './tooltipStyle.js';
+
+function Tooltip(props) {
+    return (jsx(ThemeProvider, { theme: FRSTTheme, children: jsxs(Tooltip$1, { position: props.position, children: [props?.children, jsx(Tooltiptext, { id: "tooltipinfo", position: props.position, customWidth: props?.customWidth ? props?.customWidth : '156px', customMarginLeft: props?.customMarginLeft ? props?.customMarginLeft : '-70px', children: props?.textTooltip })] }) }));
+}
+
+export { Tooltip as default };

package/dist/esm/src/components/LXP/tooltip/tooltipStyle.js

@@ -0,0 +1,131 @@
+import styled from 'styled-components';
+
+const Tooltip = styled.div `
+    position: relative;
+    display: inline-block;
+    z-index: 99;
+    
+    &:after #tooltipinfo {
+        content: "";
+        position: absolute;
+
+        ${({ position }) => {
+    switch (position) {
+        case 'top':
+            return 'top: 100%; left: 50%;';
+        case 'bottom':
+            return 'bottom: 100%; left: 50%;';
+        case 'right':
+            return 'top: 50%; right: 100%;';
+        case 'left':
+            return 'top: 50%; left: 100%;';
+    }
+}}
+        margin-left: -5px;
+        border-width: 5px;
+        border-style: solid;
+        border-color: black transparent transparent transparent;
+    }
+
+    &:hover #tooltipinfo {
+        visibility: visible;
+    }
+
+    &:hover {
+        visibility: visible;
+    }
+`;
+const Tooltiptext = styled.div `
+    visibility: hidden;
+    width: ${({ customWidth }) => customWidth ? customWidth : '156px'};
+    background-color: #fff;
+    border: solid 1px #BDBDBD;
+
+    padding: 8px! important;
+    padding-bottom: 4px;
+
+    word-wrap: break-word;
+
+    color: #757575;
+    font-family: 'PT Sans';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 18px;
+
+    text-align: center;
+    border-radius: 6px;
+    padding: 5px 0;
+    position: absolute;
+    z-index: 1;
+    ${({ position }) => {
+    switch (position) {
+        case 'top':
+            return 'bottom: 160%; left: 50%;';
+        case 'bottom':
+            return 'top: 160%; left: 50%;';
+        case 'right':
+            return 'top: -5px; left: 220%;';
+        case 'left':
+            return 'top: -5px; right: 120%;';
+    }
+}}
+
+    margin-left: ${({ customMarginLeft }) => customMarginLeft ? customMarginLeft : '-70px'};
+
+    -webkit-box-shadow: 10px 35px 40px -8px rgba(0,0,0,0.31);
+    -moz-box-shadow: 10px 35px 40px -8px rgba(0,0,0,0.31);
+    box-shadow: 10px 35px 40px -8px rgba(0,0,0,0.31);
+
+    &:after {
+        content: "";
+        width: 0;
+        height: 0;
+        
+        ${({ position }) => {
+    switch (position) {
+        case 'top':
+            return 'left: 48%; bottom: -6px;';
+        case 'bottom':
+            return 'left: 48%; top: -6px;';
+        case 'right':
+            return 'top: 35%; left: -6px; border: 5px solid #fff !important;';
+        case 'left':
+            return 'top: 35%; right: -6px; border: 5px solid #fff !important;';
+    }
+}}
+        position: absolute;
+    
+        border: 6px solid #fff;
+        transform: rotate(135deg);
+        transition: border 0.3s ease-in-out;
+      }
+
+      &:before {
+        content: "";
+        width: 0;
+        height: 0;
+        
+        ${({ position }) => {
+    switch (position) {
+        case 'top':
+            return 'left: 48%; bottom: -6px;';
+        case 'bottom':
+            return 'left: 48%; top: -6px;';
+        case 'right':
+            return `
+                    top: 35%; left: -7px; border: 5px solid rgba(0,0,0,0.31)!important;                    
+                    position: absolute;    
+                    border: 6px solid #fff;
+                    transform: rotate(135deg);
+                    transition: border 0.3s ease-in-out;`;
+        case 'left':
+            return 'top: 35%; right: -6px; border: 5px solid rgba(0,0,0,0.31)!important;';
+        default:
+            return '';
+    }
+}}
+      }
+`;
+
+export { Tooltip, Tooltiptext };

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

@@ -0,0 +1,10 @@
+import { jsx } from 'react/jsx-runtime';
+import '../../../shared/global.css.js';
+import { ThemeProvider } from 'styled-components';
+import { FRSTTheme } from '../../../theme/index.js';
+
+function Video({ videoId, privateHash, width, height, autoplay, quality, timeStart, showSpeedControl, controls, loop, keyboard, style }) {
+    return (jsx(ThemeProvider, { theme: FRSTTheme, children: jsx("div", { style: { ...style }, children: jsx("iframe", { src: `https://player.vimeo.com/video/${videoId}?h=${privateHash ? privateHash : ''}&autoplay=${autoplay ? autoplay : 0}&quality=${quality ? quality : '720p'}&speed=${showSpeedControl ? showSpeedControl : 0}&controls=${controls ? controls : 1}&loop=${loop ? loop : 0}&keyboard=${keyboard ? keyboard : 0}&#t=${timeStart ? timeStart : '0m0s'}`, width: width ? width : 640, height: height ? height : 342, allow: "autoplay; fullscreen; picture-in-picture", frameBorder: "0", allowFullScreen: true }) }) }));
+}
+
+export { Video as default };

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

@@ -0,0 +1,13 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import '../../shared/global.css.js';
+import { ThemeProvider } from 'styled-components';
+import { FRSTTheme } from '../../theme/index.js';
+import style from './logoFRST.module.css.js';
+
+function LogoFRST(props) {
+    return (jsx(ThemeProvider, { theme: FRSTTheme, children: props.variant === 'light' ? (jsxs("div", { className: style.containerLight, children: [jsx("img", { src: "https://api-deimos-cdn.frstfalconi.cloud/frst_branco_1.png", alt: 'LogoFRST', width: 198, height: 64 }), jsx("p", { children: props.title1Logo ? props.title1Logo : 'Pessoas transformam o jogo,' }), jsx("p", { children: props.title2Logo ? props.title2Logo : 'Resultados transformam as pessoas.' })] }))
+            : props.variant === 'dark' ? (jsxs("div", { className: style.containerDark, children: [jsx("img", { src: "https://api-deimos-cdn.frstfalconi.cloud/logofrst_black.png", alt: 'LogoFRST', width: 198, height: 64 }), jsx("p", { children: props.title1Logo ? props.title1Logo : 'Pessoas transformam o jogo,' }), jsx("p", { children: props.title2Logo ? props.title2Logo : 'Resultados transformam as pessoas.' })] }))
+                : null }));
+}
+
+export { LogoFRST as default };

package/dist/esm/src/components/LogoFRST/logoFRST.module.css.js

@@ -0,0 +1,7 @@
+import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = "\n.logoFRST-module_containerLight__WYpD6 img{\n    margin-bottom: 10px;\n}\n\n.logoFRST-module_containerLight__WYpD6 p {\n    font-family: PT Sans;\n    font-size: 12px;\n    font-weight: 400;\n    line-height: 16px;\n    letter-spacing: 0em;\n    text-align: left;\n    color: #fff\n}\n\n.logoFRST-module_containerDark__9V-x- img{\n    margin-bottom: 10px;\n}\n\n.logoFRST-module_containerDark__9V-x- p {\n    font-family: PT Sans;\n    font-size: 12px;\n    font-weight: 400;\n    line-height: 16px;\n    letter-spacing: 0em;\n    text-align: left;\n}\n";
+var style = {"containerLight":"logoFRST-module_containerLight__WYpD6","containerDark":"logoFRST-module_containerDark__9V-x-"};
+styleInject(css_248z);
+
+export { style as default };

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

@@ -0,0 +1,10 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Modal } from '@mui/material';
+import { ModalContainer, ModalHeader, ModalTitle, CloseButton, HorizontalLine, ContainerContent, ButtonContainer } from './styles.js';
+import Button from '../buttons/index.js';
+
+const ModalConfirme = ({ open, onClose, title, children, onConfirm }) => {
+    return (jsx(Modal, { open: open, onClose: onClose, children: jsxs(ModalContainer, { children: [jsxs(ModalHeader, { children: [jsx(ModalTitle, { children: title }), jsx(CloseButton, { onClick: onClose, children: "X" })] }), jsx(HorizontalLine, {}), jsxs(ContainerContent, { children: [children, jsxs(ButtonContainer, { children: [jsx(Button, { variant: "link", style: { color: '#444444' }, handleClick: onClose, label: "N\u00E3o, cancelar" }), jsx(Button, { variant: "primary", label: "Sim, excluir", handleClick: onConfirm })] })] })] }) }));
+};
+
+export { ModalConfirme };

package/dist/esm/src/components/ModalConfirme/styles.js

@@ -0,0 +1,51 @@
+import styled from 'styled-components';
+
+const ModalContainer = styled.div `
+    position: absolute;
+    max-width: 602px;
+    min-height: 306px;
+    border-radius: 16px;
+    top: 50%;
+    left: 50%;
+    background-color: white;
+    transform: translate(-50%, -50%);
+    background-image: url('https://lxp-cdn.frstfalconi.cloud/STORYBOOK/fundo_laranja.png');
+    background-repeat: no-repeat;
+    background-position: top -554px right -126px;
+`;
+const ModalHeader = styled.div `
+    display: flex;
+    justify-content: space-between;
+    padding-left: 24px;
+    padding-right: 24px;
+    padding-top: 16px;
+`;
+const ModalTitle = styled.p `
+    font-weight: 700;
+    font-family: 'Work Sans';
+    font-size: 20px;
+    /* margin-top: 18px; */
+    line-height: 26px;
+    color: #222222;
+`;
+const CloseButton = styled.div `
+
+`;
+const HorizontalLine = styled.hr `
+    border: 1px solid #E0E0E0;
+`;
+const ContainerContent = styled.div `
+    padding-left: 32px;
+    padding-right: 32px;
+    display: flex;
+    flex-direction: column;
+    min-height: 200px;
+    justify-content: space-between;
+`;
+const ButtonContainer = styled.div `
+    display: flex;
+    gap: 10px;
+    justify-content: flex-end;
+`;
+
+export { ButtonContainer, CloseButton, ContainerContent, HorizontalLine, ModalContainer, ModalHeader, ModalTitle };

package/dist/esm/src/components/accordion-tabs/accordionTabsStyles.js

@@ -0,0 +1,100 @@
+import styled from 'styled-components';
+
+const WrapperHeaderTabs = styled.div `
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    width: auto;
+`;
+const TitleAccordion = styled.div `
+    font-family: 'PT Sans';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 21px;
+
+    color: ${({ theme }) => theme.colors.shadeBlack};
+    margin-bottom: 10px;
+`;
+const ContainerTitleTabs = styled.div `
+    display: flex;
+    overflow-x: scroll;
+    &::-webkit-scrollbar {
+        display: none;
+    }
+`;
+const ContainerCleanAction = styled.div `
+    margin-left: 10px;
+    display: flex;
+    height: fit-content;
+    align-items: center;
+    justify-content: center;
+    white-space: nowrap;
+    cursor: pointer;
+`;
+const TextClean = styled.span `
+    font-family: 'PT Sans';
+    font-style: normal;
+    font-weight: 700;
+    font-size: 16px;
+    line-height: 21px;
+
+    padding-left: 8px;
+
+    color: ${({ theme }) => theme.colors.linkOnfocus};
+`;
+const TitleTabWrapper = styled.div `
+    display: flex;
+    flex-direction: row;
+    font-family: 'PT Sans';
+    font-style: normal;
+    font-weight: 700;
+    font-size: 16px;
+    line-height: 21px;
+
+    color: ${({ theme }) => theme.colors.linkOnfocus};
+    padding-right: 16px;
+    padding-bottom: 16px;
+    cursor: pointer;
+
+    
+
+    ${({ typeButton, status }) => (typeButton == 'filled') ? (status == true ? 'background-color: #fff; margin-bottom: -1px;' : 'background-color: #bdbdbd') : null};
+`;
+const TextTotalTab = styled.div `
+    margin-left: 2px;
+    margin-right: 2px;
+    color: #FF4D0D;
+`;
+const TextTitleTab = styled.div `
+    white-space: nowrap;
+`;
+const WrapperContent = styled.div `
+
+    background-color: transparent;
+    padding-top: 30px;
+    padding-bottom: 25px;
+    
+    transition: transform 1s;
+
+    ${({ status }) => status ? 'height: auto; padding-top: 30px; padding-bottom: 25px;' : 'max-height: 0px; padding-top: 0px; padding-bottom: 0px;'};
+    overflow: hidden;
+`;
+// border: 1px solid ${({ theme }) => theme.colors.linkDisabled};
+const DropIcon = styled.div `
+    margin-left: 2px;
+    transform: rotate(${({ status }) => status ? '180deg' : '0deg'});
+    transition: transform 0.3s;
+    transition: all 0.2s ease-in-out;
+`;
+const TitleCurrentTabOpened = styled.p `
+    font-family: Work Sans;
+    font-style: normal;
+    font-weight: 700;
+    font-size: 16px;
+    line-height: 19px;
+
+    margin-bottom: 10px;
+`;
+
+export { ContainerCleanAction, ContainerTitleTabs, DropIcon, TextClean, TextTitleTab, TextTotalTab, TitleAccordion, TitleCurrentTabOpened, TitleTabWrapper, WrapperContent, WrapperHeaderTabs };

package/dist/esm/src/components/accordion-tabs/index.js

@@ -0,0 +1,34 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import '../../shared/global.css.js';
+import { ThemeProvider } from 'styled-components';
+import { FRSTTheme } from '../../theme/index.js';
+import { TrashIcon, DropdownIcon } from '../../shared/icons.js';
+import { TitleAccordion, WrapperHeaderTabs, ContainerTitleTabs, ContainerCleanAction, TextClean, WrapperContent, TitleCurrentTabOpened, TitleTabWrapper, TextTitleTab, TextTotalTab, DropIcon } from './accordionTabsStyles.js';
+import { useLayoutEffect } from 'react';
+
+function AccordionTabs({ titleAccordion, typeAccordion, typeButtonTab, titleTabs, handleActiveTab, activeTabID, hasCleanButton, handleActionClean, textCleanButton, hasCounterTab, children, style }) {
+    useLayoutEffect(() => {
+        const scrollContainer = document.getElementById("scrollTabsAccordion");
+        scrollContainer.addEventListener("wheel", (evt) => {
+            evt.preventDefault();
+            scrollContainer.scrollLeft += evt.deltaY;
+        });
+    }, []);
+    const getCurrentTabOpened = () => {
+        let nameTab = titleTabs.find((element) => element.id == activeTabID);
+        if (nameTab && nameTab.description)
+            return nameTab.description;
+        else if (nameTab && nameTab.title)
+            return nameTab.title;
+    };
+    const renderTitles = (item) => {
+        let isOpened = item.id == activeTabID;
+        let TabComponent = jsxs(TitleTabWrapper, { typeButton: typeButtonTab, status: isOpened, onClick: () => handleActiveTab(item.id), children: [jsxs(TextTitleTab, { children: [" ", item.title, " "] }), hasCounterTab && item.totalCounter > 0 &&
+                    jsxs(TextTotalTab, { children: [" (", item.totalCounter, ") "] }), jsx(DropIcon, { status: isOpened, children: jsx(DropdownIcon, { fill: FRSTTheme['colors'].linkOnfocus }) })] }, item.id);
+        return TabComponent;
+    };
+    return (jsxs(ThemeProvider, { theme: FRSTTheme, children: [jsxs("div", { style: { width: '100%', ...style }, children: [titleAccordion && jsxs(TitleAccordion, { children: [" ", titleAccordion, " "] }), typeAccordion == 'horizontal' ? (jsxs(WrapperHeaderTabs, { children: [jsx(ContainerTitleTabs, { id: "scrollTabsAccordion", children: titleTabs.map(renderTitles) }), hasCleanButton &&
+                                jsxs(ContainerCleanAction, { onClick: () => handleActionClean('limpar'), children: [jsx(TrashIcon, { width: '14px', height: '17px' }), jsxs(TextClean, { children: [" ", textCleanButton, " "] })] })] })) : null] }), jsx(WrapperContent, { status: activeTabID != '-1', children: jsxs("div", { style: { width: '100%', ...style }, children: [getCurrentTabOpened() && jsxs(TitleCurrentTabOpened, { children: [" ", getCurrentTabOpened(), " "] }), children] }) })] }));
+}
+
+export { AccordionTabs as default };