Merge branch 'develop' into renovate/dayjs-1.x

Client/.eslintrc.cjs

@@ -14,5 +14,6 @@ module.exports = {
 	rules: {
 		"react/jsx-no-target-blank": "off",
 		"react-refresh/only-export-components": ["warn", { allowConstantExport: true }],
+		"react/no-unescaped-entities": "off",
 	},
 };

Client/package-lock.json

@@ -21,7 +21,7 @@
 				"axios": "^1.7.4",
 				"chart.js": "^4.4.3",
 				"dayjs": "1.11.13",
-				"joi": "17.13.1",
+				"joi": "17.13.3",
 				"jwt-decode": "^4.0.0",
 				"react": "^18.2.0",
 				"react-dom": "^18.2.0",
@@ -4686,9 +4686,9 @@
 			}
 		},
 		"node_modules/joi": {
-			"version": "17.13.1",
-			"resolved": "https://registry.npmjs.org/joi/-/joi-17.13.1.tgz",
-			"integrity": "sha512-vaBlIKCyo4FCUtCm7Eu4QZd/q02bWcxfUO6YSXAZOWF6gzcLBeba8kwotUdYJjDLW8Cz8RywsSOqiNJZW0mNvg==",
+			"version": "17.13.3",
+			"resolved": "https://registry.npmjs.org/joi/-/joi-17.13.3.tgz",
+			"integrity": "sha512-otDA4ldcIx+ZXsKHWmp0YizCweVRZG96J10b0FevjfuncLO1oX59THoAmHkNubYJ+9gWsYsp5k8v4ib6oDv1fA==",
 			"license": "BSD-3-Clause",
 			"dependencies": {
 				"@hapi/hoek": "^9.3.0",

Client/package.json

@@ -23,7 +23,7 @@
 		"axios": "^1.7.4",
 		"chart.js": "^4.4.3",
 		"dayjs": "1.11.13",
-		"joi": "17.13.1",
+		"joi": "17.13.3",
 		"jwt-decode": "^4.0.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",

Client/src/Components/Dialog/genericDialog.jsx

@@ -0,0 +1,67 @@
+import { useId } from "react";
+import PropTypes from "prop-types";
+import { Modal, Stack, Typography } from "@mui/material";
+
+const GenericDialog = ({ title, description, open, onClose, theme, children }) => {
+	const titleId = useId();
+	const descriptionId = useId();
+	const ariaDescribedBy = description?.length > 0 ? descriptionId : "";
+	return (
+		<Modal
+			aria-labelledby={titleId}
+			aria-describedby={ariaDescribedBy}
+			open={open}
+			onClose={onClose}
+		>
+			<Stack
+				gap={theme.spacing(2)}
+				sx={{
+					position: "absolute",
+					top: "50%",
+					left: "50%",
+					transform: "translate(-50%, -50%)",
+					width: 400,
+					bgcolor: theme.palette.background.main,
+					border: 1,
+					borderColor: theme.palette.border.light,
+					borderRadius: theme.shape.borderRadius,
+					boxShadow: 24,
+					p: theme.spacing(15),
+					"&:focus": {
+						outline: "none",
+					},
+				}}
+			>
+				<Typography
+					id={titleId}
+					component="h2"
+					fontSize={16}
+					color={theme.palette.text.primary}
+					fontWeight={600}
+				>
+					{title}
+				</Typography>
+				{description && (
+					<Typography
+						id={descriptionId}
+						color={theme.palette.text.tertiary}
+					>
+						{description}
+					</Typography>
+				)}
+				{children}
+			</Stack>
+		</Modal>
+	);
+};
+
+GenericDialog.propTypes = {
+	title: PropTypes.string.isRequired,
+	description: PropTypes.string,
+	open: PropTypes.bool.isRequired,
+	onClose: PropTypes.func.isRequired,
+	theme: PropTypes.object.isRequired,
+	children: PropTypes.element.isRequired,
+};
+
+export { GenericDialog };

Client/src/Components/Dialog/index.jsx

@@ -1,103 +1,62 @@
-import LoadingButton from "@mui/lab/LoadingButton";
-import { Button, Modal, Stack, Typography } from "@mui/material";
 import PropTypes from "prop-types";
+import LoadingButton from "@mui/lab/LoadingButton";
+import { Button, Stack } from "@mui/material";
+import { GenericDialog } from "./genericDialog";
+
 const Dialog = ({
-	modelTitle,
-	modelDescription,
-	open,
-	onClose,
 	title,
-	confirmationBtnLbl,
-	confirmationBtnOnClick,
-	cancelBtnLbl,
-	cancelBtnOnClick,
-	theme,
-	isLoading,
 	description,
+	open,
+	theme,
+	onCancel,
+	confirmationButtonLabel,
+	onConfirm,
+	isLoading,
 }) => {
 	return (
-		<Modal
-			aria-labelledby={modelTitle}
-			aria-describedby={modelDescription}
+		<GenericDialog
+			title={title}
+			description={description}
 			open={open}
-			onClose={onClose}
+			onClose={onCancel}
+			theme={theme}
 		>
 			<Stack
-				gap={theme.spacing(2)}
-				sx={{
-					position: "absolute",
-					top: "50%",
-					left: "50%",
-					transform: "translate(-50%, -50%)",
-					width: 400,
-					bgcolor: theme.palette.background.main,
-					border: 1,
-					borderColor: theme.palette.border.light,
-					borderRadius: theme.shape.borderRadius,
-					boxShadow: 24,
-					p: theme.spacing(15),
-					"&:focus": {
-						outline: "none",
-					},
-				}}
+				direction="row"
+				gap={theme.spacing(4)}
+				mt={theme.spacing(12)}
+				justifyContent="flex-end"
 			>
-				<Typography
-					id={modelTitle}
-					component="h2"
-					fontSize={16}
-					color={theme.palette.text.primary}
-					fontWeight={600}
+				<Button
+					variant="text"
+					color="info"
+					onClick={onCancel}
 				>
-					{title}
-				</Typography>
-				{description && (
-					<Typography
-						id={modelDescription}
-						color={theme.palette.text.tertiary}
-					>
-						{description}
-					</Typography>
-				)}
-				<Stack
-					direction="row"
-					gap={theme.spacing(4)}
-					mt={theme.spacing(12)}
-					justifyContent="flex-end"
+					Cancel
+				</Button>
+				<LoadingButton
+					variant="contained"
+					color="error"
+					loading={isLoading}
+					onClick={onConfirm}
 				>
-					<Button
-						variant="text"
-						color="info"
-						onClick={cancelBtnOnClick}
-					>
-						{cancelBtnLbl}
-					</Button>
-					<LoadingButton
-						variant="contained"
-						color="error"
-						loading={isLoading}
-						onClick={confirmationBtnOnClick}
-					>
-						{confirmationBtnLbl}
-					</LoadingButton>
-				</Stack>
+					{confirmationButtonLabel}
+				</LoadingButton>
 			</Stack>
-		</Modal>
+		</GenericDialog>
 	);
 };
 
 Dialog.propTypes = {
-	modelTitle: PropTypes.string.isRequired,
-	modelDescription: PropTypes.string.isRequired,
+	title: PropTypes.string.isRequired,
+	description: PropTypes.string,
 	open: PropTypes.bool.isRequired,
 	onClose: PropTypes.func.isRequired,
-	title: PropTypes.string.isRequired,
-	confirmationBtnLbl: PropTypes.string.isRequired,
-	confirmationBtnOnClick: PropTypes.func.isRequired,
-	cancelBtnLbl: PropTypes.string.isRequired,
-	cancelBtnOnClick: PropTypes.func.isRequired,
 	theme: PropTypes.object.isRequired,
+	onCancel: PropTypes.func.isRequired,
+	confirmationButtonLabel: PropTypes.string.isRequired,
+	onConfirm: PropTypes.func.isRequired,
 	isLoading: PropTypes.bool.isRequired,
-	description: PropTypes.string,
 };
 
 export default Dialog;

Client/src/Components/TabPanels/Account/ProfilePanel.jsx

@@ -1,7 +1,7 @@
 import { useTheme } from "@emotion/react";
 import { useRef, useState } from "react";
 import TabPanel from "@mui/lab/TabPanel";
-import { Box, Button, Divider, Modal, Stack, Typography } from "@mui/material";
+import { Box, Button, Divider, Stack, Typography } from "@mui/material";
 import Avatar from "../../Avatar";
 import Field from "../../Inputs/Field";
 import ImageField from "../../Inputs/Image";
@@ -15,6 +15,8 @@ import { clearUptimeMonitorState } from "../../../Features/UptimeMonitors/uptime
 import { createToast } from "../../../Utils/toastUtils";
 import { logger } from "../../../Utils/Logger";
 import LoadingButton from "@mui/lab/LoadingButton";
+import { GenericDialog } from "../../Dialog/genericDialog";
+import Dialog from "../../Dialog";
 
 /**
  * ProfilePanel component displays a form for editing user profile information
@@ -369,158 +371,82 @@ const ProfilePanel = () => {
 				</Box>
 			)}
 			{/* TODO - Update ModalPopup Component with @mui for reusability */}
-			<Modal
-				aria-labelledby="modal-delete-account"
-				aria-describedby="delete-account-confirmation"
+
+			<Dialog
 				open={isModalOpen("delete")}
-				onClose={() => setIsOpen("")}
-				disablePortal
-			>
-				<Stack
-					gap={theme.spacing(5)}
-					sx={{
-						position: "absolute",
-						top: "50%",
-						left: "50%",
-						transform: "translate(-50%, -50%)",
-						width: 500,
-						bgcolor: theme.palette.background.main,
-						border: 1,
-						borderColor: theme.palette.border.light,
-						borderRadius: theme.shape.borderRadius,
-						boxShadow: 24,
-						p: theme.spacing(15),
-						"&:focus": {
-							outline: "none",
-						},
-					}}
-				>
-					<Typography
-						id="modal-delete-account"
-						component="h1"
-					>
-						Really delete this account?
-					</Typography>
-					<Typography
-						id="delete-account-confirmation"
-						component="p"
-					>
-						If you delete your account, you will no longer be able to sign in, and all of
-						your data will be deleted. Deleting your account is permanent and
-						non-recoverable action.
-					</Typography>
-					<Stack
-						direction="row"
-						gap={theme.spacing(5)}
-						mt={theme.spacing(5)}
-						justifyContent="flex-end"
-					>
-						<Button
-							variant="text"
-							color="info"
-							onClick={() => setIsOpen("")}
-						>
-							Cancel
-						</Button>
-						<LoadingButton
-							variant="contained"
-							color="error"
-							onClick={handleDeleteAccount}
-							loading={isLoading}
-						>
-							Delete account
-						</LoadingButton>
-					</Stack>
-				</Stack>
-			</Modal>
-			<Modal
-				aria-labelledby="modal-update-picture"
-				aria-describedby="update-profile-picture"
+				theme={theme}
+				title={"Really delete this account?"}
+				description={
+					"If you delete your account, you will no longer be able to sign in, and all of your data will be deleted. Deleting your account is permanent and non-recoverable action."
+				}
+				onCancel={() => setIsOpen("")}
+				confirmationButtonLabel={"Delete account"}
+				onConfirm={handleDeleteAccount}
+				isLoading={isLoading}
+			/>
+
+			<GenericDialog
+				title={"Upload Image"}
 				open={isModalOpen("picture")}
 				onClose={closePictureModal}
+				theme={theme}
 			>
-				<Stack
-					sx={{
-						position: "absolute",
-						top: "50%",
-						left: "50%",
-						transform: "translate(-50%, -50%)",
-						width: 475,
-						bgcolor: theme.palette.background.main,
-						border: 1,
-						borderColor: theme.palette.border.light,
-						borderRadius: theme.shape.borderRadius,
-						boxShadow: theme.shape.boxShadow,
-						p: theme.spacing(15),
-						"&:focus": {
-							outline: "none",
-						},
-					}}
-				>
-					<Typography
-						id="modal-update-picture"
-						component="h1"
-						color={theme.palette.text.secondary}
-					>
-						Upload Image
-					</Typography>
-					<ImageField
-						id="update-profile-picture"
-						src={
-							file?.delete
-								? ""
-								: file?.src
-									? file.src
-									: localData?.file
-										? localData.file
-										: user?.avatarImage
-											? `data:image/png;base64,${user.avatarImage}`
-											: ""
-						}
-						loading={progress.isLoading && progress.value !== 100}
-						onChange={handlePicture}
+				<ImageField
+					id="update-profile-picture"
+					src={
+						file?.delete
+							? ""
+							: file?.src
+								? file.src
+								: localData?.file
+									? localData.file
+									: user?.avatarImage
+										? `data:image/png;base64,${user.avatarImage}`
+										: ""
+					}
+					loading={progress.isLoading && progress.value !== 100}
+					onChange={handlePicture}
+				/>
+				{progress.isLoading || progress.value !== 0 || errors["picture"] ? (
+					<ProgressUpload
+						icon={<ImageIcon />}
+						label={file?.name}
+						size={file?.size}
+						progress={progress.value}
+						onClick={removePicture}
+						error={errors["picture"]}
 					/>
-					{progress.isLoading || progress.value !== 0 || errors["picture"] ? (
-						<ProgressUpload
-							icon={<ImageIcon />}
-							label={file?.name}
-							size={file?.size}
-							progress={progress.value}
-							onClick={removePicture}
-							error={errors["picture"]}
-						/>
-					) : (
-						""
-					)}
-					<Stack
-						direction="row"
-						mt={theme.spacing(10)}
-						gap={theme.spacing(5)}
-						justifyContent="flex-end"
+				) : (
+					""
+				)}
+				<Stack
+					direction="row"
+					mt={theme.spacing(10)}
+					gap={theme.spacing(5)}
+					justifyContent="flex-end"
+				>
+					<Button
+						variant="text"
+						color="info"
+						onClick={removePicture}
 					>
-						<Button
-							variant="text"
-							color="info"
-							onClick={removePicture}
-						>
-							Remove
-						</Button>
-						<Button
-							variant="contained"
-							color="primary"
-							onClick={handleUpdatePicture}
-							disabled={
-								(Object.keys(errors).length !== 0 && errors?.picture) ||
-								progress.value !== 100
-									? true
-									: false
-							}
-						>
-							Update
-						</Button>
-					</Stack>
+						Remove
+					</Button>
+					<Button
+						variant="contained"
+						color="primary"
+						onClick={handleUpdatePicture}
+						disabled={
+							(Object.keys(errors).length !== 0 && errors?.picture) ||
+							progress.value !== 100
+								? true
+								: false
+						}
+					>
+						Update
+					</Button>
 				</Stack>
-			</Modal>
+			</GenericDialog>
 		</TabPanel>
 	);
 };

Client/src/Components/TabPanels/Account/TeamPanel.jsx

@@ -1,6 +1,6 @@
 import { useTheme } from "@emotion/react";
 import TabPanel from "@mui/lab/TabPanel";
-import { Box, Button, ButtonGroup, Modal, Stack, Typography } from "@mui/material";
+import { Button, ButtonGroup, Stack, Typography } from "@mui/material";
 import { useEffect, useState } from "react";
 import Field from "../../Inputs/Field";
 import { credentials } from "../../../Validation/validation";
@@ -10,6 +10,7 @@ import { useSelector } from "react-redux";
 import BasicTable from "../../BasicTable";
 import Select from "../../Inputs/Select";
 import LoadingButton from "@mui/lab/LoadingButton";
+import { GenericDialog } from "../../Dialog/genericDialog";
 
 /**
  * TeamPanel component manages the organization and team members,
@@ -31,10 +32,10 @@ const TeamPanel = () => {
 
 	const { authToken, user } = useSelector((state) => state.auth);
 	//TODO
-	const [orgStates, setOrgStates] = useState({
-		name: "Bluewave Labs",
-		isEdit: false,
-	});
+	// const [orgStates, setOrgStates] = useState({
+	// 	name: "Bluewave Labs",
+	// 	isEdit: false,
+	// });
 	const [toInvite, setToInvite] = useState({
 		email: "",
 		role: ["0"],
@@ -134,10 +135,10 @@ const TeamPanel = () => {
 	}, [errors, toInvite.email]);
 
 	// RENAME ORGANIZATION
-	const toggleEdit = () => {
-		setOrgStates((prev) => ({ ...prev, isEdit: !prev.isEdit }));
-	};
-	const handleRename = () => {};
+	// const toggleEdit = () => {
+	// 	setOrgStates((prev) => ({ ...prev, isEdit: !prev.isEdit }));
+	// };
+	// const handleRename = () => {};
 
 	// INVITE MEMBER
 	const [isOpen, setIsOpen] = useState(false);
@@ -327,100 +328,65 @@ const TeamPanel = () => {
 					table={"team"}
 				/>
 			</Stack>
-			<Modal
-				aria-labelledby="modal-invite-member"
-				aria-describedby="invite-member-to-team"
+
+			<GenericDialog
+				title={"Invite new team member"}
+				description={
+					"When you add a new team member, they will get access to all monitors."
+				}
 				open={isOpen}
 				onClose={closeInviteModal}
+				theme={theme}
 			>
+				<Field
+					type="email"
+					id="input-team-member"
+					placeholder="Email"
+					value={toInvite.email}
+					onChange={handleChange}
+					error={errors.email}
+				/>
+				<Select
+					id="team-member-role"
+					placeholder="Select role"
+					isHidden={true}
+					value={toInvite.role[0]}
+					onChange={(event) =>
+						setToInvite((prev) => ({
+							...prev,
+							role: [event.target.value],
+						}))
+					}
+					items={[
+						{ _id: "admin", name: "Admin" },
+						{ _id: "user", name: "User" },
+					]}
+				/>
 				<Stack
-					gap={theme.spacing(5)}
-					sx={{
-						position: "absolute",
-						top: "50%",
-						left: "50%",
-						transform: "translate(-50%, -50%)",
-						width: 450,
-						bgcolor: theme.palette.background.main,
-						border: 1,
-						borderColor: theme.palette.border.light,
-						borderRadius: theme.shape.borderRadius,
-						boxShadow: theme.shape.boxShadow,
-						p: theme.spacing(15),
-						"&:focus": {
-							outline: "none",
-						},
-					}}
+					direction="row"
+					gap={theme.spacing(4)}
+					mt={theme.spacing(8)}
+					justifyContent="flex-end"
 				>
-					<Box>
-						<Typography
-							id="modal-invite-member"
-							component="h1"
-							fontWeight={600}
-							fontColor={theme.palette.text.secondary}
-						>
-							Invite new team member
-						</Typography>
-						<Typography
-							id="invite-member-to-team"
-							component="p"
-							fontSize={13}
-							color={theme.palette.text.accent}
-							sx={{ mt: theme.spacing(1), mb: theme.spacing(4) }}
-						>
-							When you add a new team member, they will get access to all monitors.
-						</Typography>
-					</Box>
-					<Field
-						type="email"
-						id="input-team-member"
-						placeholder="Email"
-						value={toInvite.email}
-						onChange={handleChange}
-						error={errors.email}
-					/>
-					<Select
-						id="team-member-role"
-						placeholder="Select role"
-						isHidden={true}
-						value={toInvite.role[0]}
-						onChange={(event) =>
-							setToInvite((prev) => ({
-								...prev,
-								role: [event.target.value],
-							}))
-						}
-						items={[
-							{ _id: "admin", name: "Admin" },
-							{ _id: "user", name: "User" },
-						]}
-					/>
-					<Stack
-						direction="row"
-						gap={theme.spacing(4)}
-						mt={theme.spacing(8)}
-						justifyContent="flex-end"
+					<LoadingButton
+						loading={isSendingInvite}
+						variant="text"
+						color="info"
+						onClick={closeInviteModal}
 					>
-						<LoadingButton
-							loading={isSendingInvite}
-							variant="text"
-							color="info"
-							onClick={closeInviteModal}
-						>
-							Cancel
-						</LoadingButton>
-						<LoadingButton
-							variant="contained"
-							color="primary"
-							onClick={handleInviteMember}
-							loading={isSendingInvite}
-							disabled={isDisabled}
-						>
-							Send invite
-						</LoadingButton>
-					</Stack>
+						Cancel
+					</LoadingButton>
+					<LoadingButton
+						variant="contained"
+						color="primary"
+						onClick={handleInviteMember}
+						loading={isSendingInvite}
+						disabled={isDisabled}
+					>
+						Send invite
+					</LoadingButton>
 				</Stack>
-			</Modal>
+			</GenericDialog>
 		</TabPanel>
 	);
 };

Client/src/Pages/Maintenance/MaintenanceTable/ActionsMenu/index.jsx

@@ -2,23 +2,16 @@ import { useState } from "react";
 import { useTheme } from "@emotion/react";
 import { useNavigate } from "react-router-dom";
 import { useSelector } from "react-redux";
-import {
-	Button,
-	IconButton,
-	Menu,
-	MenuItem,
-	Modal,
-	Stack,
-	Typography,
-} from "@mui/material";
-import LoadingButton from "@mui/lab/LoadingButton";
+import { IconButton, Menu, MenuItem } from "@mui/material";
 import { logger } from "../../../../Utils/Logger";
 import Settings from "../../../../assets/icons/settings-bold.svg?react";
 import PropTypes from "prop-types";
 import { networkService } from "../../../../main";
 import { createToast } from "../../../../Utils/toastUtils";
 
-const ActionsMenu = ({ isAdmin, maintenanceWindow, updateCallback }) => {
+import Dialog from "../../../../Components/Dialog";
+
+const ActionsMenu = ({ /* isAdmin, */ maintenanceWindow, updateCallback }) => {
 	maintenanceWindow;
 	const { authToken } = useSelector((state) => state.auth);
 	const [anchorEl, setAnchorEl] = useState(null);
@@ -155,71 +148,21 @@ const ActionsMenu = ({ isAdmin, maintenanceWindow, updateCallback }) => {
 					Remove
 				</MenuItem>
 			</Menu>
-			<Modal
-				aria-labelledby="modal-delete-monitor"
-				aria-describedby="delete-monitor-confirmation"
+			<Dialog
 				open={isOpen}
-				onClose={(e) => {
+				theme={theme}
+				title={"Do you really want to remove this maintenance window?"}
+				onCancel={(e) => {
 					e.stopPropagation();
 					setIsOpen(false);
 				}}
-			>
-				<Stack
-					gap={theme.spacing(2)}
-					sx={{
-						position: "absolute",
-						top: "50%",
-						left: "50%",
-						transform: "translate(-50%, -50%)",
-						width: 400,
-						bgcolor: theme.palette.background.main,
-						border: 1,
-						borderColor: theme.palette.border.light,
-						borderRadius: theme.shape.borderRadius,
-						boxShadow: 24,
-						p: theme.spacing(15),
-						"&:focus": {
-							outline: "none",
-						},
-					}}
-				>
-					<Typography
-						id="modal-delete-maintenance"
-						component="h2"
-						variant="h2"
-					>
-						Do you really want to remove this maintenance window?
-					</Typography>
-					<Stack
-						direction="row"
-						gap={theme.spacing(4)}
-						mt={theme.spacing(12)}
-						justifyContent="flex-end"
-					>
-						<Button
-							variant="text"
-							color="info"
-							onClick={(e) => {
-								e.stopPropagation();
-								setIsOpen(false);
-							}}
-						>
-							Cancel
-						</Button>
-						<LoadingButton
-							loading={isLoading}
-							variant="contained"
-							color="error"
-							onClick={(e) => {
-								e.stopPropagation(e);
-								handleRemove(e);
-							}}
-						>
-							Delete
-						</LoadingButton>
-					</Stack>
-				</Stack>
-			</Modal>
+				confirmationButtonLabel={"Delete"}
+				onConfirm={(e) => {
+					e.stopPropagation(e);
+					handleRemove(e);
+				}}
+				isLoading={isLoading}
+			/>
 		</>
 	);
 };

Client/src/Pages/Monitors/Configure/index.jsx

@@ -453,20 +453,17 @@ const Configure = () => {
 					</Stack>
 				</>
 			)}
+
 			<Dialog
-				modelTitle="modal-delete-monitor"
-				modelDescription="delete-monitor-confirmation"
 				open={isOpen}
-				onClose={() => setIsOpen(false)}
-				title="Do you really want to delete this monitor?"
-				confirmationBtnLbl="Delete"
-				confirmationBtnOnClick={handleRemove}
-				cancelBtnLbl="Cancel"
-				cancelBtnOnClick={() => setIsOpen(false)}
 				theme={theme}
-				isLoading={isLoading}
+				title="Do you really want to delete this monitor?"
 				description="Once deleted, this monitor cannot be retrieved."
-			></Dialog>
+				onCancel={() => setIsOpen(false)}
+				confirmationButtonLabel="Delete"
+				onConfirm={handleRemove}
+				isLoading={isLoading}
+			/>
 		</Stack>
 	);
 };

Client/src/Pages/Monitors/Home/actionsMenu.jsx

@@ -188,25 +188,25 @@ const ActionsMenu = ({ monitor, isAdmin, updateCallback }) => {
 				)}
 			</Menu>
 			<Dialog
-				modelTitle="modal-delete-monitor"
-				modelDescription="delete-monitor-confirmation"
 				open={isOpen}
-				onClose={() => setIsOpen(false)}
+				theme={theme}
 				title="Do you really want to delete this monitor?"
-				confirmationBtnLbl="Delete"
-				confirmationBtnOnClick={(e) => {
-					e.stopPropagation();
-					handleRemove(e);
-				}}
-				cancelBtnLbl="Cancel"
-				cancelBtnOnClick={(e) => {
+				description="Once deleted, this monitor cannot be retrieved."
+				/* Do we need stop propagation? */
+				onCancel={(e) => {
 					e.stopPropagation();
 					setIsOpen(false);
 				}}
-				theme={theme}
+				confirmationButtonLabel="Delete"
+				/* Do we need stop propagation? */
+				onConfirm={(e) => {
+					e.stopPropagation();
+					handleRemove(e);
+				}}
 				isLoading={isLoading}
-				description="Once deleted, this monitor cannot be retrieved."
-			></Dialog>
+				modelTitle="modal-delete-monitor"
+				modelDescription="delete-monitor-confirmation"
+			/>
 		</>
 	);
 };

Client/src/Pages/PageSpeed/Configure/index.jsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
 import { useTheme } from "@emotion/react";
-import { Box, Button, Modal, Stack, Tooltip, Typography } from "@mui/material";
+import { Box, Stack, Tooltip, Typography } from "@mui/material";
 import { useDispatch, useSelector } from "react-redux";
 import { useNavigate, useParams } from "react-router";
 import {
@@ -25,6 +25,7 @@ import PlayCircleOutlineRoundedIcon from "@mui/icons-material/PlayCircleOutlineR
 import SkeletonLayout from "./skeleton";
 import useUtils from "../../Monitors/utils";
 import "./index.css";
+import Dialog from "../../../Components/Dialog";
 
 const PageSpeedConfigure = () => {
 	const theme = useTheme();
@@ -37,6 +38,7 @@ const PageSpeedConfigure = () => {
 	const [monitor, setMonitor] = useState({});
 	const [errors, setErrors] = useState({});
 	const { statusColor, pagespeedStatusMsg, determineState } = useUtils();
+	const [buttonLoading, setButtonLoading] = useState(false);
 	const idMap = {
 		"monitor-url": "url",
 		"monitor-name": "name",
@@ -156,12 +158,14 @@ const PageSpeedConfigure = () => {
 	const [isOpen, setIsOpen] = useState(false);
 	const handleRemove = async (event) => {
 		event.preventDefault();
+		setButtonLoading(true);
 		const action = await dispatch(deletePageSpeed({ authToken, monitor }));
 		if (action.meta.requestStatus === "fulfilled") {
 			navigate("/pagespeed");
 		} else {
 			createToast({ body: "Failed to delete monitor." });
 		}
+		setButtonLoading(false);
 	};
 
 	return (
@@ -428,69 +432,16 @@ const PageSpeedConfigure = () => {
 					</Stack>
 				</>
 			)}
-			<Modal
-				aria-labelledby="modal-delete-pagespeed-monitor"
-				aria-describedby="delete-pagespeed-monitor-confirmation"
+			<Dialog
 				open={isOpen}
-				onClose={() => setIsOpen(false)}
-				disablePortal
-			>
-				<Stack
-					gap={theme.spacing(2)}
-					sx={{
-						position: "absolute",
-						top: "50%",
-						left: "50%",
-						transform: "translate(-50%, -50%)",
-						width: 400,
-						bgcolor: theme.palette.background.main,
-						border: 1,
-						borderColor: theme.palette.border.light,
-						borderRadius: theme.shape.borderRadius,
-						boxShadow: 24,
-						p: theme.spacing(15),
-						"&:focus": {
-							outline: "none",
-						},
-					}}
-				>
-					<Typography
-						id="modal-delete-pagespeed-monitor"
-						component="h2"
-						variant="h2"
-						fontWeight={500}
-					>
-						Do you really want to delete this monitor?
-					</Typography>
-					<Typography
-						id="delete-pagespeed-monitor-confirmation"
-						variant="body1"
-					>
-						Once deleted, this monitor cannot be retrieved.
-					</Typography>
-					<Stack
-						direction="row"
-						gap={theme.spacing(4)}
-						mt={theme.spacing(12)}
-						justifyContent="flex-end"
-					>
-						<Button
-							variant="text"
-							color="info"
-							onClick={() => setIsOpen(false)}
-						>
-							Cancel
-						</Button>
-						<Button
-							variant="contained"
-							color="error"
-							onClick={handleRemove}
-						>
-							Delete
-						</Button>
-					</Stack>
-				</Stack>
-			</Modal>
+				theme={theme}
+				title={"Do you really want to delete this monitor?"}
+				description={"Once deleted, this monitor cannot be retrieved."}
+				onCancel={() => setIsOpen(false)}
+				confirmationButtonLabel={"Delete"}
+				onConfirm={handleRemove}
+				isLoading={buttonLoading}
+			/>
 		</Stack>
 	);
 };

Client/src/Pages/Settings/index.jsx

@@ -263,18 +263,15 @@ const Settings = ({ isAdmin }) => {
 							</Box>
 						</Stack>
 						<Dialog
-							modelTitle="model-clear-stats"
-							modelDescription="clear-stats-confirmation"
 							open={isOpen.deleteStats}
-							onClose={() => setIsOpen(deleteStatsMonitorsInitState)}
-							title="Do you want to clear all stats?"
-							confirmationBtnLbl="Yes, clear all stats"
-							confirmationBtnOnClick={handleClearStats}
-							cancelBtnLbl="Cancel"
-							cancelBtnOnClick={() => setIsOpen(deleteStatsMonitorsInitState)}
 							theme={theme}
+							title="Do you want to clear all stats?"
+							description="Once deleted, this monitor cannot be retrieved."
+							onCancel={() => setIsOpen(deleteStatsMonitorsInitState)}
+							confirmationButtonLabel="Yes, clear all stats"
+							onConfirm={handleClearStats}
 							isLoading={isLoading || authIsLoading || checksIsLoading}
-						></Dialog>
+						/>
 					</ConfigBox>
 				)}
 				{isAdmin && (
@@ -314,18 +311,14 @@ const Settings = ({ isAdmin }) => {
 							</Box>
 						</Stack>
 						<Dialog
-							modelTitle="model-delete-all-monitors"
-							modelDescription="delete-all-monitors-confirmation"
 							open={isOpen.deleteMonitors}
-							onClose={() => setIsOpen(deleteStatsMonitorsInitState)}
-							title="Do you want to remove all monitors?"
-							confirmationBtnLbl="Yes, clear all monitors"
-							confirmationBtnOnClick={handleDeleteAllMonitors}
-							cancelBtnLbl="Cancel"
-							cancelBtnOnClick={() => setIsOpen(deleteStatsMonitorsInitState)}
 							theme={theme}
+							title="Do you want to remove all monitors?"
+							onCancel={() => setIsOpen(deleteStatsMonitorsInitState)}
+							confirmationButtonLabel="Yes, clear all monitors"
+							onConfirm={handleDeleteAllMonitors}
 							isLoading={isLoading || authIsLoading || checksIsLoading}
-						></Dialog>
+						/>
 					</ConfigBox>
 				)}
 				{isAdmin && (

Server/index.js

@@ -36,7 +36,7 @@ import mjml2html from "mjml";
 
 // Settings Service and dependencies
 import SettingsService from "./service/settingsService.js";
-import AppSettings from "../db/models/AppSettings.js";
+import AppSettings from "./db/models/AppSettings.js";
 
 import db from "./db/mongo/MongoDB.js";
 const SERVICE_NAME = "Server";

Server/package-lock.json

@@ -1655,11 +1655,12 @@
 			}
 		},
 		"node_modules/commander": {
-			"version": "6.2.1",
-			"resolved": "https://registry.npmjs.org/commander/-/commander-6.2.1.tgz",
-			"integrity": "sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==",
+			"version": "12.1.0",
+			"resolved": "https://registry.npmjs.org/commander/-/commander-12.1.0.tgz",
+			"integrity": "sha512-Vw8qHK3bZM9y/P10u3Vib8o/DdkvA2OtPtZvD871QKjy74Wj1WSKFILMPRPSdUSx5RFK1arlJzEtA4PkFgnbuA==",
+			"license": "MIT",
 			"engines": {
-				"node": ">= 6"
+				"node": ">=18"
 			}
 		},
 		"node_modules/concat-map": {
@@ -1738,9 +1739,10 @@
 			}
 		},
 		"node_modules/cookie": {
-			"version": "0.6.0",
-			"resolved": "https://registry.npmjs.org/cookie/-/cookie-0.6.0.tgz",
-			"integrity": "sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==",
+			"version": "0.7.1",
+			"resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.1.tgz",
+			"integrity": "sha512-6DnInpx7SJ2AK3+CTUE/ZM0vWTUboZCegxhC2xiIydHR9jNuTAASBrfEpHhiGOZw/nX51bHt6YQl8jsGo4y/0w==",
+			"license": "MIT",
 			"engines": {
 				"node": ">= 0.6"
 			}
@@ -2205,6 +2207,31 @@
 				"node": ">= 0.8"
 			}
 		},
+		"node_modules/encoding-sniffer": {
+			"version": "0.2.0",
+			"resolved": "https://registry.npmjs.org/encoding-sniffer/-/encoding-sniffer-0.2.0.tgz",
+			"integrity": "sha512-ju7Wq1kg04I3HtiYIOrUrdfdDvkyO9s5XM8QAj/bN61Yo/Vb4vgJxy5vi4Yxk01gWHbrofpPtpxM8bKger9jhg==",
+			"license": "MIT",
+			"dependencies": {
+				"iconv-lite": "^0.6.3",
+				"whatwg-encoding": "^3.1.1"
+			},
+			"funding": {
+				"url": "https://github.com/fb55/encoding-sniffer?sponsor=1"
+			}
+		},
+		"node_modules/encoding-sniffer/node_modules/iconv-lite": {
+			"version": "0.6.3",
+			"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+			"integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+			"license": "MIT",
+			"dependencies": {
+				"safer-buffer": ">= 2.1.2 < 3.0.0"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
 		"node_modules/entities": {
 			"version": "4.5.0",
 			"resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
@@ -2268,6 +2295,7 @@
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/escape-goat/-/escape-goat-3.0.0.tgz",
 			"integrity": "sha512-w3PwNZJwRxlp47QGzhuEBldEqVHHhh8/tIPcl6ecf2Bou99cdAt0knihBV0Ecc7CGxYduXVBDheH1K2oADRlvw==",
+			"license": "MIT",
 			"engines": {
 				"node": ">=10"
 			},
@@ -2310,9 +2338,9 @@
 			}
 		},
 		"node_modules/express": {
-			"version": "4.21.0",
-			"resolved": "https://registry.npmjs.org/express/-/express-4.21.0.tgz",
-			"integrity": "sha512-VqcNGcj/Id5ZT1LZ/cfihi3ttTn+NJmkli2eZADigjq29qTlWi/hAQ43t/VLPq8+UX06FCEx3ByOYet6ZFblng==",
+			"version": "4.21.1",
+			"resolved": "https://registry.npmjs.org/express/-/express-4.21.1.tgz",
+			"integrity": "sha512-YSFlK1Ee0/GC8QaO91tHcDxJiE/X4FbpAyQWkxAvG6AXCuR65YzK8ua6D9hvi/TzUfZMpc+BwuM1IPw8fmQBiQ==",
 			"license": "MIT",
 			"dependencies": {
 				"accepts": "~1.3.8",
@@ -2320,7 +2348,7 @@
 				"body-parser": "1.20.3",
 				"content-disposition": "0.5.4",
 				"content-type": "~1.0.4",
-				"cookie": "0.6.0",
+				"cookie": "0.7.1",
 				"cookie-signature": "1.0.6",
 				"debug": "2.6.9",
 				"depd": "2.0.0",
@@ -3231,21 +3259,66 @@
 			"integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
 		},
 		"node_modules/juice": {
-			"version": "10.0.0",
-			"resolved": "https://registry.npmjs.org/juice/-/juice-10.0.0.tgz",
-			"integrity": "sha512-9f68xmhGrnIi6DBkiiP3rUrQN33SEuaKu1+njX6VgMP+jwZAsnT33WIzlrWICL9matkhYu3OyrqSUP55YTIdGg==",
+			"version": "11.0.0",
+			"resolved": "https://registry.npmjs.org/juice/-/juice-11.0.0.tgz",
+			"integrity": "sha512-sGF8hPz9/Wg+YXbaNDqc1Iuoaw+J/P9lBHNQKXAGc9pPNjCd4fyPai0Zxj7MRtdjMr0lcgk5PjEIkP2b8R9F3w==",
+			"license": "MIT",
 			"dependencies": {
-				"cheerio": "^1.0.0-rc.12",
-				"commander": "^6.1.0",
+				"cheerio": "^1.0.0",
+				"commander": "^12.1.0",
 				"mensch": "^0.3.4",
 				"slick": "^1.12.2",
-				"web-resource-inliner": "^6.0.1"
+				"web-resource-inliner": "^7.0.0"
 			},
 			"bin": {
 				"juice": "bin/juice"
 			},
 			"engines": {
-				"node": ">=10.0.0"
+				"node": ">=18.17"
+			}
+		},
+		"node_modules/juice/node_modules/cheerio": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/cheerio/-/cheerio-1.0.0.tgz",
+			"integrity": "sha512-quS9HgjQpdaXOvsZz82Oz7uxtXiy6UIsIQcpBj7HRw2M63Skasm9qlDocAM7jNuaxdhpPU7c4kJN+gA5MCu4ww==",
+			"license": "MIT",
+			"dependencies": {
+				"cheerio-select": "^2.1.0",
+				"dom-serializer": "^2.0.0",
+				"domhandler": "^5.0.3",
+				"domutils": "^3.1.0",
+				"encoding-sniffer": "^0.2.0",
+				"htmlparser2": "^9.1.0",
+				"parse5": "^7.1.2",
+				"parse5-htmlparser2-tree-adapter": "^7.0.0",
+				"parse5-parser-stream": "^7.1.2",
+				"undici": "^6.19.5",
+				"whatwg-mimetype": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=18.17"
+			},
+			"funding": {
+				"url": "https://github.com/cheeriojs/cheerio?sponsor=1"
+			}
+		},
+		"node_modules/juice/node_modules/htmlparser2": {
+			"version": "9.1.0",
+			"resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-9.1.0.tgz",
+			"integrity": "sha512-5zfg6mHUoaer/97TxnGpxmbR7zJtPwIYFMZ/H5ucTlPZhKvtum05yiPK3Mgai3a0DyVxv7qYqoweaEd2nrYQzQ==",
+			"funding": [
+				"https://github.com/fb55/htmlparser2?sponsor=1",
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/fb55"
+				}
+			],
+			"license": "MIT",
+			"dependencies": {
+				"domelementtype": "^2.3.0",
+				"domhandler": "^5.0.3",
+				"domutils": "^3.1.0",
+				"entities": "^4.5.0"
 			}
 		},
 		"node_modules/just-extend": {
@@ -3573,7 +3646,8 @@
 		"node_modules/mensch": {
 			"version": "0.3.4",
 			"resolved": "https://registry.npmjs.org/mensch/-/mensch-0.3.4.tgz",
-			"integrity": "sha512-IAeFvcOnV9V0Yk+bFhYR07O3yNina9ANIN5MoXBKYJ/RLYPurd2d0yw14MDhpr9/momp0WofT1bPUh3hkzdi/g=="
+			"integrity": "sha512-IAeFvcOnV9V0Yk+bFhYR07O3yNina9ANIN5MoXBKYJ/RLYPurd2d0yw14MDhpr9/momp0WofT1bPUh3hkzdi/g==",
+			"license": "MIT"
 		},
 		"node_modules/merge-descriptors": {
 			"version": "1.0.3",
@@ -3675,73 +3749,79 @@
 			}
 		},
 		"node_modules/mjml": {
-			"version": "5.0.0-alpha.4",
-			"resolved": "https://registry.npmjs.org/mjml/-/mjml-5.0.0-alpha.4.tgz",
-			"integrity": "sha512-SUdO4F/XYtXkIYKgjC3hO2oplSllb3DRsHxdNNMuyYh0y2HMxVgqjCcViCBLKc8zJrWM4NO5deZwO+8NjLcM2Q==",
+			"version": "5.0.0-alpha.6",
+			"resolved": "https://registry.npmjs.org/mjml/-/mjml-5.0.0-alpha.6.tgz",
+			"integrity": "sha512-unizId6dKTQSHq1nGnRQqe58kpD7VJu9p+vfMsKO4911/+VCrxkFe0oiwS7Q6XA3rc224MVChO2Mvueyeh16jg==",
+			"license": "MIT",
 			"dependencies": {
 				"@babel/runtime": "^7.23.9",
-				"mjml-cli": "5.0.0-alpha.4",
-				"mjml-core": "5.0.0-alpha.4",
-				"mjml-preset-core": "5.0.0-alpha.4",
-				"mjml-validator": "5.0.0-alpha.4"
+				"mjml-cli": "5.0.0-alpha.6",
+				"mjml-core": "5.0.0-alpha.6",
+				"mjml-preset-core": "5.0.0-alpha.6",
+				"mjml-validator": "5.0.0-alpha.6"
 			},
 			"bin": {
 				"mjml": "bin/mjml"
 			}
 		},
 		"node_modules/mjml-accordion": {
-			"version": "5.0.0-alpha.4",
-			"resolved": "https://registry.npmjs.org/mjml-accordion/-/mjml-accordion-5.0.0-alpha.4.tgz",
-			"integrity": "sha512-Mw1DnHRJHwHLqkwAXcRLBHZMYLtw7qqDNJdxISihz5KyY2arc8MbZixoUHCd3M/2zw04J8fU5HJ8WslANrmu9g==",
+			"version": "5.0.0-alpha.6",
+			"resolved": "https://registry.npmjs.org/mjml-accordion/-/mjml-accordion-5.0.0-alpha.6.tgz",
+			"integrity": "sha512-K7FS8HZQsfUNkvwUWMjCmaEEtHRrqEDddyaVoOE6+ir4H6aWAJUZqp1j/USQsYwMI3YAS3UDpqQEOagG4pRDqg==",
+			"license": "MIT",
 			"dependencies": {
 				"@babel/runtime": "^7.23.9",
 				"lodash": "^4.17.21",
-				"mjml-core": "5.0.0-alpha.4"
+				"mjml-core": "5.0.0-alpha.6"
 			}
 		},
 		"node_modules/mjml-body": {
-			"version": "5.0.0-alpha.4",
-			"resolved": "https://registry.npmjs.org/mjml-body/-/mjml-body-5.0.0-alpha.4.tgz",
-			"integrity": "sha512-hPa4JpaF7rmKgKdC/DqC9SM97XoXoWPAf8c+8GpSvn/9AwXnt9X0TgBoP7/sUR26N06j26+/fprB7cTiqy/glA==",
+			"version": "5.0.0-alpha.6",
+			"resolved": "https://registry.npmjs.org/mjml-body/-/mjml-body-5.0.0-alpha.6.tgz",
+			"integrity": "sha512-otkINnYsBVbKSYqOz/FmhQruOpYzT10w9+UGcOZdBwv+UqDoKHXAD8QeSFZxr7fDSFhc6qeFAKNSY5uciT1ZuQ==",
+			"license": "MIT",
 			"dependencies": {
 				"@babel/runtime": "^7.23.9",
 				"lodash": "^4.17.21",
-				"mjml-core": "5.0.0-alpha.4"
+				"mjml-core": "5.0.0-alpha.6"
 			}
 		},
 		"node_modules/mjml-button": {
-			"version": "5.0.0-alpha.4",
-			"resolved": "https://registry.npmjs.org/mjml-button/-/mjml-button-5.0.0-alpha.4.tgz",
-			"integrity": "sha512-4rOobUMBuoDjsnqFgtLMBZMdnTmS8vMLI+ZfrvyyxaPL9RbeISZlbl3/RvxiZjAyctPh92X/PazKhHJyeSSqeg==",
+			"version": "5.0.0-alpha.6",
+			"resolved": "https://registry.npmjs.org/mjml-button/-/mjml-button-5.0.0-alpha.6.tgz",
+			"integrity": "sha512-Z+0J6F2hk7QxKydlABna/vcGtTl7WfMWMLH74x9T1VgNylUAZ2TaWOUAo1AbWICgYBmZfNw1UkDj4EFvb+B1LA==",
+			"license": "MIT",
 			"dependencies": {
 				"@babel/runtime": "^7.23.9",
 				"lodash": "^4.17.21",
-				"mjml-core": "5.0.0-alpha.4"
+				"mjml-core": "5.0.0-alpha.6"
 			}
 		},
 		"node_modules/mjml-carousel": {
-			"version": "5.0.0-alpha.4",
-			"resolved": "https://registry.npmjs.org/mjml-carousel/-/mjml-carousel-5.0.0-alpha.4.tgz",
-			"integrity": "sha512-cUPIFLoseSlsq0/w/gB5/sMd88P2LCPK+ISllSdvyO4Lo2+uHDlmwMxRCBBIuWJBunqVH9v2Z2MtAIOL6DqJsQ==",
+			"version": "5.0.0-alpha.6",
+			"resolved": "https://registry.npmjs.org/mjml-carousel/-/mjml-carousel-5.0.0-alpha.6.tgz",
+			"integrity": "sha512-G2n6D6smGmQEKGByjR52UD14D/0gtVokaEI4wjG7UjisSGYGbDXJW4thfDv2RdwIoozXyGhJD3vRuHsoCPeFnw==",
+			"license": "MIT",
 			"dependencies": {
 				"@babel/runtime": "^7.23.9",
 				"lodash": "^4.17.21",
-				"mjml-core": "5.0.0-alpha.4"
+				"mjml-core": "5.0.0-alpha.6"
 			}
 		},
 		"node_modules/mjml-cli": {
-			"version": "5.0.0-alpha.4",
-			"resolved": "https://registry.npmjs.org/mjml-cli/-/mjml-cli-5.0.0-alpha.4.tgz",
-			"integrity": "sha512-YXaCYxQ64I1DFmlJe5OI6S1U3jbF3CdfSw+IsOTxxY+i0lEyuiqJxLceKA2ogAwMjlZEm1BBGENqNnvDjeXmUw==",
+			"version": "5.0.0-alpha.6",
+			"resolved": "https://registry.npmjs.org/mjml-cli/-/mjml-cli-5.0.0-alpha.6.tgz",
+			"integrity": "sha512-mHmw5MCLNImcUUnYwl1yPF3meAd2EApnriMp8DTEN3zCqXsMg1RV8EB1npp4Camwz8HvVMTvEjSoVotwNWxAMg==",
+			"license": "MIT",
 			"dependencies": {
 				"@babel/runtime": "^7.23.9",
 				"chokidar": "^3.0.0",
 				"glob": "^10.3.10",
 				"lodash": "^4.17.21",
 				"minimatch": "^9.0.3",
-				"mjml-core": "5.0.0-alpha.4",
-				"mjml-parser-xml": "5.0.0-alpha.4",
-				"mjml-validator": "5.0.0-alpha.4",
+				"mjml-core": "5.0.0-alpha.6",
+				"mjml-parser-xml": "5.0.0-alpha.6",
+				"mjml-validator": "5.0.0-alpha.6",
 				"yargs": "^17.7.2"
 			},
 			"bin": {
@@ -3798,172 +3878,188 @@
 			}
 		},
 		"node_modules/mjml-column": {
-			"version": "5.0.0-alpha.4",
-			"resolved": "https://registry.npmjs.org/mjml-column/-/mjml-column-5.0.0-alpha.4.tgz",
-			"integrity": "sha512-5gT0YNU+aAjpUxS39ySS2SqL+NLyXkCi4BPutzZTnmz2CvIwrBIOJVEHRAWSjNUWFfFLS4scquI8yO4g8AVfdA==",
+			"version": "5.0.0-alpha.6",
+			"resolved": "https://registry.npmjs.org/mjml-column/-/mjml-column-5.0.0-alpha.6.tgz",
+			"integrity": "sha512-FWpmyCH1kzV3g0P6po1OMVOLTgQXDTbo6z30ew+CylUYnn1w5Vh30T1ZvSPYQDc2jGqjsX1zuWO/JUjOJ5B2RQ==",
+			"license": "MIT",
 			"dependencies": {
 				"@babel/runtime": "^7.23.9",
 				"lodash": "^4.17.21",
-				"mjml-core": "5.0.0-alpha.4"
+				"mjml-core": "5.0.0-alpha.6"
 			}
 		},
 		"node_modules/mjml-core": {
-			"version": "5.0.0-alpha.4",
-			"resolved": "https://registry.npmjs.org/mjml-core/-/mjml-core-5.0.0-alpha.4.tgz",
-			"integrity": "sha512-QioM27JKUWhCfDbHxY1YnkgpTF0Y+hV1MHy5XeVTQlvIbEeRcO+gAPzhVooGYsKqQL/dWNM9jl34el0peRoscQ==",
+			"version": "5.0.0-alpha.6",
+			"resolved": "https://registry.npmjs.org/mjml-core/-/mjml-core-5.0.0-alpha.6.tgz",
+			"integrity": "sha512-rrGr+xrOCnJ+3V/+LeqA4BCp7jrXiRq0q37FlmSs+etE86yNqMMFMgEFEbeGYTTQO07WuqXlhPSuq85ucAoivg==",
+			"license": "MIT",
 			"dependencies": {
 				"@babel/runtime": "^7.23.9",
 				"cheerio": "1.0.0-rc.12",
 				"cssnano": "^7.0.1",
 				"detect-node": "^2.0.4",
 				"htmlnano": "^2.1.1",
-				"juice": "^10.0.0",
+				"juice": "^11.0.0",
 				"lodash": "^4.17.21",
-				"mjml-parser-xml": "5.0.0-alpha.4",
-				"mjml-validator": "5.0.0-alpha.4",
+				"mjml-parser-xml": "5.0.0-alpha.6",
+				"mjml-validator": "5.0.0-alpha.6",
 				"postcss": "^8.4.33",
 				"prettier": "^3.2.4"
 			}
 		},
 		"node_modules/mjml-divider": {
-			"version": "5.0.0-alpha.4",
-			"resolved": "https://registry.npmjs.org/mjml-divider/-/mjml-divider-5.0.0-alpha.4.tgz",
-			"integrity": "sha512-sPv5CARR7NX6ohbpJCzErgv3Y1rUnmtOs3SeiEgp4Y9J+O+wKaOZa/ffuNHVrxkC26U91e3zmbWItfIILPUgYA==",
+			"version": "5.0.0-alpha.6",
+			"resolved": "https://registry.npmjs.org/mjml-divider/-/mjml-divider-5.0.0-alpha.6.tgz",
+			"integrity": "sha512-lw0rQNn2Y4LRcF/ad4JUjVRsyXhYXdaos6yOXPFjRN8aK1T4p7XctZyP5RMl7m8YfXTNxxyN//hN3bQI5DwvgQ==",
+			"license": "MIT",
 			"dependencies": {
 				"@babel/runtime": "^7.23.9",
 				"lodash": "^4.17.21",
-				"mjml-core": "5.0.0-alpha.4"
+				"mjml-core": "5.0.0-alpha.6"
 			}
 		},
 		"node_modules/mjml-group": {
-			"version": "5.0.0-alpha.4",
-			"resolved": "https://registry.npmjs.org/mjml-group/-/mjml-group-5.0.0-alpha.4.tgz",
-			"integrity": "sha512-V+YuKGwL6JMTAnvTsKQM4wF6VPiHCgo92aN9iNuY46N8oYM349pEgrHDBAWRhyZ7UAov/UoPUUJRydJk4PCGyw==",
+			"version": "5.0.0-alpha.6",
+			"resolved": "https://registry.npmjs.org/mjml-group/-/mjml-group-5.0.0-alpha.6.tgz",
+			"integrity": "sha512-No9EeJC9GSpqmxfo0laCmUU0w0xhHb3HaliFJPh7YlzObyRE3nvawHtPYpfNW3lgYNl0U7oYMlN9AQum/DaW2Q==",
+			"license": "MIT",
 			"dependencies": {
 				"@babel/runtime": "^7.23.9",
 				"lodash": "^4.17.21",
-				"mjml-core": "5.0.0-alpha.4"
+				"mjml-core": "5.0.0-alpha.6"
 			}
 		},
 		"node_modules/mjml-head": {
-			"version": "5.0.0-alpha.4",
-			"resolved": "https://registry.npmjs.org/mjml-head/-/mjml-head-5.0.0-alpha.4.tgz",
-			"integrity": "sha512-QF+l4pCYbmTvFPz522k8hbzJgWGmOj16/bTwE+mhGueRRMGmVAp7gCqeNnI9PO/O8zTF7fisgseUuHmAWkCIFg==",
+			"version": "5.0.0-alpha.6",
+			"resolved": "https://registry.npmjs.org/mjml-head/-/mjml-head-5.0.0-alpha.6.tgz",
+			"integrity": "sha512-owBfZUcwHV2Wjow32QkRNZClbVHIAthacskvowAODUlOfTG1Xj0czlAM6iCG73cSqmZFuocOD9hy47y0l00Qeg==",
+			"license": "MIT",
 			"dependencies": {
 				"@babel/runtime": "^7.23.9",
 				"lodash": "^4.17.21",
-				"mjml-core": "5.0.0-alpha.4"
+				"mjml-core": "5.0.0-alpha.6"
 			}
 		},
 		"node_modules/mjml-head-attributes": {
-			"version": "5.0.0-alpha.4",
-			"resolved": "https://registry.npmjs.org/mjml-head-attributes/-/mjml-head-attributes-5.0.0-alpha.4.tgz",
-			"integrity": "sha512-EmyiNar6SeaMDcTa8gchUoONfNbUfCjI3eAwjkHy1SfDl5tXKku2W1oXCst8vtNpjoBzllHcTW81x0OpgDM4Cg==",
+			"version": "5.0.0-alpha.6",
+			"resolved": "https://registry.npmjs.org/mjml-head-attributes/-/mjml-head-attributes-5.0.0-alpha.6.tgz",
+			"integrity": "sha512-CW/E+IEw3MOLTWkTMbN6egPwoeg22Iup+fICAH9rmITD6SBJ6f37/MFiACSmpkDQIlWdFokBFFKpikbPWFJKQA==",
+			"license": "MIT",
 			"dependencies": {
 				"@babel/runtime": "^7.23.9",
 				"lodash": "^4.17.21",
-				"mjml-core": "5.0.0-alpha.4"
+				"mjml-core": "5.0.0-alpha.6"
 			}
 		},
 		"node_modules/mjml-head-breakpoint": {
-			"version": "5.0.0-alpha.4",
-			"resolved": "https://registry.npmjs.org/mjml-head-breakpoint/-/mjml-head-breakpoint-5.0.0-alpha.4.tgz",
-			"integrity": "sha512-S8FBpMKO2wDTJscy6EtQuQRZMu1YSOD5fCZ6sHINWC2A40I1ZFsCAvlLtW/vr9P50XjgX06m1T/vTcYifMCMMQ==",
+			"version": "5.0.0-alpha.6",
+			"resolved": "https://registry.npmjs.org/mjml-head-breakpoint/-/mjml-head-breakpoint-5.0.0-alpha.6.tgz",
+			"integrity": "sha512-3RsHM0l3VU+NhG4MAsXevLH50s/uOJqbZznGVKkgEBsodKDhFK2ndlmUWZ5ywDO6H2g/qDrZse4c1K43uGoyzA==",
+			"license": "MIT",
 			"dependencies": {
 				"@babel/runtime": "^7.23.9",
 				"lodash": "^4.17.21",
-				"mjml-core": "5.0.0-alpha.4"
+				"mjml-core": "5.0.0-alpha.6"
 			}
 		},
 		"node_modules/mjml-head-font": {
-			"version": "5.0.0-alpha.4",
-			"resolved": "https://registry.npmjs.org/mjml-head-font/-/mjml-head-font-5.0.0-alpha.4.tgz",
-			"integrity": "sha512-bc/bduI1BljN1rjcF8w5TOBZ+D0eBu5O0BnSqLwoct7xeoTTvYLxuTsdgoloh6Jm1vf3RMqr4ANySDrXvFkoPw==",
+			"version": "5.0.0-alpha.6",
+			"resolved": "https://registry.npmjs.org/mjml-head-font/-/mjml-head-font-5.0.0-alpha.6.tgz",
+			"integrity": "sha512-+HZ/Ppd/hfFgob9M27Tz9qio/vWwyTwjo40PsYSI6zXKmIUHC5icBcHaezUKMDGadgd+11aXlPLVfs6zGb0hVg==",
+			"license": "MIT",
 			"dependencies": {
 				"@babel/runtime": "^7.23.9",
 				"lodash": "^4.17.21",
-				"mjml-core": "5.0.0-alpha.4"
+				"mjml-core": "5.0.0-alpha.6"
 			}
 		},
 		"node_modules/mjml-head-html-attributes": {
-			"version": "5.0.0-alpha.4",
-			"resolved": "https://registry.npmjs.org/mjml-head-html-attributes/-/mjml-head-html-attributes-5.0.0-alpha.4.tgz",
-			"integrity": "sha512-NJwXgE3o1E3BcVTG6+Hl/ofCZFsoKnjt//Sm/Ks+0u+aZD7VycsF+nXxBlMLOWhMQrP+JIZAok7mYE+A1ztAPg==",
+			"version": "5.0.0-alpha.6",
+			"resolved": "https://registry.npmjs.org/mjml-head-html-attributes/-/mjml-head-html-attributes-5.0.0-alpha.6.tgz",
+			"integrity": "sha512-INI3irUFHozLfJCW0pi/499DhlwqpsFEoGQ++NdHlFH87hbQ2XTNlrTHWpgjhSuiJkRJinPYHphRuNyM3KLyVw==",
+			"license": "MIT",
 			"dependencies": {
 				"@babel/runtime": "^7.23.9",
 				"lodash": "^4.17.21",
-				"mjml-core": "5.0.0-alpha.4"
+				"mjml-core": "5.0.0-alpha.6"
 			}
 		},
 		"node_modules/mjml-head-preview": {
-			"version": "5.0.0-alpha.4",
-			"resolved": "https://registry.npmjs.org/mjml-head-preview/-/mjml-head-preview-5.0.0-alpha.4.tgz",
-			"integrity": "sha512-cH2VaTVapSeYd+OIfeG7yQtZVDSGqV86iUE4UHasTFpaxcPigpaS5NzAiDL9f7Pzp83q/eL6tdc3r7jX7IHkBQ==",
+			"version": "5.0.0-alpha.6",
+			"resolved": "https://registry.npmjs.org/mjml-head-preview/-/mjml-head-preview-5.0.0-alpha.6.tgz",
+			"integrity": "sha512-HGLcYmJ7q4aYD5VNTUKIvk6wvpXUawI5j4yl9m+DEhk2ptKYmayxLpjiAvH+LioNuPh0zTCGt7U9f5Ja0948gQ==",
+			"license": "MIT",
 			"dependencies": {
 				"@babel/runtime": "^7.23.9",
 				"lodash": "^4.17.21",
-				"mjml-core": "5.0.0-alpha.4"
+				"mjml-core": "5.0.0-alpha.6"
 			}
 		},
 		"node_modules/mjml-head-style": {
-			"version": "5.0.0-alpha.4",
-			"resolved": "https://registry.npmjs.org/mjml-head-style/-/mjml-head-style-5.0.0-alpha.4.tgz",
-			"integrity": "sha512-7WAsEctOMFOsH8WYrJ/6ZZ2x+m4SKCdpgXWoJwcIVVXiwt/I9C0iGW5b82ZJh0jaGEH5i1dsKMcMcvKnHuiTog==",
+			"version": "5.0.0-alpha.6",
+			"resolved": "https://registry.npmjs.org/mjml-head-style/-/mjml-head-style-5.0.0-alpha.6.tgz",
+			"integrity": "sha512-yQcHIvZGH641irNt21r4hzODp5rEI/qKJRvGVJ6vzyGm7poYbaoxhK7Re9cRu+xZxLpkiTRgf1DYFjyZN45SiQ==",
+			"license": "MIT",
 			"dependencies": {
 				"@babel/runtime": "^7.23.9",
 				"lodash": "^4.17.21",
-				"mjml-core": "5.0.0-alpha.4"
+				"mjml-core": "5.0.0-alpha.6"
 			}
 		},
 		"node_modules/mjml-head-title": {
-			"version": "5.0.0-alpha.4",
-			"resolved": "https://registry.npmjs.org/mjml-head-title/-/mjml-head-title-5.0.0-alpha.4.tgz",
-			"integrity": "sha512-GL/LKPkqbyCb0fRrf5NL0Xx/1xX0nF5dVQsmwfH7YdGM8Syx+ging2lrOhRxUic6NE0STXz5H16c0+oisU2HCQ==",
+			"version": "5.0.0-alpha.6",
+			"resolved": "https://registry.npmjs.org/mjml-head-title/-/mjml-head-title-5.0.0-alpha.6.tgz",
+			"integrity": "sha512-m6dGCAItgobZSJ7wlETFPth6rU0+617ZVk1f88Mz5I+YVuOgaAqdNDQWdue5Uj7B19c55NmtdZwsgOKmhHuwow==",
+			"license": "MIT",
 			"dependencies": {
 				"@babel/runtime": "^7.23.9",
 				"lodash": "^4.17.21",
-				"mjml-core": "5.0.0-alpha.4"
+				"mjml-core": "5.0.0-alpha.6"
 			}
 		},
 		"node_modules/mjml-hero": {
-			"version": "5.0.0-alpha.4",
-			"resolved": "https://registry.npmjs.org/mjml-hero/-/mjml-hero-5.0.0-alpha.4.tgz",
-			"integrity": "sha512-KNjc+uEuEs5edlQxkoLnSSQw302M+GSBuGYEO1kThiFeJavZvdCeV9W+bTdeM6i7Cbn+UjfJQPPVaAo+yT6ETg==",
+			"version": "5.0.0-alpha.6",
+			"resolved": "https://registry.npmjs.org/mjml-hero/-/mjml-hero-5.0.0-alpha.6.tgz",
+			"integrity": "sha512-OLOKTK/VW4fQOH8yQz1e5kKHfyF0heECghPhmxgnEHigJLbaJy/rmb4x4aq0Lr74Bme8hsMjkR+oktGej1c4iQ==",
+			"license": "MIT",
 			"dependencies": {
 				"@babel/runtime": "^7.23.9",
 				"lodash": "^4.17.21",
-				"mjml-core": "5.0.0-alpha.4"
+				"mjml-core": "5.0.0-alpha.6"
 			}
 		},
 		"node_modules/mjml-image": {
-			"version": "5.0.0-alpha.4",
-			"resolved": "https://registry.npmjs.org/mjml-image/-/mjml-image-5.0.0-alpha.4.tgz",
-			"integrity": "sha512-9oQJOOav9dWQcl8lUnn0ZVHCKnV/4Z8G6roT5FZBF6yKoqMCcgCJ9Sfhp3KqRzDvTVAsTnM8EzNDC+tBImD6Og==",
+			"version": "5.0.0-alpha.6",
+			"resolved": "https://registry.npmjs.org/mjml-image/-/mjml-image-5.0.0-alpha.6.tgz",
+			"integrity": "sha512-NENjbEOzobM0iQLlxJUNuqiNlFSP5E1DfiP37bY8smYmpVe4MXi5HC5ajTH5ZBKWsTN4/UVZL7t+ZSqniTnS5w==",
+			"license": "MIT",
 			"dependencies": {
 				"@babel/runtime": "^7.23.9",
 				"lodash": "^4.17.21",
-				"mjml-core": "5.0.0-alpha.4"
+				"mjml-core": "5.0.0-alpha.6"
 			}
 		},
 		"node_modules/mjml-navbar": {
-			"version": "5.0.0-alpha.4",
-			"resolved": "https://registry.npmjs.org/mjml-navbar/-/mjml-navbar-5.0.0-alpha.4.tgz",
-			"integrity": "sha512-cMgeW1SeSlqYuMe7knVk/PXkroLwdI/jBopXetJVWFSURJij9AHto6vKmd+/aFlfPC8oWKPBKvEieCwEDgk6Lg==",
+			"version": "5.0.0-alpha.6",
+			"resolved": "https://registry.npmjs.org/mjml-navbar/-/mjml-navbar-5.0.0-alpha.6.tgz",
+			"integrity": "sha512-bj328dixWJqox9CaA/rvIKsTZ7c5g1mN9B0gL2vuzVMXgX4qnXkzIfN2hw98TdffaKGsKXC6N25iIDVocj1RrQ==",
+			"license": "MIT",
 			"dependencies": {
 				"@babel/runtime": "^7.23.9",
 				"lodash": "^4.17.21",
-				"mjml-core": "5.0.0-alpha.4"
+				"mjml-core": "5.0.0-alpha.6"
 			}
 		},
 		"node_modules/mjml-parser-xml": {
-			"version": "5.0.0-alpha.4",
-			"resolved": "https://registry.npmjs.org/mjml-parser-xml/-/mjml-parser-xml-5.0.0-alpha.4.tgz",
-			"integrity": "sha512-pk2sWuaUgiX2CwbL2qsh1g7Ry110YQMnX84KuIcEnzOQaCyuvGtOGIXuOiOthLRbVnKz15P7EsNnwHRg/d/Ihw==",
+			"version": "5.0.0-alpha.6",
+			"resolved": "https://registry.npmjs.org/mjml-parser-xml/-/mjml-parser-xml-5.0.0-alpha.6.tgz",
+			"integrity": "sha512-2gxzFJXBFq6l8f2/HlDq7MBLtWQja0KPSqePxPBOXmNLjqw6bdSflnQu+OhWVptdywuHm907LNIQVIq0wSo2FQ==",
+			"license": "MIT",
 			"dependencies": {
 				"@babel/runtime": "^7.23.9",
 				"detect-node": "2.1.0",
 				"htmlparser2": "^9.1.0",
-				"lodash": "^4.17.15"
+				"lodash": "^4.17.21"
 			}
 		},
 		"node_modules/mjml-parser-xml/node_modules/htmlparser2": {
@@ -3977,6 +4073,7 @@
 					"url": "https://github.com/sponsors/fb55"
 				}
 			],
+			"license": "MIT",
 			"dependencies": {
 				"domelementtype": "^2.3.0",
 				"domhandler": "^5.0.3",
@@ -3985,115 +4082,124 @@
 			}
 		},
 		"node_modules/mjml-preset-core": {
-			"version": "5.0.0-alpha.4",
-			"resolved": "https://registry.npmjs.org/mjml-preset-core/-/mjml-preset-core-5.0.0-alpha.4.tgz",
-			"integrity": "sha512-V5I+3NJoSV/pFia5MjP5u8BgqJwHqR4KigUjGtOr5chZljyehFNOeL8ghEZ551BCzMrtMzarnChsEnkHI1Qirw==",
+			"version": "5.0.0-alpha.6",
+			"resolved": "https://registry.npmjs.org/mjml-preset-core/-/mjml-preset-core-5.0.0-alpha.6.tgz",
+			"integrity": "sha512-6K9sPXlxQfe9Vx/8/wAFW2Sy6ImWU1AP37VG08Ge7Mj117cNeKk3S1piagbj6LpyTd7E7AueO8G+xzvmC5YBBw==",
+			"license": "MIT",
 			"dependencies": {
 				"@babel/runtime": "^7.23.9",
-				"mjml-accordion": "5.0.0-alpha.4",
-				"mjml-body": "5.0.0-alpha.4",
-				"mjml-button": "5.0.0-alpha.4",
-				"mjml-carousel": "5.0.0-alpha.4",
-				"mjml-column": "5.0.0-alpha.4",
-				"mjml-divider": "5.0.0-alpha.4",
-				"mjml-group": "5.0.0-alpha.4",
-				"mjml-head": "5.0.0-alpha.4",
-				"mjml-head-attributes": "5.0.0-alpha.4",
-				"mjml-head-breakpoint": "5.0.0-alpha.4",
-				"mjml-head-font": "5.0.0-alpha.4",
-				"mjml-head-html-attributes": "5.0.0-alpha.4",
-				"mjml-head-preview": "5.0.0-alpha.4",
-				"mjml-head-style": "5.0.0-alpha.4",
-				"mjml-head-title": "5.0.0-alpha.4",
-				"mjml-hero": "5.0.0-alpha.4",
-				"mjml-image": "5.0.0-alpha.4",
-				"mjml-navbar": "5.0.0-alpha.4",
-				"mjml-raw": "5.0.0-alpha.4",
-				"mjml-section": "5.0.0-alpha.4",
-				"mjml-social": "5.0.0-alpha.4",
-				"mjml-spacer": "5.0.0-alpha.4",
-				"mjml-table": "5.0.0-alpha.4",
-				"mjml-text": "5.0.0-alpha.4",
-				"mjml-wrapper": "5.0.0-alpha.4"
+				"mjml-accordion": "5.0.0-alpha.6",
+				"mjml-body": "5.0.0-alpha.6",
+				"mjml-button": "5.0.0-alpha.6",
+				"mjml-carousel": "5.0.0-alpha.6",
+				"mjml-column": "5.0.0-alpha.6",
+				"mjml-divider": "5.0.0-alpha.6",
+				"mjml-group": "5.0.0-alpha.6",
+				"mjml-head": "5.0.0-alpha.6",
+				"mjml-head-attributes": "5.0.0-alpha.6",
+				"mjml-head-breakpoint": "5.0.0-alpha.6",
+				"mjml-head-font": "5.0.0-alpha.6",
+				"mjml-head-html-attributes": "5.0.0-alpha.6",
+				"mjml-head-preview": "5.0.0-alpha.6",
+				"mjml-head-style": "5.0.0-alpha.6",
+				"mjml-head-title": "5.0.0-alpha.6",
+				"mjml-hero": "5.0.0-alpha.6",
+				"mjml-image": "5.0.0-alpha.6",
+				"mjml-navbar": "5.0.0-alpha.6",
+				"mjml-raw": "5.0.0-alpha.6",
+				"mjml-section": "5.0.0-alpha.6",
+				"mjml-social": "5.0.0-alpha.6",
+				"mjml-spacer": "5.0.0-alpha.6",
+				"mjml-table": "5.0.0-alpha.6",
+				"mjml-text": "5.0.0-alpha.6",
+				"mjml-wrapper": "5.0.0-alpha.6"
 			}
 		},
 		"node_modules/mjml-raw": {
-			"version": "5.0.0-alpha.4",
-			"resolved": "https://registry.npmjs.org/mjml-raw/-/mjml-raw-5.0.0-alpha.4.tgz",
-			"integrity": "sha512-puCKbIuMVFlFyZx1vaKy45iS3iTgFpmFcah5C+E5VnEyKDOB6su6Fs8OnuAHkq+TIdGc6q9kqI1MwlRn0Mrr8w==",
+			"version": "5.0.0-alpha.6",
+			"resolved": "https://registry.npmjs.org/mjml-raw/-/mjml-raw-5.0.0-alpha.6.tgz",
+			"integrity": "sha512-tY2P+g7bcydVHrk0NPPm2sd+rIB9l5TdCeIdtw+NSOXoHN7vXVezcdr7UYK8TePibzeymh8w9YTWEAIN8fWvLg==",
+			"license": "MIT",
 			"dependencies": {
 				"@babel/runtime": "^7.23.9",
 				"lodash": "^4.17.21",
-				"mjml-core": "5.0.0-alpha.4"
+				"mjml-core": "5.0.0-alpha.6"
 			}
 		},
 		"node_modules/mjml-section": {
-			"version": "5.0.0-alpha.4",
-			"resolved": "https://registry.npmjs.org/mjml-section/-/mjml-section-5.0.0-alpha.4.tgz",
-			"integrity": "sha512-sbXvB9ik9i1zueCj996LvmiGn7EsZR5E8KXu08My3YxRbIoQrZtYdVOFM//858zDXtE/HB39HcLVXt1sG7GLig==",
+			"version": "5.0.0-alpha.6",
+			"resolved": "https://registry.npmjs.org/mjml-section/-/mjml-section-5.0.0-alpha.6.tgz",
+			"integrity": "sha512-gJL+9t9hiAfnXl3gG481Xum1qzURXs6bZ+rZnU47R/070+kinOJTCHt82hFGctjyDi264r/BeM6H6y+m0FIq/w==",
+			"license": "MIT",
 			"dependencies": {
 				"@babel/runtime": "^7.23.9",
 				"lodash": "^4.17.21",
-				"mjml-core": "5.0.0-alpha.4"
+				"mjml-core": "5.0.0-alpha.6"
 			}
 		},
 		"node_modules/mjml-social": {
-			"version": "5.0.0-alpha.4",
-			"resolved": "https://registry.npmjs.org/mjml-social/-/mjml-social-5.0.0-alpha.4.tgz",
-			"integrity": "sha512-lP+ykZB0wppYulBv1q0xM3kFCoYaKLyROZJgDjzvMlBRUA+p21/nu4JEjqYGdq0gQqoAhLQGW8hOUnEnS0Aydw==",
+			"version": "5.0.0-alpha.6",
+			"resolved": "https://registry.npmjs.org/mjml-social/-/mjml-social-5.0.0-alpha.6.tgz",
+			"integrity": "sha512-vPRBYHKeEUwEiVwXLrXgQnWBblizdQTlrZ2V45xEH9+3Jqolw3SlTw+uoZzhcFSBNl7+ytdQgwp7gRC7Bn5IYQ==",
+			"license": "MIT",
 			"dependencies": {
 				"@babel/runtime": "^7.23.9",
 				"lodash": "^4.17.21",
-				"mjml-core": "5.0.0-alpha.4"
+				"mjml-core": "5.0.0-alpha.6"
 			}
 		},
 		"node_modules/mjml-spacer": {
-			"version": "5.0.0-alpha.4",
-			"resolved": "https://registry.npmjs.org/mjml-spacer/-/mjml-spacer-5.0.0-alpha.4.tgz",
-			"integrity": "sha512-xHEunDOUL7Al3Rs5z20mwJsPllZdClriOptti5DP2hJjPkF2X/nwFTaH/kXvaPd2/CSZGHO+aQ5r/X2huV/43w==",
+			"version": "5.0.0-alpha.6",
+			"resolved": "https://registry.npmjs.org/mjml-spacer/-/mjml-spacer-5.0.0-alpha.6.tgz",
+			"integrity": "sha512-ZyLcoAElvkWnijny2eW0ulX6RxoDQT8AZwv5pJ8O16s0mnfcPAPMaZGTCQZHxPbACKJcCKsIoZrQllQuShf3XA==",
+			"license": "MIT",
 			"dependencies": {
 				"@babel/runtime": "^7.23.9",
 				"lodash": "^4.17.21",
-				"mjml-core": "5.0.0-alpha.4"
+				"mjml-core": "5.0.0-alpha.6"
 			}
 		},
 		"node_modules/mjml-table": {
-			"version": "5.0.0-alpha.4",
-			"resolved": "https://registry.npmjs.org/mjml-table/-/mjml-table-5.0.0-alpha.4.tgz",
-			"integrity": "sha512-TCh5IJ6IDkv0bkn/8r7GslEpDiRaRoUonHzbFbsi1rNojayg+oOJbaUhpMh1gvBzVlmAyMeX2XGA92A1EiqJjw==",
+			"version": "5.0.0-alpha.6",
+			"resolved": "https://registry.npmjs.org/mjml-table/-/mjml-table-5.0.0-alpha.6.tgz",
+			"integrity": "sha512-ze7iNRyT6uX099KxZoV33u1jOlibmfxkUUY/8BXbyfWUIgcwRzb1DfKtIWT/GOqI2WAqh5ZwHd5XZgueimttEA==",
+			"license": "MIT",
 			"dependencies": {
 				"@babel/runtime": "^7.23.9",
 				"lodash": "^4.17.21",
-				"mjml-core": "5.0.0-alpha.4"
+				"mjml-core": "5.0.0-alpha.6"
 			}
 		},
 		"node_modules/mjml-text": {
-			"version": "5.0.0-alpha.4",
-			"resolved": "https://registry.npmjs.org/mjml-text/-/mjml-text-5.0.0-alpha.4.tgz",
-			"integrity": "sha512-yJi6D1hDaKxtJLu0M330yHn0BLo55T9+TaOw9GaWWlF28yphUZ6Ge+ppSZYeMbmzWwCUMVPPOcsYMpaLHtd7Iw==",
+			"version": "5.0.0-alpha.6",
+			"resolved": "https://registry.npmjs.org/mjml-text/-/mjml-text-5.0.0-alpha.6.tgz",
+			"integrity": "sha512-k7/pUgwZo9ZwnoCVvohsGdpOrJuLpScH183ZxjyPYO8+kOruSFpE2yrGhK/jeLaV4UhdXndNk8dz80wbN0fKjw==",
+			"license": "MIT",
 			"dependencies": {
 				"@babel/runtime": "^7.23.9",
 				"lodash": "^4.17.21",
-				"mjml-core": "5.0.0-alpha.4"
+				"mjml-core": "5.0.0-alpha.6"
 			}
 		},
 		"node_modules/mjml-validator": {
-			"version": "5.0.0-alpha.4",
-			"resolved": "https://registry.npmjs.org/mjml-validator/-/mjml-validator-5.0.0-alpha.4.tgz",
-			"integrity": "sha512-0RWcTmUxluJc6XR/7Wmve9z4ydUGnLTUuyaHWX624V/xOaRPIThCllluh67TbSK6W2t4mwIHCdT+MgQC/wFwog==",
+			"version": "5.0.0-alpha.6",
+			"resolved": "https://registry.npmjs.org/mjml-validator/-/mjml-validator-5.0.0-alpha.6.tgz",
+			"integrity": "sha512-kL5IJGYXdNN7VunXXJEWyAP40oODRiSNu5NIx5moOXREPHvn7lRqi/XS8MXa48/UBLmKMbltDSQ0DcnESJbodQ==",
+			"license": "MIT",
 			"dependencies": {
 				"@babel/runtime": "^7.23.9"
 			}
 		},
 		"node_modules/mjml-wrapper": {
-			"version": "5.0.0-alpha.4",
-			"resolved": "https://registry.npmjs.org/mjml-wrapper/-/mjml-wrapper-5.0.0-alpha.4.tgz",
-			"integrity": "sha512-sISlNUC3EVj5YMZfdQw19B9AIwCmgT8XWJ5r6HsBfYtxwdeYBHA/stygx84lEjDYPJK7U5FL65u01vfP71vM/w==",
+			"version": "5.0.0-alpha.6",
+			"resolved": "https://registry.npmjs.org/mjml-wrapper/-/mjml-wrapper-5.0.0-alpha.6.tgz",
+			"integrity": "sha512-qJisqqkQrtq4U74BTgRaNoPjpf2PwYff/QxH5yvkFDXK3fYEoNt011K7lrm/+u5wS9mx4msHZN0WA4TI/EeeOw==",
+			"license": "MIT",
 			"dependencies": {
 				"@babel/runtime": "^7.23.9",
 				"lodash": "^4.17.21",
-				"mjml-core": "5.0.0-alpha.4",
-				"mjml-section": "5.0.0-alpha.4"
+				"mjml-core": "5.0.0-alpha.6",
+				"mjml-section": "5.0.0-alpha.6"
 			}
 		},
 		"node_modules/mkdirp": {
@@ -4841,6 +4947,18 @@
 				"url": "https://github.com/inikulin/parse5?sponsor=1"
 			}
 		},
+		"node_modules/parse5-parser-stream": {
+			"version": "7.1.2",
+			"resolved": "https://registry.npmjs.org/parse5-parser-stream/-/parse5-parser-stream-7.1.2.tgz",
+			"integrity": "sha512-JyeQc9iwFLn5TbvvqACIF/VXG6abODeB3Fwmv/TGdLk2LfbWkaySGY72at4+Ty7EkPZj854u4CrICqNk2qIbow==",
+			"license": "MIT",
+			"dependencies": {
+				"parse5": "^7.0.0"
+			},
+			"funding": {
+				"url": "https://github.com/inikulin/parse5?sponsor=1"
+			}
+		},
 		"node_modules/parseurl": {
 			"version": "1.3.3",
 			"resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
@@ -5978,6 +6096,7 @@
 			"version": "1.12.2",
 			"resolved": "https://registry.npmjs.org/slick/-/slick-1.12.2.tgz",
 			"integrity": "sha512-4qdtOGcBjral6YIBCWJ0ljFSKNLz9KkhbWtuGvUyRowl1kxfuE1x/Z/aJcaiilpb3do9bl5K7/1h9XC5wWpY/A==",
+			"license": "MIT (http://mootools.net/license.txt)",
 			"engines": {
 				"node": "*"
 			}
@@ -6317,6 +6436,15 @@
 			"integrity": "sha512-WxONCrssBM8TSPRqN5EmsjVrsv4A8X12J4ArBiiayv3DyyG3ZlIg6yysuuSYdZsVz3TKcTg2fd//Ujd4CHV1iA==",
 			"dev": true
 		},
+		"node_modules/undici": {
+			"version": "6.20.1",
+			"resolved": "https://registry.npmjs.org/undici/-/undici-6.20.1.tgz",
+			"integrity": "sha512-AjQF1QsmqfJys+LXfGTNum+qw4S88CojRInG/6t31W/1fk6G59s92bnAvGz5Cmur+kQv2SURXEvvudLmbrE8QA==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=18.17"
+			}
+		},
 		"node_modules/unfetch": {
 			"version": "4.2.0",
 			"resolved": "https://registry.npmjs.org/unfetch/-/unfetch-4.2.0.tgz",
@@ -6411,6 +6539,7 @@
 			"version": "3.0.1",
 			"resolved": "https://registry.npmjs.org/valid-data-url/-/valid-data-url-3.0.1.tgz",
 			"integrity": "sha512-jOWVmzVceKlVVdwjNSenT4PbGghU0SBIizAev8ofZVgivk/TVHXSbNL8LP6M3spZvkR9/QolkyJavGSX5Cs0UA==",
+			"license": "MIT",
 			"engines": {
 				"node": ">=10"
 			}
@@ -6424,15 +6553,15 @@
 			}
 		},
 		"node_modules/web-resource-inliner": {
-			"version": "6.0.1",
-			"resolved": "https://registry.npmjs.org/web-resource-inliner/-/web-resource-inliner-6.0.1.tgz",
-			"integrity": "sha512-kfqDxt5dTB1JhqsCUQVFDj0rmY+4HLwGQIsLPbyrsN9y9WV/1oFDSx3BQ4GfCv9X+jVeQ7rouTqwK53rA/7t8A==",
+			"version": "7.0.0",
+			"resolved": "https://registry.npmjs.org/web-resource-inliner/-/web-resource-inliner-7.0.0.tgz",
+			"integrity": "sha512-NlfnGF8MY9ZUwFjyq3vOUBx7KwF8bmE+ywR781SB0nWB6MoMxN4BA8gtgP1KGTZo/O/AyWJz7HZpR704eaj4mg==",
+			"license": "MIT",
 			"dependencies": {
 				"ansi-colors": "^4.1.1",
 				"escape-goat": "^3.0.0",
 				"htmlparser2": "^5.0.0",
 				"mime": "^2.4.6",
-				"node-fetch": "^2.6.0",
 				"valid-data-url": "^3.0.0"
 			},
 			"engines": {
@@ -6443,6 +6572,7 @@
 			"version": "1.4.1",
 			"resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz",
 			"integrity": "sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag==",
+			"license": "MIT",
 			"dependencies": {
 				"domelementtype": "^2.0.1",
 				"domhandler": "^4.2.0",
@@ -6456,6 +6586,7 @@
 			"version": "4.3.1",
 			"resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.3.1.tgz",
 			"integrity": "sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ==",
+			"license": "BSD-2-Clause",
 			"dependencies": {
 				"domelementtype": "^2.2.0"
 			},
@@ -6470,6 +6601,7 @@
 			"version": "3.3.0",
 			"resolved": "https://registry.npmjs.org/domhandler/-/domhandler-3.3.0.tgz",
 			"integrity": "sha512-J1C5rIANUbuYK+FuFL98650rihynUOEzRLxW+90bKZRWB6A1X1Tf82GxR1qAWLyfNPRvjqfip3Q5tdYlmAa9lA==",
+			"license": "BSD-2-Clause",
 			"dependencies": {
 				"domelementtype": "^2.0.1"
 			},
@@ -6484,6 +6616,7 @@
 			"version": "2.8.0",
 			"resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz",
 			"integrity": "sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==",
+			"license": "BSD-2-Clause",
 			"dependencies": {
 				"dom-serializer": "^1.0.1",
 				"domelementtype": "^2.2.0",
@@ -6497,6 +6630,7 @@
 			"version": "4.3.1",
 			"resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.3.1.tgz",
 			"integrity": "sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ==",
+			"license": "BSD-2-Clause",
 			"dependencies": {
 				"domelementtype": "^2.2.0"
 			},
@@ -6511,6 +6645,7 @@
 			"version": "2.2.0",
 			"resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
 			"integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==",
+			"license": "BSD-2-Clause",
 			"funding": {
 				"url": "https://github.com/fb55/entities?sponsor=1"
 			}
@@ -6519,6 +6654,7 @@
 			"version": "5.0.1",
 			"resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-5.0.1.tgz",
 			"integrity": "sha512-vKZZra6CSe9qsJzh0BjBGXo8dvzNsq/oGvsjfRdOrrryfeD9UOBEEQdeoqCRmKZchF5h2zOBMQ6YuQ0uRUmdbQ==",
+			"license": "MIT",
 			"dependencies": {
 				"domelementtype": "^2.0.1",
 				"domhandler": "^3.3.0",
@@ -6533,6 +6669,7 @@
 			"version": "2.6.0",
 			"resolved": "https://registry.npmjs.org/mime/-/mime-2.6.0.tgz",
 			"integrity": "sha512-USPkMeET31rOMiarsBNIHZKLGgvKc/LrjofAnBlOttf5ajRvqiRA8QsenbcooctK6d6Ts6aqZXBA+XbkKthiQg==",
+			"license": "MIT",
 			"bin": {
 				"mime": "cli.js"
 			},
@@ -6548,6 +6685,39 @@
 				"node": ">=12"
 			}
 		},
+		"node_modules/whatwg-encoding": {
+			"version": "3.1.1",
+			"resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-3.1.1.tgz",
+			"integrity": "sha512-6qN4hJdMwfYBtE3YBTTHhoeuUrDBPZmbQaxWAqSALV/MeEnR5z1xd8UKud2RAkFoPkmB+hli1TZSnyi84xz1vQ==",
+			"license": "MIT",
+			"dependencies": {
+				"iconv-lite": "0.6.3"
+			},
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/whatwg-encoding/node_modules/iconv-lite": {
+			"version": "0.6.3",
+			"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+			"integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+			"license": "MIT",
+			"dependencies": {
+				"safer-buffer": ">= 2.1.2 < 3.0.0"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/whatwg-mimetype": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-4.0.0.tgz",
+			"integrity": "sha512-QaKxh0eNIi2mE9p2vEdzfagOKHCcj1pJ56EEHGQOVxp8r9/iszLUUV7v89x9O1p/T+NlTM5W7jW6+cz4Fq1YVg==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=18"
+			}
+		},
 		"node_modules/whatwg-url": {
 			"version": "13.0.0",
 			"resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-13.0.0.tgz",