UI Components – Artemis Library

import React from "react";
import { Grid, Box, Typography, Link }  from '@mui/material';
import theme from '../../theme/theme.js';

const Alert = (props) => {
    const styles = {
        section: {
            margin: theme.spacing(2),
            padding: theme.spacing(3),
            backgroundColor: theme.palette.grey[50],
            borderLeft: 4, 
            borderTop: 2, 
            borderBottom: 2, 
            borderRight: 2,
            borderColor: theme.palette.success[500],
            borderRadius: `0 ${theme.spacing(1)} ${theme.spacing(1)} 0`
        },
        text: {
            color: theme.palette.success[800],
        }
    }

    const content = {
        'GridItem1-1': <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.5 2 2 6.5 2 12C2 17.5 6.5 22 12 22C17.5 22 22 17.5 22 12C22 6.5 17.5 2 12 2ZM16.2 10.3L11.4 15.1C11 15.5 10.4 15.5 10 15.1L7.8 12.9C7.4 12.5 7.4 11.9 7.8 11.5C8.2 11.1 8.8 11.1 9.2 11.5L10.7 13L14.8 8.9C15.2 8.5 15.8 8.5 16.2 8.9C16.6 9.3 16.6 9.9 16.2 10.3Z" fill="#17BB84"/></svg>,

import { Box, Grid, Link, Typography, LinearProgress }  from '@mui/material';
import theme from '../../theme/theme.js';

const Navbar = (props) => {
    const styles = {
        section: {
            px: theme.spacing(3),
            py: theme.spacing(2.3),
            mb: theme.spacing(2),
            backgroundColor: theme.palette.common.white,
            boxShadow: theme.shadows[1]
        },
        hoverIcons: {
            color: theme.palette.grey[200],
            '&:hover': {
                color: theme.palette.grey[300]
            }
        },
        name: {
            color: theme.palette.grey[800],
        },
        job: {
            color: theme.palette.grey[500], 
        },

import { Grid, Box, Typography, Link }  from '@mui/material';
import theme from '../../theme/theme.js';

const Alert = (props) => {
    const styles = {
        section: {
            margin: theme.spacing(2),
            padding: theme.spacing(3),
            backgroundColor: theme.palette.grey[50],
            borderLeft: 4, 
            borderTop: 2, 
            borderBottom: 2, 
            borderRight: 2,
            borderColor: theme.palette.grey[500],
            borderRadius: `0 ${theme.spacing(1)} ${theme.spacing(1)} 0`
        },
        header: {
            color: theme.palette.grey[800],
            mb: theme.spacing(1)
        },
        text: {
            color: theme.palette.grey[700],
        }
    }

import { Grid, Box, Typography, Link }  from '@mui/material';
import theme from '../../theme/theme.js';

const Alert = (props) => {
    const styles = {
        section: {
            margin: theme.spacing(2),
            padding: theme.spacing(3),
            backgroundColor: theme.palette.grey[50],
            borderLeft: 4, 
            borderTop: 2, 
            borderBottom: 2, 
            borderRight: 2,
            borderColor: theme.palette.error[500],
            borderRadius: `0 ${theme.spacing(1)} ${theme.spacing(1)} 0`
        },
        header: {
            color: theme.palette.error[800],
            mb: theme.spacing(1)
        },
        text: {
            color: theme.palette.error[700],
        }
    }

import { Grid, Box, Typography, Link }  from '@mui/material';
import theme from '../../theme/theme.js';

const Alert = (props) => {
    const styles = {
        section: {
            margin: theme.spacing(2),
            padding: theme.spacing(3),
            backgroundColor: theme.palette.grey[50],
            borderLeft: 4, 
            borderTop: 2, 
            borderBottom: 2, 
            borderRight: 2,
            borderColor: theme.palette.primary[500],
            borderRadius: `0 ${theme.spacing(1)} ${theme.spacing(1)} 0`
        },
        header: {
            color: theme.palette.primary[800],
            mb: theme.spacing(1)
        },
        text: {
            color: theme.palette.primary[700],
        }
    }

import { Grid, Box, Typography, Link }  from '@mui/material';
import theme from '../../theme/theme.js';

const Alert = (props) => {
    const styles = {
        section: {
            margin: theme.spacing(2),
            padding: theme.spacing(3),
            backgroundColor: theme.palette.grey[50],
            borderLeft: 4, 
            borderTop: 2, 
            borderBottom: 2, 
            borderRight: 2,
            borderColor: theme.palette.success[500],
            borderRadius: `0 ${theme.spacing(1)} ${theme.spacing(1)} 0`
        },
        header: {
            color: theme.palette.success[800],
            mb: theme.spacing(1)
        },
        text: {
            color: theme.palette.success[700],
        }
    }

import React from "react";
import { Grid, Box, Typography, Link }  from '@mui/material';
import theme from '../../theme/theme.js';

const Alert = (props) => {
    const styles = {
        section: {
            margin: theme.spacing(2),
            padding: theme.spacing(3),
            backgroundColor: theme.palette.grey[50],
            borderLeft: 4, 
            borderTop: 2, 
            borderBottom: 2, 
            borderRight: 2,
            borderColor: theme.palette.warning[500],
            borderRadius: `0 ${theme.spacing(1)} ${theme.spacing(1)} 0`
        },
        header: {
            color: theme.palette.warning[800],
            mb: theme.spacing(1)
        },
        text: {
            color: theme.palette.warning[700],
        }

import { Box, Grid, Link, Typography, TextField, Button }  from '@mui/material';
import theme from '../../theme/theme.js';

const Navbar = (props) => {
    const styles = {
        section: {
            px: theme.spacing(3),
            py: theme.spacing(2.65),
            mb: theme.spacing(2),
            backgroundColor: theme.palette.common.white,
            boxShadow: theme.shadows[1]
        },
        link: {
            textDecoration: 'none',
            color: theme.palette.grey[800]
        },
        hoverLink: {
            '&:hover': {
                color: theme.palette.grey[700]
            }
        },
        breadcrumb: {
            ml: theme.spacing(1),
            mr: theme.spacing(0.75)

import React from "react";
import { Grid, Box, Typography, Link }  from '@mui/material';
import theme from '../../theme/theme.js';

const Alert = (props) => {
    const styles = {
        section: {
            margin: theme.spacing(2),
            padding: theme.spacing(3),
            backgroundColor: theme.palette.grey[50],
            borderLeft: 4, 
            borderTop: 2, 
            borderBottom: 2, 
            borderRight: 2,
            borderColor: theme.palette.warning[500],
            borderRadius: `0 ${theme.spacing(1)} ${theme.spacing(1)} 0`
        },
        header: {
            color: theme.palette.warning[800],
            mb: theme.spacing(1)
        },
        text: {
            color: theme.palette.warning[700],
        }

import { Grid, Box, Typography, Link }  from '@mui/material';
import theme from '../../theme/theme.js';

const Alert = (props) => {
    const styles = {
        section: {
            margin: theme.spacing(2),
            padding: theme.spacing(3),
            backgroundColor: theme.palette.grey[50],
            borderLeft: 4, 
            borderTop: 2, 
            borderBottom: 2, 
            borderRight: 2,
            borderColor: theme.palette.primary[500],
            borderRadius: `0 ${theme.spacing(1)} ${theme.spacing(1)} 0`
        },
        header: {
            color: theme.palette.primary[800],
            mb: theme.spacing(1)
        },
        text: {
            color: theme.palette.primary[700],
        }
    }

import { Grid, Box, Typography, Link }  from '@mui/material';
import theme from '../../theme/theme.js';

const Alert = (props) => {
    const styles = {
        section: {
            margin: theme.spacing(2),
            padding: theme.spacing(3),
            backgroundColor: theme.palette.grey[50],
            borderLeft: 4, 
            borderTop: 2, 
            borderBottom: 2, 
            borderRight: 2,
            borderColor: theme.palette.error[500],
            borderRadius: `0 ${theme.spacing(1)} ${theme.spacing(1)} 0`
        },
        header: {
            color: theme.palette.error[800],
            mb: theme.spacing(1)
        },
        text: {
            color: theme.palette.error[700],
        }
    }

import { Grid, Box, Typography, Link }  from '@mui/material';
import theme from '../../theme/theme.js';

const Alert = (props) => {
    const styles = {
        section: {
            margin: theme.spacing(2),
            padding: theme.spacing(3),
            backgroundColor: theme.palette.grey[50],
            borderLeft: 4, 
            borderTop: 2, 
            borderBottom: 2, 
            borderRight: 2,
            borderColor: theme.palette.success[500],
            borderRadius: `0 ${theme.spacing(1)} ${theme.spacing(1)} 0`
        },
        header: {
            color: theme.palette.success[800],
            mb: theme.spacing(1)
        },
        text: {
            color: theme.palette.success[700],
        }
    }

import { Grid, Box, Typography, Link }  from '@mui/material';
import theme from '../../theme/theme.js';

const Alert = (props) => {
    const styles = {
        section: {
            margin: theme.spacing(2),
            padding: theme.spacing(3),
            backgroundColor: theme.palette.grey[50],
            borderLeft: 4, 
            borderTop: 2, 
            borderBottom: 2, 
            borderRight: 2,
            borderColor: theme.palette.grey[500],
            borderRadius: `0 ${theme.spacing(1)} ${theme.spacing(1)} 0`
        },
        header: {
            color: theme.palette.grey[800],
            mb: theme.spacing(1)
        },
        text: {
            color: theme.palette.grey[700],
        }
    }

import { Box, Grid, Link, Typography, Avatar, TextField }  from '@mui/material';
import theme from '../../theme/theme.js';

const Navbar = (props) => {
    const styles = {
        section: {
            backgroundColor: theme.palette.common.white,
            boxShadow: theme.shadows[1],
            mb: theme.spacing(2),
        },
        top: {
            px: theme.spacing(4),
            py: theme.spacing(2.5),
            borderBottom: 1,
            borderColor: theme.palette.grey[100]
        },
        bottom: {
            px: theme.spacing(4),
            py: theme.spacing(2),
            
            display: 'none',
            [theme.breakpoints.up('lg')]: {
                display: 'block',
            }

import React from "react";
import { Grid, Box, Typography, Link }  from '@mui/material';
import theme from '../../theme/theme.js';

const Alert = (props) => {
    const styles = {
        section: {
            margin: theme.spacing(2),
            padding: theme.spacing(3),
            backgroundColor: theme.palette.warning[500],
            borderLeft: 4 ,
            borderColor: theme.palette.warning[600],
            borderRadius: `0 ${theme.spacing(1)} ${theme.spacing(1)} 0`
        },
        text: {
            color: theme.palette.common.white
        }
    }

    const content = {
        'Typography1-1': 'Banner example',
        'Link1-1': <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.93329 8.00008L13.1333 3.80008C13.4 3.53341 13.4 3.13341 13.1333 2.86675C12.8666 2.60008 12.4666 2.60008 12.2 2.86675L7.99996 7.06675L3.79996 2.86675C3.53329 2.60008 3.13329 2.60008 2.86663 2.86675C2.59996 3.13341 2.59996 3.53341 2.86663 3.80008L7.06663 8.00008L2.86663 12.2001C2.73329 12.3334 2.66663 12.4667 2.66663 12.6667C2.66663 13.0667 2.93329 13.3334 3.33329 13.3334C3.53329 13.3334 3.66663 13.2667 3.79996 13.1334L7.99996 8.93341L12.2 13.1334C12.3333 13.2667 12.4666 13.3334 12.6666 13.3334C12.8666 13.3334 13 13.2667 13.1333 13.1334C13.4 12.8667 13.4 12.4667 13.1333 12.2001L8.93329 8.00008Z" fill="#FDE4D4"/></svg>,
        ...props.content
    }

import { Grid, Box, Typography, Link }  from '@mui/material';
import theme from '../../theme/theme.js';

const Alert = (props) => {
    const styles = {
        section: {
            margin: theme.spacing(2),
            padding: theme.spacing(3),
            backgroundColor: theme.palette.error[500],
            borderLeft: 4 ,
            borderColor: theme.palette.error[600],
            borderRadius: `0 ${theme.spacing(1)} ${theme.spacing(1)} 0`
        },
        text: {
            color: theme.palette.common.white
        }
    }

    const content = {
        'Typography1-1': 'Banner example',
        'Link1-1': <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.93341 8.00008L13.1334 3.80008C13.4001 3.53341 13.4001 3.13341 13.1334 2.86675C12.8667 2.60008 12.4667 2.60008 12.2001 2.86675L8.00008 7.06675L3.80008 2.86675C3.53341 2.60008 3.13341 2.60008 2.86675 2.86675C2.60008 3.13341 2.60008 3.53341 2.86675 3.80008L7.06675 8.00008L2.86675 12.2001C2.73341 12.3334 2.66675 12.4667 2.66675 12.6667C2.66675 13.0667 2.93341 13.3334 3.33341 13.3334C3.53341 13.3334 3.66675 13.2667 3.80008 13.1334L8.00008 8.93341L12.2001 13.1334C12.3334 13.2667 12.4667 13.3334 12.6667 13.3334C12.8667 13.3334 13.0001 13.2667 13.1334 13.1334C13.4001 12.8667 13.4001 12.4667 13.1334 12.2001L8.93341 8.00008Z" fill="#FADDDA"/></svg>,
        ...props.content
    }

import { Grid, Box, Typography, Link }  from '@mui/material';
import theme from '../../theme/theme.js';

const Alert = (props) => {
    const styles = {
        section: {
            margin: theme.spacing(2),
            padding: theme.spacing(3),
            backgroundColor: theme.palette.success[500],
            borderLeft: 4 ,
            borderColor: theme.palette.success[600],
            borderRadius: `0 ${theme.spacing(1)} ${theme.spacing(1)} 0`
        },
        text: {
            color: theme.palette.common.white
        }
    }

    const content = {
        'Typography1-1': 'Banner example',
        'Link1-1': <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.93329 8.00008L13.1333 3.80008C13.4 3.53341 13.4 3.13341 13.1333 2.86675C12.8666 2.60008 12.4666 2.60008 12.2 2.86675L7.99996 7.06675L3.79996 2.86675C3.53329 2.60008 3.13329 2.60008 2.86663 2.86675C2.59996 3.13341 2.59996 3.53341 2.86663 3.80008L7.06663 8.00008L2.86663 12.2001C2.73329 12.3334 2.66663 12.4667 2.66663 12.6667C2.66663 13.0667 2.93329 13.3334 3.33329 13.3334C3.53329 13.3334 3.66663 13.2667 3.79996 13.1334L7.99996 8.93341L12.2 13.1334C12.3333 13.2667 12.4666 13.3334 12.6666 13.3334C12.8666 13.3334 13 13.2667 13.1333 13.1334C13.4 12.8667 13.4 12.4667 13.1333 12.2001L8.93329 8.00008Z" fill="#D1F1E6"/></svg>,
        ...props.content
    }

import { Grid, Box, Typography, Link }  from '@mui/material';
import theme from '../../theme/theme.js';

const Alert = (props) => {
    const styles = {
        section: {
            margin: theme.spacing(2),
            padding: theme.spacing(3),
            backgroundColor: theme.palette.primary[500],
            borderLeft: 4 ,
            borderColor: theme.palette.primary[600],
            borderRadius: `0 ${theme.spacing(1)} ${theme.spacing(1)} 0`
        },
        text: {
            color: theme.palette.common.white
        }
    }

    const content = {
        'Typography1-1': 'Banner example',
        'Link1-1': <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.93329 8.00008L13.1333 3.80008C13.4 3.53341 13.4 3.13341 13.1333 2.86675C12.8666 2.60008 12.4666 2.60008 12.2 2.86675L7.99996 7.06675L3.79996 2.86675C3.53329 2.60008 3.13329 2.60008 2.86663 2.86675C2.59996 3.13341 2.59996 3.53341 2.86663 3.80008L7.06663 8.00008L2.86663 12.2001C2.73329 12.3334 2.66663 12.4667 2.66663 12.6667C2.66663 13.0667 2.93329 13.3334 3.33329 13.3334C3.53329 13.3334 3.66663 13.2667 3.79996 13.1334L7.99996 8.93341L12.2 13.1334C12.3333 13.2667 12.4666 13.3334 12.6666 13.3334C12.8666 13.3334 13 13.2667 13.1333 13.1334C13.4 12.8667 13.4 12.4667 13.1333 12.2001L8.93329 8.00008Z" fill="#D1F1E6"/></svg>,
        ...props.content
    }

import { Grid, Box, Typography, Link }  from '@mui/material';
import theme from '../../theme/theme.js';

const Alert = (props) => {
    const styles = {
        section: {
            margin: theme.spacing(2),
            padding: theme.spacing(3),
            backgroundColor: theme.palette.grey[500],
            borderLeft: 4 ,
            borderColor: theme.palette.grey[600],
            borderRadius: `0 ${theme.spacing(1)} ${theme.spacing(1)} 0`
        },
        text: {
            color: theme.palette.common.white
        }
    }
    
    const content = {
        'Typography1-1': 'Banner example',
        'Link1-1': <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.93341 8.00008L13.1334 3.80008C13.4001 3.53341 13.4001 3.13341 13.1334 2.86675C12.8667 2.60008 12.4667 2.60008 12.2001 2.86675L8.00008 7.06675L3.80008 2.86675C3.53341 2.60008 3.13341 2.60008 2.86675 2.86675C2.60008 3.13341 2.60008 3.53341 2.86675 3.80008L7.06675 8.00008L2.86675 12.2001C2.73341 12.3334 2.66675 12.4667 2.66675 12.6667C2.66675 13.0667 2.93341 13.3334 3.33341 13.3334C3.53341 13.3334 3.66675 13.2667 3.80008 13.1334L8.00008 8.93341L12.2001 13.1334C12.3334 13.2667 12.4667 13.3334 12.6667 13.3334C12.8667 13.3334 13.0001 13.2667 13.1334 13.1334C13.4001 12.8667 13.4001 12.4667 13.1334 12.2001L8.93341 8.00008Z" fill="#E1E4E8"/></svg>,
        ...props.content
    }

import { Box, Grid, Link, Typography }  from '@mui/material';
import theme from '../../theme/theme.js';

const Navbar = (props) => {
    const styles = {
        section: {
            px: theme.spacing(3),
            py: theme.spacing(3.3),
            mb: theme.spacing(2),
            backgroundColor: theme.palette.common.white,
            boxShadow: theme.shadows[1],
        },
        link: {
            textDecoration: 'none',
            color: theme.palette.grey[800]
        },
        hoverLink: {
            '&:hover': {
                color: theme.palette.grey[700]
            }
        },
        hoverIcons: {
            color: theme.palette.grey[200],
            '&:hover': {