react-email 6.7.0 → 6.8.1

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # react-email
 
+## 6.8.1
+
+## 6.8.0
+
+### Minor Changes
+
+- 9605c04: Add a Props tab to the preview toolbar for live-editing the props a template is rendered with. Edits re-render the preview without changing the template's `PreviewProps`, invalid JSON is flagged inline, and a reset restores the template defaults.
+
+### Patch Changes
+
+- d7743bc: Ship per-module build output with `sideEffects: false` so bundlers can tree-shake unused components. Importing a component no longer pulls prismjs, marked, and tailwindcss into the bundle unless `CodeBlock`, `Markdown`, or `Tailwind` is actually used.
+- 7b32bf6: Fixed toolbar tabs not responding on statically built previews when the page was opened with a `toolbar-panel` query param in the URL.
+
 ## 6.7.0
 
 ### Minor Changes

package/dist/_virtual/_rolldown/runtime.cjs

@@ -0,0 +1,23 @@
+//#region \0rolldown/runtime.js
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+		key = keys[i];
+		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: ((k) => from[k]).bind(null, key),
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+//#endregion
+exports.__toESM = __toESM;

package/dist/cli/index.mjs

@@ -6533,10 +6533,11 @@ const getTracingRootDir = async (usersProjectLocation) => {
 //#region package.json
 var package_default = {
 	name: "react-email",
-	version: "6.7.0",
+	version: "6.8.1",
 	description: "A live preview of your emails right in your browser.",
 	bin: { "email": "./dist/cli/index.mjs" },
 	type: "module",
+	sideEffects: false,
 	types: "./dist/index.d.mts",
 	scripts: {
 		"build": "tsdown",
@@ -6580,7 +6581,7 @@ var package_default = {
 		"debounce": "^2.0.0",
 		"esbuild": "^0.28.0",
 		"glob": "^13.0.6",
-		"jiti": "2.4.2",
+		"jiti": "2.6.1",
 		"log-symbols": "catalog:",
 		"marked": "^15.0.12",
 		"mime-types": "^3.0.0",

package/dist/components/body/body.cjs

@@ -0,0 +1,39 @@
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+const require_element_marker = require("../element-marker.cjs");
+const require_margin_properties = require("./margin-properties.cjs");
+let react = require("react");
+react = require_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/body/body.tsx
+const Body = react.forwardRef(({ children, style, ...props }, ref) => {
+	const bodyStyle = {
+		background: style?.background,
+		backgroundColor: style?.backgroundColor
+	};
+	if (style) for (const property of [...require_margin_properties.marginProperties, ...require_margin_properties.paddingProperties]) bodyStyle[property] = style[property] !== void 0 ? 0 : void 0;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("body", {
+		...props,
+		dir: props.dir ?? "ltr",
+		lang: props.lang ?? "en",
+		style: bodyStyle,
+		ref,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("table", {
+			border: 0,
+			width: "100%",
+			cellPadding: "0",
+			cellSpacing: "0",
+			role: "presentation",
+			align: "center",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tbody", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tr", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+				dir: props.dir ?? "ltr",
+				lang: props.lang ?? "en",
+				style,
+				children
+			}) }) })
+		})
+	});
+});
+Body.displayName = "Body";
+require_element_marker.markAsElement(Body);
+//#endregion
+exports.Body = Body;

package/dist/components/body/body.d.cts

@@ -0,0 +1,7 @@
+import * as React$1 from "react";
+
+//#region src/components/body/body.d.ts
+type BodyProps = Readonly<React$1.HtmlHTMLAttributes<HTMLBodyElement>>;
+declare const Body: React$1.ForwardRefExoticComponent<Readonly<React$1.HtmlHTMLAttributes<HTMLBodyElement>> & React$1.RefAttributes<HTMLBodyElement>>;
+//#endregion
+export { Body, BodyProps };

package/dist/components/body/body.d.mts

@@ -0,0 +1,7 @@
+import * as React$1 from "react";
+
+//#region src/components/body/body.d.ts
+type BodyProps = Readonly<React$1.HtmlHTMLAttributes<HTMLBodyElement>>;
+declare const Body: React$1.ForwardRefExoticComponent<Readonly<React$1.HtmlHTMLAttributes<HTMLBodyElement>> & React$1.RefAttributes<HTMLBodyElement>>;
+//#endregion
+export { Body, BodyProps };

package/dist/components/body/body.mjs

@@ -0,0 +1,37 @@
+import { markAsElement } from "../element-marker.mjs";
+import { marginProperties, paddingProperties } from "./margin-properties.mjs";
+import * as React$1 from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/body/body.tsx
+const Body = React$1.forwardRef(({ children, style, ...props }, ref) => {
+	const bodyStyle = {
+		background: style?.background,
+		backgroundColor: style?.backgroundColor
+	};
+	if (style) for (const property of [...marginProperties, ...paddingProperties]) bodyStyle[property] = style[property] !== void 0 ? 0 : void 0;
+	return /* @__PURE__ */ jsx("body", {
+		...props,
+		dir: props.dir ?? "ltr",
+		lang: props.lang ?? "en",
+		style: bodyStyle,
+		ref,
+		children: /* @__PURE__ */ jsx("table", {
+			border: 0,
+			width: "100%",
+			cellPadding: "0",
+			cellSpacing: "0",
+			role: "presentation",
+			align: "center",
+			children: /* @__PURE__ */ jsx("tbody", { children: /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", {
+				dir: props.dir ?? "ltr",
+				lang: props.lang ?? "en",
+				style,
+				children
+			}) }) })
+		})
+	});
+});
+Body.displayName = "Body";
+markAsElement(Body);
+//#endregion
+export { Body };

package/dist/components/body/index.d.cts

@@ -0,0 +1 @@
+import { Body, BodyProps } from "./body.cjs";

package/dist/components/body/index.d.mts

@@ -0,0 +1 @@
+import { Body, BodyProps } from "./body.mjs";

package/dist/components/body/margin-properties.cjs

@@ -0,0 +1,30 @@
+//#region src/components/body/margin-properties.ts
+const marginProperties = [
+	"margin",
+	"marginTop",
+	"marginBottom",
+	"marginRight",
+	"marginLeft",
+	"marginInline",
+	"marginBlock",
+	"marginBlockStart",
+	"marginBlockEnd",
+	"marginInlineStart",
+	"marginInlineEnd"
+];
+const paddingProperties = [
+	"padding",
+	"paddingTop",
+	"paddingBottom",
+	"paddingRight",
+	"paddingLeft",
+	"paddingInline",
+	"paddingBlock",
+	"paddingBlockStart",
+	"paddingBlockEnd",
+	"paddingInlineStart",
+	"paddingInlineEnd"
+];
+//#endregion
+exports.marginProperties = marginProperties;
+exports.paddingProperties = paddingProperties;

package/dist/components/body/margin-properties.mjs

@@ -0,0 +1,29 @@
+//#region src/components/body/margin-properties.ts
+const marginProperties = [
+	"margin",
+	"marginTop",
+	"marginBottom",
+	"marginRight",
+	"marginLeft",
+	"marginInline",
+	"marginBlock",
+	"marginBlockStart",
+	"marginBlockEnd",
+	"marginInlineStart",
+	"marginInlineEnd"
+];
+const paddingProperties = [
+	"padding",
+	"paddingTop",
+	"paddingBottom",
+	"paddingRight",
+	"paddingLeft",
+	"paddingInline",
+	"paddingBlock",
+	"paddingBlockStart",
+	"paddingBlockEnd",
+	"paddingInlineStart",
+	"paddingInlineEnd"
+];
+//#endregion
+export { marginProperties, paddingProperties };

package/dist/components/button/button.cjs

@@ -0,0 +1,64 @@
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+const require_element_marker = require("../element-marker.cjs");
+const require_parse_padding = require("./utils/parse-padding.cjs");
+const require_px_to_pt = require("./utils/px-to-pt.cjs");
+let react = require("react");
+react = require_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/button/button.tsx
+const maxFontWidth = 5;
+/**
+* Computes a msoFontWidth \<= 5 and a count of space characters that,
+* when applied, end up being as close to `expectedWidth` as possible.
+*/
+function computeFontWidthAndSpaceCount(expectedWidth) {
+	if (expectedWidth === 0) return [0, 0];
+	let smallestSpaceCount = 0;
+	const computeRequiredFontWidth = () => {
+		if (smallestSpaceCount > 0) return expectedWidth / smallestSpaceCount / 2;
+		return Number.POSITIVE_INFINITY;
+	};
+	while (computeRequiredFontWidth() > maxFontWidth) smallestSpaceCount++;
+	return [computeRequiredFontWidth(), smallestSpaceCount];
+}
+const Button = react.forwardRef(({ children, style, target = "_blank", ...props }, ref) => {
+	const { paddingTop, paddingRight, paddingBottom, paddingLeft } = require_parse_padding.parsePadding(style ?? {});
+	const textRaise = require_px_to_pt.pxToPt((paddingTop ?? 0) + (paddingBottom ?? 0));
+	const [plFontWidth, plSpaceCount] = computeFontWidthAndSpaceCount(paddingLeft ?? 0);
+	const [prFontWidth, prSpaceCount] = computeFontWidthAndSpaceCount(paddingRight ?? 0);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("a", {
+		...props,
+		ref,
+		style: {
+			lineHeight: "100%",
+			textDecoration: "none",
+			display: "inline-block",
+			maxWidth: "100%",
+			msoPaddingAlt: "0px",
+			...style,
+			paddingTop,
+			paddingRight,
+			paddingBottom,
+			paddingLeft
+		},
+		target,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { dangerouslySetInnerHTML: { __html: `<!--[if mso]><i style="mso-font-width:${plFontWidth * 100}%;mso-text-raise:${textRaise}px" hidden>${"&#8202;".repeat(plSpaceCount)}</i><![endif]-->` } }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				style: {
+					maxWidth: "100%",
+					display: "inline-block",
+					lineHeight: "120%",
+					msoPaddingAlt: "0px",
+					msoTextRaise: require_px_to_pt.pxToPt(paddingBottom)
+				},
+				children
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { dangerouslySetInnerHTML: { __html: `<!--[if mso]><i style="mso-font-width:${prFontWidth * 100}%" hidden>${"&#8202;".repeat(prSpaceCount)}&#8203;</i><![endif]-->` } })
+		]
+	});
+});
+Button.displayName = "Button";
+require_element_marker.markAsElement(Button);
+//#endregion
+exports.Button = Button;

package/dist/components/button/button.d.cts

@@ -0,0 +1,13 @@
+import * as React$1 from "react";
+
+//#region src/components/button/button.d.ts
+type ButtonProps = Readonly<React$1.ComponentPropsWithoutRef<'a'>>;
+declare module 'react' {
+  interface CSSProperties {
+    msoPaddingAlt?: string | number | undefined;
+    msoTextRaise?: string | number | undefined;
+  }
+}
+declare const Button: React$1.ForwardRefExoticComponent<Readonly<Omit<React$1.DetailedHTMLProps<React$1.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref">> & React$1.RefAttributes<HTMLAnchorElement>>;
+//#endregion
+export { Button, ButtonProps };

package/dist/components/button/button.d.mts

@@ -0,0 +1,13 @@
+import * as React$1 from "react";
+
+//#region src/components/button/button.d.ts
+type ButtonProps = Readonly<React$1.ComponentPropsWithoutRef<'a'>>;
+declare module 'react' {
+  interface CSSProperties {
+    msoPaddingAlt?: string | number | undefined;
+    msoTextRaise?: string | number | undefined;
+  }
+}
+declare const Button: React$1.ForwardRefExoticComponent<Readonly<Omit<React$1.DetailedHTMLProps<React$1.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref">> & React$1.RefAttributes<HTMLAnchorElement>>;
+//#endregion
+export { Button, ButtonProps };

package/dist/components/button/button.mjs

@@ -0,0 +1,62 @@
+import { markAsElement } from "../element-marker.mjs";
+import { parsePadding } from "./utils/parse-padding.mjs";
+import { pxToPt } from "./utils/px-to-pt.mjs";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/button/button.tsx
+const maxFontWidth = 5;
+/**
+* Computes a msoFontWidth \<= 5 and a count of space characters that,
+* when applied, end up being as close to `expectedWidth` as possible.
+*/
+function computeFontWidthAndSpaceCount(expectedWidth) {
+	if (expectedWidth === 0) return [0, 0];
+	let smallestSpaceCount = 0;
+	const computeRequiredFontWidth = () => {
+		if (smallestSpaceCount > 0) return expectedWidth / smallestSpaceCount / 2;
+		return Number.POSITIVE_INFINITY;
+	};
+	while (computeRequiredFontWidth() > maxFontWidth) smallestSpaceCount++;
+	return [computeRequiredFontWidth(), smallestSpaceCount];
+}
+const Button = React$1.forwardRef(({ children, style, target = "_blank", ...props }, ref) => {
+	const { paddingTop, paddingRight, paddingBottom, paddingLeft } = parsePadding(style ?? {});
+	const textRaise = pxToPt((paddingTop ?? 0) + (paddingBottom ?? 0));
+	const [plFontWidth, plSpaceCount] = computeFontWidthAndSpaceCount(paddingLeft ?? 0);
+	const [prFontWidth, prSpaceCount] = computeFontWidthAndSpaceCount(paddingRight ?? 0);
+	return /* @__PURE__ */ jsxs("a", {
+		...props,
+		ref,
+		style: {
+			lineHeight: "100%",
+			textDecoration: "none",
+			display: "inline-block",
+			maxWidth: "100%",
+			msoPaddingAlt: "0px",
+			...style,
+			paddingTop,
+			paddingRight,
+			paddingBottom,
+			paddingLeft
+		},
+		target,
+		children: [
+			/* @__PURE__ */ jsx("span", { dangerouslySetInnerHTML: { __html: `<!--[if mso]><i style="mso-font-width:${plFontWidth * 100}%;mso-text-raise:${textRaise}px" hidden>${"&#8202;".repeat(plSpaceCount)}</i><![endif]-->` } }),
+			/* @__PURE__ */ jsx("span", {
+				style: {
+					maxWidth: "100%",
+					display: "inline-block",
+					lineHeight: "120%",
+					msoPaddingAlt: "0px",
+					msoTextRaise: pxToPt(paddingBottom)
+				},
+				children
+			}),
+			/* @__PURE__ */ jsx("span", { dangerouslySetInnerHTML: { __html: `<!--[if mso]><i style="mso-font-width:${prFontWidth * 100}%" hidden>${"&#8202;".repeat(prSpaceCount)}&#8203;</i><![endif]-->` } })
+		]
+	});
+});
+Button.displayName = "Button";
+markAsElement(Button);
+//#endregion
+export { Button };

package/dist/components/button/index.d.cts

@@ -0,0 +1 @@
+import { Button, ButtonProps } from "./button.cjs";

package/dist/components/button/index.d.mts

@@ -0,0 +1 @@
+import { Button, ButtonProps } from "./button.mjs";

package/dist/components/button/utils/parse-padding.cjs

@@ -0,0 +1,90 @@
+//#region src/components/button/utils/parse-padding.ts
+/**
+* converts padding value to `px` equivalent.
+* @example "1em" =\> 16
+*/
+function convertToPx(value) {
+	let px = 0;
+	if (!value) return px;
+	if (typeof value === "number") return value;
+	const matches = /^([\d.]+)(px|em|rem|%)$/.exec(value);
+	if (matches && matches.length === 3) {
+		const numValue = Number.parseFloat(matches[1]);
+		switch (matches[2]) {
+			case "px": return numValue;
+			case "em":
+			case "rem":
+				px = numValue * 16;
+				return px;
+			case "%":
+				px = numValue / 100 * 600;
+				return px;
+			default: return numValue;
+		}
+	}
+	return 0;
+}
+function parsePaddingValue(value) {
+	if (typeof value === "number") return {
+		paddingTop: value,
+		paddingBottom: value,
+		paddingLeft: value,
+		paddingRight: value
+	};
+	if (typeof value === "string") {
+		const values = value.toString().trim().split(/\s+/);
+		if (values.length === 1) return {
+			paddingTop: values[0],
+			paddingBottom: values[0],
+			paddingLeft: values[0],
+			paddingRight: values[0]
+		};
+		if (values.length === 2) return {
+			paddingTop: values[0],
+			paddingRight: values[1],
+			paddingBottom: values[0],
+			paddingLeft: values[1]
+		};
+		if (values.length === 3) return {
+			paddingTop: values[0],
+			paddingRight: values[1],
+			paddingBottom: values[2],
+			paddingLeft: values[1]
+		};
+		if (values.length === 4) return {
+			paddingTop: values[0],
+			paddingRight: values[1],
+			paddingBottom: values[2],
+			paddingLeft: values[3]
+		};
+	}
+	return {
+		paddingTop: void 0,
+		paddingBottom: void 0,
+		paddingLeft: void 0,
+		paddingRight: void 0
+	};
+}
+/**
+* Parses all the values out of a padding string to get the value for all padding props in `px`
+* @example e.g. "10px" =\> pt: 10, pr: 10, pb: 10, pl: 10
+*/
+function parsePadding(properties) {
+	let paddingTop;
+	let paddingRight;
+	let paddingBottom;
+	let paddingLeft;
+	for (const [key, value] of Object.entries(properties)) if (key === "padding") ({paddingTop, paddingBottom, paddingLeft, paddingRight} = parsePaddingValue(value));
+	else if (key === "paddingTop") paddingTop = value;
+	else if (key === "paddingRight") paddingRight = value;
+	else if (key === "paddingBottom") paddingBottom = value;
+	else if (key === "paddingLeft") paddingLeft = value;
+	return {
+		paddingTop: paddingTop ? convertToPx(paddingTop) : void 0,
+		paddingRight: paddingRight ? convertToPx(paddingRight) : void 0,
+		paddingBottom: paddingBottom ? convertToPx(paddingBottom) : void 0,
+		paddingLeft: paddingLeft ? convertToPx(paddingLeft) : void 0
+	};
+}
+//#endregion
+exports.parsePadding = parsePadding;

package/dist/components/button/utils/parse-padding.mjs

@@ -0,0 +1,90 @@
+//#region src/components/button/utils/parse-padding.ts
+/**
+* converts padding value to `px` equivalent.
+* @example "1em" =\> 16
+*/
+function convertToPx(value) {
+	let px = 0;
+	if (!value) return px;
+	if (typeof value === "number") return value;
+	const matches = /^([\d.]+)(px|em|rem|%)$/.exec(value);
+	if (matches && matches.length === 3) {
+		const numValue = Number.parseFloat(matches[1]);
+		switch (matches[2]) {
+			case "px": return numValue;
+			case "em":
+			case "rem":
+				px = numValue * 16;
+				return px;
+			case "%":
+				px = numValue / 100 * 600;
+				return px;
+			default: return numValue;
+		}
+	}
+	return 0;
+}
+function parsePaddingValue(value) {
+	if (typeof value === "number") return {
+		paddingTop: value,
+		paddingBottom: value,
+		paddingLeft: value,
+		paddingRight: value
+	};
+	if (typeof value === "string") {
+		const values = value.toString().trim().split(/\s+/);
+		if (values.length === 1) return {
+			paddingTop: values[0],
+			paddingBottom: values[0],
+			paddingLeft: values[0],
+			paddingRight: values[0]
+		};
+		if (values.length === 2) return {
+			paddingTop: values[0],
+			paddingRight: values[1],
+			paddingBottom: values[0],
+			paddingLeft: values[1]
+		};
+		if (values.length === 3) return {
+			paddingTop: values[0],
+			paddingRight: values[1],
+			paddingBottom: values[2],
+			paddingLeft: values[1]
+		};
+		if (values.length === 4) return {
+			paddingTop: values[0],
+			paddingRight: values[1],
+			paddingBottom: values[2],
+			paddingLeft: values[3]
+		};
+	}
+	return {
+		paddingTop: void 0,
+		paddingBottom: void 0,
+		paddingLeft: void 0,
+		paddingRight: void 0
+	};
+}
+/**
+* Parses all the values out of a padding string to get the value for all padding props in `px`
+* @example e.g. "10px" =\> pt: 10, pr: 10, pb: 10, pl: 10
+*/
+function parsePadding(properties) {
+	let paddingTop;
+	let paddingRight;
+	let paddingBottom;
+	let paddingLeft;
+	for (const [key, value] of Object.entries(properties)) if (key === "padding") ({paddingTop, paddingBottom, paddingLeft, paddingRight} = parsePaddingValue(value));
+	else if (key === "paddingTop") paddingTop = value;
+	else if (key === "paddingRight") paddingRight = value;
+	else if (key === "paddingBottom") paddingBottom = value;
+	else if (key === "paddingLeft") paddingLeft = value;
+	return {
+		paddingTop: paddingTop ? convertToPx(paddingTop) : void 0,
+		paddingRight: paddingRight ? convertToPx(paddingRight) : void 0,
+		paddingBottom: paddingBottom ? convertToPx(paddingBottom) : void 0,
+		paddingLeft: paddingLeft ? convertToPx(paddingLeft) : void 0
+	};
+}
+//#endregion
+export { parsePadding };

package/dist/components/button/utils/px-to-pt.cjs

@@ -0,0 +1,4 @@
+//#region src/components/button/utils/px-to-pt.ts
+const pxToPt = (px) => typeof px === "number" && !Number.isNaN(Number(px)) ? px * 3 / 4 : void 0;
+//#endregion
+exports.pxToPt = pxToPt;

package/dist/components/button/utils/px-to-pt.mjs

@@ -0,0 +1,4 @@
+//#region src/components/button/utils/px-to-pt.ts
+const pxToPt = (px) => typeof px === "number" && !Number.isNaN(Number(px)) ? px * 3 / 4 : void 0;
+//#endregion
+export { pxToPt };

package/dist/components/code-block/code-block.cjs

@@ -0,0 +1,79 @@
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+const require_element_marker = require("../element-marker.cjs");
+const require_prism = require("./prism.cjs");
+let react = require("react");
+react = require_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/code-block/code-block.tsx
+const stylesForToken = (token, theme) => {
+	let styles = { ...theme[token.type] };
+	const aliases = Array.isArray(token.alias) ? token.alias : [token.alias];
+	for (const alias of aliases) styles = {
+		...styles,
+		...theme[alias]
+	};
+	return styles;
+};
+const CodeBlockLine = ({ token, theme, inheritedStyles }) => {
+	if (token instanceof require_prism.Prism.Token) {
+		const styleForToken = {
+			...inheritedStyles,
+			...stylesForToken(token, theme)
+		};
+		if (token.content instanceof require_prism.Prism.Token) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			style: styleForToken,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CodeBlockLine, {
+				theme,
+				token: token.content
+			})
+		});
+		if (typeof token.content === "string") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			style: styleForToken,
+			children: token.content
+		});
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: token.content.map((subToken, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CodeBlockLine, {
+			inheritedStyles: styleForToken,
+			theme,
+			token: subToken
+		}, i)) });
+	}
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		style: inheritedStyles,
+		children: token.replaceAll(" ", "\xA0‍​")
+	});
+};
+const CodeBlock = react.forwardRef(({ code, fontFamily, lineNumbers, theme, language, ...rest }, ref) => {
+	const languageGrammar = require_prism.Prism.languages[language];
+	if (typeof languageGrammar === "undefined") throw new Error(`CodeBlock: There is no language defined on Prism called ${language}`);
+	const tokensPerLine = code.split(/\r\n|\r|\n/gm).map((line) => require_prism.Prism.tokenize(line, languageGrammar));
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("pre", {
+		...rest,
+		ref,
+		style: {
+			...theme.base,
+			width: "100%",
+			...rest.style
+		},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", { children: tokensPerLine.map((tokensForLine, lineIndex) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react.Fragment, { children: [
+			lineNumbers ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				style: {
+					width: "2em",
+					height: "1em",
+					display: "inline-block",
+					fontFamily
+				},
+				children: lineIndex + 1
+			}) : null,
+			tokensForLine.map((token, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CodeBlockLine, {
+				inheritedStyles: { fontFamily },
+				theme,
+				token
+			}, i)),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("br", {})
+		] }, lineIndex)) })
+	});
+});
+CodeBlock.displayName = "CodeBlock";
+require_element_marker.markAsElement(CodeBlock);
+//#endregion
+exports.CodeBlock = CodeBlock;