frst-components 0.36.9 → 0.38.0

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

@@ -0,0 +1,157 @@
+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, ContainerLogo, ContainerTypography, TypographyWelcome, TypographyFill, ContainerInputAndLink, ContainerIpuntAndIsIcon, ContainerEmail, IconAlert, ContainerButtonLink, ContainerPassword, ContainerConnect, ContainerCheckbox, TypographyConnect, ContainerRecover, ContainerLogoRecover, ContainerEmailAndTypeRecoverRecover, ContainerTypographyRecover, TypographyRecover, ContainerEmailRecover, ContainerButtonRecover, TypographyNewPassword, ContainerPasswordNew, ContainerTypographyNewPassword, ContainerSendComfirmation, ContainerButtonSendConfirmation } from './loginStyle.js';
+import { FRSTLogoBig, AlertCicle, Viewer, CheckboxEmpty, CheckboxChecked } from '../../../shared/icons.js';
+import Button from '../../buttons/index.js';
+import { useState, useEffect } from 'react';
+import TextField from '../../form-elements/textfield/index.js';
+
+function Login(props) {
+    const [email, setEmail] = useState('');
+    const [confirmEmail, setConfirmEmail] = useState('');
+    const [emailRecover, setEmailRecover] = useState('');
+    const [password, setPassword] = useState('');
+    const [newPassword, setNewPassword] = useState('');
+    const [codigoNewPassword, setCodigoNewPassword] = useState('');
+    const [keepConnected, setKeepConnected] = useState(true);
+    const [step, setStep] = useState(1);
+    const [error, setError] = useState(props.isError);
+    const [colorError, setColorError] = useState(props.isError);
+    const [MsgInput1, setMsgInput1] = useState('');
+    const [MsgInput2, setMsgInput2] = useState('');
+    useEffect(() => {
+        setError(props.isError);
+    }, [props.isError]);
+    const onClikLogin = () => {
+        setMsgInput1('');
+        setMsgInput2('');
+        setError(false);
+        if (email.length === 0) {
+            setMsgInput2(props.textErrorEmailNaoInformado ? props.textErrorEmailNaoInformado : 'E-mail não informado.');
+            setError(true);
+            return;
+        }
+        if (password.length === 0) {
+            setMsgInput2(props.textErrorSenhaNaoInformado ? props.textErrorSenhaNaoInformado : 'Senha não Informada.');
+            setError(true);
+            return;
+        }
+        if (props.isError) {
+            setMsgInput2(props.textErrorLoginPropsIsError ? props.textErrorLoginPropsIsError : 'E-mail ou senhas incorretos.');
+            setError(true);
+        }
+        props.handleClickLogin(email, password, keepConnected);
+    };
+    const onClickForgotPasswordChange = () => {
+        //const emailRegex = ('[a-z0-9]+@[a-z]+\.[a-z]{2,3}');
+        setMsgInput1('');
+        setMsgInput2('');
+        setError(false);
+        if (emailRecover.length === 0) {
+            setMsgInput2(props.textEmailErrorNaoPrenchido ? props.textEmailErrorNaoPrenchido : 'E-mail não preenchido.');
+            setError(true);
+            return;
+        }
+        let regexEmail = /\S+@\S+.\S+/;
+        if (!regexEmail.test(emailRecover)) {
+            setMsgInput2(props.textEmailErrorInvalido ? props.textEmailErrorInvalido : 'E-mail inválido.');
+            setError(true);
+            return;
+        }
+        if (props.isError) {
+            setMsgInput2(props.textEmailErrorPropsIsError
+                ? props.textEmailErrorPropsIsError
+                : 'Erro ao enviar email de recuperação de senha.');
+            setError(true);
+        }
+        props.handleClickForgotPassword(emailRecover);
+        setStep(3);
+    };
+    const onClickSave = () => {
+        setMsgInput1('');
+        setMsgInput2('');
+        setError(false);
+        setColorError(false);
+        if (confirmEmail.length === 0) {
+            setMsgInput2(props.textNewPasswordErrorEmailNaoInformada
+                ? props.textNewPasswordErrorEmailNaoInformada
+                : 'Email não informado.');
+            setError(true);
+            return;
+        }
+        let regexEmail = /\S+@\S+.\S+/;
+        if (!regexEmail.test(confirmEmail)) {
+            setMsgInput2(props.textEmailErrorInvalido ? props.textEmailErrorInvalido : 'E-mail inválido.');
+            setError(true);
+            return;
+        }
+        if (newPassword.length === 0) {
+            setMsgInput2(props.textNewPasswordErrorNaoInformada ? props.textNewPasswordErrorNaoInformada : 'Nova senha não informada.');
+            setError(true);
+            return;
+        }
+        if (codigoNewPassword.length === 0) {
+            setMsgInput2(props.textNewPasswordErrorCodigo ? props.textNewPasswordErrorCodigo : 'Código não informado.');
+            setError(true);
+            return;
+        }
+        if (props.isError) {
+            setMsgInput2(props.textNewPasswordErrorInforma ? props.textNewPasswordErrorInforma : 'Erro ao informar nova senha.');
+            setError(true);
+        }
+        let emailPrefix = confirmEmail.split('@')[0].split('.')[0];
+        let emailSufix = confirmEmail.split('@')[1].split('.')[0];
+        const validateEmailPrefix = new RegExp(emailPrefix, 'g');
+        const validateEmailSufix = new RegExp(emailSufix, 'g');
+        const validateUpperCase = new RegExp(/[A-Z]/, 'g');
+        if (newPassword &&
+            (!newPassword.replace(/\D/g, '') ||
+                !newPassword.replace(/\d/g, '') ||
+                !newPassword.replace(/\w/g, '') ||
+                newPassword.match(/frst|falconi|FRST|FALCONI|Frst|Falconi/g) ||
+                newPassword.match(validateEmailPrefix) ||
+                newPassword.match(validateEmailSufix) ||
+                !newPassword.match(validateUpperCase) ||
+                newPassword.length < 8)) {
+            setColorError(true);
+            setError(true);
+            return;
+        }
+        props.handleClickChangePassword(newPassword, codigoNewPassword, confirmEmail);
+    };
+    const handleClickCheckbox = () => {
+        setKeepConnected(!keepConnected);
+    };
+    const onClickForgotPassword = () => {
+        setError(false);
+        setEmailRecover('');
+        setStep(2);
+        setMsgInput2('');
+    };
+    const onClickNotCancel = () => {
+        setError(false);
+        setStep(1);
+        setMsgInput2('');
+    };
+    useEffect(() => {
+        setError(props.isError);
+        setMsgInput2(props.isError ? 'E-mail ou senhas incorretos.' : '');
+    }, [props.isError]);
+    return (jsx(ThemeProvider, { theme: FRSTTheme, children: props.variant === 'login' && step === 1 ? (jsxs(Container, { children: [jsx(ContainerLogo, { children: jsx(FRSTLogoBig, {}) }), jsx(ContainerTypography, { children: jsx(TypographyWelcome, { children: props.textBoasVindas ? props.textBoasVindas : 'Bem-vindo' }) }), jsx(TypographyFill, { children: props.textLoginInformacao ? props.textLoginInformacao : 'Para acessar, preencha os campos abaixo:' }), jsxs(ContainerInputAndLink, { children: [jsxs(ContainerIpuntAndIsIcon, { children: [jsx(ContainerEmail, { isError: error, children: jsx(TextField, { error: error, helperText: MsgInput1, placeholder: "Email", label: "Email", type: "email", value: email, onChange: (e) => setEmail(e.target.value), style: { width: '100%' } }) }), error && (jsx(IconAlert, { children: jsx(AlertCicle, {}) }))] }), jsx(ContainerButtonLink, { children: jsx(Button, { variant: "link", label: props.textoLabelLoginButtonLink ? props.textoLabelLoginButtonLink : 'Esqueceu a senha?', handleClick: onClickForgotPassword }) }), jsxs(ContainerIpuntAndIsIcon, { children: [jsx(ContainerPassword, { isError: error, children: jsx(TextField, { helperText: MsgInput2, error: error, endIcon: jsx(Viewer, { fill: error ? '#ff0000' : '#000000' }), placeholder: props.textInputLoginSenha ? props.textInputLoginSenha : 'Senha', label: props.textInputLoginSenha ? props.textInputLoginSenha : 'Senha', type: "password", value: password, onChange: (e) => setPassword(e.target.value), style: { width: '100%' } }) }), error && (jsx(IconAlert, { style: { paddingTop: '78px' }, children: jsx(AlertCicle, {}) }))] })] }), jsxs(ContainerConnect, { children: [jsxs(ContainerCheckbox, { onClick: handleClickCheckbox, children: [keepConnected ? jsx(CheckboxEmpty, { fill: '#ebeded' }) : jsx(CheckboxChecked, {}), jsx(TypographyConnect, { children: props.textLoginConectado ? props.textLoginConectado : 'Manter-me conectado' })] }), jsx(Button, { variant: "primary", label: props.textLoginButton ? props.textLoginButton : 'Entrar', handleClick: onClikLogin })] })] })) : props.variant === 'login' && step === 2 ? (jsxs(ContainerRecover, { children: [jsx(ContainerLogoRecover, { children: jsx(FRSTLogoBig, {}) }), jsxs(ContainerEmailAndTypeRecoverRecover, { children: [jsxs(ContainerTypographyRecover, { children: [jsx(TypographyRecover, { children: props.textEmailCadastro
+                                        ? props.textEmailCadastro
+                                        : 'Digite seu e-mail de cadastro abaixo e clique em enviar.' }), jsx(TypographyRecover, { children: props.textEmailCadastro2
+                                        ? props.textEmailCadastro2
+                                        : 'Nós lhe enviaremos um e-mail com o link para recastrar sua senha.' })] }), jsxs(ContainerIpuntAndIsIcon, { children: [jsx(ContainerEmailRecover, { isError: error, children: jsx(TextField, { error: error, helperText: MsgInput2, placeholder: "Email", label: "Email", type: "email", value: emailRecover, onChange: (e) => setEmailRecover(e.target.value), style: { width: '100%' } }) }), error && (jsx(IconAlert, { isStep: step, children: jsx(AlertCicle, {}) }))] })] }), jsxs(ContainerButtonRecover, { children: [jsx(Button, { variant: "link", label: props.textEmailButtonLinkCancel ? props.textEmailButtonLinkCancel : 'Não, cancelar', handleClick: onClickNotCancel }), jsx(Button, { variant: "primary", label: props.textEmailButtonEnviar ? props.textEmailButtonEnviar : 'Enviar', handleClick: onClickForgotPasswordChange })] })] })) : props.variant === 'newPassword' ? (jsxs(Container, { children: [jsx(ContainerLogoRecover, { children: jsx(FRSTLogoBig, {}) }), jsx(TypographyNewPassword, { children: props.textNewPasswordInformacao
+                        ? props.textNewPasswordInformacao
+                        : 'Para criar uma nova senha, preencha os campos abaixo:' }), jsxs(ContainerPasswordNew, { isError: error, children: [jsxs(ContainerIpuntAndIsIcon, { children: [jsx(TextField, { error: error, placeholder: props.textNewPasswordInputEmailPlaceholder
+                                        ? props.textNewPasswordInputEmailPlaceholder
+                                        : 'Por favor, insira seu e-mail aqui', label: props.textNewPasswordInputEmail ? props.textNewPasswordInputEmail : 'Digite o email', type: 'text', value: confirmEmail, onChange: (e) => setConfirmEmail(e.target.value), style: { width: '95%' } }), error && (jsx(IconAlert, { children: jsx(AlertCicle, {}) }))] }), jsxs(ContainerIpuntAndIsIcon, { children: [jsx(TextField, { error: error, endIcon: jsx(Viewer, { fill: error ? '#ff0000' : '#000000' }), placeholder: props.textNewPasswordInput ? props.textNewPasswordInput : 'Insira sua nova senha', label: props.textNewPasswordInput ? props.textNewPasswordInput : 'Nova senha', type: 'password', value: newPassword, onChange: (e) => setNewPassword(e.target.value), style: { width: '95%' } }), error && (jsx(IconAlert, { children: jsx(AlertCicle, {}) }))] }), jsxs(ContainerIpuntAndIsIcon, { children: [jsx(TextField, { helperText: MsgInput2, error: error, placeholder: props.textNewPasswordInputPlaceholderCodigo ? props.textNewPasswordInputPlaceholderCodigo : 'Código', label: props.textNewPasswordInputCodigo ? props.textNewPasswordInputCodigo : 'Digite o Código', type: 'text', value: codigoNewPassword, onChange: (e) => setCodigoNewPassword(e.target.value), style: { width: '95%' } }), error && (jsx(IconAlert, { children: jsx(AlertCicle, {}) }))] })] }), jsx(ContainerTypographyNewPassword, { children: jsx(TypographyNewPassword, { isColorError: colorError, style: { fontSize: '14px' }, children: props.textNewPasswordErrorSenhaForte
+                            ? props.textNewPasswordErrorSenhaForte
+                            : 'Use pelo menos 8 caracteres, 1 maiúscula, 1 minúscula, e um número ou caractere especial. Não use parte de seu e-mail (seunome@empresa.com) como senha.' }) }), jsxs(ContainerButtonRecover, { children: [jsx(Button, { variant: "link", label: props.textNewPasswordButtonLink ? props.textNewPasswordButtonLink : 'Voltar Login', handleClick: props.handleClickChangePasswordCancel }), jsx(Button, { variant: "primary", label: props.textNewPasswordButtonSalvar ? props.textNewPasswordButtonSalvar : 'Salvar', handleClick: onClickSave })] })] })) : props.variant === 'login' && step === 3 ? (jsxs(ContainerSendComfirmation, { children: [jsx(ContainerLogoRecover, { children: jsx(FRSTLogoBig, {}) }), jsx(TypographyNewPassword, { children: props.textConfirmacaoRespostaEmail
+                        ? props.textConfirmacaoRespostaEmail
+                        : 'Solicitação enviada com sucesso para o seu e-mail.' }), jsx(ContainerButtonSendConfirmation, { children: jsx(Button, { variant: "primary", label: props.textConfirmacaoButtonRetorna ? props.textConfirmacaoButtonRetorna : 'Retornar', handleClick: props.onClickConfimationBackToLogin }) })] })) : null }));
+}
+
+export { Login as default };

package/dist/esm/src/components/LXP/login/loginStyle.js

@@ -0,0 +1,271 @@
+import styled, { css } from 'styled-components';
+
+const isColorBlack = ({ theme }) => theme.colors.shadeBlack;
+const isColorError = ({ theme }) => theme.colors.linkError;
+const Container = styled.div `
+  width: 100%;
+  max-width: 445px;
+  min-height: 509px;
+  border-radius: 8px;
+  background-color: ${({ theme }) => theme.colors.shadeWhite};
+  box-sizing: border-box;
+  position: relative;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+`;
+const ContainerLogo = styled.div `
+  width: 100%;
+  min-height: 88px;
+  position: absoulte;
+  background-color: ${({ theme }) => theme.colors.primary1};
+  border-radius: 8px 8px 0px 0px;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 82, 71%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+const ContainerTypography = styled.div `
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  margin-top: 22px;
+  margin-bottom: 20px;
+`;
+const TypographyWelcome = styled.p `
+  font-family: Work Sans;
+  font-style: normal;
+  font-size: 24px;
+  font-weight: 700;
+  line-height: 31px;
+  letter-spacing: 0.01em;
+  color: ${({ theme }) => theme.colors.primary1};
+`;
+const TypographyFill = styled.p `
+  font-family: PT Sans;
+  font-style: normal;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 21px;
+  letter-spacing: 0em;
+  color: ${({ theme }) => theme.colors.neutralsGrey1};
+  margin-left: 44px;
+  margin-right: 44px;
+  margin-bottom: 22px;
+`;
+const ContainerEmail = styled.div `
+  width: 80%;
+  margin-left: 44px;
+  @media (max-width: 414px) {
+    margin-right: 44px;
+  }
+
+  ${(props) => props.isError &&
+    css `
+      @media (max-width: 414px) {
+        margin-right: 5px;
+      }
+    `}
+`;
+const ContainerButtonLink = styled.div `
+  right: 0;
+  margin-right: 44px;
+  margin-top: 7.5rem;
+  position: absolute;
+  @media (max-width: 414px) {
+    margin: 7.5rem 44px 0px 0px;
+  }
+`;
+const ContainerPassword = styled.div `
+  width: 80%;
+  margin-left: 44px;
+  margin-top: 33px;
+  @media (max-width: 414px) {
+    margin-right: 44px;
+  }
+
+  ${(props) => props.isError &&
+    css `
+      @media (max-width: 414px) {
+        margin-right: 5px;
+      }
+    `}
+`;
+const ContainerInputAndLink = styled.div `
+  display: flex;
+  flex-direction: column;
+`;
+const IconAlert = styled.div `
+  right: 0;
+  bottom: 0;
+  padding: 45px 10px 0px 6px;
+  ${(props) => props.isStep === 2 &&
+    css `
+      margin-top: 36px;
+    `}
+`;
+const ContainerIpuntAndIsIcon = styled.div `
+  display: flex;
+  align-items: flex-start;
+`;
+const ContainerConnect = styled.div `
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
+  margin-right: 44px;
+  margin-left: 44px;
+  margin-top: 32px;
+  margin-bottom: 20px;
+  padding-bottom: 32px;
+`;
+const ContainerCheckbox = styled.div `
+  cursor: pointer;
+  display: flex;
+  gap: 8px;
+`;
+const TypographyConnect = styled.p `
+  font-family: PT Sans;
+  font-style: normal;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 21px;
+  letter-spacing: 0em;
+  color: ${({ theme }) => theme.colors.shadeBlack};
+`;
+// ######################recover####################
+const ContainerRecover = styled.div `
+  width: 100%;
+  max-width: 445px;
+  border-radius: 8px;
+  border: 1px solid ${({ theme }) => theme.colors.neutralsGrey5};
+  background-color: ${({ theme }) => theme.colors.shadeWhite};
+  box-sizing: border-box;
+  position: relative;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+`;
+const ContainerLogoRecover = styled.div `
+  width: 100%;
+  min-height: 88px;
+  position: absoulte;
+  background-color: ${({ theme }) => theme.colors.primary1};
+  border-radius: 8px 8px 0px 0px;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+const ContainerTypographyRecover = styled.div `
+  margin: 32px 44px 0 44px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+`;
+const TypographyRecover = styled.p `
+  font-family: PT Sans;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 21px;
+  color: ${({ theme }) => theme.colors.neutralsGrey1};
+`;
+const ContainerEmailRecover = styled.div `
+  margin-left: 44px;
+  margin-top: 35px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: 80%;
+  @media (max-width: 414px) {
+    margin-right: 44px;
+  }
+
+  ${(props) => props.isError &&
+    css `
+      @media (max-width: 414px) {
+        margin-right: 5px;
+      }
+    `}
+`;
+const ContainerEmailAndTypeRecoverRecover = styled.div `
+  display: flex;
+  flex-direction: column;
+`;
+const ContainerButtonRecover = styled.div `
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  margin: 30px 30px 20px 44px;
+  padding-bottom: 32px;
+  @media (max-width: 767px) {
+    margin-top: 58px;
+  }
+`;
+//#########################NewPassaword#################
+const TypographyNewPassword = styled.p `
+  font-family: PT Sans;
+  font-size: 16px;
+  font-weight: ${(props) => (props.isColorError ? 600 : 400)};
+  line-height: 21px;
+  color: ${(props) => (props.isColorError ? isColorError : isColorBlack)};
+  position: absolute;
+  margin: 34px 44px 10px 44px;
+`;
+const ContainerTypographyNewPassword = styled.div `
+  width: 100%;
+  height: 6.5rem;
+`;
+const ContainerPasswordNew = styled.div `
+  margin-top: 100px;
+  margin-left: 44px;
+  margin-right: 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 25px;
+
+  @media (max-width: 414px) {
+    margin-right: 31px;
+  }
+
+  ${(props) => props.isError &&
+    css `
+      @media (max-width: 414px) {
+        margin-right: 13px;
+      }
+    `}
+`;
+//###############SendComfirmation##############
+const ContainerSendComfirmation = styled.div `
+  width: 100%;
+  max-width: 445px;
+  min-height: 302px;
+  border-radius: 8px;
+  border: 1px solid ${({ theme }) => theme.colors.neutralsGrey5};
+  background-color: ${({ theme }) => theme.colors.shadeWhite};
+  box-sizing: border-box;
+  position: relative;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+`;
+const ContainerButtonSendConfirmation = styled.div `
+  display: flex;
+  justify-content: end;
+  margin: 126px 44px 0 0;
+`;
+
+export { Container, ContainerButtonLink, ContainerButtonRecover, ContainerButtonSendConfirmation, ContainerCheckbox, ContainerConnect, ContainerEmail, ContainerEmailAndTypeRecoverRecover, ContainerEmailRecover, ContainerInputAndLink, ContainerIpuntAndIsIcon, ContainerLogo, ContainerLogoRecover, ContainerPassword, ContainerPasswordNew, ContainerRecover, ContainerSendComfirmation, ContainerTypography, ContainerTypographyNewPassword, ContainerTypographyRecover, IconAlert, TypographyConnect, TypographyFill, TypographyNewPassword, TypographyRecover, TypographyWelcome };

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

@@ -0,0 +1,40 @@
+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, TypographyDefinition, Date, ContetsName, TypographyContentsName, ContainerIcon, SelectIcon, GroupName } from './manageLearningCicles.Style.js';
+import { DropdownIconWhite, MoreHorizontal } from '../../../shared/icons.js';
+import moment from 'moment';
+import { useState, useEffect } from 'react';
+
+function ManageLearningCicles({ variant, label, disabled, style, handleClick, handleChange }) {
+    const dateAtual = moment().subtract(10, 'days').calendar();
+    const [individualContent, setIdividualContent] = useState([
+        { title: 'individualContents1' },
+        { title: 'individualContents2' },
+        { title: 'individualContents3' },
+    ]);
+    const [listTrails, setListTrails] = useState([
+        { id: '1', name: 'trails' },
+        { id: '2', name: 'trails' },
+        { id: '3', name: 'trails' },
+    ]);
+    const [isOpen, setIsOpen] = useState(false);
+    const [counterRender, setCounterRender] = useState(0);
+    function handleClickCheck() {
+        !isOpen ? setIsOpen(true) : setIsOpen(false);
+    }
+    useEffect(() => {
+        if (counterRender > 0 && isOpen) {
+            handleClick();
+        }
+        else {
+            setCounterRender(1);
+        }
+    }, [isOpen]);
+    return (jsx(ThemeProvider, { theme: FRSTTheme, children: jsxs(Container, { isOpen: isOpen, children: [jsx(TypographyDefinition, { children: label }), jsx(Date, { children: dateAtual }), jsx(ContetsName, { children: individualContent.length !== 0 ?
+                        individualContent.map((item, index) => jsx(TypographyContentsName, { children: item.title }, index))
+                        : jsx(TypographyContentsName, { children: "Introdu\u00E7\u00E3o a blockchain" }) }), jsxs(ContainerIcon, { children: [jsx("p", { children: jsx(DropdownIconWhite, { fill: '#000000' }) }), jsx(SelectIcon, { onChange: handleChange, children: listTrails.map((item, index) => jsx("option", { value: item.id, children: item.name }, index)) })] }), jsxs(GroupName, { isOpen: isOpen, children: [jsx("p", { children: "Group name" }), jsx("div", { onClick: handleClickCheck, children: jsx(MoreHorizontal, {}) })] })] }) }));
+}
+
+export { ManageLearningCicles as default };

package/dist/esm/src/components/LXP/manageLerningCicles/manageLearningCicles.Style.js

@@ -0,0 +1,84 @@
+import styled, { css } from 'styled-components';
+
+const Container = styled.div `
+    width: 24.188rem;    
+    border: 1px solid ${({ theme }) => theme.colors.neutralsGrey5};
+    background-color: ${({ theme }) => theme.colors.shadeWhite};
+    positon: relative;
+    ${(props) => props.isOpen &&
+    css `
+        background-color: #D3D3D3;
+    `}
+    
+`;
+const TypographyDefinition = styled.p `
+    font-family: 'Work Sans';
+    font-Weight: 700;
+    font-size: 1.1rem;
+    color: ${({ theme }) => theme.colors.borderSecondary4};
+    margin-top: 2rem;
+    margin-left: 1.6rem;
+`;
+const Date = styled.p `
+    font-family: 'PT Sans';
+    font-Weight: 400;
+    font-size: 0.6rem;
+    color: ${({ theme }) => theme.colors.neutralsGrey3};
+    margin-left: 1.6rem;
+`;
+const ContetsName = styled.div `
+    margin-left: 1.6rem;
+    margin-top: 1.5rem;    
+`;
+const TypographyContentsName = styled.p `
+    font-family: 'PT Sans';
+    font-Weight: 400;
+    font-size: 1rem;
+    color: ${({ theme }) => theme.colors.neutralsGrey3};
+`;
+const ContainerIcon = styled.div `
+    display: flex;
+    flex-direction: column;
+    margin-left: 1.6rem;
+    margin-top: 1.5rem;    
+    position: relative;    
+`;
+const SelectIcon = styled.select `
+    font-family: 'PT Sans';
+    font-Weight: 400;
+    font-size: 1rem;
+    color: ${({ theme }) => theme.colors.neutralsGrey4};
+    border: none;
+    background: none;
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;    
+    padding-left: 20px;
+    position: absolute;    
+`;
+const GroupName = styled.div `
+    width: 24.1rem;
+    height: 78.63px;
+    background-color: #F7F9FC;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    align-content: center;    
+    margin-top: 62px;
+    ${(props) => props.isOpen &&
+    css `
+        background-color: ${({ theme }) => theme.colors.borderPrimary};        
+    `}
+
+    p{
+        margin-left: 1.6rem; 
+    }
+
+    div{
+        margin-right: 2rem;
+        cursor: pointer;
+    }  
+`;
+
+export { Container, ContainerIcon, ContetsName, Date, GroupName, SelectIcon, TypographyContentsName, TypographyDefinition };