Alert Components in Artemis library

<div x-data="{ modal: true }" :class="{ 'hidden': !modal }" class="py-8 px-6">
  <div class="p-6 bg-orange-50 border-l-4 border-orange-500 rounded-r-lg">
    <div class="flex items-center">
      <h3 class="text-orange-800 font-medium">Example for Banner</h3>
      <button x-on:click="modal = false" class="ml-auto">
        <svg class="text-orange-800" width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M6.93341 6.00008L11.1334 1.80008C11.4001 1.53341 11.4001 1.13341 11.1334 0.866748C10.8667 0.600081 10.4667 0.600081 10.2001 0.866748L6.00008 5.06675L1.80008 0.866748C1.53341 0.600081 1.13341 0.600081 0.866748 0.866748C0.600082 1.13341 0.600082 1.53341 0.866748 1.80008L5.06675 6.00008L0.866748 10.2001C0.733415 10.3334 0.666748 10.4667 0.666748 10.6667C0.666748 11.0667 0.933415 11.3334 1.33341 11.3334C1.53341 11.3334 1.66675 11.2667 1.80008 11.1334L6.00008 6.93341L10.2001 11.1334C10.3334 11.2667 10.4667 11.3334 10.6667 11.3334C10.8667 11.3334 11.0001 11.2667 11.1334 11.1334C11.4001 10.8667 11.4001 10.4667 11.1334 10.2001L6.93341 6.00008Z" fill="currentColor"></path>
        </svg>
      </button>
    </div>
  </div>
</div>

<div class="py-8 px-6">
  <div class="p-6 bg-danger-light rounded-end border-4 border-start border-danger">
    <div class="d-flex align-items-center justify-content-between bg-danger-light">
      <h3 class="h6 mb-0 fw-bold text-danger-dark">Example for Banner</h3>
      <button class="btn p-0 text-danger-dark">
        <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M6.93341 6.00008L11.1334 1.80008C11.4001 1.53341 11.4001 1.13341 11.1334 0.866748C10.8667 0.600081 10.4667 0.600081 10.2001 0.866748L6.00008 5.06675L1.80008 0.866748C1.53341 0.600081 1.13341 0.600081 0.866748 0.866748C0.600082 1.13341 0.600082 1.53341 0.866748 1.80008L5.06675 6.00008L0.866748 10.2001C0.733415 10.3334 0.666748 10.4667 0.666748 10.6667C0.666748 11.0667 0.933415 11.3334 1.33341 11.3334C1.53341 11.3334 1.66675 11.2667 1.80008 11.1334L6.00008 6.93341L10.2001 11.1334C10.3334 11.2667 10.4667 11.3334 10.6667 11.3334C10.8667 11.3334 11.0001 11.2667 11.1334 11.1334C11.4001 10.8667 11.4001 10.4667 11.1334 10.2001L6.93341 6.00008Z" fill="currentColor"></path>
        </svg>
      </button>
    </div>
  </div>
</div>

<div class="px-5 py-6" x-data="{ modal: true }" :class="{ 'is-hidden': !modal }">
  <div class="notification is-primary is-light">
    <h3 class="is-size-5 has-text-weight-bold">Example for Banner</h3>
    <button class="delete is-small" x-on:click="modal = false"></button>
  </div>
</div>

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[50],
            borderLeft: 4,
            borderColor: theme.palette.error[500],
            borderRadius: `0 ${theme.spacing(1)} ${theme.spacing(1)} 0`
        },
        text: {
            color: theme.palette.error[800]
        }
    }

    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="#5D221B"/></svg>,
        ...props.content
    }

    return (
        <Box component="section" sx={styles.section}>
            <Grid container alignItems="center" justifyContent="space-between">
                <Grid item>
                    <Typography variant="body1" sx={styles.text}>{content['Typography1-1']}</Typography>
                </Grid>
                <Grid item>
                    <Link href="#">{content['Link1-1']}</Link>
                </Grid>
            </Grid>
        </Box>
    )
}

export default Alert;