frst-components 0.37.0 → 0.38.0

package/dist/esm/src/components/item-lateral-menu/itemLateralMenuStyles.js

@@ -0,0 +1,110 @@
+import styled from 'styled-components';
+
+const WrapperItem = styled.div `
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    cursor: pointer;
+    padding: 8px;
+    background: ${({ theme }) => theme.colors.shadeWhite};
+    border-left: 4px solid ${({ active, theme }) => active ? theme.colors.primary1 : 'transparent'};
+
+    &:hover {
+        background: ${({ theme }) => theme.colors.neutralsGrey8};
+    }
+`;
+const WrapperMainLabel = styled.span `
+    font-family: 'PT Sans';
+    font-style: normal;
+    font-weight: ${({ active }) => active ? '700' : '400'};
+    font-size: 18px;
+    line-height: 23px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    margin-left: 8px;
+
+    color: ${({ theme, active }) => active ? theme.colors.primary1 : theme.colors.neutralsGrey1};
+`;
+const WrapperComponent = styled.div `
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-left: 10px;
+    & > svg {
+        width: 24px;
+        height: 24px;
+    }
+`;
+// & > path {
+//     fill: ${({ theme, active }) => active ? theme.colors.primary1 : theme.colors.neutralsGrey1};
+// }
+const WrapperButton = styled.div `
+    margin-right: 8px;
+    
+    & > button {
+        display: flex;
+        height: 24px;
+        flex-direction: row;
+        align-items: flex-start;
+        padding: 6px 8px;
+        gap: 10px;
+        border-radius: 4px;
+        
+        font-family: 'Work Sans';
+        font-style: normal;
+        font-weight: 600;
+        font-size: 12px;
+        line-height: 12px;
+        z-index: 2;
+    }
+`;
+const WrapperIconDrop = styled.div `
+    margin-right: 24px;
+    & > svg {
+        transition: all 0.3s ease-out;
+        transform: rotate(${({ isOpen }) => isOpen ? '0' : '0.5turn'});
+        & > path {
+            stroke: ${({ theme, isOpen }) => isOpen ? theme.colors.primary1 : theme.colors.neutralsGrey1};
+        }
+    }
+`;
+const WrapperCompound = styled.div `
+    display: flex;
+    transition: max-height 0.3s ease-in-out;
+    flex-direction: column;
+`;
+const WrapperSubItems = styled.div `
+    display: flex;
+    flex-direction: column;
+    height: auto;
+    transform-origin:top;
+    transform:scaleY(${({ isOpen }) => isOpen ? '1' : '0'});
+    transition: transform 0.3s ease-in-out;
+    overflow: hidden;
+`;
+const SubItem = styled.div `
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    cursor: pointer;
+    padding: 10px;
+    padding-left: 16px;
+    background: ${({ theme }) => theme.colors.neutralsGrey8};
+    border-bottom: 1px solid ${({ theme }) => theme.colors.neutralsGrey5};
+
+    font-family: 'PT Sans';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 21px;
+    display: flex;
+    align-items: center;
+
+    &:hover {
+        background: ${({ theme }) => theme.colors.neutralsGrey6};
+    }
+`;
+
+export { SubItem, WrapperButton, WrapperComponent, WrapperCompound, WrapperIconDrop, WrapperItem, WrapperMainLabel, WrapperSubItems };

package/dist/esm/src/components/item-menu-global/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 { Wrapper } from './itemMenuGlobalStyles.js';
+
+function ItemGlobalMenu({ variant, type, label, handleOnClick, wrapText, pressed, style, icon, customMenu }) {
+    return (jsx(ThemeProvider, { theme: FRSTTheme, children: jsxs(Wrapper, { "$variant": variant, "$pressed": pressed, "$typeItem": type, "$wrapText": wrapText, style: { ...style }, onClick: handleOnClick, children: [jsx("span", { style: { marginRight: customMenu ? 10 : 0 }, children: icon }), jsx("span", { style: { marginTop: customMenu ? -8 : 0 }, children: label })] }) }));
+}
+
+export { ItemGlobalMenu as default };

package/dist/esm/src/components/item-menu-global/itemMenuGlobalStyles.js

@@ -0,0 +1,74 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.button `
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 2px;
+    cursor: pointer;
+    border: 0;
+    border-bottom: ${({ $typeItem }) => $typeItem == 'menu' ? '4px' : '2px'} solid transparent;
+    border-top: ${({ $typeItem }) => $typeItem == 'menu' ? '10px' : '2px'} solid transparent;
+
+    background-color: ${({ $variant, theme, $typeItem }) => $typeItem == 'submenu' ? 'transparent' : $variant == 'LXP' ? theme.colors.neutralsGrey1 : theme.colors.primary1};
+
+    font-family: 'PT Sans';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 21px;
+
+    color: #FFFFFF;
+
+    white-space: ${({ $wrapText }) => $wrapText ? 'wrap' : 'nowrap'};
+
+    &:hover {
+        background-color: ${({ $variant, theme }) => $variant == 'LXP' ? theme.colors.neutralsGrey3 : '#F5792A'};
+        border-bottom: ${({ $typeItem }) => $typeItem == 'menu' ? '4px' : '2px'} solid transparent;
+    }
+    ${({ $pressed, $variant, $typeItem, theme }) => $pressed && `
+        font-weight: 700;
+        border-bottom: ${$typeItem == 'menu' ? '4px' : '2px'} solid
+        ${$variant == 'LXP' && $typeItem == 'menu' ? theme.colors.primary1 : theme.colors.shadeWhite};
+    `}
+    &:focus {
+        font-weight: 700;
+        border-bottom: ${({ $typeItem }) => $typeItem == 'menu' ? '4px' : '2px'} solid
+        ${({ $variant, $typeItem, theme }) => $variant == 'LXP' && $typeItem == 'menu' ? theme.colors.primary1 : theme.colors.shadeWhite};
+    }
+`;
+styled.button `
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    border: 0;
+    border-bottom: ${({ $typeItem }) => $typeItem == 'menu' ? '4px' : '2px'} solid transparent;
+    border-top: ${({ $typeItem }) => $typeItem == 'menu' ? '4px' : '2px'} solid transparent;
+
+    background-color: transparent;
+
+    font-family: 'PT Sans';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 21px;
+
+    color: #FFFFFF;
+
+    white-space: ${({ $wrapText }) => $wrapText ? 'wrap' : 'nowrap'};
+
+    &:hover {
+        background-color: ${({ $variant, theme }) => $variant == 'LXP' ? theme.colors.neutralsGrey3 : '#F5792A'};
+        border-bottom: ${({ $typeItem }) => $typeItem == 'menu' ? '4px' : '2px'} solid
+        ${({ $variant, $typeItem, theme }) => $variant == 'LXP' && $typeItem == 'menu' ? theme.colors.primary1 : theme.colors.shadeWhite};
+    }
+
+    &:focus {
+        font-weight: 700;
+    }
+`;
+
+export { Wrapper };

package/dist/esm/src/components/lateral-menu/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 { WrapperCard, WrapperHeader, NameProfile, Channel, WrapperButton, HR } from './lateralMenuStyles.js';
+import LateralMenu$1 from '../item-lateral-menu/index.js';
+import Avatar from '../avatar/index.js';
+import Button from '../buttons/index.js';
+
+function LateralMenu({ variant, hiddenButtonHeader, avatar, name, channel, button, listOptions, style }) {
+    return (jsx(ThemeProvider, { theme: FRSTTheme, children: jsxs(WrapperCard, { style: { ...style }, children: [jsxs(WrapperHeader, { children: [jsx(Avatar, { src: avatar.src, alt: avatar.alt ? avatar.alt : 'Image profile avatar', size: avatar.size ? avatar.size : '80px' }), jsx(NameProfile, { children: name }), channel &&
+                            jsx(Channel, { children: channel }), !hiddenButtonHeader &&
+                            jsx(WrapperButton, { children: !channel ?
+                                    jsx(Button, { variant: 'primary', label: button.label, handleClick: (e) => button.onClick(e) })
+                                    :
+                                        jsx(Button, { variant: 'link', label: button.label, handleClick: (e) => button.onClick(e) }) }), jsx(HR, {})] }), listOptions && listOptions.length > 0 && listOptions.map((item, index) => {
+                    return (jsx(LateralMenu$1, { label: item.label, button: item.button, beginComponent: item.beginComponent, activeBeginIcon: item.activeBeginIcon, hiddenIconDropArrow: item.hiddenIconDropArrow, onClick: (e) => item.onClick(e), selected: item.selected, subItems: item.subItems, style: { width: '100%' } }, index));
+                })] }) }));
+}
+
+export { LateralMenu as default };

package/dist/esm/src/components/lateral-menu/lateralMenuStyles.js

@@ -0,0 +1,65 @@
+import styled from 'styled-components';
+
+const WrapperCard = styled.div `
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 24px 0px 12px;
+
+    position: relative;
+    width: 282px;
+    height: auto;
+
+    background: ${({ theme }) => theme.colors.shadeWhite};
+
+    border: 1px solid #BDBDBD;
+    border-radius: 8px;
+`;
+const WrapperHeader = styled.div `
+    width: 100%;
+    padding-left: 24px;
+    padding-right: 24px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+`;
+const NameProfile = styled.span `
+    font-family: 'Work Sans';
+    font-style: normal;
+    font-weight: 500;
+    font-size: 20px;
+    line-height: 23px;
+    display: flex;
+    align-items: center;
+    text-align: center;
+
+    color: ${({ theme }) => theme.colors.neutralsGrey1};
+
+    margin-top: 16px;
+`;
+const Channel = styled.span `
+    font-family: 'Work Sans';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 12px;
+    display: flex;
+    align-items: center;
+    text-align: center;
+
+    color: ${({ theme }) => theme.colors.neutralsGrey1};
+
+    margin-top: 4px;
+`;
+const WrapperButton = styled.div `
+margin-top: 10px;
+
+`;
+const HR = styled.hr `
+    border-top: 1px solid #BDBDBD;
+    margin-top: 20px;
+    margin-bottom: 20px;
+    width: 100%;
+`;
+
+export { Channel, HR, NameProfile, WrapperButton, WrapperCard, WrapperHeader };

package/dist/esm/src/components/learning-steps/index.js

@@ -0,0 +1,23 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import '../../shared/global.css.js';
+import { ThemeProvider } from 'styled-components';
+import { FRSTTheme } from '../../theme/index.js';
+import { HeaderWrapper, TitleComponent, ClearComponent, TextClear } from './learningStepsStyles.js';
+import { TrashIcon } from '../../shared/icons.js';
+import StepCard from '../step-card/index.js';
+import ScrollContainer from '../scroll-container/index.js';
+
+function LearningSteps({ title, onSelected, objectCards, widthCard, marginLeftTitle, marginRightClear, marginsArrowButton, sizeArrowButton, horizontalMarginInternScroll, textClearFilter, textViewMore }) {
+    const [itemSelected, setItemSelected] = useState(-1);
+    const onItemSelect = (n) => {
+        setItemSelected(n);
+        onSelected(n);
+    };
+    function renderCard(item) {
+        return (jsx(StepCard, { title: item.title, onClick: () => onItemSelect(item.id), numberPeople: item.numberPeople, className: null, textButtonMore: textViewMore ? textViewMore : 'Ver mais', active: itemSelected == item.id, src: item.photos, width: widthCard }, item.id));
+    }
+    return (jsxs(ThemeProvider, { theme: FRSTTheme, children: [jsxs(HeaderWrapper, { marginLeft: marginLeftTitle ? marginLeftTitle : '0px', marginRight: marginRightClear ? marginRightClear : '0px', children: [jsx(TitleComponent, { children: title }), jsxs(ClearComponent, { onClick: () => onItemSelect(-1), children: [jsx(TrashIcon, {}), jsx(TextClear, { children: textClearFilter ? textClearFilter : 'Excluir Filtro' })] })] }), jsx(ScrollContainer, { stepMove: 380, isVisibleControlsButtons: true, sizeArrowButton: sizeArrowButton, marginsArrowButton: marginsArrowButton, horizontalMarginInternScroll: horizontalMarginInternScroll, children: objectCards.map(renderCard) })] }));
+}
+
+export { LearningSteps as default };

package/dist/esm/src/components/learning-steps/learningStepsStyles.js

@@ -0,0 +1,39 @@
+import styled from 'styled-components';
+
+const HeaderWrapper = styled.div `
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+
+    margin-left: ${({ marginLeft }) => marginLeft};
+    margin-right: ${({ marginRight }) => marginRight};
+
+    margin-bottom: 5px;
+`;
+const ClearComponent = styled.div `
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    color: #0645AD;
+    cursor: pointer;
+`;
+const TitleComponent = styled.div `
+    font-family: 'Work Sans';
+    font-style: normal;
+    font-weight: 700;
+    font-size: 20px;
+    line-height: 23px;
+    letter-spacing: -0.02em;
+`;
+const TextClear = styled.div `
+    font-family: 'Work Sans';
+    font-style: normal;
+    font-weight: 700;
+    font-size: 16px;
+    line-height: 19px;
+    display: flex;
+    align-items: center;
+    margin-left: 18px;
+`;
+
+export { ClearComponent, HeaderWrapper, TextClear, TitleComponent };

package/dist/esm/src/components/menu-more/index.js

@@ -0,0 +1,31 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import { ThemeProvider } from 'styled-components';
+import { FRSTTheme } from '../../theme/index.js';
+import '../../shared/global.css.js';
+import { MoreDotsVertical } from '../../shared/icons.js';
+import { ButtonMore, MenuCustom, ButtonMenuNotification, IconOption } from './menuMoreStyles.js';
+import { Box } from '@mui/material';
+
+function MenuMore({ iconButton, options, style, closeAfterClick, isHover = true, isArrowInMenu = true, isPaddingInMenu = true, isDarkMode = false, isContainerOptions }) {
+    const [listOptions, setListOptions] = useState(options);
+    useEffect(() => {
+        setListOptions(options);
+    }, [options]);
+    const [anchorEl, setAnchorEl] = useState(null);
+    const open = Boolean(anchorEl);
+    const handleClick = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+    return (jsx(ThemeProvider, { theme: FRSTTheme, children: jsxs("div", { style: { ...style }, children: [jsx(ButtonMore, { id: "basic-button", disableRipple: isHover ? false : true, "aria-controls": "basic-menu", "aria-haspopup": "true", "aria-expanded": open ? 'true' : undefined, onClick: handleClick, children: iconButton ? iconButton : jsx(MoreDotsVertical, { fill: isDarkMode ? "#EBEBEB" : "#444" }) }), listOptions && listOptions?.length > 0 && (jsx(MenuCustom, { id: "basic-menu", anchorOrigin: { vertical: 'bottom', horizontal: 'left' }, transformOrigin: { vertical: 'top', horizontal: 'right' }, anchorEl: anchorEl, open: open, onClose: handleClose, "$isArrowInMenu": isArrowInMenu, "$isPaddingInMenu": isPaddingInMenu, "$isDarkMode": isDarkMode, children: listOptions.map((itemOption, index) => {
+                        return (jsx(Box, { children: jsxs(ButtonMenuNotification, { onClick: () => {
+                                    itemOption?.onClick();
+                                    closeAfterClick && handleClose();
+                                }, "$isColor": itemOption?.color, "$isDarkMode": isDarkMode, disabled: itemOption?.disabled, "$isContainerOptions": isContainerOptions, children: [itemOption?.startIcon && jsx(IconOption, { children: itemOption?.startIcon }), itemOption?.description] }) }, index));
+                    }) }))] }) }));
+}
+
+export { MenuMore as default };

package/dist/esm/src/components/menu-more/menuMoreStyles.js

@@ -0,0 +1,136 @@
+import Button from '@mui/material/Button';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import styled from 'styled-components';
+
+styled.p `
+  color: white;
+  padding-left: 5px;
+  font-size: 16px;
+`;
+const ButtonMore = styled(Button) `
+  width: 30px !important;
+  min-width: 30px !important;
+  max-width: 30px !important;
+  height: 30px !important;
+  margin: 0px !important;
+  padding: 0px !important;
+  display: flex !important;
+  justify-content: center !important;
+  border-radius: 12px !important;
+  background-color: transparent !important;
+`;
+const MenuCustom = styled(Menu) `
+  margin-top: ${({ $isArrowInMenu }) => ($isArrowInMenu ? '8px' : '15px')};
+  margin-left: 30px;
+  overflow: hidden;
+  border-radius: 8px;
+
+  & .MuiPaper-root {
+    border-radius: 8px !important;
+    box-shadow: 0px 15px 20px -20px rgba(34, 34, 34, 0.15), 0px 3px 10px 0px rgba(0, 0, 0, 0.15);
+    overflow: visible;
+    background: ${({ $isDarkMode }) => $isDarkMode ? '#1f1f1f' : '#00000000'};
+    ${({ $isArrowInMenu, $isDarkMode }) => $isArrowInMenu &&
+    `&:before {
+        content: "";
+        position: absolute;
+        top: -15px;
+        right: 8.5px;
+        border-top: 6px solid transparent;
+        border-bottom: 10px solid ${$isDarkMode ? '#1f1f1f' : '#EBEBEB'};
+        border-left: 8px solid transparent;
+        border-right: 8px solid transparent;
+      }
+
+      &:after {
+        content: "";
+        position: absolute;
+        top: -14px;
+        right: 8.5px;
+        border-top: 6px solid transparent;
+        border-bottom: 10px solid ${$isDarkMode ? '#1f1f1f' : '#FFF'};
+        border-left: 8px solid transparent;
+        border-right: 8px solid transparent;
+      }`}
+  }
+  ul {
+    box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.15), 0px 15px 20px -20px rgba(34, 34, 34, 0.15);
+    padding-top: 0px;
+    padding-bottom: 0px;
+    border: 1px solid ${({ $isDarkMode }) => ($isDarkMode ? '#1f1f1f !important;' : '#EBEBEB !important;')}!important;
+    border-radius: 8px !important;
+    overflow: hidden;
+    background: ${({ $isDarkMode }) => ($isDarkMode ? '#1f1f1f !important;' : '#FFF !important;')};
+    min-width: 160px;
+    width: auto;
+    /* &:hover {
+    background:${({ $isDarkMode }) => ($isDarkMode ? '#525252 !important;' : '#FFF !important;')};
+    border: 1px solid ${({ $isDarkMode }) => ($isDarkMode ? '#525252 !important;' : '#EBEBEB !important;')} !important;
+  } */
+    li {
+      ${({ $isPaddingInMenu }) => $isPaddingInMenu && `padding-left: 25px; !important;`}
+    }
+  }
+`;
+styled(MenuItem) `
+  background-color: ${({ theme, $isDarkMode }) => $isDarkMode ? `#1f1f1f !important;` : theme.colors.shadeWhite} !important;
+  ${({ $isPaddingInMenu }) => $isPaddingInMenu && `padding-right: 45px !important;`}
+  margin: 1px!important;
+  transition: none !important;
+  animation: none !important;
+  &:hover {
+    background-color: ${({ $isDarkMode }) => ($isDarkMode ? `#525252 !important;` : `#F7F9FC !important;`)};
+  }
+  &:active {
+    background-color: ${({ $isDarkMode }) => ($isDarkMode ? `#525252 !important;` : `#FCF3EB !important;`)};
+  }
+`;
+styled(MenuItem) `
+  color: white !important;
+  background-color: #f5792a !important;
+
+  display: flex;
+  flex-direction: row;
+  &:hover {
+    background-color: #fd9350 !important;
+  }
+`;
+styled.div `
+  margin-left: 10px;
+  padding-top: 1px;
+  font-family: 'PT Sans';
+  font-style: normal;
+  font-weight: 400;
+  font-size: 16px;
+  /* line-height: 17.6px; */
+`;
+const IconOption = styled.div `
+  /* width: 20px;
+  height: 30px; */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+const ButtonMenuNotification = styled.button `
+  width: 100% !important;
+  text-decoration: none !important;
+  color: ${({ $isColor }) => ($isColor ? $isColor : `#FFFFF`)} !important;
+  padding: ${({ $isContainerOptions }) => $isContainerOptions ? '4px 10px 4px 8px' : ' 6px 16px !important'};
+  border: none !important;
+  background: transparent !important;
+  font-family: 'PT Sans' !important;
+  font-style: normal !important;
+  font-weight: 400 !important;
+  font-size: 16px !important;
+  display: flex !important;
+  justify-content: start !important;
+  align-items: center !important;
+  gap: 8px !important;
+  cursor: ${({ disabled }) => disabled ? 'default !important' : 'pointer !important'};
+  :hover {
+    background-color: ${({ $isDarkMode }) => ($isDarkMode ? ` rgb(82, 82, 82) !important` : `#F7F9FC !important;`)};
+  }
+`;
+
+export { ButtonMenuNotification, ButtonMore, IconOption, MenuCustom };

package/dist/esm/src/components/mini-button/index.js

@@ -0,0 +1,15 @@
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { useState } from 'react';
+import '../../shared/global.css.js';
+import { ThemeProvider } from 'styled-components';
+import { FRSTTheme } from '../../theme/index.js';
+import { Button } from './miniButtonStyle.js';
+import Tooltip from '../DS/tooltip/index.js';
+
+function MiniButton({ variant, label, disabled, onClick, styles, active, tooltipText, darkMode, configColor }) {
+    const [isTooltipActive, setIsTooltipActive] = useState(false);
+    const generateButtonComponent = () => (jsx(Button, { onClick: (e) => !disabled && onClick(e), disabled: disabled, variant: variant, style: { ...styles }, active: !!active, isTooltipActive: isTooltipActive, darkMode: darkMode, configColor: configColor, children: label }));
+    return (jsx(ThemeProvider, { theme: { ...FRSTTheme }, children: tooltipText ? (jsx(Tooltip, { direction: "bottom", content: tooltipText, trigger: "hover", width: tooltipText.length > 18 ? "220px" : "100px", height: "auto", style: { top: '50px', textAlign: 'center' }, setIsActive: setIsTooltipActive, children: generateButtonComponent() })) : (jsx(Fragment, { children: generateButtonComponent() })) }));
+}
+
+export { MiniButton as default };

package/dist/esm/src/components/mini-button/miniButtonStyle.js

@@ -0,0 +1,108 @@
+import styled, { css } from 'styled-components';
+
+const Button = styled.div `
+    ${({ variant, disabled, active, theme, isTooltipActive, darkMode, configColor }) => {
+    let styleVariant = {
+        'primary': css `
+                    display: flex;
+                    flex-direction: row;
+                    align-items: center;
+                    padding: 4px 16px;
+                    gap: 8px;
+                    width: fit-content;
+                    height: 32px;
+                    background: ${disabled ? '#BDBDBD' : configColor ? configColor : '#F26818'};
+                    border-radius: 8px;
+                    cursor: ${disabled ? 'default' : 'pointer'};
+                    font-family: 'Work Sans';
+                    font-style: normal;
+                    font-weight: 700;
+                    font-size: 16px;
+                    line-height: 19px;
+                    display: flex;
+                    align-items: center;
+                    color: ${({ theme }) => theme.colors.shadeWhite};
+                    user-select:none;
+                    &:hover {
+                        background: ${disabled ? '#BDBDBD' : configColor ? `${configColor}80` : '#D14211'};
+                    }
+                `,
+        'secondary': css `
+                    font-family: 'PT Sans';
+                    font-style: normal;
+                    font-weight: 700;
+                    font-size: 16px;
+                    width: fit-content;
+                    color: ${({ theme }) => disabled ? theme.colors.borderPrimary : (darkMode ? theme.colors.neutralsGrey7 : theme.colors.neutralsGrey2)};
+                    cursor: pointer;
+                    user-select:none;
+                    &:hover {
+                        color: ${({ theme }) => disabled ? theme.colors.borderPrimary : theme.colors.messageError1};
+                    }
+                    &:active {
+                        color: ${({ theme }) => disabled ? theme.colors.borderPrimary : theme.colors.secondary5};
+                        text-decoration: underline;
+                    }
+                    ${active && `color : ${theme.colors.primary1}`}
+                `,
+        'terciary': css `
+                font-family: 'PT Sans';
+                font-style: normal;
+                font-weight: 700;
+                font-size: 16px;
+                width: fit-content;
+                display: inline-flex;
+                padding: 4px;
+                align-items: center;
+                border-radius: 8px;
+
+
+                color: ${({ theme }) => disabled ? theme.colors.borderPrimary : (darkMode ? theme.colors.neutralsGrey7 : theme.colors.neutralsGrey2)};
+                cursor: pointer;
+                user-select:none;
+                &:hover {
+                    background-color:  ${({ theme }) => disabled ? theme.colors.borderPrimary : (darkMode ? '#272727' : theme.colors.neutralsGrey9)};
+                }
+                &:active {
+                    color: ${({ theme }) => disabled ? theme.colors.borderPrimary : (darkMode ? theme.colors.neutralsGrey7 : theme.colors.neutralsGrey1)};
+                    background-color:  ${({ theme }) => disabled ? theme.colors.borderPrimary : (darkMode ? '#3D3D3D' : theme.colors.neutralsGrey9)};
+                }
+                ${active && `color : ${theme.colors.primary1}`}
+            `,
+        'active-primary': css `
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            padding: 4px 16px;
+            gap: 8px;
+            width: fit-content;
+            height: 37px;
+            background: ${({ theme }) => disabled ? theme.colors.borderPrimary : theme.colors.shadeWhite};
+            border-radius: 8px;
+            border: solid 2px ${({ theme }) => disabled ? theme.colors.borderPrimary : theme.colors.primary1};
+            cursor: ${disabled ? 'default' : 'pointer'};
+            font-family: PT Sans;
+            font-size: 16px;
+            font-weight: 700;
+            line-height: 21px;
+            letter-spacing: 0em;
+            text-align: left;            
+            color: ${({ theme }) => disabled ? theme.colors.shadeWhite : theme.colors.primary1};
+            &:hover {
+                background: ${({ theme }) => disabled ? theme.colors.borderPrimary : theme.colors.primary1};
+                color:  ${({ theme }) => theme.colors.shadeWhite};
+                box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
+            }
+
+            ${(isTooltipActive || active) && `color : ${theme.colors.shadeWhite};`}
+            ${(active) && `box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);`}
+            ${(isTooltipActive || active) && `background : ${theme.colors.primary1};`}
+            ${disabled && `background : ${theme.colors.borderPrimary};`}
+            ${disabled && `color : ${theme.colors.shadeWhite};`}
+        `
+    };
+    return styleVariant[variant];
+}}
+`;
+
+export { Button };

package/dist/esm/src/components/modal/modalBase/index.js

@@ -0,0 +1,31 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Modal, Box, Stack } from '@mui/material';
+import style from './modalBase.module.css.js';
+import { CloseIcon } from '../../../shared/icons.js';
+import Rating from '../../EBR/rating/index.js';
+import { useState, useEffect } from 'react';
+
+function ModalBase(props) {
+    const [currentRating, setCurrentRating] = useState(props.rating);
+    useEffect(() => {
+        if (props.rating) {
+            setCurrentRating(props.rating);
+        }
+    }, [props.rating]);
+    return (jsx(Modal, { open: props.open, onClose: props.handleClose, children: jsxs(Box, { id: `modal-video${(props.title ? props.title : '').replace(/( )+/g, '')}`, className: style.modalBox, style: {
+                height: props.showRating ? '80%' : '400px',
+                maxHeight: props.showRating ? '620px' : '400px',
+            }, children: [jsxs(Stack, { flexDirection: "row", alignItems: "flex-start", justifyContent: "space-between", px: 3, children: [jsx(Box, { textAlign: "left", children: props.title }), jsx(Box, { className: style.fechar, onClick: props.handleClose, children: jsx(CloseIcon, {}) })] }), jsxs(Box, { p: 3, children: [jsx(Box, { width: "100%", style: {
+                                display: 'flex',
+                                justifyContent: 'center'
+                            }, children: props.children }), props.showRating && (jsx(Box, { style: {
+                                position: "absolute",
+                                bottom: "17px",
+                                right: "25px",
+                            }, children: jsxs(Box, { style: { maxWidth: 240 }, children: [jsx("p", { style: { textAlign: 'left', fontSize: 14, fontWeight: 400 }, children: props.ratingDescription }), jsx(Box, { style: { display: 'flex', justifyContent: 'flex-end' }, children: jsx(Rating, { isVisibleNumberRating: true, marginStars: "3.5px", orientation: "horizontal", qtdStars: 5, rating: currentRating, sizeStars: 25, handleRating: (e) => {
+                                                setCurrentRating(e);
+                                                props.handleChangeRating(props.recommendationId, e);
+                                            }, disabled: false }) })] }) }))] })] }) }));
+}
+
+export { ModalBase as default };