frst-components 0.36.9 → 0.38.0

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

@@ -0,0 +1,150 @@
+import styled from 'styled-components';
+
+const BannerContainer = styled.div `
+  background: ${(props) => props.$backgroundBanner};
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  position: relative;
+  font-family: 'Work Sans';
+  width: 100%;
+  height: 214px;
+  cursor: default;
+  padding: 60px 80px 60px 120px;
+  border-radius: 0px;
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center;
+`;
+const ConfigButton = styled.div `
+  position: absolute;
+  right: 0;
+  margin-right: 83px;
+`;
+const ConfigContainer = styled.div `
+  width: 350px;
+  height: 448px;
+  border-radius: 8px;
+  border: 1px solid #bdbdbd;
+  box-shadow: 0px 25px 18px -20px rgba(34, 34, 34, 0.15);
+  background-color: #fff;
+  font-family: 'PT Sans', 'PTSans-Regular';
+  padding: 16px;
+  position: absolute;
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-start;
+  flex-direction: column;
+  right: 0;
+  margin-right: 83px;
+  top: 72px;
+`;
+const EnableText = styled.div `
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+const InputTextColor = styled.div `
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: relative;
+  padding: 8px 0;
+  margin-top: 8px;
+  border-top: 1px solid #ebebeb;
+  border-bottom: 1px solid #ebebeb;
+`;
+const InputBgColor = styled.div `
+  width: 100%;
+  display: flex;
+  position: relative;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 20px;
+`;
+const BgInput = styled.div `
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 0;
+  margin-top: 8px;
+  border-top: 1px solid #ebebeb;
+  border-bottom: 1px solid #ebebeb;
+
+  input[type='file'] {
+    display: none;
+  }
+  label {
+    display: flex;
+    align-items: center;
+    color: #0645ad;
+    font-size: 16;
+    font-weight: 700;
+    cursor: pointer;
+  }
+`;
+styled.div `
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 4px;
+`;
+const ActionButtons = styled.div `
+  display: flex;
+  justify-content: space-between;
+  width: 220px;
+  margin: 0 auto;
+  margin-top: 16px;
+  align-items: center;
+
+  button {
+    color: #0b0080;
+    font-family: 'PT Sans', 'PTSans-Bold';
+    font-size: 16px;
+    font-weight: 700;
+    background: none;
+    border: none;
+
+    :last-child {
+      justify-content: center;
+      padding: 9px 16px;
+      height: 48px;
+      border: none;
+      cursor: pointer;
+      border-radius: 8px;
+      font-family: 'Work Sans';
+      font-style: normal;
+      font-weight: 700;
+      font-size: 16px;
+      line-height: 19px;
+      box-shadow: none;
+      background-color: ${(props) => (props.isLoading ? '#ebebeb' : '#ff4d0d')};
+      color: #ffffff;
+
+      :hover {
+        cursor: ${(props) => (props.isLoading ? 'no-drop' : 'pointer')};
+      }
+    }
+
+    :hover {
+      cursor: pointer;
+    }
+  }
+`;
+const LoadingBanner = styled.div `
+  background: linear-gradient(90deg, rgba(123, 129, 136, 0) 6.43%, rgba(123, 129, 136, 0.2) 22.38%), #d9d9d9;
+  color: transparent;
+  height: 215px;
+  width: 100%;
+  -webkit-animation-duration: 1s;
+  -webkit-animation-fill-mode: forwards;
+  -webkit-animation-iteration-count: infinite;
+  -webkit-animation-name: placeholderShimmer;
+  -webkit-animation-timing-function: linear;
+`;
+
+export { ActionButtons, BannerContainer, BgInput, ConfigButton, ConfigContainer, EnableText, InputBgColor, InputTextColor, LoadingBanner };

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

@@ -0,0 +1,124 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import Button from '../../buttons/index.js';
+import TextField from '../../form-elements/textfield/index.js';
+import { Modal, Switch, Popover } from '@mui/material';
+import { useState, useEffect, useMemo } from 'react';
+import { SketchPicker } from 'react-color';
+import PopOverLXP from '../popOverLXP-antigo/index.js';
+import { LoadingBanner, BannerContainer, ConfigButton, ConfigContainer, EnableText, InputTextColor, InputBgColor, BgInput, ActionButtons } from './bannerLxp.js';
+
+function BannerLxp(props) {
+    const [openConfig, setOpenConfig] = useState(false);
+    const [disableText, setDisableText] = useState(false);
+    const [titleText, setTitleText] = useState('');
+    const [colorTitle, setColorTitle] = useState('');
+    const [backgroundColor, setBackgroundColor] = useState('');
+    // const [oldBgColor, setOldBgColor] = useState("");
+    const [backgroundImage, setBackgroundImage] = useState('');
+    const [fixImage, setFixImage] = useState(false);
+    const [selectedFile, setSelectedFile] = useState({});
+    const [displayTitleColorPicker, setDisplayTitleColorPicker] = useState(false);
+    const [displayBackgroundColorPicker, setDisplayBackgroundColorPicker] = useState(false);
+    const [anchor, setAnchor] = useState(null);
+    const handleOpenConfig = () => setOpenConfig(true);
+    const idBg = displayBackgroundColorPicker ? 'simple-popover' : undefined;
+    const idTitle = displayTitleColorPicker ? 'simple-popover' : undefined;
+    const onSave = () => {
+        setOpenConfig(false);
+        props.onSaveInfo([titleText, disableText, colorTitle, backgroundColor, fixImage]);
+    };
+    const onCancell = () => {
+        props.bgColor && setBackgroundColor(props.bgColor ?? '');
+        props.bgSrc && setBackgroundImage(props.bgSrc ?? '');
+        props.title && setTitleText(props.title ?? '');
+        setColorTitle(props.titleColor ?? '');
+        setDisableText(props.isDisabledTitle);
+        setOpenConfig(false);
+        props?.onCancell && props?.onCancell();
+    };
+    const handleOpenTitleColorPicker = (event) => {
+        setDisplayTitleColorPicker(!displayTitleColorPicker);
+        setAnchor(event.currentTarget);
+    };
+    const handleCloseTitleColorPicker = () => setDisplayTitleColorPicker(false);
+    const handleOpenBackgroundColorPicker = (event) => {
+        setDisplayBackgroundColorPicker(!displayBackgroundColorPicker);
+        setAnchor(event.currentTarget);
+    };
+    const handleCloseBackgroundColorPicker = () => setDisplayBackgroundColorPicker(false);
+    const handleChangeTitleColor = (color, event) => {
+        setColorTitle(color.hex);
+    };
+    const handleChangeBackgroundColor = (color) => {
+        setBackgroundColor(color.hex);
+        setBackgroundImage('');
+    };
+    const handleFileSelected = (file) => {
+        const reader = new FileReader();
+        reader.onload = function (e) {
+            setSelectedFile(e.target.result);
+        };
+        reader.readAsDataURL(file);
+        setBackgroundColor('');
+        props.handleChangeBanner(file);
+        return file;
+    };
+    useEffect(() => {
+        setDisableText(props?.isDisabledTitle);
+        setBackgroundColor(props?.bgColor);
+        // props?.bgColor && setOldBgColor(props?.bgColor);
+        setBackgroundImage(props?.bgSrc);
+        setDisableText(props.isDisabledTitle);
+    }, [props]);
+    useEffect(() => {
+        if (props?.bgSrc)
+            setBackgroundImage(props?.bgSrc);
+    }, [props?.bgSrc]);
+    useMemo(() => {
+        setTitleText(props?.title);
+        setColorTitle(props?.titleColor);
+        setDisableText(props.isDisabledTitle);
+    }, [props?.title, props?.titleColor, props.isDisabledTitle]);
+    return (jsxs(Fragment, { children: [props?.isLoading ? (jsx(LoadingBanner, {})) : (jsxs(BannerContainer, { "$backgroundBanner": props?.bgColor || `url(${props?.bgSrc})`, style: {
+                    ...props.style,
+                    objectFit: 'fill'
+                }, children: [!props?.isDisabledTitle && (jsx("span", { style: {
+                            color: props?.titleColor,
+                            fontSize: 40,
+                            fontWeight: 700
+                        }, children: props?.title })), props?.showBannerConfigs && (jsx(ConfigButton, { className: "configButton", children: jsx(Button, { variant: "primary", label: "Configura\u00E7\u00E3o de capa", handleClick: handleOpenConfig }) }))] })), jsx(Modal, { open: openConfig, onClose: onCancell, children: jsxs(ConfigContainer, { style: { ...props.style }, children: [jsx("span", { style: {
+                                fontWeight: 700,
+                                fontSize: 16,
+                                color: '#000000',
+                                marginBottom: 24
+                            }, children: "T\u00EDtulo" }), jsx(TextField, { label: "Alterar t\u00EDtulo do KnowHub", placeholder: "Digite seu t\u00EDtulo aqui", style: { width: '100%' }, value: titleText ?? props?.title, onChange: (e) => setTitleText(e.target.value) }), jsxs(EnableText, { children: [jsx("span", { children: "Mostrar texto" }), jsx(Switch, { checked: !disableText, onChange: () => setDisableText(!disableText), sx: {
+                                        '& .MuiSwitch-switchBase.Mui-checked': {
+                                            color: '#FFF'
+                                        },
+                                        '& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': {
+                                            backgroundColor: '#FF4D0D !important',
+                                            opacity: 1
+                                        }
+                                    } })] }), jsxs(InputTextColor, { children: [jsx("span", { children: "Cor do t\u00EDtulo" }), jsx("button", { "aria-describedby": idTitle, style: {
+                                        cursor: 'pointer',
+                                        width: 23,
+                                        height: 23,
+                                        borderRadius: 8,
+                                        border: '1px solid #BDBDBD',
+                                        backgroundColor: colorTitle
+                                    }, onClick: handleOpenTitleColorPicker }), jsx(Popover, { id: idTitle, open: displayTitleColorPicker, onClose: handleCloseTitleColorPicker, anchorEl: anchor, anchorOrigin: { vertical: 'bottom', horizontal: 'right' }, children: jsx(PopOverLXP, { variant: "upRight", children: jsx(SketchPicker, { color: props?.titleColor, onChangeComplete: handleChangeTitleColor }) }) })] }), jsx("span", { style: {
+                                marginTop: 24,
+                                fontWeight: 700,
+                                fontSize: 16,
+                                color: '#000000'
+                            }, children: "Background" }), jsxs(InputBgColor, { className: "inputBgColor", children: [jsx("span", { children: "Cor de fundo" }), jsx("button", { "aria-describedby": idBg, style: {
+                                        cursor: 'pointer',
+                                        width: 23,
+                                        height: 23,
+                                        borderRadius: 8,
+                                        border: '1px solid #BDBDBD',
+                                        backgroundColor: backgroundColor
+                                    }, onClick: handleOpenBackgroundColorPicker }), jsx(Popover, { id: idBg, open: displayBackgroundColorPicker, onClose: handleCloseBackgroundColorPicker, anchorEl: anchor, anchorOrigin: { vertical: 'bottom', horizontal: 'right' }, children: jsx(PopOverLXP, { variant: "upRight", children: jsx(SketchPicker, { color: props?.bgColor, onChangeComplete: handleChangeBackgroundColor }) }) })] }), jsxs(BgInput, { children: [jsx("span", { children: "Imagem de fundo" }), jsxs("label", { htmlFor: "backgroundSelector", children: [' ', "\u00A0 Selecionar"] }), jsx("input", { type: "file", id: "backgroundSelector", accept: ".jpg, .jpeg, .png", onChange: (e) => handleFileSelected(e.target.files[0]) })] }), jsxs(ActionButtons, { isLoading: props?.isLoading, children: [jsx("button", { onClick: onCancell, children: "Cancelar" }), jsx("span", { children: "ou" }), jsx("button", { onClick: onSave, disabled: props?.isLoading, children: props?.isLoading ? props?.buttonSavingLabel || 'Carregando...' : 'Salvar' })] })] }) })] }));
+}
+
+export { BannerLxp as default };

package/dist/esm/src/components/LXP/buttonContent/buttonContentStyle.js

@@ -0,0 +1,63 @@
+import styled, { css } from 'styled-components';
+
+const variantStyles = (variant = 'contained') => ({
+    content: css `
+        background-color: #FFFFFF;
+
+        color: ${({ theme }) => theme.colors.neutralsGrey4};
+        border: 1px solid ${({ theme }) => theme.colors.neutralsGrey4};
+
+        &:hover {
+            color: ${({ theme }) => theme.colors.neutralsGrey2};
+            border: 5px solid ${({ theme }) => theme.colors.neutralsGrey2};
+        }
+
+        &:active {
+            color: ${({ theme }) => theme.colors.neutralsGrey2};
+            border: 1px solid ${({ theme }) => theme.colors.neutralsGrey2};
+        }
+
+        &:focus {
+            border: 5px solid rgba(211,211,211,0.6);
+            -webkit-background-clip: padding-box;
+            background-clip: padding-box;
+        }
+
+        &:disabled {
+            color: ${({ theme }) => theme.colors.neutralsGrey2};
+            border: 1px solid ${({ theme }) => theme.colors.neutralsGrey2};
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+    `
+}[variant]);
+const ButtonStartIcon = styled.button `
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: start;
+    padding: 9px 16px;
+    width: 386px;
+    height: 64px;
+    border: none;
+    cursor: pointer;
+    border-radius: 8px;
+    box-sizing: border-box;
+    transition: all 0.2s ease-in-out;
+    font-family: 'Work Sans';
+    font-style: normal;
+    font-weight: 700;
+    font-size: 16px;
+    line-height: 19px;
+    box-shadow: none;    
+
+    & > svg {        
+        height: 40px;
+        width: 40px;
+        margin-right: 21px;        
+    }
+
+    ${({ variant }) => variantStyles(variant)}
+`;
+
+export { ButtonStartIcon };

package/dist/esm/src/components/LXP/buttonContent/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 { ButtonStartIcon } from './buttonContentStyle.js';
+
+function ButtonContent({ variant, label, disabled, startIcon, style, handleClick }) {
+    return (jsx(ThemeProvider, { theme: FRSTTheme, children: jsxs(ButtonStartIcon, { style: { ...style }, variant: variant, disabled: disabled, onClick: handleClick, children: [startIcon, label] }) }));
+}
+
+export { ButtonContent as default };

package/dist/esm/src/components/LXP/calendarLxp/calendar.css.js

@@ -0,0 +1,6 @@
+import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".rdrCalendarWrapper{\n  color: #000000;\n  font-size: 16px;\n  font-family: 'PT Sans';\n}\n\n.rdrDateDisplayWrapper{\n  background-color: rgb(239, 242, 247);\n}\n\n.rdrDateDisplay{\n  margin: 0.833em;\n}\n\n.rdrDateDisplayItem{\n  border-radius: 4px;\n  background-color: rgb(255, 255, 255);\n  box-shadow: 0 1px 2px 0 rgba(35, 57, 66, 0.21);\n  border: 1px solid transparent;\n}\n\n.rdrDateDisplayItem input{\n    cursor: pointer;\n    height: 2.5em;\n    line-height: 2.5em;\n    border: 0px;\n    background: transparent;\n    width: 100%;\n    color: #222222;\n  }\n\n.rdrDateDisplayItemActive{\n  border-color: currentColor;\n}\n\n.rdrDateDisplayItemActive input{\n    color: #7d888d\n  }\n\n.rdrMonthAndYearWrapper {\n  align-items: center;\n  height: 60px;\n  padding-top: 10px;\n}\n\n.rdrMonthAndYearPickers{\n  font-weight: 600;\n}\n\n.rdrMonthAndYearPickers select{\n    -moz-appearance: none;\n         appearance: none;\n    -webkit-appearance: none;\n    border: 0;\n    background: transparent;\n    padding: 10px 30px 10px 10px;\n    border-radius: 4px;\n    outline: 0;\n    color: #FF4D0D;\n    background: url(\"data:image/svg+xml;utf8,<svg width='9px' height='6px' viewBox='0 0 9 6' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><g id='Artboard' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' transform='translate(-636.000000, -171.000000)' fill-opacity='0.368716033'><g id='input' transform='translate(172.000000, 37.000000)' fill='%230E242F' fill-rule='nonzero'><g id='Group-9' transform='translate(323.000000, 127.000000)'><path d='M142.280245,7.23952813 C141.987305,6.92353472 141.512432,6.92361662 141.219585,7.23971106 C140.926739,7.5558055 140.926815,8.06821394 141.219755,8.38420735 L145.498801,13 L149.780245,8.38162071 C150.073185,8.0656273 150.073261,7.55321886 149.780415,7.23712442 C149.487568,6.92102998 149.012695,6.92094808 148.719755,7.23694149 L145.498801,10.7113732 L142.280245,7.23952813 Z' id='arrow'></path></g></g></g></svg>\") no-repeat;\n    background-position: right 8px center;\n    cursor: pointer;\n    text-align: center;\n    display: none;\n  }\n\n.rdrMonthAndYearPickers select:hover{\n      background-color: rgba(187, 22, 22, 0.07);\n    }\n\n.rdrMonthPicker, .rdrYearPicker{\n  margin: 0 5px\n}\n\n.rdrNextPrevButton {\n  display: block;\n  width: 24px;\n  height: 24px;\n  margin: 0 0.833em;\n  padding: 0;\n  border: 0;\n  border-radius: 5px;\n  background: #EFF2F7\n}\n\n.rdrNextPrevButton:hover{\n    background: #E1E7F0;\n  }\n\n.rdrNextPrevButton i {\n    display: block;\n    width: 0;\n    height: 0;\n    padding: 0;\n    text-align: center;\n    border-style: solid;\n    margin: auto;\n    transform: translate(-3px, 0px);\n  }\n\n.rdrPprevButton i {\n    border-width: 4px 6px 4px 4px;\n    border-color: transparent rgb(52, 73, 94) transparent transparent;\n    transform: translate(-3px, 0px);\n  }\n\n.rdrNextButton i {\n    margin: 0 0 0 7px;\n    border-width: 4px 4px 4px 6px;\n    border-color: transparent transparent transparent rgb(52, 73, 94);\n    transform: translate(3px, 0px);\n  }\n\n.rdrWeekDays {\n  padding: 0 0.833em;\n}\n\n.rdrMonth{\n  padding: 0 0.833em 1.666em 0.833em;\n}\n\n.rdrMonth .rdrWeekDays {\n    padding: 0;\n  }\n\n.rdrMonths.rdrMonthsVertical .rdrMonth:first-child .rdrMonthName{\n  display: none;\n}\n\n.rdrWeekDay {\n  font-weight: 400;\n  line-height: 2.667em;\n  color: #FF4D0D;\n}\n\n.rdrDay {\n  background: transparent;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n  border: 0;\n  padding: 0;\n  line-height: 3.000em;\n  height: 3.000em;\n  text-align: center;\n  color: #1d2429;\n}\n\n.rdrDay:focus {\n    outline: 0;\n  }\n\n.rdrDayNumber {\n  outline: 0;\n  font-weight: 300;\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  top: 5px;\n  bottom: 5px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.rdrDayToday .rdrDayNumber span{\n  font-weight: 500\n}\n\n.rdrDayToday:not(.rdrDayPassive) .rdrInRange ~ .rdrDayNumber span:after,.rdrDayToday:not(.rdrDayPassive) .rdrStartEdge ~ .rdrDayNumber span:after,.rdrDayToday:not(.rdrDayPassive) .rdrEndEdge ~ .rdrDayNumber span:after,.rdrDayToday:not(.rdrDayPassive) .rdrSelected ~ .rdrDayNumber span:after{\n      background: #fff;\n    }\n\n.rdrDay:not(.rdrDayPassive) .rdrInRange ~ .rdrDayNumber span,.rdrDay:not(.rdrDayPassive) .rdrStartEdge ~ .rdrDayNumber span,.rdrDay:not(.rdrDayPassive) .rdrEndEdge ~ .rdrDayNumber span,.rdrDay:not(.rdrDayPassive) .rdrSelected ~ .rdrDayNumber span{\n          color: rgba(255, 255, 255, 0.85);\n        }\n\n.rdrSelected, .rdrInRange, .rdrStartEdge, .rdrEndEdge{\n  background: currentColor;\n  position: absolute;\n  top: 5px;\n  left: 0;\n  right: 0;\n  bottom: 5px;\n}\n\n.rdrSelected{\n  left: 2px;\n  right: 2px;\n}\n\n\n.rdrStartEdge{\n  border-top-left-radius: 1.042em;\n  border-bottom-left-radius: 1.042em;\n  left: 2px;\n}\n\n.rdrEndEdge{\n  border-top-right-radius: 1.042em;\n  border-bottom-right-radius: 1.042em;\n  right: 2px;\n}\n\n.rdrSelected{\n  border-radius: 1.042em;\n}\n\n.rdrDayStartOfMonth .rdrInRange, .rdrDayStartOfMonth .rdrEndEdge, .rdrDayStartOfWeek .rdrInRange, .rdrDayStartOfWeek .rdrEndEdge{\n    border-top-left-radius: 1.042em;\n    border-bottom-left-radius: 1.042em;\n    left: 2px;\n  }\n\n.rdrDayEndOfMonth .rdrInRange,  .rdrDayEndOfMonth .rdrStartEdge,  .rdrDayEndOfWeek .rdrInRange,  .rdrDayEndOfWeek .rdrStartEdge{\n    border-top-right-radius: 1.042em;\n    border-bottom-right-radius: 1.042em;\n    right: 2px;\n  }\n\n.rdrDayStartOfMonth .rdrDayInPreview, .rdrDayStartOfMonth .rdrDayEndPreview, .rdrDayStartOfWeek .rdrDayInPreview, .rdrDayStartOfWeek .rdrDayEndPreview{\n    border-top-left-radius: 1.333em;\n    border-bottom-left-radius: 1.333em;\n    border-left-width: 1px;\n    left: 0px;\n  }\n\n.rdrDayEndOfMonth .rdrDayInPreview, .rdrDayEndOfMonth .rdrDayStartPreview, .rdrDayEndOfWeek .rdrDayInPreview, .rdrDayEndOfWeek .rdrDayStartPreview{\n   border-top-right-radius: 1.333em;\n   border-bottom-right-radius: 1.333em;\n   border-right-width: 1px;\n   right: 0px;\n }\n\n.rdrDayStartPreview, .rdrDayInPreview, .rdrDayEndPreview{\n  background: rgba(255, 255, 255, 0.09);\n  position: absolute;\n  top: 3px;\n  left: 0px;\n  right: 0px;\n  bottom: 3px;\n  pointer-events: none;\n  border: 0px solid currentColor;\n  z-index: 1;\n}\n\n.rdrDayStartPreview{\n  border-top-width: 1px;\n  border-left-width: 1px;\n  border-bottom-width: 1px;\n  border-top-left-radius: 1.333em;\n  border-bottom-left-radius: 1.333em;\n  left: 0px;\n}\n\n.rdrDayInPreview{\n  border-top-width: 1px;\n  border-bottom-width: 1px;\n}\n\n.rdrDayEndPreview{\n  border-top-width: 1px;\n  border-right-width: 1px;\n  border-bottom-width: 1px;\n  border-top-right-radius: 1.333em;\n  border-bottom-right-radius: 1.333em;\n  right: 2px;\n  right: 0px;\n}\n\n.rdrDefinedRangesWrapper{\n  font-size: 12px;\n  width: 226px;\n  border-right: solid 1px #eff2f7;\n  background: #fff;\n}\n\n.rdrDefinedRangesWrapper .rdrStaticRangeSelected{\n    color: currentColor;\n    font-weight: 600;\n  }\n\n.rdrStaticRange{\n  border: 0;\n  cursor: pointer;\n  display: block;\n  outline: 0;\n  border-bottom: 1px solid #eff2f7;\n  padding: 0;\n  background: #fff\n}\n\n.rdrStaticRange:hover .rdrStaticRangeLabel,.rdrStaticRange:focus .rdrStaticRangeLabel{\n      background: #eff2f7;\n    }\n\n.rdrStaticRangeLabel{\n  display: block;\n  outline: 0;\n  line-height: 18px;\n  padding: 10px 20px;\n  text-align: left;\n}\n\n.rdrInputRanges{\n  padding: 10px 0;\n}\n\n.rdrInputRange{\n  align-items: center;\n  padding: 5px 20px;\n}\n\n.rdrInputRangeInput{\n  width: 30px;\n  height: 30px;\n  line-height: 30px;\n  border-radius: 4px;\n  text-align: center;\n  border: solid 1px rgb(222, 231, 235);\n  margin-right: 10px;\n  color: rgb(108, 118, 122)\n}\n\n.rdrInputRangeInput:focus, .rdrInputRangeInput:hover{\n    border-color: rgb(180, 191, 196);\n    outline: 0;\n    color: #333;\n  }\n\n.rdrCalendarWrapper:not(.rdrDateRangeWrapper) .rdrDayHovered .rdrDayNumber:after{\n  content: '';\n  border: 1px solid currentColor;\n  border-radius: 1.333em;\n  position: absolute;\n  top: -2px;\n  bottom: -2px;\n  left: 0px;\n  right: 0px;\n  background: transparent;\n}\n\n.rdrDayPassive{\n  pointer-events: none;\n}\n\n.rdrDayPassive .rdrDayNumber span{\n    color: #AEB0B3;\n  }\n\n.rdrDayPassive .rdrInRange, .rdrDayPassive .rdrStartEdge, .rdrDayPassive .rdrEndEdge, .rdrDayPassive .rdrSelected, .rdrDayPassive .rdrDayStartPreview, .rdrDayPassive .rdrDayInPreview, .rdrDayPassive .rdrDayEndPreview{\n    display: none;\n  }\n\n.rdrDayDisabled {\n  background-color: rgb(248, 248, 248);\n}\n\n.rdrDayDisabled .rdrDayNumber span{\n    color: #aeb9bf;\n  }\n\n.rdrDayDisabled .rdrInRange, .rdrDayDisabled .rdrStartEdge, .rdrDayDisabled .rdrEndEdge, .rdrDayDisabled .rdrSelected, .rdrDayDisabled .rdrDayStartPreview, .rdrDayDisabled .rdrDayInPreview, .rdrDayDisabled .rdrDayEndPreview{\n    filter: grayscale(100%) opacity(60%);\n  }\n\n.rdrMonthName{\n  text-align: center;\n  font-weight: 700;\n  color: #FF4D0D;\n  padding: 0.833em;\n}\n";
+styleInject(css_248z);
+
+export { css_248z as default };

package/dist/esm/src/components/LXP/calendarLxp/calendarLxp.module.css.js

@@ -0,0 +1,7 @@
+import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".calendarLxp-module_containerCalendar__rGMXM {\n    display: flex;\n    position: relative;\n    width: fit-content;\n    min-height: 550px;\n    border-radius: 8px;\n    background-color: #FFF;\n}\n\n.calendarLxp-module_fechar__B-og5{\n    font-size: 12px;\n    color: #222222;\n\n    display: flex;\n    justify-content: right;\n    align-items: center;\n    position: absolute;\n    top: 0;\n    right: 0;\n\n    margin-right: 24px;\n    margin-top: 24px;\n    cursor: default;\n    \n}\n\n.calendarLxp-module_calendar__-C-pK {\n    padding: 32px;\n    display: inline-flex;\n    \n}\n\n.calendarLxp-module_btnSubmit__A-5NS {\n    position: absolute;\n    right: 0;\n    bottom: 0;\n    margin-right: 24px;\n    margin-bottom: 24px;\n}\n";
+var style = {"containerCalendar":"calendarLxp-module_containerCalendar__rGMXM","fechar":"calendarLxp-module_fechar__B-og5","calendar":"calendarLxp-module_calendar__-C-pK","btnSubmit":"calendarLxp-module_btnSubmit__A-5NS"};
+styleInject(css_248z);
+
+export { style as default };

package/dist/esm/src/components/LXP/calendarLxp/defaultRanges.js

@@ -0,0 +1,79 @@
+import { startOfWeek, endOfWeek, addDays, startOfDay, endOfDay, startOfMonth, endOfMonth, addMonths, startOfQuarter, endOfQuarter, addQuarters, startOfYear, endOfYear, isSameDay } from 'date-fns';
+
+const defineds = {
+    startOfWeek: startOfWeek(new Date()),
+    endOfWeek: endOfWeek(new Date()),
+    startOfLastWeek: startOfWeek(addDays(new Date(), -7)),
+    endOfLastWeek: endOfWeek(addDays(new Date(), -7)),
+    startOfToday: startOfDay(new Date()),
+    endOfToday: endOfDay(new Date()),
+    startOfYesterday: startOfDay(addDays(new Date(), -1)),
+    endOfYesterday: endOfDay(addDays(new Date(), -1)),
+    startOfMonth: startOfMonth(new Date()),
+    endOfMonth: endOfMonth(new Date()),
+    startOfLastMonth: startOfMonth(addMonths(new Date(), -1)),
+    endOfLastMonth: endOfMonth(addMonths(new Date(), -1)),
+    startOfQuarter: startOfQuarter(new Date()),
+    endOfQuarter: endOfQuarter(new Date()),
+    startOfLastQuarter: startOfQuarter(addQuarters(new Date(), -1)),
+    endOfLastQuarter: endOfQuarter(addQuarters(new Date(), -1)),
+    startOfYear: startOfYear(new Date()),
+    endOfYear: endOfYear(new Date()),
+};
+const staticRangeHandler = {
+    range: {},
+    isSelected(range) {
+        const definedRange = range;
+        return (isSameDay(range.startDate, definedRange.startDate) &&
+            isSameDay(range.endDate, definedRange.endDate));
+    },
+};
+function createStaticRanges(ranges) {
+    return ranges.map(range => ({ ...staticRangeHandler, ...range }));
+}
+const defaultStaticRanges = createStaticRanges([
+    {
+        label: 'Esta semana',
+        range: () => ({
+            startDate: defineds.startOfWeek,
+            endDate: defineds.endOfWeek,
+        }),
+    },
+    {
+        label: 'Semana passada',
+        range: () => ({
+            startDate: defineds.startOfLastWeek,
+            endDate: defineds.endOfLastWeek,
+        }),
+    },
+    {
+        label: 'Mês passado',
+        range: () => ({
+            startDate: defineds.startOfLastMonth,
+            endDate: defineds.endOfLastMonth,
+        }),
+    },
+    {
+        label: 'Este trimestre',
+        range: () => ({
+            startDate: defineds.startOfQuarter,
+            endDate: defineds.endOfQuarter
+        }),
+    },
+    {
+        label: 'Trimestre passado',
+        range: () => ({
+            startDate: defineds.startOfLastQuarter,
+            endDate: defineds.endOfLastQuarter
+        }),
+    },
+    {
+        label: 'Este ano',
+        range: () => ({
+            startDate: defineds.startOfYear,
+            endDate: defineds.endOfYear
+        }),
+    },
+]);
+
+export { createStaticRanges, defaultStaticRanges };

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

@@ -0,0 +1,26 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState } from 'react';
+import style from './calendarLxp.module.css.js';
+import { CloseIcon } from '../../../shared/icons.js';
+import Button from '../../buttons/index.js';
+import './calendar.css.js';
+import { Modal, Box } from '@mui/material';
+import { DefinedRange, DateRange } from 'react-date-range';
+import { pt } from 'date-fns/locale';
+import { defaultStaticRanges } from './defaultRanges.js';
+
+function CalendarLxp(props) {
+    const [newRange, setNewRange] = useState([
+        {
+            startDate: new Date(),
+            endDate: new Date(),
+            key: 'selection'
+        }
+    ]);
+    pt.options.weekStartsOn = 0;
+    return (jsx(Modal, { open: props.open, onClose: props.handleClose, children: jsxs(Box, { className: style.containerCalendar, style: { ...props.styles }, children: [jsx("div", { className: style.fechar, onClick: props.handleClose, children: jsx(CloseIcon, {}) }), jsxs("div", { className: style.calendar, children: [jsx("div", { style: { fontSize: 16 }, children: jsx(DefinedRange, { inputRanges: [], staticRanges: defaultStaticRanges, ranges: newRange, rangeColors: ['#0645AD'], onChange: item => setNewRange([item.selection]) }) }), jsx("div", { children: jsx(DateRange, { locale: pt, ranges: newRange, onChange: item => setNewRange([item.selection]), months: 2, direction: 'horizontal', rangeColors: ['#FF4D0D'], showDateDisplay: false, showPreview: false, weekdayDisplayFormat: 'EEEEE', preventSnapRefocus: true }) })] }), jsx("div", { className: style.btnSubmit, children: jsx(Button, { label: 'Aplicar', variant: 'primary', handleClick: () => {
+                            props.onSave([newRange[0].startDate, newRange[0].endDate]);
+                        } }) })] }) }));
+}
+
+export { CalendarLxp as default };

package/dist/esm/src/components/LXP/colorpicker/colorpickerStyles.js

@@ -0,0 +1,43 @@
+import styled from 'styled-components';
+
+const Container = styled.span `
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  width: ${props => props.width || '147px'};
+  height: ${props => props.height || '48px'};
+  padding: 12px 16px;
+  border: 1px solid #E0E0E0;
+  border-radius: 8px;
+  background: #EBEBEB;
+  
+
+  input[type="color"] {
+    -webkit-appearance: none;
+    border: none;
+    width: auto;
+    height: auto;
+    cursor: pointer;
+    background: none;
+    &::-webkit-color-swatch-wrapper {
+      padding: 0;
+      width: 23px;
+      height: 23px;
+    }
+    &::-webkit-color-swatch {
+      border: 1px solid #E0E0E0;
+      border-radius: 4px;
+      padding: 0;
+    }
+  }
+
+  input[type="text"] {
+    border: none;
+    width: 60px;
+    height: 18px;
+    font-size: 14px;
+    background: #EBEBEB;
+  }
+`;
+
+export { Container };

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

@@ -0,0 +1,20 @@
+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 } from './colorpickerStyles.js';
+import { useState } from 'react';
+
+const ColorPicker = props => {
+    return (jsxs(Container, { children: [jsx("input", { type: "text", ...props }), jsx("input", { type: "color", ...props })] }));
+};
+function Colorpicker({ width, height, color, }) {
+    const [state, updateState] = useState(color);
+    const handleInput = e => {
+        updateState(e.target.value);
+        color = state;
+    };
+    return (jsx(ThemeProvider, { theme: FRSTTheme, children: jsx(ColorPicker, { onChange: handleInput, value: state, width: width, height: height }) }));
+}
+
+export { Colorpicker as default };

package/dist/esm/src/components/LXP/contentSwitcher/contentSwitcherStyle.js

@@ -0,0 +1,94 @@
+import styled from 'styled-components';
+
+const Container = styled.div `
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;    
+    width: 180px;
+    height: 176px;
+    border: 1px solid ${({ theme }) => theme.colors.neutralsGrey5};
+    cursor: pointer;
+    border-radius: 8px;
+    box-sizing: border-box;
+    font-family: 'Work Sans';
+    font-style: normal;
+    font-weight: 500;
+    font-size: 20px;
+    line-height: 23px;
+    background-color: ${({ theme }) => theme.colors.shadeWhite};
+    
+    & > svg {        
+        max-height: ${({ sizeIcon }) => sizeIcon ? sizeIcon : '64px'};
+        height: 100%;
+        width: auto;
+    }
+
+    &:hover{
+        box-shadow: 0px 15px 5px -15px;  
+    }
+`;
+const ContentSwitcher = styled.button `
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    padding: 0 20px 0 20px!important;    
+    width: 180px;
+    height: 176px;
+    border: 1px solid ${({ theme }) => theme.colors.neutralsGrey5};
+    cursor: pointer;
+    border-radius: 8px;
+    box-sizing: border-box;
+    font-family: 'Work Sans';
+    font-style: normal;
+    font-weight: 500;
+    font-size: 20px;
+    line-height: 23px;
+    background-color: ${({ theme }) => theme.colors.shadeWhite};
+         
+    & > svg {        
+        height: 64px;
+        width: 64px;       
+    }
+
+    &:hover{
+        box-shadow: 0px 15px 5px -15px;    
+    }
+`;
+const ContentSwitcherSelected = styled.button `
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    padding: 0 20px 0 20px!important;
+    width: 180px;
+    height: 176px;
+    border: 1px solid ${({ theme }) => theme.colors.neutralsGrey5};
+    cursor: pointer;
+    border-radius: 8px;
+    box-sizing: border-box;
+    font-family: 'Work Sans';
+    font-style: normal;
+    font-weight: 500;
+    font-size: 20px;
+    line-height: 23px;
+    background-color: ${({ theme }) => theme.colors.primary1};
+    color: ${({ theme }) => theme.colors.shadeWhite};
+
+    & > svg {        
+        max-height: ${({ sizeIcon }) => sizeIcon ? sizeIcon : '64px'};
+        height: 100%;
+        width: auto;
+        stroke: #FFFFFF;       
+    }
+
+    /* &:hover{
+        background-color: ${({ theme }) => theme.colors.primary3} ;
+    } */
+`;
+
+export { Container, ContentSwitcher, ContentSwitcherSelected };

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

@@ -0,0 +1,10 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { ThemeProvider } from 'styled-components';
+import { FRSTTheme } from '../../../theme/index.js';
+import { Container, ContentSwitcher as ContentSwitcher$1, ContentSwitcherSelected } from './contentSwitcherStyle.js';
+
+function ContentSwitcher({ label, handleClick, style, sizeIcon, startIcon, startIconSelected, isActive, idButtonSwitcher }) {
+    return (jsx(ThemeProvider, { theme: FRSTTheme, children: jsx(Container, { sizeIcon: sizeIcon, style: { ...style }, children: !isActive ? (jsxs(ContentSwitcher$1, { onClick: handleClick, id: idButtonSwitcher, children: [startIcon, label] })) : (jsxs(ContentSwitcherSelected, { sizeIcon: sizeIcon, onClick: handleClick, id: idButtonSwitcher, children: [startIconSelected, label] })) }) }));
+}
+
+export { ContentSwitcher as default };