@unmail/react 0.1.0

package/dist/index.js

@@ -0,0 +1,3653 @@
+//#region rolldown:runtime
+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
+let react = require("react");
+react = __toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = __toESM(react_jsx_runtime);
+let marked = require("marked");
+marked = __toESM(marked);
+let html_to_text = require("html-to-text");
+html_to_text = __toESM(html_to_text);
+let prettier_standalone = require("prettier/standalone");
+prettier_standalone = __toESM(prettier_standalone);
+let prettier_plugins_html = require("prettier/plugins/html");
+prettier_plugins_html = __toESM(prettier_plugins_html);
+let node_stream = require("node:stream");
+node_stream = __toESM(node_stream);
+let css_tree = require("css-tree");
+css_tree = __toESM(css_tree);
+let tailwindcss = require("tailwindcss");
+tailwindcss = __toESM(tailwindcss);
+
+//#region src/components/body.tsx
+const marginProperties = [
+	"margin",
+	"marginTop",
+	"marginBottom",
+	"marginRight",
+	"marginLeft",
+	"marginInline",
+	"marginBlock",
+	"marginBlockStart",
+	"marginBlockEnd",
+	"marginInlineStart",
+	"marginInlineEnd"
+];
+const Body = react.forwardRef(({ children, style,...props }, ref) => {
+	const bodyStyle = {
+		background: style?.background,
+		backgroundColor: style?.backgroundColor
+	};
+	if (style) for (const property of marginProperties) bodyStyle[property] = style[property] !== void 0 ? 0 : void 0;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("body", {
+		...props,
+		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", {
+				style,
+				children
+			}) }) })
+		})
+	});
+});
+Body.displayName = "Body";
+
+//#endregion
+//#region src/utils/parse-padding.ts
+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
+	};
+}
+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
+//#region src/utils/px-to-pt.ts
+const pxToPt = (px) => typeof px === "number" && !Number.isNaN(Number(px)) ? px * 3 / 4 : void 0;
+
+//#endregion
+//#region src/components/button.tsx
+const maxFontWidth = 5;
+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 } = parsePadding(style ?? {});
+	const textRaise = 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}" hidden>${"&#8202;".repeat(plSpaceCount)}</i><![endif]-->` } }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				style: {
+					maxWidth: "100%",
+					display: "inline-block",
+					lineHeight: "120%",
+					msoPaddingAlt: "0px",
+					msoTextRaise: 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";
+
+//#endregion
+//#region src/components/column.tsx
+const Column = react.forwardRef(({ children, style,...props }, ref) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+		...props,
+		ref,
+		style,
+		children
+	});
+});
+Column.displayName = "Column";
+
+//#endregion
+//#region src/components/container.tsx
+const Container = react.forwardRef(({ children, style,...props }, ref) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("table", {
+		align: "center",
+		width: "100%",
+		...props,
+		border: 0,
+		cellPadding: "0",
+		cellSpacing: "0",
+		ref,
+		role: "presentation",
+		style: {
+			maxWidth: "37.5em",
+			...style
+		},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tbody", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tr", {
+			style: { width: "100%" },
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", { children })
+		}) })
+	});
+});
+Container.displayName = "Container";
+
+//#endregion
+//#region src/components/font.tsx
+/** The component MUST be placed inside the <Head> component */
+const Font = ({ fontFamily, fallbackFontFamily, webFont, fontStyle = "normal", fontWeight = 400 }) => {
+	const src = webFont ? `src: url(${webFont.url}) format('${webFont.format}');` : "";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("style", { dangerouslySetInnerHTML: { __html: `
+    @font-face {
+      font-family: '${fontFamily}';
+      font-style: ${fontStyle};
+      font-weight: ${fontWeight};
+      mso-font-alt: '${Array.isArray(fallbackFontFamily) ? fallbackFontFamily[0] : fallbackFontFamily}';
+      ${src}
+    }
+
+    * {
+      font-family: '${fontFamily}', ${Array.isArray(fallbackFontFamily) ? fallbackFontFamily.join(", ") : fallbackFontFamily};
+    }
+  ` } });
+};
+
+//#endregion
+//#region src/components/head.tsx
+const Head = react.forwardRef(({ children,...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("head", {
+	...props,
+	ref,
+	children: [
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("meta", {
+			content: "text/html; charset=UTF-8",
+			httpEquiv: "Content-Type"
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("meta", { name: "x-apple-disable-message-reformatting" }),
+		children
+	]
+}));
+Head.displayName = "Head";
+
+//#endregion
+//#region src/utils/spaces.ts
+const withSpace = (value, properties) => {
+	const styles = {};
+	if (value === void 0) return styles;
+	if (Number.isNaN(Number.parseFloat(String(value)))) return styles;
+	for (const property of properties) styles[property] = `${value}px`;
+	return styles;
+};
+const withMargin = (props) => {
+	const candidates = [
+		withSpace(props.m, ["margin"]),
+		withSpace(props.mx, ["marginLeft", "marginRight"]),
+		withSpace(props.my, ["marginTop", "marginBottom"]),
+		withSpace(props.mt, ["marginTop"]),
+		withSpace(props.mr, ["marginRight"]),
+		withSpace(props.mb, ["marginBottom"]),
+		withSpace(props.ml, ["marginLeft"])
+	];
+	const mergedStyles = {};
+	for (const style of candidates) if (Object.keys(style).length > 0) Object.assign(mergedStyles, style);
+	return mergedStyles;
+};
+
+//#endregion
+//#region src/components/heading.tsx
+const Heading = react.forwardRef(({ as: Tag = "h1", children, style, m, mx, my, mt, mr, mb, ml,...props }, ref) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tag, {
+		...props,
+		ref,
+		style: {
+			...withMargin({
+				m,
+				mx,
+				my,
+				mt,
+				mr,
+				mb,
+				ml
+			}),
+			...style
+		},
+		children
+	});
+});
+Heading.displayName = "Heading";
+
+//#endregion
+//#region src/components/hr.tsx
+const Hr = react.forwardRef(({ style,...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("hr", {
+	...props,
+	ref,
+	style: {
+		width: "100%",
+		border: "none",
+		borderTop: "1px solid #eaeaea",
+		...style
+	}
+}));
+Hr.displayName = "Hr";
+
+//#endregion
+//#region src/components/html.tsx
+const Html = react.forwardRef(({ children, lang = "en", dir = "ltr",...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("html", {
+	...props,
+	dir,
+	lang,
+	ref,
+	children
+}));
+Html.displayName = "Html";
+
+//#endregion
+//#region src/components/img.tsx
+const Img = react.forwardRef(({ alt, src, width, height, style,...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+	...props,
+	alt,
+	height,
+	ref,
+	src,
+	style: {
+		display: "block",
+		outline: "none",
+		border: "none",
+		textDecoration: "none",
+		...style
+	},
+	width
+}));
+Img.displayName = "Img";
+
+//#endregion
+//#region src/components/link.tsx
+const Link = react.forwardRef(({ target = "_blank", style,...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+	...props,
+	ref,
+	style: {
+		color: "#067df7",
+		textDecorationLine: "none",
+		...style
+	},
+	target,
+	children: props.children
+}));
+Link.displayName = "Link";
+
+//#endregion
+//#region src/utils/markdown-styles.ts
+const emptyStyle = {};
+const baseHeaderStyles = {
+	fontWeight: "500",
+	paddingTop: 20
+};
+const codeInline = {
+	color: "#212529",
+	fontSize: "87.5%",
+	display: "inline",
+	background: " #f8f8f8",
+	fontFamily: "SFMono-Regular,Menlo,Monaco,Consolas,monospace"
+};
+const codeBlock = {
+	...codeInline,
+	display: "block",
+	paddingTop: 10,
+	paddingRight: 10,
+	paddingLeft: 10,
+	paddingBottom: 1,
+	marginBottom: 20,
+	background: " #f8f8f8"
+};
+const defaultMarkdownStyles = {
+	h1: {
+		...baseHeaderStyles,
+		fontSize: "2.5rem"
+	},
+	h2: {
+		...baseHeaderStyles,
+		fontSize: "2rem"
+	},
+	h3: {
+		...baseHeaderStyles,
+		fontSize: "1.75rem"
+	},
+	h4: {
+		...baseHeaderStyles,
+		fontSize: "1.5rem"
+	},
+	h5: {
+		...baseHeaderStyles,
+		fontSize: "1.25rem"
+	},
+	h6: {
+		...baseHeaderStyles,
+		fontSize: "1rem"
+	},
+	blockQuote: {
+		background: "#f9f9f9",
+		borderLeft: "10px solid #ccc",
+		margin: "1.5em 10px",
+		padding: "1em 10px"
+	},
+	bold: { fontWeight: "bold" },
+	italic: { fontStyle: "italic" },
+	link: {
+		color: "#007bff",
+		textDecoration: "underline",
+		backgroundColor: "transparent"
+	},
+	codeBlock: {
+		...codeBlock,
+		wordWrap: "break-word"
+	},
+	codeInline: {
+		...codeInline,
+		wordWrap: "break-word"
+	},
+	p: emptyStyle,
+	li: emptyStyle,
+	ul: emptyStyle,
+	ol: emptyStyle,
+	image: emptyStyle,
+	br: emptyStyle,
+	hr: emptyStyle,
+	table: emptyStyle,
+	thead: emptyStyle,
+	tbody: emptyStyle,
+	th: emptyStyle,
+	td: emptyStyle,
+	tr: emptyStyle,
+	strikethrough: emptyStyle
+};
+
+//#endregion
+//#region src/utils/parse-css-in-js-to-inline-css.ts
+function camelToKebabCase(str) {
+	return str.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+}
+function escapeQuotes(value) {
+	if (typeof value === "string" && value.includes("\"")) return value.replace(/"/g, "&#x27;");
+	return value;
+}
+const numericalCssProperties = [
+	"width",
+	"height",
+	"margin",
+	"marginTop",
+	"marginRight",
+	"marginBottom",
+	"marginLeft",
+	"padding",
+	"paddingTop",
+	"paddingRight",
+	"paddingBottom",
+	"paddingLeft",
+	"borderWidth",
+	"borderTopWidth",
+	"borderRightWidth",
+	"borderBottomWidth",
+	"borderLeftWidth",
+	"outlineWidth",
+	"top",
+	"right",
+	"bottom",
+	"left",
+	"fontSize",
+	"letterSpacing",
+	"wordSpacing",
+	"maxWidth",
+	"minWidth",
+	"maxHeight",
+	"minHeight",
+	"borderRadius",
+	"borderTopLeftRadius",
+	"borderTopRightRadius",
+	"borderBottomLeftRadius",
+	"borderBottomRightRadius",
+	"textIndent",
+	"gridColumnGap",
+	"gridRowGap",
+	"gridGap",
+	"translateX",
+	"translateY"
+];
+function parseCssInJsToInlineCss(cssProperties) {
+	if (!cssProperties) return "";
+	return Object.entries(cssProperties).map(([property, value]) => {
+		if (typeof value === "number" && numericalCssProperties.includes(property)) return `${camelToKebabCase(property)}:${value}px`;
+		const escapedValue = escapeQuotes(value);
+		return `${camelToKebabCase(property)}:${escapedValue}`;
+	}).join(";");
+}
+
+//#endregion
+//#region src/components/markdown.tsx
+const Markdown = react.forwardRef(({ children, markdownContainerStyles, markdownCustomStyles,...props }, ref) => {
+	const finalStyles = {
+		...defaultMarkdownStyles,
+		...markdownCustomStyles
+	};
+	const renderer = new marked.Renderer();
+	renderer.blockquote = ({ tokens }) => {
+		const text = renderer.parser.parse(tokens);
+		return `<blockquote${parseCssInJsToInlineCss(finalStyles.blockQuote) !== "" ? ` style="${parseCssInJsToInlineCss(finalStyles.blockQuote)}"` : ""}>\n${text}</blockquote>\n`;
+	};
+	renderer.br = () => {
+		return `<br${parseCssInJsToInlineCss(finalStyles.br) !== "" ? ` style="${parseCssInJsToInlineCss(finalStyles.br)}"` : ""} />`;
+	};
+	renderer.code = ({ text }) => {
+		const escaped = `${text.replace(/\n$/, "")}\n`;
+		return `<pre${parseCssInJsToInlineCss(finalStyles.codeBlock) !== "" ? ` style="${parseCssInJsToInlineCss(finalStyles.codeBlock)}"` : ""}><code>${escaped}</code></pre>\n`;
+	};
+	renderer.codespan = ({ text }) => {
+		return `<code${parseCssInJsToInlineCss(finalStyles.codeInline) !== "" ? ` style="${parseCssInJsToInlineCss(finalStyles.codeInline)}"` : ""}>${text}</code>`;
+	};
+	renderer.del = ({ tokens }) => {
+		const text = renderer.parser.parseInline(tokens);
+		return `<del${parseCssInJsToInlineCss(finalStyles.strikethrough) !== "" ? ` style="${parseCssInJsToInlineCss(finalStyles.strikethrough)}"` : ""}>${text}</del>`;
+	};
+	renderer.em = ({ tokens }) => {
+		const text = renderer.parser.parseInline(tokens);
+		return `<em${parseCssInJsToInlineCss(finalStyles.italic) !== "" ? ` style="${parseCssInJsToInlineCss(finalStyles.italic)}"` : ""}>${text}</em>`;
+	};
+	renderer.heading = ({ tokens, depth }) => {
+		const text = renderer.parser.parseInline(tokens);
+		return `<h${depth}${parseCssInJsToInlineCss(finalStyles[`h${depth}`]) !== "" ? ` style="${parseCssInJsToInlineCss(finalStyles[`h${depth}`])}"` : ""}>${text}</h${depth}>`;
+	};
+	renderer.hr = () => {
+		return `<hr${parseCssInJsToInlineCss(finalStyles.hr) !== "" ? ` style="${parseCssInJsToInlineCss(finalStyles.hr)}"` : ""} />\n`;
+	};
+	renderer.image = ({ href, text, title }) => {
+		return `<img src="${href.replaceAll("\"", "&quot;")}" alt="${text.replaceAll("\"", "&quot;")}"${title ? ` title="${title}"` : ""}${parseCssInJsToInlineCss(finalStyles.image) !== "" ? ` style="${parseCssInJsToInlineCss(finalStyles.image)}"` : ""}>`;
+	};
+	renderer.link = ({ href, title, tokens }) => {
+		const text = renderer.parser.parseInline(tokens);
+		return `<a href="${href}" target="_blank"${title ? ` title="${title}"` : ""}${parseCssInJsToInlineCss(finalStyles.link) !== "" ? ` style="${parseCssInJsToInlineCss(finalStyles.link)}"` : ""}>${text}</a>`;
+	};
+	renderer.listitem = ({ tokens }) => {
+		const text = tokens.some((token) => token.type === "list") ? renderer.parser.parse(tokens) : renderer.parser.parseInline(tokens);
+		return `<li${parseCssInJsToInlineCss(finalStyles.li) !== "" ? ` style="${parseCssInJsToInlineCss(finalStyles.li)}"` : ""}>${text}</li>\n`;
+	};
+	renderer.list = ({ items, ordered, start }) => {
+		const type = ordered ? "ol" : "ul";
+		const startAt = ordered && start !== 1 ? ` start="${start}"` : "";
+		const styles = parseCssInJsToInlineCss(finalStyles[ordered ? "ol" : "ul"]);
+		return `<${type}${startAt}${styles !== "" ? ` style="${styles}"` : ""}>\n` + items.map((item) => renderer.listitem(item)).join("") + `</${type}>\n`;
+	};
+	renderer.paragraph = ({ tokens }) => {
+		const text = renderer.parser.parseInline(tokens);
+		return `<p${parseCssInJsToInlineCss(finalStyles.p) !== "" ? ` style="${parseCssInJsToInlineCss(finalStyles.p)}"` : ""}>${text}</p>\n`;
+	};
+	renderer.strong = ({ tokens }) => {
+		const text = renderer.parser.parseInline(tokens);
+		return `<strong${parseCssInJsToInlineCss(finalStyles.bold) !== "" ? ` style="${parseCssInJsToInlineCss(finalStyles.bold)}"` : ""}>${text}</strong>`;
+	};
+	renderer.table = ({ header, rows }) => {
+		const styleTable = parseCssInJsToInlineCss(finalStyles.table);
+		const styleThead = parseCssInJsToInlineCss(finalStyles.thead);
+		const styleTbody = parseCssInJsToInlineCss(finalStyles.tbody);
+		const theadRow = renderer.tablerow({ text: header.map((cell) => renderer.tablecell(cell)).join("") });
+		const tbodyRows = rows.map((row) => renderer.tablerow({ text: row.map((cell) => renderer.tablecell(cell)).join("") })).join("");
+		const thead = `<thead${styleThead ? ` style="${styleThead}"` : ""}>\n${theadRow}</thead>`;
+		const tbody = `<tbody${styleTbody ? ` style="${styleTbody}"` : ""}>${tbodyRows}</tbody>`;
+		return `<table${styleTable ? ` style="${styleTable}"` : ""}>\n${thead}\n${tbody}</table>\n`;
+	};
+	renderer.tablecell = ({ tokens, align, header }) => {
+		const text = renderer.parser.parseInline(tokens);
+		const type = header ? "th" : "td";
+		return `${align ? `<${type} align="${align}"${parseCssInJsToInlineCss(finalStyles.td) !== "" ? ` style="${parseCssInJsToInlineCss(finalStyles.td)}"` : ""}>` : `<${type}${parseCssInJsToInlineCss(finalStyles.td) !== "" ? ` style="${parseCssInJsToInlineCss(finalStyles.td)}"` : ""}>`}${text}</${type}>\n`;
+	};
+	renderer.tablerow = ({ text }) => {
+		return `<tr${parseCssInJsToInlineCss(finalStyles.tr) !== "" ? ` style="${parseCssInJsToInlineCss(finalStyles.tr)}"` : ""}>\n${text}</tr>\n`;
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		...props,
+		dangerouslySetInnerHTML: { __html: marked.marked.parse(children, {
+			renderer,
+			async: false
+		}) },
+		ref,
+		style: markdownContainerStyles
+	});
+});
+Markdown.displayName = "Markdown";
+
+//#endregion
+//#region src/components/preview.tsx
+const PREVIEW_MAX_LENGTH = 150;
+const whiteSpaceCodes = "\xA0‌​‍‎‏";
+const renderWhiteSpace = (text) => {
+	if (text.length >= PREVIEW_MAX_LENGTH) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: whiteSpaceCodes.repeat(PREVIEW_MAX_LENGTH - text.length) });
+};
+const Preview = react.forwardRef(({ children = "",...props }, ref) => {
+	const text = (Array.isArray(children) ? children.join("") : children).substring(0, PREVIEW_MAX_LENGTH);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		style: {
+			display: "none",
+			overflow: "hidden",
+			lineHeight: "1px",
+			opacity: 0,
+			maxHeight: 0,
+			maxWidth: 0
+		},
+		...props,
+		ref,
+		children: [text, renderWhiteSpace(text)]
+	});
+});
+Preview.displayName = "Preview";
+
+//#endregion
+//#region src/components/row.tsx
+const Row = react.forwardRef(({ children, style,...props }, ref) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("table", {
+		align: "center",
+		width: "100%",
+		border: 0,
+		cellPadding: "0",
+		cellSpacing: "0",
+		role: "presentation",
+		...props,
+		ref,
+		style,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tbody", {
+			style: { width: "100%" },
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tr", {
+				style: { width: "100%" },
+				children
+			})
+		})
+	});
+});
+Row.displayName = "Row";
+
+//#endregion
+//#region src/components/section.tsx
+const Section = react.forwardRef(({ children, style,...props }, ref) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("table", {
+		align: "center",
+		width: "100%",
+		border: 0,
+		cellPadding: "0",
+		cellSpacing: "0",
+		role: "presentation",
+		...props,
+		ref,
+		style,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tbody", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tr", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", { children }) }) })
+	});
+});
+Section.displayName = "Section";
+
+//#endregion
+//#region src/utils/compute-margins.ts
+function parseMarginValue(value) {
+	if (typeof value === "number") return {
+		marginTop: value,
+		marginBottom: value,
+		marginLeft: value,
+		marginRight: value
+	};
+	if (typeof value === "string") {
+		const values = value.toString().trim().split(/\s+/);
+		if (values.length === 1) return {
+			marginTop: values[0],
+			marginBottom: values[0],
+			marginLeft: values[0],
+			marginRight: values[0]
+		};
+		if (values.length === 2) return {
+			marginTop: values[0],
+			marginRight: values[1],
+			marginBottom: values[0],
+			marginLeft: values[1]
+		};
+		if (values.length === 3) return {
+			marginTop: values[0],
+			marginRight: values[1],
+			marginBottom: values[2],
+			marginLeft: values[1]
+		};
+		if (values.length === 4) return {
+			marginTop: values[0],
+			marginRight: values[1],
+			marginBottom: values[2],
+			marginLeft: values[3]
+		};
+	}
+	return {
+		marginTop: void 0,
+		marginBottom: void 0,
+		marginLeft: void 0,
+		marginRight: void 0
+	};
+}
+function computeMargins(properties) {
+	let result = {
+		marginTop: void 0,
+		marginRight: void 0,
+		marginBottom: void 0,
+		marginLeft: void 0
+	};
+	for (const [key, value] of Object.entries(properties)) if (key === "margin") result = parseMarginValue(value);
+	else if (key === "marginTop") result.marginTop = value;
+	else if (key === "marginRight") result.marginRight = value;
+	else if (key === "marginBottom") result.marginBottom = value;
+	else if (key === "marginLeft") result.marginLeft = value;
+	return result;
+}
+
+//#endregion
+//#region src/components/text.tsx
+const Text = react.forwardRef(({ style,...props }, ref) => {
+	const defaultMargins = {};
+	if (style?.marginTop === void 0) defaultMargins.marginTop = "16px";
+	if (style?.marginBottom === void 0) defaultMargins.marginBottom = "16px";
+	const margins = computeMargins({
+		...defaultMargins,
+		...style
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+		...props,
+		ref,
+		style: {
+			fontSize: "14px",
+			lineHeight: "24px",
+			...style,
+			...margins
+		}
+	});
+});
+Text.displayName = "Text";
+
+//#endregion
+//#region src/render/plain-text-selectors.ts
+const plainTextSelectors = [
+	{
+		selector: "img",
+		format: "skip"
+	},
+	{
+		selector: "[data-skip-in-text]",
+		format: "skip"
+	},
+	{
+		selector: "a",
+		options: { linkBrackets: false }
+	}
+];
+
+//#endregion
+//#region src/render/pretty.ts
+async function pretty(html) {
+	return prettier_standalone.format(html, {
+		parser: "html",
+		plugins: [prettier_plugins_html],
+		htmlWhitespaceSensitivity: "ignore"
+	});
+}
+
+//#endregion
+//#region src/render/read-stream.ts
+async function readStream(stream) {
+	let result = "";
+	const decoder = new TextDecoder("utf-8");
+	if ("pipeTo" in stream) {
+		const writableStream = new WritableStream({
+			write(chunk) {
+				result += decoder.decode(chunk, { stream: true });
+			},
+			close() {
+				result += decoder.decode();
+			}
+		});
+		await stream.pipeTo(writableStream);
+	} else {
+		const writable = new node_stream.Writable({
+			write(chunk, _encoding, callback) {
+				result += decoder.decode(chunk, { stream: true });
+				callback();
+			},
+			final(callback) {
+				result += decoder.decode();
+				callback();
+			}
+		});
+		await new Promise((resolve, reject) => {
+			writable.on("pipe", (source) => {
+				source.on("error", (err) => {
+					writable.destroy(err);
+				});
+			});
+			writable.on("error", reject);
+			writable.on("close", () => {
+				resolve();
+			});
+			stream.pipe(writable);
+		});
+	}
+	return result;
+}
+
+//#endregion
+//#region src/render/error-boundary.tsx
+function createErrorBoundary(reject) {
+	if (!react.default.Component) return (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: props.children });
+	return class ErrorBoundary extends react.default.Component {
+		componentDidCatch(error) {
+			reject(error);
+		}
+		render() {
+			return this.props.children;
+		}
+	};
+}
+
+//#endregion
+//#region src/render/render.tsx
+const doctype = "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">";
+async function render(element, options) {
+	const reactDOMServer = await import("react-dom/server").then((m) => {
+		if ("default" in m) return m.default;
+		return m;
+	});
+	let markup;
+	await new Promise((resolve, reject) => {
+		if (Object.hasOwn(reactDOMServer, "renderToReadableStream") && typeof WritableStream !== "undefined") {
+			const ErrorBoundary = createErrorBoundary(reject);
+			reactDOMServer.renderToReadableStream(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ErrorBoundary, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Suspense, { children: element }) }), {
+				progressiveChunkSize: Number.POSITIVE_INFINITY,
+				onError(error) {
+					throw error;
+				}
+			}).then((stream) => readStream(stream)).then((result) => {
+				markup = result;
+				resolve();
+			}).catch(reject);
+		} else {
+			const ErrorBoundary = createErrorBoundary(reject);
+			const stream = reactDOMServer.renderToPipeableStream(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ErrorBoundary, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Suspense, { children: element }) }), {
+				async onAllReady() {
+					markup = await readStream(stream);
+					resolve();
+				},
+				onError(error) {
+					reject(error);
+				},
+				progressiveChunkSize: Number.POSITIVE_INFINITY
+			});
+		}
+	});
+	if (options?.plainText) return (0, html_to_text.convert)(markup, {
+		selectors: plainTextSelectors,
+		...options.plainText === true ? options.htmlToTextOptions : {}
+	});
+	const html = `${doctype}${markup.replace(/<!DOCTYPE.*?>/, "")}`;
+	if (options?.pretty) return pretty(html);
+	return html;
+}
+
+//#endregion
+//#region src/tailwind/utils/is-rule-inlinable.ts
+function isRuleInlinable(rule) {
+	const hasAtRuleInside = (0, css_tree.find)(rule, (node) => node.type === "Atrule") !== null;
+	const hasPseudoSelector = (0, css_tree.find)(rule, (node) => node.type === "PseudoClassSelector" || node.type === "PseudoElementSelector") !== null;
+	return !hasAtRuleInside && !hasPseudoSelector;
+}
+
+//#endregion
+//#region src/tailwind/utils/is-part-inlinable.ts
+function isPartInlinable(part) {
+	const hasAtRuleInside = (0, css_tree.find)(part, (node) => node.type === "Atrule") !== null;
+	const hasPseudoSelector = (0, css_tree.find)(part, (node) => node.type === "PseudoClassSelector" || node.type === "PseudoElementSelector") !== null;
+	return !hasAtRuleInside && !hasPseudoSelector;
+}
+
+//#endregion
+//#region src/tailwind/utils/split-mixed-rule.ts
+function splitMixedRule(rule) {
+	const ruleCloneInlinable = (0, css_tree.clone)(rule);
+	const ruleCloneNonInlinable = (0, css_tree.clone)(rule);
+	const inlinableParts = [];
+	const nonInlinableParts = [];
+	for (const part of ruleCloneInlinable.block.children.toArray()) if (isPartInlinable(part)) inlinableParts.push(part);
+	else nonInlinableParts.push(part);
+	return {
+		inlinablePart: inlinableParts.length > 0 ? {
+			...ruleCloneInlinable,
+			block: {
+				type: "Block",
+				children: new css_tree.List().fromArray(inlinableParts)
+			}
+		} : null,
+		nonInlinablePart: nonInlinableParts.length > 0 ? {
+			...ruleCloneNonInlinable,
+			block: {
+				type: "Block",
+				children: new css_tree.List().fromArray(nonInlinableParts)
+			}
+		} : null
+	};
+}
+
+//#endregion
+//#region src/tailwind/utils/extract-rules-per-class.ts
+function extractRulesPerClass(root, classes) {
+	const classSet = new Set(classes);
+	const inlinableRules = /* @__PURE__ */ new Map();
+	const nonInlinableRules = /* @__PURE__ */ new Map();
+	(0, css_tree.walk)(root, {
+		visit: "Rule",
+		enter(rule) {
+			const selectorClasses = [];
+			(0, css_tree.walk)(rule, {
+				visit: "ClassSelector",
+				enter(classSelector) {
+					selectorClasses.push(css_tree.string.decode(classSelector.name));
+				}
+			});
+			if (isRuleInlinable(rule)) {
+				for (const className of selectorClasses) if (classSet.has(className)) inlinableRules.set(className, rule);
+			} else {
+				const { inlinablePart, nonInlinablePart } = splitMixedRule(rule);
+				for (const className of selectorClasses) {
+					if (!classSet.has(className)) continue;
+					if (inlinablePart) inlinableRules.set(className, inlinablePart);
+					if (nonInlinablePart) nonInlinableRules.set(className, nonInlinablePart);
+				}
+			}
+		}
+	});
+	return {
+		inlinable: inlinableRules,
+		nonInlinable: nonInlinableRules
+	};
+}
+
+//#endregion
+//#region src/tailwind/utils/get-custom-properties.ts
+function getCustomProperties(node) {
+	const customProperties = /* @__PURE__ */ new Map();
+	(0, css_tree.walk)(node, {
+		visit: "Atrule",
+		enter(atrule) {
+			if (atrule.name === "property" && atrule.prelude) {
+				const prelude = (0, css_tree.generate)(atrule.prelude);
+				if (prelude.startsWith("--")) {
+					let syntax;
+					let inherits;
+					let initialValue;
+					(0, css_tree.walk)(atrule, {
+						visit: "Declaration",
+						enter(declaration) {
+							if (declaration.property === "syntax") syntax = declaration;
+							if (declaration.property === "inherits") inherits = declaration;
+							if (declaration.property === "initial-value") initialValue = declaration;
+						}
+					});
+					customProperties.set(prelude, {
+						syntax,
+						inherits,
+						initialValue
+					});
+				}
+			}
+		}
+	});
+	return customProperties;
+}
+
+//#endregion
+//#region src/tailwind/utils/from-dash-case-to-camel-case.ts
+const fromDashCaseToCamelCase = (text) => {
+	return text.replace(/-(\w|$)/g, (_, p1) => p1.toUpperCase());
+};
+
+//#endregion
+//#region src/tailwind/utils/get-react-property.ts
+function getReactProperty(prop) {
+	const modifiedProp = prop.toLowerCase();
+	if (modifiedProp.startsWith("--")) return modifiedProp;
+	if (modifiedProp.startsWith("-ms-")) return fromDashCaseToCamelCase(modifiedProp.slice(1));
+	return fromDashCaseToCamelCase(modifiedProp);
+}
+
+//#endregion
+//#region src/tailwind/utils/unwrap-value.ts
+function unwrapValue(value) {
+	if (value.type === "Value" && value.children.size === 1) return value.children.first ?? value;
+	return value;
+}
+
+//#endregion
+//#region src/tailwind/utils/make-inline-styles-for.ts
+function makeInlineStylesFor(inlinableRules, customProperties) {
+	const styles = {};
+	const localVariableDeclarations = /* @__PURE__ */ new Map();
+	for (const rule of inlinableRules) (0, css_tree.walk)(rule, {
+		visit: "Declaration",
+		enter(declaration) {
+			if (declaration.property.startsWith("--")) localVariableDeclarations.set(declaration.property, declaration);
+		}
+	});
+	for (const rule of inlinableRules) {
+		(0, css_tree.walk)(rule, {
+			visit: "Function",
+			enter(func, funcParentListItem) {
+				if (func.name === "var") {
+					let variableName;
+					(0, css_tree.walk)(func, {
+						visit: "Identifier",
+						enter(identifier) {
+							variableName = identifier.name;
+							return this.break;
+						}
+					});
+					if (variableName) {
+						const definition = localVariableDeclarations.get(variableName);
+						if (definition) funcParentListItem.data = unwrapValue(definition.value);
+						else {
+							const customProperty = customProperties.get(variableName);
+							if (customProperty?.initialValue) funcParentListItem.data = unwrapValue(customProperty.initialValue.value);
+						}
+					}
+				}
+			}
+		});
+		(0, css_tree.walk)(rule, {
+			visit: "Declaration",
+			enter(declaration) {
+				if (declaration.property.startsWith("--")) return;
+				styles[getReactProperty(declaration.property)] = (0, css_tree.generate)(declaration.value) + (declaration.important ? "!important" : "");
+			}
+		});
+	}
+	return styles;
+}
+
+//#endregion
+//#region src/tailwind/utils/resolve-all-css-variables.ts
+function doSelectorsIntersect(first, second) {
+	if ((0, css_tree.generate)(first) === (0, css_tree.generate)(second)) return true;
+	let hasSomeUniversal = false;
+	const walker = (node, _parentListItem, parentList) => {
+		if (hasSomeUniversal) return;
+		if (node.type === "PseudoClassSelector" && node.name === "root") hasSomeUniversal = true;
+		if (node.type === "TypeSelector" && node.name === "*" && parentList.size === 1) hasSomeUniversal = true;
+	};
+	(0, css_tree.walk)(first, walker);
+	(0, css_tree.walk)(second, walker);
+	if (hasSomeUniversal) return true;
+	return false;
+}
+function resolveAllCssVariables(node) {
+	const variableDefinitions = /* @__PURE__ */ new Set();
+	const variableUses = /* @__PURE__ */ new Set();
+	const path = [];
+	(0, css_tree.walk)(node, {
+		leave() {
+			path.shift();
+		},
+		enter(node$1) {
+			if (node$1.type === "Declaration") {
+				const declaration = node$1;
+				if (path.some((ancestor) => ancestor.type === "Atrule" && ancestor.name === "layer" && ancestor.prelude !== null && (0, css_tree.generate)(ancestor.prelude).includes("properties"))) {
+					path.unshift(node$1);
+					return;
+				}
+				if (/--[\S]+/.test(declaration.property)) variableDefinitions.add({
+					declaration,
+					path: [...path],
+					variableName: declaration.property,
+					definition: (0, css_tree.generate)(declaration.value)
+				});
+				else {
+					function parseVariableUsesFrom(node$2) {
+						(0, css_tree.walk)(node$2, {
+							visit: "Function",
+							enter(funcNode) {
+								if (funcNode.name === "var") {
+									const children = funcNode.children.toArray();
+									const name = (0, css_tree.generate)(children[0]);
+									const fallback = children[2] ? (0, css_tree.generate)(children[2]) : void 0;
+									variableUses.add({
+										declaration,
+										path: [...path],
+										fallback,
+										variableName: name,
+										raw: (0, css_tree.generate)(funcNode)
+									});
+									if (fallback?.includes("var(")) parseVariableUsesFrom((0, css_tree.parse)(fallback, { context: "value" }));
+								}
+							}
+						});
+					}
+					parseVariableUsesFrom(declaration.value);
+				}
+			}
+			path.unshift(node$1);
+		}
+	});
+	for (const use of variableUses) {
+		let hasReplaced = false;
+		for (const definition of variableDefinitions) {
+			if (use.variableName !== definition.variableName) continue;
+			if (use.path[0]?.type === "Block" && use.path[1]?.type === "Atrule" && use.path[2]?.type === "Block" && use.path[3]?.type === "Rule" && definition.path[0].type === "Block" && definition.path[1].type === "Rule" && doSelectorsIntersect(use.path[3].prelude, definition.path[1].prelude)) {
+				use.declaration.value = (0, css_tree.parse)((0, css_tree.generate)(use.declaration.value).replaceAll(use.raw, definition.definition), { context: "value" });
+				hasReplaced = true;
+				break;
+			}
+			if (use.path[0]?.type === "Block" && use.path[1]?.type === "Rule" && definition.path[0]?.type === "Block" && definition.path[1]?.type === "Rule" && doSelectorsIntersect(use.path[1].prelude, definition.path[1].prelude)) {
+				use.declaration.value = (0, css_tree.parse)((0, css_tree.generate)(use.declaration.value).replaceAll(use.raw, definition.definition), { context: "value" });
+				hasReplaced = true;
+				break;
+			}
+		}
+		if (!hasReplaced && use.fallback) use.declaration.value = (0, css_tree.parse)((0, css_tree.generate)(use.declaration.value).replaceAll(use.raw, use.fallback), { context: "value" });
+	}
+}
+
+//#endregion
+//#region src/tailwind/utils/resolve-calc-expressions.ts
+/**
+* Intentionally only resolves `*` and `/` operations without dealing with parenthesis,
+* because this is the only thing required to run Tailwind v4.
+*/
+function resolveCalcExpressions(node) {
+	(0, css_tree.walk)(node, {
+		visit: "Function",
+		enter(func, funcListItem) {
+			if (func.name === "calc") {
+				func.children.forEach((child, item) => {
+					const left = item.prev;
+					const right = item.next;
+					if (left && right && child.type === "Operator" && (left.data.type === "Dimension" || left.data.type === "Number" || left.data.type === "Percentage") && (right.data.type === "Dimension" || right.data.type === "Number" || right.data.type === "Percentage")) {
+						if (child.value === "*" || child.value === "/") {
+							const value = (() => {
+								if (child.value === "*") return String(Number.parseFloat(left.data.value) * Number.parseFloat(right.data.value));
+								if (right.data.value === "0") return "0";
+								return String(Number.parseFloat(left.data.value) / Number.parseFloat(right.data.value));
+							})();
+							if (left.data.type === "Dimension" && right.data.type === "Number") {
+								item.data = {
+									type: "Dimension",
+									unit: left.data.unit,
+									value
+								};
+								func.children.remove(left);
+								func.children.remove(right);
+							} else if (left.data.type === "Number" && right.data.type === "Dimension") {
+								item.data = {
+									type: "Dimension",
+									unit: right.data.unit,
+									value
+								};
+								func.children.remove(left);
+								func.children.remove(right);
+							} else if (left.data.type === "Number" && right.data.type === "Number") {
+								item.data = {
+									type: "Number",
+									value
+								};
+								func.children.remove(left);
+								func.children.remove(right);
+							} else if (left.data.type === "Dimension" && right.data.type === "Dimension" && left.data.unit === right.data.unit) {
+								if (child.value === "/") item.data = {
+									type: "Number",
+									value
+								};
+								else item.data = {
+									type: "Dimension",
+									unit: left.data.unit,
+									value
+								};
+								func.children.remove(left);
+								func.children.remove(right);
+							} else if (left.data.type === "Percentage" && right.data.type === "Number") {
+								item.data = {
+									type: "Percentage",
+									value
+								};
+								func.children.remove(left);
+								func.children.remove(right);
+							} else if (left.data.type === "Number" && right.data.type === "Percentage") {
+								item.data = {
+									type: "Percentage",
+									value
+								};
+								func.children.remove(left);
+								func.children.remove(right);
+							} else if (left.data.type === "Percentage" && right.data.type === "Percentage") {
+								if (child.value === "/") item.data = {
+									type: "Number",
+									value
+								};
+								else item.data = {
+									type: "Percentage",
+									value
+								};
+								func.children.remove(left);
+								func.children.remove(right);
+							}
+						}
+					}
+				});
+				if (func.children.size === 1 && func.children.first) funcListItem.data = func.children.first;
+			}
+		}
+	});
+}
+
+//#endregion
+//#region src/tailwind/utils/sanitize-declarations.ts
+function rgbNode(r, g, b, alpha) {
+	const children = new css_tree.List();
+	children.appendData({
+		type: "Number",
+		value: r.toFixed(0)
+	});
+	children.appendData({
+		type: "Operator",
+		value: ","
+	});
+	children.appendData({
+		type: "Number",
+		value: g.toFixed(0)
+	});
+	children.appendData({
+		type: "Operator",
+		value: ","
+	});
+	children.appendData({
+		type: "Number",
+		value: b.toFixed(0)
+	});
+	if (alpha !== 1 && alpha !== void 0) {
+		children.appendData({
+			type: "Operator",
+			value: ","
+		});
+		children.appendData({
+			type: "Number",
+			value: alpha.toString()
+		});
+	}
+	return {
+		type: "Function",
+		name: "rgb",
+		children
+	};
+}
+const LAB_TO_LMS = {
+	l: [.3963377773761749, .2158037573099136],
+	m: [-.1055613458156586, -.0638541728258133],
+	s: [-.0894841775298119, -1.2914855480194092]
+};
+const LSM_TO_RGB = {
+	r: [
+		4.076741636075958,
+		-3.307711539258063,
+		.2309699031821043
+	],
+	g: [
+		-1.2684379732850315,
+		2.609757349287688,
+		-.341319376002657
+	],
+	b: [
+		-.0041960761386756,
+		-.7034186179359362,
+		1.7076146940746117
+	]
+};
+function lrgbToRgb(input) {
+	const absoluteNumber = Math.abs(input);
+	const sign = input < 0 ? -1 : 1;
+	if (absoluteNumber > .0031308) return sign * (absoluteNumber ** (1 / 2.4) * 1.055 - .055);
+	return input * 12.92;
+}
+function clamp(value, min, max) {
+	return Math.min(Math.max(value, min), max);
+}
+function oklchToOklab(oklch) {
+	return {
+		l: oklch.l,
+		a: oklch.c * Math.cos(oklch.h / 180 * Math.PI),
+		b: oklch.c * Math.sin(oklch.h / 180 * Math.PI)
+	};
+}
+/** Convert oklch to RGB */
+function oklchToRgb(oklch) {
+	const oklab = oklchToOklab(oklch);
+	const l = (oklab.l + LAB_TO_LMS.l[0] * oklab.a + LAB_TO_LMS.l[1] * oklab.b) ** 3;
+	const m = (oklab.l + LAB_TO_LMS.m[0] * oklab.a + LAB_TO_LMS.m[1] * oklab.b) ** 3;
+	const s = (oklab.l + LAB_TO_LMS.s[0] * oklab.a + LAB_TO_LMS.s[1] * oklab.b) ** 3;
+	const r = 255 * lrgbToRgb(LSM_TO_RGB.r[0] * l + LSM_TO_RGB.r[1] * m + LSM_TO_RGB.r[2] * s);
+	const g = 255 * lrgbToRgb(LSM_TO_RGB.g[0] * l + LSM_TO_RGB.g[1] * m + LSM_TO_RGB.g[2] * s);
+	const b = 255 * lrgbToRgb(LSM_TO_RGB.b[0] * l + LSM_TO_RGB.b[1] * m + LSM_TO_RGB.b[2] * s);
+	return {
+		r: clamp(r, 0, 255),
+		g: clamp(g, 0, 255),
+		b: clamp(b, 0, 255)
+	};
+}
+function separateShorthandDeclaration(shorthandToReplace, [start, end]) {
+	shorthandToReplace.property = start;
+	const values = shorthandToReplace.value.type === "Value" ? shorthandToReplace.value.children.toArray().filter((child) => child.type === "Dimension" || child.type === "Number" || child.type === "Percentage") : [shorthandToReplace.value];
+	let endValue = shorthandToReplace.value;
+	if (values.length === 2) {
+		endValue = {
+			type: "Value",
+			children: new css_tree.List().fromArray([values[1]])
+		};
+		shorthandToReplace.value = {
+			type: "Value",
+			children: new css_tree.List().fromArray([values[0]])
+		};
+	}
+	return {
+		type: "Declaration",
+		property: end,
+		value: endValue,
+		important: shorthandToReplace.important
+	};
+}
+/**
+* Does all the necessary transformations on a per-declaration basis to have the best email client
+* support possible:
+* - convert `rgb` with space-based syntax into comma-based
+* - convert `oklch` values into `rgb`
+* - convert hex values into `rgb`
+* - convert `color-mix(in oklab, rgb(...) opacity, transparent)` into `rgb` with alpha
+* - convert `padding-inline` into `padding-left` and `padding-right`
+* - convert `padding-block` into `padding-top` and `padding-bottom`
+* - convert `margin-inline` into `margin-left` and `margin-right`
+* - convert `margin-block` into `margin-top` and `margin-bottom`
+* - convert `border-radius: calc(infinity * 1px)` into `border-radius: 9999px`
+*/
+function sanitizeDeclarations(nodeContainingDeclarations) {
+	(0, css_tree.walk)(nodeContainingDeclarations, {
+		visit: "Declaration",
+		enter(declaration, item, list) {
+			if (declaration.value.type === "Raw") declaration.value = (0, css_tree.parse)(declaration.value.value, { context: "value" });
+			if (/border-radius\s*:\s*calc\s*\(\s*infinity\s*\*\s*1px\s*\)/i.test((0, css_tree.generate)(declaration))) declaration.value = (0, css_tree.parse)("9999px", { context: "value" });
+			(0, css_tree.walk)(declaration, {
+				visit: "Function",
+				enter(func, funcParentListItem) {
+					const children = func.children.toArray();
+					if (func.name === "oklch") {
+						let l;
+						let c;
+						let h;
+						let a;
+						for (const child of children) {
+							if (child.type === "Number") {
+								if (l === void 0) {
+									l = Number.parseFloat(child.value);
+									continue;
+								}
+								if (c === void 0) {
+									c = Number.parseFloat(child.value);
+									continue;
+								}
+								if (h === void 0) {
+									h = Number.parseFloat(child.value);
+									continue;
+								}
+								if (a === void 0) {
+									a = Number.parseFloat(child.value);
+									continue;
+								}
+							}
+							if (child.type === "Dimension" && child.unit === "deg") {
+								if (h === void 0) {
+									h = Number.parseFloat(child.value);
+									continue;
+								}
+							}
+							if (child.type === "Percentage") {
+								if (l === void 0) {
+									l = Number.parseFloat(child.value) / 100;
+									continue;
+								}
+								if (a === void 0) a = Number.parseFloat(child.value) / 100;
+							}
+						}
+						if (l === void 0 || c === void 0 || h === void 0) throw new Error("Could not determine the parameters of an oklch() function.", { cause: declaration });
+						const rgb = oklchToRgb({
+							l,
+							c,
+							h
+						});
+						funcParentListItem.data = rgbNode(rgb.r, rgb.g, rgb.b, a);
+					}
+					if (func.name === "rgb") {
+						let r;
+						let g;
+						let b;
+						let a;
+						for (const child of children) {
+							if (child.type === "Number") {
+								if (r === void 0) {
+									r = Number.parseFloat(child.value);
+									continue;
+								}
+								if (g === void 0) {
+									g = Number.parseFloat(child.value);
+									continue;
+								}
+								if (b === void 0) {
+									b = Number.parseFloat(child.value);
+									continue;
+								}
+								if (a === void 0) {
+									a = Number.parseFloat(child.value);
+									continue;
+								}
+							}
+							if (child.type === "Percentage") {
+								if (r === void 0) {
+									r = Number.parseFloat(child.value) * 255 / 100;
+									continue;
+								}
+								if (g === void 0) {
+									g = Number.parseFloat(child.value) * 255 / 100;
+									continue;
+								}
+								if (b === void 0) {
+									b = Number.parseFloat(child.value) * 255 / 100;
+									continue;
+								}
+								if (a === void 0) a = Number.parseFloat(child.value) / 100;
+							}
+						}
+						if (r === void 0 || g === void 0 || b === void 0) throw new Error("Could not determine the parameters of an rgb() function.", { cause: declaration });
+						if (a === void 0 || a === 1) funcParentListItem.data = rgbNode(r, g, b);
+						else funcParentListItem.data = rgbNode(r, g, b, a);
+					}
+				}
+			});
+			(0, css_tree.walk)(declaration, {
+				visit: "Hash",
+				enter(hash, hashParentListItem) {
+					const hex = hash.value.trim();
+					if (hex.length === 3) {
+						hashParentListItem.data = rgbNode(Number.parseInt(hex.charAt(0) + hex.charAt(0), 16), Number.parseInt(hex.charAt(1) + hex.charAt(1), 16), Number.parseInt(hex.charAt(2) + hex.charAt(2), 16));
+						return;
+					}
+					if (hex.length === 4) {
+						hashParentListItem.data = rgbNode(Number.parseInt(hex.charAt(0) + hex.charAt(0), 16), Number.parseInt(hex.charAt(1) + hex.charAt(1), 16), Number.parseInt(hex.charAt(2) + hex.charAt(2), 16), Number.parseInt(hex.charAt(3) + hex.charAt(3), 16) / 255);
+						return;
+					}
+					if (hex.length === 5) {
+						hashParentListItem.data = rgbNode(Number.parseInt(hex.slice(0, 2), 16), Number.parseInt(hex.charAt(2) + hex.charAt(2), 16), Number.parseInt(hex.charAt(3) + hex.charAt(3), 16), Number.parseInt(hex.charAt(4) + hex.charAt(4), 16) / 255);
+						return;
+					}
+					if (hex.length === 6) {
+						hashParentListItem.data = rgbNode(Number.parseInt(hex.slice(0, 2), 16), Number.parseInt(hex.slice(2, 4), 16), Number.parseInt(hex.slice(4, 6), 16));
+						return;
+					}
+					if (hex.length === 7) {
+						hashParentListItem.data = rgbNode(Number.parseInt(hex.slice(0, 2), 16), Number.parseInt(hex.slice(2, 4), 16), Number.parseInt(hex.slice(4, 6), 16), Number.parseInt(hex.charAt(6) + hex.charAt(6), 16) / 255);
+						return;
+					}
+					hashParentListItem.data = rgbNode(Number.parseInt(hex.slice(0, 2), 16), Number.parseInt(hex.slice(2, 4), 16), Number.parseInt(hex.slice(4, 6), 16), Number.parseInt(hex.slice(6, 8), 16) / 255);
+				}
+			});
+			(0, css_tree.walk)(declaration, {
+				visit: "Function",
+				enter(func, parentListItem) {
+					if (func.name === "color-mix") {
+						const children = func.children.toArray();
+						const color = children[3];
+						const opacity = children[4];
+						if (func.children.last?.type === "Identifier" && func.children.last.name === "transparent" && color?.type === "Function" && color?.name === "rgb" && opacity) {
+							color.children.appendData({
+								type: "Operator",
+								value: ","
+							});
+							color.children.appendData(opacity);
+							parentListItem.data = color;
+						}
+					}
+				}
+			});
+			if (declaration.property === "padding-inline") {
+				const paddingRight = separateShorthandDeclaration(declaration, ["padding-left", "padding-right"]);
+				list.insertData(paddingRight, item);
+			}
+			if (declaration.property === "padding-block") {
+				const paddingBottom = separateShorthandDeclaration(declaration, ["padding-top", "padding-bottom"]);
+				list.insertData(paddingBottom, item);
+			}
+			if (declaration.property === "margin-inline") {
+				const marginRight = separateShorthandDeclaration(declaration, ["margin-left", "margin-right"]);
+				list.insertData(marginRight, item);
+			}
+			if (declaration.property === "margin-block") {
+				const marginBottom = separateShorthandDeclaration(declaration, ["margin-top", "margin-bottom"]);
+				list.insertData(marginBottom, item);
+			}
+		}
+	});
+}
+
+//#endregion
+//#region src/tailwind/sanitize-stylesheet.ts
+function sanitizeStyleSheet(styleSheet) {
+	resolveAllCssVariables(styleSheet);
+	resolveCalcExpressions(styleSheet);
+	sanitizeDeclarations(styleSheet);
+}
+
+//#endregion
+//#region src/tailwind/use-suspended-promise.ts
+const promiseStates = /* @__PURE__ */ new Map();
+function useSuspensedPromise(promiseFn, key) {
+	const previousState = promiseStates.get(key);
+	if (previousState) {
+		if ("error" in previousState) throw previousState.error;
+		if ("result" in previousState) return previousState.result;
+		throw previousState.promise;
+	}
+	const state = { promise: promiseFn().then((result) => state.result = result).catch((error) => state.error = error) };
+	promiseStates.set(key, state);
+	throw state.promise;
+}
+
+//#endregion
+//#region src/tailwind/utils/sanitize-class-name.ts
+const digitToNameMap = {
+	"0": "zero",
+	"1": "one",
+	"2": "two",
+	"3": "three",
+	"4": "four",
+	"5": "five",
+	"6": "six",
+	"7": "seven",
+	"8": "eight",
+	"9": "nine"
+};
+function sanitizeClassName(className) {
+	return className.replaceAll("+", "plus").replaceAll("[", "").replaceAll("%", "pc").replaceAll("]", "").replaceAll("(", "").replaceAll(")", "").replaceAll("!", "imprtnt").replaceAll(">", "gt").replaceAll("<", "lt").replaceAll("=", "eq").replace(/^[0-9]/, (digit) => {
+		return digitToNameMap[digit];
+	}).replace(/[^a-zA-Z0-9\-_]/g, "_");
+}
+
+//#endregion
+//#region src/tailwind/utils/sanitize-non-inlinable-rules.ts
+/**
+* Ensures the best email client support for non-inlinable rules:
+* 1. Converts all declarations in non-inlinable rules into !important
+* 2. Sanitizes class selectors of all non-inlinable rules
+*/
+function sanitizeNonInlinableRules(node) {
+	(0, css_tree.walk)(node, {
+		visit: "Rule",
+		enter(rule) {
+			if (!isRuleInlinable(rule)) {
+				(0, css_tree.walk)(rule.prelude, (node$1) => {
+					if (node$1.type === "ClassSelector") node$1.name = sanitizeClassName(css_tree.string.decode(node$1.name));
+				});
+				(0, css_tree.walk)(rule, {
+					visit: "Declaration",
+					enter(declaration) {
+						declaration.important = true;
+					}
+				});
+			}
+		}
+	});
+}
+
+//#endregion
+//#region src/tailwind/is-component.ts
+/**
+* Components that render standard HTML elements and should be treated as
+* elements (not traversed through) by the Tailwind tree mapper.
+*/
+const componentsToTreatAsElements = [
+	Body,
+	Button,
+	Container,
+	Heading,
+	Hr,
+	Img,
+	Link,
+	Preview,
+	Text
+];
+const isComponent = (element) => {
+	return (typeof element.type === "function" || element.type.render !== void 0) && !componentsToTreatAsElements.includes(element.type);
+};
+
+//#endregion
+//#region src/tailwind/map-react-tree.ts
+/**
+* Deep maps a React tree from a node, even through its components.
+* For all the components it finds, it renders them by directly calling them.
+*
+* @param process - Callback called every time a new element has been reached.
+* For components, this is called both before rendering (on props.children)
+* and after rendering.
+*/
+function mapReactTree(value, process) {
+	const mapped = react.default.Children.map(value, (node) => {
+		if (react.default.isValidElement(node)) {
+			const newProps = { ...node.props };
+			if (node.props.children && !isComponent(node)) newProps.children = mapReactTree(node.props.children, process);
+			const processed = process(react.default.cloneElement(node, newProps, newProps.children));
+			if (react.default.isValidElement(processed) && isComponent(processed)) return mapReactTree((typeof processed.type === "object" ? processed.type.render : processed.type)(processed.props), process);
+			return processed;
+		}
+		return process(node);
+	});
+	return mapped && mapped.length === 1 ? mapped[0] : mapped;
+}
+
+//#endregion
+//#region src/tailwind/clone-element-with-inlined-styles.ts
+function cloneElementWithInlinedStyles(element, inlinableRules, nonInlinableRules, customProperties) {
+	const propsToOverwrite = {};
+	if (element.props.className && !isComponent(element)) {
+		const classes = element.props.className.trim().split(/\s+/);
+		const residualClasses = [];
+		const rules = [];
+		for (const className of classes) {
+			const rule = inlinableRules.get(className);
+			if (rule) rules.push(rule);
+			if (nonInlinableRules.has(className)) residualClasses.push(className);
+			else if (!rule) residualClasses.push(className);
+		}
+		propsToOverwrite.style = {
+			...makeInlineStylesFor(rules, customProperties),
+			...element.props.style
+		};
+		if (residualClasses.length > 0) propsToOverwrite.className = residualClasses.map((className) => {
+			if (nonInlinableRules.has(className)) return sanitizeClassName(className);
+			return className;
+		}).join(" ");
+		else propsToOverwrite.className = void 0;
+	}
+	const newProps = {
+		...element.props,
+		...propsToOverwrite
+	};
+	return react.default.cloneElement(element, newProps, newProps.children);
+}
+
+//#endregion
+//#region src/tailwind/css/index.ts
+const css$3 = `
+@layer theme, base, components, utilities;
+
+@layer theme {
+  @theme default {
+    --font-sans:
+      ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
+      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+    --font-mono:
+      ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
+      "Courier New", monospace;
+
+    --color-red-50: oklch(97.1% 0.013 17.38);
+    --color-red-100: oklch(93.6% 0.032 17.717);
+    --color-red-200: oklch(88.5% 0.062 18.334);
+    --color-red-300: oklch(80.8% 0.114 19.571);
+    --color-red-400: oklch(70.4% 0.191 22.216);
+    --color-red-500: oklch(63.7% 0.237 25.331);
+    --color-red-600: oklch(57.7% 0.245 27.325);
+    --color-red-700: oklch(50.5% 0.213 27.518);
+    --color-red-800: oklch(44.4% 0.177 26.899);
+    --color-red-900: oklch(39.6% 0.141 25.723);
+    --color-red-950: oklch(25.8% 0.092 26.042);
+
+    --color-orange-50: oklch(98% 0.016 73.684);
+    --color-orange-100: oklch(95.4% 0.038 75.164);
+    --color-orange-200: oklch(90.1% 0.076 70.697);
+    --color-orange-300: oklch(83.7% 0.128 66.29);
+    --color-orange-400: oklch(75% 0.183 55.934);
+    --color-orange-500: oklch(70.5% 0.213 47.604);
+    --color-orange-600: oklch(64.6% 0.222 41.116);
+    --color-orange-700: oklch(55.3% 0.195 38.402);
+    --color-orange-800: oklch(47% 0.157 37.304);
+    --color-orange-900: oklch(40.8% 0.123 38.172);
+    --color-orange-950: oklch(26.6% 0.079 36.259);
+
+    --color-amber-50: oklch(98.7% 0.022 95.277);
+    --color-amber-100: oklch(96.2% 0.059 95.617);
+    --color-amber-200: oklch(92.4% 0.12 95.746);
+    --color-amber-300: oklch(87.9% 0.169 91.605);
+    --color-amber-400: oklch(82.8% 0.189 84.429);
+    --color-amber-500: oklch(76.9% 0.188 70.08);
+    --color-amber-600: oklch(66.6% 0.179 58.318);
+    --color-amber-700: oklch(55.5% 0.163 48.998);
+    --color-amber-800: oklch(47.3% 0.137 46.201);
+    --color-amber-900: oklch(41.4% 0.112 45.904);
+    --color-amber-950: oklch(27.9% 0.077 45.635);
+
+    --color-yellow-50: oklch(98.7% 0.026 102.212);
+    --color-yellow-100: oklch(97.3% 0.071 103.193);
+    --color-yellow-200: oklch(94.5% 0.129 101.54);
+    --color-yellow-300: oklch(90.5% 0.182 98.111);
+    --color-yellow-400: oklch(85.2% 0.199 91.936);
+    --color-yellow-500: oklch(79.5% 0.184 86.047);
+    --color-yellow-600: oklch(68.1% 0.162 75.834);
+    --color-yellow-700: oklch(55.4% 0.135 66.442);
+    --color-yellow-800: oklch(47.6% 0.114 61.907);
+    --color-yellow-900: oklch(42.1% 0.095 57.708);
+    --color-yellow-950: oklch(28.6% 0.066 53.813);
+
+    --color-lime-50: oklch(98.6% 0.031 120.757);
+    --color-lime-100: oklch(96.7% 0.067 122.328);
+    --color-lime-200: oklch(93.8% 0.127 124.321);
+    --color-lime-300: oklch(89.7% 0.196 126.665);
+    --color-lime-400: oklch(84.1% 0.238 128.85);
+    --color-lime-500: oklch(76.8% 0.233 130.85);
+    --color-lime-600: oklch(64.8% 0.2 131.684);
+    --color-lime-700: oklch(53.2% 0.157 131.589);
+    --color-lime-800: oklch(45.3% 0.124 130.933);
+    --color-lime-900: oklch(40.5% 0.101 131.063);
+    --color-lime-950: oklch(27.4% 0.072 132.109);
+
+    --color-green-50: oklch(98.2% 0.018 155.826);
+    --color-green-100: oklch(96.2% 0.044 156.743);
+    --color-green-200: oklch(92.5% 0.084 155.995);
+    --color-green-300: oklch(87.1% 0.15 154.449);
+    --color-green-400: oklch(79.2% 0.209 151.711);
+    --color-green-500: oklch(72.3% 0.219 149.579);
+    --color-green-600: oklch(62.7% 0.194 149.214);
+    --color-green-700: oklch(52.7% 0.154 150.069);
+    --color-green-800: oklch(44.8% 0.119 151.328);
+    --color-green-900: oklch(39.3% 0.095 152.535);
+    --color-green-950: oklch(26.6% 0.065 152.934);
+
+    --color-emerald-50: oklch(97.9% 0.021 166.113);
+    --color-emerald-100: oklch(95% 0.052 163.051);
+    --color-emerald-200: oklch(90.5% 0.093 164.15);
+    --color-emerald-300: oklch(84.5% 0.143 164.978);
+    --color-emerald-400: oklch(76.5% 0.177 163.223);
+    --color-emerald-500: oklch(69.6% 0.17 162.48);
+    --color-emerald-600: oklch(59.6% 0.145 163.225);
+    --color-emerald-700: oklch(50.8% 0.118 165.612);
+    --color-emerald-800: oklch(43.2% 0.095 166.913);
+    --color-emerald-900: oklch(37.8% 0.077 168.94);
+    --color-emerald-950: oklch(26.2% 0.051 172.552);
+
+    --color-teal-50: oklch(98.4% 0.014 180.72);
+    --color-teal-100: oklch(95.3% 0.051 180.801);
+    --color-teal-200: oklch(91% 0.096 180.426);
+    --color-teal-300: oklch(85.5% 0.138 181.071);
+    --color-teal-400: oklch(77.7% 0.152 181.912);
+    --color-teal-500: oklch(70.4% 0.14 182.503);
+    --color-teal-600: oklch(60% 0.118 184.704);
+    --color-teal-700: oklch(51.1% 0.096 186.391);
+    --color-teal-800: oklch(43.7% 0.078 188.216);
+    --color-teal-900: oklch(38.6% 0.063 188.416);
+    --color-teal-950: oklch(27.7% 0.046 192.524);
+
+    --color-cyan-50: oklch(98.4% 0.019 200.873);
+    --color-cyan-100: oklch(95.6% 0.045 203.388);
+    --color-cyan-200: oklch(91.7% 0.08 205.041);
+    --color-cyan-300: oklch(86.5% 0.127 207.078);
+    --color-cyan-400: oklch(78.9% 0.154 211.53);
+    --color-cyan-500: oklch(71.5% 0.143 215.221);
+    --color-cyan-600: oklch(60.9% 0.126 221.723);
+    --color-cyan-700: oklch(52% 0.105 223.128);
+    --color-cyan-800: oklch(45% 0.085 224.283);
+    --color-cyan-900: oklch(39.8% 0.07 227.392);
+    --color-cyan-950: oklch(30.2% 0.056 229.695);
+
+    --color-sky-50: oklch(97.7% 0.013 236.62);
+    --color-sky-100: oklch(95.1% 0.026 236.824);
+    --color-sky-200: oklch(90.1% 0.058 230.902);
+    --color-sky-300: oklch(82.8% 0.111 230.318);
+    --color-sky-400: oklch(74.6% 0.16 232.661);
+    --color-sky-500: oklch(68.5% 0.169 237.323);
+    --color-sky-600: oklch(58.8% 0.158 241.966);
+    --color-sky-700: oklch(50% 0.134 242.749);
+    --color-sky-800: oklch(44.3% 0.11 240.79);
+    --color-sky-900: oklch(39.1% 0.09 240.876);
+    --color-sky-950: oklch(29.3% 0.066 243.157);
+
+    --color-blue-50: oklch(97% 0.014 254.604);
+    --color-blue-100: oklch(93.2% 0.032 255.585);
+    --color-blue-200: oklch(88.2% 0.059 254.128);
+    --color-blue-300: oklch(80.9% 0.105 251.813);
+    --color-blue-400: oklch(70.7% 0.165 254.624);
+    --color-blue-500: oklch(62.3% 0.214 259.815);
+    --color-blue-600: oklch(54.6% 0.245 262.881);
+    --color-blue-700: oklch(48.8% 0.243 264.376);
+    --color-blue-800: oklch(42.4% 0.199 265.638);
+    --color-blue-900: oklch(37.9% 0.146 265.522);
+    --color-blue-950: oklch(28.2% 0.091 267.935);
+
+    --color-indigo-50: oklch(96.2% 0.018 272.314);
+    --color-indigo-100: oklch(93% 0.034 272.788);
+    --color-indigo-200: oklch(87% 0.065 274.039);
+    --color-indigo-300: oklch(78.5% 0.115 274.713);
+    --color-indigo-400: oklch(67.3% 0.182 276.935);
+    --color-indigo-500: oklch(58.5% 0.233 277.117);
+    --color-indigo-600: oklch(51.1% 0.262 276.966);
+    --color-indigo-700: oklch(45.7% 0.24 277.023);
+    --color-indigo-800: oklch(39.8% 0.195 277.366);
+    --color-indigo-900: oklch(35.9% 0.144 278.697);
+    --color-indigo-950: oklch(25.7% 0.09 281.288);
+
+    --color-violet-50: oklch(96.9% 0.016 293.756);
+    --color-violet-100: oklch(94.3% 0.029 294.588);
+    --color-violet-200: oklch(89.4% 0.057 293.283);
+    --color-violet-300: oklch(81.1% 0.111 293.571);
+    --color-violet-400: oklch(70.2% 0.183 293.541);
+    --color-violet-500: oklch(60.6% 0.25 292.717);
+    --color-violet-600: oklch(54.1% 0.281 293.009);
+    --color-violet-700: oklch(49.1% 0.27 292.581);
+    --color-violet-800: oklch(43.2% 0.232 292.759);
+    --color-violet-900: oklch(38% 0.189 293.745);
+    --color-violet-950: oklch(28.3% 0.141 291.089);
+
+    --color-purple-50: oklch(97.7% 0.014 308.299);
+    --color-purple-100: oklch(94.6% 0.033 307.174);
+    --color-purple-200: oklch(90.2% 0.063 306.703);
+    --color-purple-300: oklch(82.7% 0.119 306.383);
+    --color-purple-400: oklch(71.4% 0.203 305.504);
+    --color-purple-500: oklch(62.7% 0.265 303.9);
+    --color-purple-600: oklch(55.8% 0.288 302.321);
+    --color-purple-700: oklch(49.6% 0.265 301.924);
+    --color-purple-800: oklch(43.8% 0.218 303.724);
+    --color-purple-900: oklch(38.1% 0.176 304.987);
+    --color-purple-950: oklch(29.1% 0.149 302.717);
+
+    --color-fuchsia-50: oklch(97.7% 0.017 320.058);
+    --color-fuchsia-100: oklch(95.2% 0.037 318.852);
+    --color-fuchsia-200: oklch(90.3% 0.076 319.62);
+    --color-fuchsia-300: oklch(83.3% 0.145 321.434);
+    --color-fuchsia-400: oklch(74% 0.238 322.16);
+    --color-fuchsia-500: oklch(66.7% 0.295 322.15);
+    --color-fuchsia-600: oklch(59.1% 0.293 322.896);
+    --color-fuchsia-700: oklch(51.8% 0.253 323.949);
+    --color-fuchsia-800: oklch(45.2% 0.211 324.591);
+    --color-fuchsia-900: oklch(40.1% 0.17 325.612);
+    --color-fuchsia-950: oklch(29.3% 0.136 325.661);
+
+    --color-pink-50: oklch(97.1% 0.014 343.198);
+    --color-pink-100: oklch(94.8% 0.028 342.258);
+    --color-pink-200: oklch(89.9% 0.061 343.231);
+    --color-pink-300: oklch(82.3% 0.12 346.018);
+    --color-pink-400: oklch(71.8% 0.202 349.761);
+    --color-pink-500: oklch(65.6% 0.241 354.308);
+    --color-pink-600: oklch(59.2% 0.249 0.584);
+    --color-pink-700: oklch(52.5% 0.223 3.958);
+    --color-pink-800: oklch(45.9% 0.187 3.815);
+    --color-pink-900: oklch(40.8% 0.153 2.432);
+    --color-pink-950: oklch(28.4% 0.109 3.907);
+
+    --color-rose-50: oklch(96.9% 0.015 12.422);
+    --color-rose-100: oklch(94.1% 0.03 12.58);
+    --color-rose-200: oklch(89.2% 0.058 10.001);
+    --color-rose-300: oklch(81% 0.117 11.638);
+    --color-rose-400: oklch(71.2% 0.194 13.428);
+    --color-rose-500: oklch(64.5% 0.246 16.439);
+    --color-rose-600: oklch(58.6% 0.253 17.585);
+    --color-rose-700: oklch(51.4% 0.222 16.935);
+    --color-rose-800: oklch(45.5% 0.188 13.697);
+    --color-rose-900: oklch(41% 0.159 10.272);
+    --color-rose-950: oklch(27.1% 0.105 12.094);
+
+    --color-slate-50: oklch(98.4% 0.003 247.858);
+    --color-slate-100: oklch(96.8% 0.007 247.896);
+    --color-slate-200: oklch(92.9% 0.013 255.508);
+    --color-slate-300: oklch(86.9% 0.022 252.894);
+    --color-slate-400: oklch(70.4% 0.04 256.788);
+    --color-slate-500: oklch(55.4% 0.046 257.417);
+    --color-slate-600: oklch(44.6% 0.043 257.281);
+    --color-slate-700: oklch(37.2% 0.044 257.287);
+    --color-slate-800: oklch(27.9% 0.041 260.031);
+    --color-slate-900: oklch(20.8% 0.042 265.755);
+    --color-slate-950: oklch(12.9% 0.042 264.695);
+
+    --color-gray-50: oklch(98.5% 0.002 247.839);
+    --color-gray-100: oklch(96.7% 0.003 264.542);
+    --color-gray-200: oklch(92.8% 0.006 264.531);
+    --color-gray-300: oklch(87.2% 0.01 258.338);
+    --color-gray-400: oklch(70.7% 0.022 261.325);
+    --color-gray-500: oklch(55.1% 0.027 264.364);
+    --color-gray-600: oklch(44.6% 0.03 256.802);
+    --color-gray-700: oklch(37.3% 0.034 259.733);
+    --color-gray-800: oklch(27.8% 0.033 256.848);
+    --color-gray-900: oklch(21% 0.034 264.665);
+    --color-gray-950: oklch(13% 0.028 261.692);
+
+    --color-zinc-50: oklch(98.5% 0 0);
+    --color-zinc-100: oklch(96.7% 0.001 286.375);
+    --color-zinc-200: oklch(92% 0.004 286.32);
+    --color-zinc-300: oklch(87.1% 0.006 286.286);
+    --color-zinc-400: oklch(70.5% 0.015 286.067);
+    --color-zinc-500: oklch(55.2% 0.016 285.938);
+    --color-zinc-600: oklch(44.2% 0.017 285.786);
+    --color-zinc-700: oklch(37% 0.013 285.805);
+    --color-zinc-800: oklch(27.4% 0.006 286.033);
+    --color-zinc-900: oklch(21% 0.006 285.885);
+    --color-zinc-950: oklch(14.1% 0.005 285.823);
+
+    --color-neutral-50: oklch(98.5% 0 0);
+    --color-neutral-100: oklch(97% 0 0);
+    --color-neutral-200: oklch(92.2% 0 0);
+    --color-neutral-300: oklch(87% 0 0);
+    --color-neutral-400: oklch(70.8% 0 0);
+    --color-neutral-500: oklch(55.6% 0 0);
+    --color-neutral-600: oklch(43.9% 0 0);
+    --color-neutral-700: oklch(37.1% 0 0);
+    --color-neutral-800: oklch(26.9% 0 0);
+    --color-neutral-900: oklch(20.5% 0 0);
+    --color-neutral-950: oklch(14.5% 0 0);
+
+    --color-stone-50: oklch(98.5% 0.001 106.423);
+    --color-stone-100: oklch(97% 0.001 106.424);
+    --color-stone-200: oklch(92.3% 0.003 48.717);
+    --color-stone-300: oklch(86.9% 0.005 56.366);
+    --color-stone-400: oklch(70.9% 0.01 56.259);
+    --color-stone-500: oklch(55.3% 0.013 58.071);
+    --color-stone-600: oklch(44.4% 0.011 73.639);
+    --color-stone-700: oklch(37.4% 0.01 67.558);
+    --color-stone-800: oklch(26.8% 0.007 34.298);
+    --color-stone-900: oklch(21.6% 0.006 56.043);
+    --color-stone-950: oklch(14.7% 0.004 49.25);
+
+    --color-black: #000;
+    --color-white: #fff;
+
+    --spacing: 0.25rem;
+
+    --breakpoint-sm: 40rem;
+    --breakpoint-md: 48rem;
+    --breakpoint-lg: 64rem;
+    --breakpoint-xl: 80rem;
+    --breakpoint-2xl: 96rem;
+
+    --container-3xs: 16rem;
+    --container-2xs: 18rem;
+    --container-xs: 20rem;
+    --container-sm: 24rem;
+    --container-md: 28rem;
+    --container-lg: 32rem;
+    --container-xl: 36rem;
+    --container-2xl: 42rem;
+    --container-3xl: 48rem;
+    --container-4xl: 56rem;
+    --container-5xl: 64rem;
+    --container-6xl: 72rem;
+    --container-7xl: 80rem;
+
+    --text-xs: 0.75rem;
+    --text-xs--line-height: calc(1 / 0.75);
+    --text-sm: 0.875rem;
+    --text-sm--line-height: calc(1.25 / 0.875);
+    --text-base: 1rem;
+    --text-base--line-height: calc(1.5 / 1);
+    --text-lg: 1.125rem;
+    --text-lg--line-height: calc(1.75 / 1.125);
+    --text-xl: 1.25rem;
+    --text-xl--line-height: calc(1.75 / 1.25);
+    --text-2xl: 1.5rem;
+    --text-2xl--line-height: calc(2 / 1.5);
+    --text-3xl: 1.875rem;
+    --text-3xl--line-height: calc(2.25 / 1.875);
+    --text-4xl: 2.25rem;
+    --text-4xl--line-height: calc(2.5 / 2.25);
+    --text-5xl: 3rem;
+    --text-5xl--line-height: 1;
+    --text-6xl: 3.75rem;
+    --text-6xl--line-height: 1;
+    --text-7xl: 4.5rem;
+    --text-7xl--line-height: 1;
+    --text-8xl: 6rem;
+    --text-8xl--line-height: 1;
+    --text-9xl: 8rem;
+    --text-9xl--line-height: 1;
+
+    --font-weight-thin: 100;
+    --font-weight-extralight: 200;
+    --font-weight-light: 300;
+    --font-weight-normal: 400;
+    --font-weight-medium: 500;
+    --font-weight-semibold: 600;
+    --font-weight-bold: 700;
+    --font-weight-extrabold: 800;
+    --font-weight-black: 900;
+
+    --tracking-tighter: -0.05em;
+    --tracking-tight: -0.025em;
+    --tracking-normal: 0em;
+    --tracking-wide: 0.025em;
+    --tracking-wider: 0.05em;
+    --tracking-widest: 0.1em;
+
+    --leading-tight: 1.25;
+    --leading-snug: 1.375;
+    --leading-normal: 1.5;
+    --leading-relaxed: 1.625;
+    --leading-loose: 2;
+
+    --radius-xs: 0.125rem;
+    --radius-sm: 0.25rem;
+    --radius-md: 0.375rem;
+    --radius-lg: 0.5rem;
+    --radius-xl: 0.75rem;
+    --radius-2xl: 1rem;
+    --radius-3xl: 1.5rem;
+    --radius-4xl: 2rem;
+
+    --shadow-2xs: 0 1px rgb(0 0 0 / 0.05);
+    --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+    --shadow-md:
+      0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+    --shadow-lg:
+      0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+    --shadow-xl:
+      0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+    --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+
+    --inset-shadow-2xs: inset 0 1px rgb(0 0 0 / 0.05);
+    --inset-shadow-xs: inset 0 1px 1px rgb(0 0 0 / 0.05);
+    --inset-shadow-sm: inset 0 2px 4px rgb(0 0 0 / 0.05);
+
+    --drop-shadow-xs: 0 1px 1px rgb(0 0 0 / 0.05);
+    --drop-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.15);
+    --drop-shadow-md: 0 3px 3px rgb(0 0 0 / 0.12);
+    --drop-shadow-lg: 0 4px 4px rgb(0 0 0 / 0.15);
+    --drop-shadow-xl: 0 9px 7px rgb(0 0 0 / 0.1);
+    --drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / 0.15);
+
+    --text-shadow-2xs: 0px 1px 0px rgb(0 0 0 / 0.15);
+    --text-shadow-xs: 0px 1px 1px rgb(0 0 0 / 0.2);
+    --text-shadow-sm:
+      0px 1px 0px rgb(0 0 0 / 0.075), 0px 1px 1px rgb(0 0 0 / 0.075),
+      0px 2px 2px rgb(0 0 0 / 0.075);
+    --text-shadow-md:
+      0px 1px 1px rgb(0 0 0 / 0.1), 0px 1px 2px rgb(0 0 0 / 0.1),
+      0px 2px 4px rgb(0 0 0 / 0.1);
+    --text-shadow-lg:
+      0px 1px 2px rgb(0 0 0 / 0.1), 0px 3px 2px rgb(0 0 0 / 0.1),
+      0px 4px 8px rgb(0 0 0 / 0.1);
+
+    --ease-in: cubic-bezier(0.4, 0, 1, 1);
+    --ease-out: cubic-bezier(0, 0, 0.2, 1);
+    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+
+    --animate-spin: spin 1s linear infinite;
+    --animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
+    --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+    --animate-bounce: bounce 1s infinite;
+
+    @keyframes spin {
+      to {
+        transform: rotate(360deg);
+      }
+    }
+
+    @keyframes ping {
+      75%,
+      100% {
+        transform: scale(2);
+        opacity: 0;
+      }
+    }
+
+    @keyframes pulse {
+      50% {
+        opacity: 0.5;
+      }
+    }
+
+    @keyframes bounce {
+      0%,
+      100% {
+        transform: translateY(-25%);
+        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
+      }
+
+      50% {
+        transform: none;
+        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+      }
+    }
+
+    --blur-xs: 4px;
+    --blur-sm: 8px;
+    --blur-md: 12px;
+    --blur-lg: 16px;
+    --blur-xl: 24px;
+    --blur-2xl: 40px;
+    --blur-3xl: 64px;
+
+    --perspective-dramatic: 100px;
+    --perspective-near: 300px;
+    --perspective-normal: 500px;
+    --perspective-midrange: 800px;
+    --perspective-distant: 1200px;
+
+    --aspect-video: 16 / 9;
+
+    --default-transition-duration: 150ms;
+    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    --default-font-family: --theme(--font-sans, initial);
+    --default-font-feature-settings: --theme(
+      --font-sans--font-feature-settings,
+      initial
+    );
+    --default-font-variation-settings: --theme(
+      --font-sans--font-variation-settings,
+      initial
+    );
+    --default-mono-font-family: --theme(--font-mono, initial);
+    --default-mono-font-feature-settings: --theme(
+      --font-mono--font-feature-settings,
+      initial
+    );
+    --default-mono-font-variation-settings: --theme(
+      --font-mono--font-variation-settings,
+      initial
+    );
+  }
+
+  /* Deprecated */
+  @theme default inline reference {
+    --blur: 8px;
+    --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+    --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
+    --drop-shadow: 0 1px 2px rgb(0 0 0 / 0.1), 0 1px 1px rgb(0 0 0 / 0.06);
+    --radius: 0.25rem;
+    --max-width-prose: 65ch;
+  }
+}
+
+@layer base {
+  /*
+  1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
+  2. Remove default margins and padding
+  3. Reset all borders.
+*/
+
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    box-sizing: border-box; /* 1 */
+    margin: 0; /* 2 */
+    padding: 0; /* 2 */
+    border: 0 solid; /* 3 */
+  }
+
+  /*
+  1. Use a consistent sensible line-height in all browsers.
+  2. Prevent adjustments of font size after orientation changes in iOS.
+  3. Use a more readable tab size.
+  4. Use the user's configured \`sans\` font-family by default.
+  5. Use the user's configured \`sans\` font-feature-settings by default.
+  6. Use the user's configured \`sans\` font-variation-settings by default.
+  7. Disable tap highlights on iOS.
+*/
+
+  html,
+  :host {
+    line-height: 1.5; /* 1 */
+    -webkit-text-size-adjust: 100%; /* 2 */
+    tab-size: 4; /* 3 */
+    font-family: --theme(
+      --default-font-family,
+      ui-sans-serif,
+      system-ui,
+      sans-serif,
+      "Apple Color Emoji",
+      "Segoe UI Emoji",
+      "Segoe UI Symbol",
+      "Noto Color Emoji"
+    ); /* 4 */
+    font-feature-settings: --theme(
+      --default-font-feature-settings,
+      normal
+    ); /* 5 */
+    font-variation-settings: --theme(
+      --default-font-variation-settings,
+      normal
+    ); /* 6 */
+    -webkit-tap-highlight-color: transparent; /* 7 */
+  }
+
+  /*
+  1. Add the correct height in Firefox.
+  2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
+  3. Reset the default border style to a 1px solid border.
+*/
+
+  hr {
+    height: 0; /* 1 */
+    color: inherit; /* 2 */
+    border-top-width: 1px; /* 3 */
+  }
+
+  /*
+  Add the correct text decoration in Chrome, Edge, and Safari.
+*/
+
+  abbr:where([title]) {
+    -webkit-text-decoration: underline dotted;
+    text-decoration: underline dotted;
+  }
+
+  /*
+  Remove the default font size and weight for headings.
+*/
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-size: inherit;
+    font-weight: inherit;
+  }
+
+  /*
+  Reset links to optimize for opt-in styling instead of opt-out.
+*/
+
+  a {
+    color: inherit;
+    -webkit-text-decoration: inherit;
+    text-decoration: inherit;
+  }
+
+  /*
+  Add the correct font weight in Edge and Safari.
+*/
+
+  b,
+  strong {
+    font-weight: bolder;
+  }
+
+  /*
+  1. Use the user's configured \`mono\` font-family by default.
+  2. Use the user's configured \`mono\` font-feature-settings by default.
+  3. Use the user's configured \`mono\` font-variation-settings by default.
+  4. Correct the odd \`em\` font sizing in all browsers.
+*/
+
+  code,
+  kbd,
+  samp,
+  pre {
+    font-family: --theme(
+      --default-mono-font-family,
+      ui-monospace,
+      SFMono-Regular,
+      Menlo,
+      Monaco,
+      Consolas,
+      "Liberation Mono",
+      "Courier New",
+      monospace
+    ); /* 1 */
+    font-feature-settings: --theme(
+      --default-mono-font-feature-settings,
+      normal
+    ); /* 2 */
+    font-variation-settings: --theme(
+      --default-mono-font-variation-settings,
+      normal
+    ); /* 3 */
+    font-size: 1em; /* 4 */
+  }
+
+  /*
+  Add the correct font size in all browsers.
+*/
+
+  small {
+    font-size: 80%;
+  }
+
+  /*
+  Prevent \`sub\` and \`sup\` elements from affecting the line height in all browsers.
+*/
+
+  sub,
+  sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
+
+  sub {
+    bottom: -0.25em;
+  }
+
+  sup {
+    top: -0.5em;
+  }
+
+  /*
+  1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
+  2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
+  3. Remove gaps between table borders by default.
+*/
+
+  table {
+    text-indent: 0; /* 1 */
+    border-color: inherit; /* 2 */
+    border-collapse: collapse; /* 3 */
+  }
+
+  /*
+  Use the modern Firefox focus style for all focusable elements.
+*/
+
+  :-moz-focusring {
+    outline: auto;
+  }
+
+  /*
+  Add the correct vertical alignment in Chrome and Firefox.
+*/
+
+  progress {
+    vertical-align: baseline;
+  }
+
+  /*
+  Add the correct display in Chrome and Safari.
+*/
+
+  summary {
+    display: list-item;
+  }
+
+  /*
+  Make lists unstyled by default.
+*/
+
+  ol,
+  ul,
+  menu {
+    list-style: none;
+  }
+
+  /*
+  1. Make replaced elements \`display: block\` by default. (https://github.com/mozdevs/cssremedy/issues/14)
+  2. Add \`vertical - align: middle\` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
+      This can trigger a poorly considered lint error in some tools but is included by design.
+*/
+
+  img,
+  svg,
+  video,
+  canvas,
+  audio,
+  iframe,
+  embed,
+  object {
+    display: block; /* 1 */
+    vertical-align: middle; /* 2 */
+  }
+
+  /*
+  Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
+*/
+
+  img,
+  video {
+    max-width: 100%;
+    height: auto;
+  }
+
+  /*
+  1. Inherit font styles in all browsers.
+  2. Remove border radius in all browsers.
+  3. Remove background color in all browsers.
+  4. Ensure consistent opacity for disabled states in all browsers.
+*/
+
+  button,
+  input,
+  select,
+  optgroup,
+  textarea,
+  ::file-selector-button {
+    font: inherit; /* 1 */
+    font-feature-settings: inherit; /* 1 */
+    font-variation-settings: inherit; /* 1 */
+    letter-spacing: inherit; /* 1 */
+    color: inherit; /* 1 */
+    border-radius: 0; /* 2 */
+    background-color: transparent; /* 3 */
+    opacity: 1; /* 4 */
+  }
+
+  /*
+  Restore default font weight.
+*/
+
+  :where(select:is([multiple], [size])) optgroup {
+    font-weight: bolder;
+  }
+
+  /*
+  Restore indentation.
+*/
+
+  :where(select:is([multiple], [size])) optgroup option {
+    padding-inline-start: 20px;
+  }
+
+  /*
+  Restore space after button.
+*/
+
+  ::file-selector-button {
+    margin-inline-end: 4px;
+  }
+
+  /*
+  Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
+*/
+
+  ::placeholder {
+    opacity: 1;
+  }
+
+  /*
+  Set the default placeholder color to a semi-transparent version of the current text color in browsers that do not
+  crash when using \`color - mix(…)\` with \`currentcolor\`. (https://github.com/tailwindlabs/tailwindcss/issues/17194)
+*/
+
+  @supports (not (-webkit-appearance: -apple-pay-button)) /* Not Safari */ or
+    (contain-intrinsic-size: 1px) /* Safari 17+ */ {
+    ::placeholder {
+      color: color-mix(in oklab, currentcolor 50%, transparent);
+    }
+  }
+
+  /*
+  Prevent resizing textareas horizontally by default.
+*/
+
+  textarea {
+    resize: vertical;
+  }
+
+  /*
+  Remove the inner padding in Chrome and Safari on macOS.
+*/
+
+  ::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+
+  /*
+  1. Ensure date/time inputs have the same height when empty in iOS Safari.
+  2. Ensure text alignment can be changed on date/time inputs in iOS Safari.
+*/
+
+  ::-webkit-date-and-time-value {
+    min-height: 1lh; /* 1 */
+    text-align: inherit; /* 2 */
+  }
+
+  /*
+  Prevent height from changing on date/time inputs in macOS Safari when the input is set to \`display: block\`.
+*/
+
+  ::-webkit-datetime-edit {
+    display: inline-flex;
+  }
+
+  /*
+  Remove excess padding from pseudo-elements in date/time inputs to ensure consistent height across browsers.
+*/
+
+  ::-webkit-datetime-edit-fields-wrapper {
+    padding: 0;
+  }
+
+  ::-webkit-datetime-edit,
+  ::-webkit-datetime-edit-year-field,
+  ::-webkit-datetime-edit-month-field,
+  ::-webkit-datetime-edit-day-field,
+  ::-webkit-datetime-edit-hour-field,
+  ::-webkit-datetime-edit-minute-field,
+  ::-webkit-datetime-edit-second-field,
+  ::-webkit-datetime-edit-millisecond-field,
+  ::-webkit-datetime-edit-meridiem-field {
+    padding-block: 0;
+  }
+
+  /*
+  Center dropdown marker shown on inputs with paired \`<datalist>\`s in Chrome. (https://github.com/tailwindlabs/tailwindcss/issues/18499)
+*/
+
+  ::-webkit-calendar-picker-indicator {
+    line-height: 1;
+  }
+
+  /*
+  Remove the additional \`: invalid\` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
+*/
+
+  :-moz-ui-invalid {
+    box-shadow: none;
+  }
+
+  /*
+  Correct the inability to style the border radius in iOS Safari.
+*/
+
+  button,
+  input:where([type="button"], [type="reset"], [type="submit"]),
+  ::file-selector-button {
+    appearance: button;
+  }
+
+  /*
+  Correct the cursor style of increment and decrement buttons in Safari.
+*/
+
+  ::-webkit-inner-spin-button,
+  ::-webkit-outer-spin-button {
+    height: auto;
+  }
+
+  /*
+  Make elements with the HTML hidden attribute stay hidden by default.
+*/
+
+  [hidden]:where(:not([hidden="until-found"])) {
+    display: none !important;
+  }
+}
+
+@layer utilities {
+  @tailwind utilities;
+}
+`;
+var css_default = css$3;
+
+//#endregion
+//#region src/tailwind/css/preflight.ts
+const css$2 = `
+/*
+  1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
+  2. Remove default margins and padding
+  3. Reset all borders.
+*/
+
+*,
+::after,
+::before,
+::backdrop,
+::file-selector-button {
+  box-sizing: border-box; /* 1 */
+  margin: 0; /* 2 */
+  padding: 0; /* 2 */
+  border: 0 solid; /* 3 */
+}
+
+/*
+  1. Use a consistent sensible line-height in all browsers.
+  2. Prevent adjustments of font size after orientation changes in iOS.
+  3. Use a more readable tab size.
+  4. Use the user's configured \`sans\` font-family by default.
+  5. Use the user's configured \`sans\` font-feature-settings by default.
+  6. Use the user's configured \`sans\` font-variation-settings by default.
+  7. Disable tap highlights on iOS.
+*/
+
+html,
+:host {
+  line-height: 1.5; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+  tab-size: 4; /* 3 */
+  font-family: --theme(
+    --default-font-family,
+    ui-sans-serif,
+    system-ui,
+    sans-serif,
+    'Apple Color Emoji',
+    'Segoe UI Emoji',
+    'Segoe UI Symbol',
+    'Noto Color Emoji'
+  ); /* 4 */
+  font-feature-settings: --theme(--default-font-feature-settings, normal); /* 5 */
+  font-variation-settings: --theme(--default-font-variation-settings, normal); /* 6 */
+  -webkit-tap-highlight-color: transparent; /* 7 */
+}
+
+/*
+  1. Add the correct height in Firefox.
+  2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
+  3. Reset the default border style to a 1px solid border.
+*/
+
+hr {
+  height: 0; /* 1 */
+  color: inherit; /* 2 */
+  border-top-width: 1px; /* 3 */
+}
+
+/*
+  Add the correct text decoration in Chrome, Edge, and Safari.
+*/
+
+abbr:where([title]) {
+  -webkit-text-decoration: underline dotted;
+  text-decoration: underline dotted;
+}
+
+/*
+  Remove the default font size and weight for headings.
+*/
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+/*
+  Reset links to optimize for opt-in styling instead of opt-out.
+*/
+
+a {
+  color: inherit;
+  -webkit-text-decoration: inherit;
+  text-decoration: inherit;
+}
+
+/*
+  Add the correct font weight in Edge and Safari.
+*/
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/*
+  1. Use the user's configured \`mono\` font-family by default.
+  2. Use the user's configured \`mono\` font-feature-settings by default.
+  3. Use the user's configured \`mono\` font-variation-settings by default.
+  4. Correct the odd \`em\` font sizing in all browsers.
+*/
+
+code,
+kbd,
+samp,
+pre {
+  font-family: --theme(
+    --default-mono-font-family,
+    ui-monospace,
+    SFMono-Regular,
+    Menlo,
+    Monaco,
+    Consolas,
+    'Liberation Mono',
+    'Courier New',
+    monospace
+  ); /* 1 */
+  font-feature-settings: --theme(--default-mono-font-feature-settings, normal); /* 2 */
+  font-variation-settings: --theme(--default-mono-font-variation-settings, normal); /* 3 */
+  font-size: 1em; /* 4 */
+}
+
+/*
+  Add the correct font size in all browsers.
+*/
+
+small {
+  font-size: 80%;
+}
+
+/*
+  Prevent \`sub\` and \`sup\` elements from affecting the line height in all browsers.
+*/
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/*
+  1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
+  2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
+  3. Remove gaps between table borders by default.
+*/
+
+table {
+  text-indent: 0; /* 1 */
+  border-color: inherit; /* 2 */
+  border-collapse: collapse; /* 3 */
+}
+
+/*
+  Use the modern Firefox focus style for all focusable elements.
+*/
+
+:-moz-focusring {
+  outline: auto;
+}
+
+/*
+  Add the correct vertical alignment in Chrome and Firefox.
+*/
+
+progress {
+  vertical-align: baseline;
+}
+
+/*
+  Add the correct display in Chrome and Safari.
+*/
+
+summary {
+  display: list-item;
+}
+
+/*
+  Make lists unstyled by default.
+*/
+
+ol,
+ul,
+menu {
+  list-style: none;
+}
+
+/*
+  1. Make replaced elements \`display: block\` by default. (https://github.com/mozdevs/cssremedy/issues/14)
+  2. Add \`vertical-align: middle\` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
+      This can trigger a poorly considered lint error in some tools but is included by design.
+*/
+
+img,
+svg,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
+  display: block; /* 1 */
+  vertical-align: middle; /* 2 */
+}
+
+/*
+  Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
+*/
+
+img,
+video {
+  max-width: 100%;
+  height: auto;
+}
+
+/*
+  1. Inherit font styles in all browsers.
+  2. Remove border radius in all browsers.
+  3. Remove background color in all browsers.
+  4. Ensure consistent opacity for disabled states in all browsers.
+*/
+
+button,
+input,
+select,
+optgroup,
+textarea,
+::file-selector-button {
+  font: inherit; /* 1 */
+  font-feature-settings: inherit; /* 1 */
+  font-variation-settings: inherit; /* 1 */
+  letter-spacing: inherit; /* 1 */
+  color: inherit; /* 1 */
+  border-radius: 0; /* 2 */
+  background-color: transparent; /* 3 */
+  opacity: 1; /* 4 */
+}
+
+/*
+  Restore default font weight.
+*/
+
+:where(select:is([multiple], [size])) optgroup {
+  font-weight: bolder;
+}
+
+/*
+  Restore indentation.
+*/
+
+:where(select:is([multiple], [size])) optgroup option {
+  padding-inline-start: 20px;
+}
+
+/*
+  Restore space after button.
+*/
+
+::file-selector-button {
+  margin-inline-end: 4px;
+}
+
+/*
+  Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
+*/
+
+::placeholder {
+  opacity: 1;
+}
+
+/*
+  Set the default placeholder color to a semi-transparent version of the current text color in browsers that do not
+  crash when using \`color-mix(…)\` with \`currentcolor\`. (https://github.com/tailwindlabs/tailwindcss/issues/17194)
+*/
+
+@supports (not (-webkit-appearance: -apple-pay-button)) /* Not Safari */ or
+  (contain-intrinsic-size: 1px) /* Safari 17+ */ {
+  ::placeholder {
+    color: color-mix(in oklab, currentcolor 50%, transparent);
+  }
+}
+
+/*
+  Prevent resizing textareas horizontally by default.
+*/
+
+textarea {
+  resize: vertical;
+}
+
+/*
+  Remove the inner padding in Chrome and Safari on macOS.
+*/
+
+::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/*
+  1. Ensure date/time inputs have the same height when empty in iOS Safari.
+  2. Ensure text alignment can be changed on date/time inputs in iOS Safari.
+*/
+
+::-webkit-date-and-time-value {
+  min-height: 1lh; /* 1 */
+  text-align: inherit; /* 2 */
+}
+
+/*
+  Prevent height from changing on date/time inputs in macOS Safari when the input is set to \`display: block\`.
+*/
+
+::-webkit-datetime-edit {
+  display: inline-flex;
+}
+
+/*
+  Remove excess padding from pseudo-elements in date/time inputs to ensure consistent height across browsers.
+*/
+
+::-webkit-datetime-edit-fields-wrapper {
+  padding: 0;
+}
+
+::-webkit-datetime-edit,
+::-webkit-datetime-edit-year-field,
+::-webkit-datetime-edit-month-field,
+::-webkit-datetime-edit-day-field,
+::-webkit-datetime-edit-hour-field,
+::-webkit-datetime-edit-minute-field,
+::-webkit-datetime-edit-second-field,
+::-webkit-datetime-edit-millisecond-field,
+::-webkit-datetime-edit-meridiem-field {
+  padding-block: 0;
+}
+
+/*
+  Center dropdown marker shown on inputs with paired \`<datalist>\`s in Chrome. (https://github.com/tailwindlabs/tailwindcss/issues/18499)
+*/
+
+::-webkit-calendar-picker-indicator {
+  line-height: 1;
+}
+
+/*
+  Remove the additional \`:invalid\` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
+*/
+
+:-moz-ui-invalid {
+  box-shadow: none;
+}
+
+/*
+  Correct the inability to style the border radius in iOS Safari.
+*/
+
+button,
+input:where([type='button'], [type='reset'], [type='submit']),
+::file-selector-button {
+  appearance: button;
+}
+
+/*
+  Correct the cursor style of increment and decrement buttons in Safari.
+*/
+
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/*
+  Make elements with the HTML hidden attribute stay hidden by default.
+*/
+
+[hidden]:where(:not([hidden='until-found'])) {
+  display: none !important;
+}
+`;
+var preflight_default = css$2;
+
+//#endregion
+//#region src/tailwind/css/theme.ts
+const css$1 = `
+@theme default {
+  --font-sans:
+    ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+    'Noto Color Emoji';
+  --font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
+  --font-mono:
+    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
+    monospace;
+
+  --color-red-50: oklch(97.1% 0.013 17.38);
+  --color-red-100: oklch(93.6% 0.032 17.717);
+  --color-red-200: oklch(88.5% 0.062 18.334);
+  --color-red-300: oklch(80.8% 0.114 19.571);
+  --color-red-400: oklch(70.4% 0.191 22.216);
+  --color-red-500: oklch(63.7% 0.237 25.331);
+  --color-red-600: oklch(57.7% 0.245 27.325);
+  --color-red-700: oklch(50.5% 0.213 27.518);
+  --color-red-800: oklch(44.4% 0.177 26.899);
+  --color-red-900: oklch(39.6% 0.141 25.723);
+  --color-red-950: oklch(25.8% 0.092 26.042);
+
+  --color-orange-50: oklch(98% 0.016 73.684);
+  --color-orange-100: oklch(95.4% 0.038 75.164);
+  --color-orange-200: oklch(90.1% 0.076 70.697);
+  --color-orange-300: oklch(83.7% 0.128 66.29);
+  --color-orange-400: oklch(75% 0.183 55.934);
+  --color-orange-500: oklch(70.5% 0.213 47.604);
+  --color-orange-600: oklch(64.6% 0.222 41.116);
+  --color-orange-700: oklch(55.3% 0.195 38.402);
+  --color-orange-800: oklch(47% 0.157 37.304);
+  --color-orange-900: oklch(40.8% 0.123 38.172);
+  --color-orange-950: oklch(26.6% 0.079 36.259);
+
+  --color-amber-50: oklch(98.7% 0.022 95.277);
+  --color-amber-100: oklch(96.2% 0.059 95.617);
+  --color-amber-200: oklch(92.4% 0.12 95.746);
+  --color-amber-300: oklch(87.9% 0.169 91.605);
+  --color-amber-400: oklch(82.8% 0.189 84.429);
+  --color-amber-500: oklch(76.9% 0.188 70.08);
+  --color-amber-600: oklch(66.6% 0.179 58.318);
+  --color-amber-700: oklch(55.5% 0.163 48.998);
+  --color-amber-800: oklch(47.3% 0.137 46.201);
+  --color-amber-900: oklch(41.4% 0.112 45.904);
+  --color-amber-950: oklch(27.9% 0.077 45.635);
+
+  --color-yellow-50: oklch(98.7% 0.026 102.212);
+  --color-yellow-100: oklch(97.3% 0.071 103.193);
+  --color-yellow-200: oklch(94.5% 0.129 101.54);
+  --color-yellow-300: oklch(90.5% 0.182 98.111);
+  --color-yellow-400: oklch(85.2% 0.199 91.936);
+  --color-yellow-500: oklch(79.5% 0.184 86.047);
+  --color-yellow-600: oklch(68.1% 0.162 75.834);
+  --color-yellow-700: oklch(55.4% 0.135 66.442);
+  --color-yellow-800: oklch(47.6% 0.114 61.907);
+  --color-yellow-900: oklch(42.1% 0.095 57.708);
+  --color-yellow-950: oklch(28.6% 0.066 53.813);
+
+  --color-lime-50: oklch(98.6% 0.031 120.757);
+  --color-lime-100: oklch(96.7% 0.067 122.328);
+  --color-lime-200: oklch(93.8% 0.127 124.321);
+  --color-lime-300: oklch(89.7% 0.196 126.665);
+  --color-lime-400: oklch(84.1% 0.238 128.85);
+  --color-lime-500: oklch(76.8% 0.233 130.85);
+  --color-lime-600: oklch(64.8% 0.2 131.684);
+  --color-lime-700: oklch(53.2% 0.157 131.589);
+  --color-lime-800: oklch(45.3% 0.124 130.933);
+  --color-lime-900: oklch(40.5% 0.101 131.063);
+  --color-lime-950: oklch(27.4% 0.072 132.109);
+
+  --color-green-50: oklch(98.2% 0.018 155.826);
+  --color-green-100: oklch(96.2% 0.044 156.743);
+  --color-green-200: oklch(92.5% 0.084 155.995);
+  --color-green-300: oklch(87.1% 0.15 154.449);
+  --color-green-400: oklch(79.2% 0.209 151.711);
+  --color-green-500: oklch(72.3% 0.219 149.579);
+  --color-green-600: oklch(62.7% 0.194 149.214);
+  --color-green-700: oklch(52.7% 0.154 150.069);
+  --color-green-800: oklch(44.8% 0.119 151.328);
+  --color-green-900: oklch(39.3% 0.095 152.535);
+  --color-green-950: oklch(26.6% 0.065 152.934);
+
+  --color-emerald-50: oklch(97.9% 0.021 166.113);
+  --color-emerald-100: oklch(95% 0.052 163.051);
+  --color-emerald-200: oklch(90.5% 0.093 164.15);
+  --color-emerald-300: oklch(84.5% 0.143 164.978);
+  --color-emerald-400: oklch(76.5% 0.177 163.223);
+  --color-emerald-500: oklch(69.6% 0.17 162.48);
+  --color-emerald-600: oklch(59.6% 0.145 163.225);
+  --color-emerald-700: oklch(50.8% 0.118 165.612);
+  --color-emerald-800: oklch(43.2% 0.095 166.913);
+  --color-emerald-900: oklch(37.8% 0.077 168.94);
+  --color-emerald-950: oklch(26.2% 0.051 172.552);
+
+  --color-teal-50: oklch(98.4% 0.014 180.72);
+  --color-teal-100: oklch(95.3% 0.051 180.801);
+  --color-teal-200: oklch(91% 0.096 180.426);
+  --color-teal-300: oklch(85.5% 0.138 181.071);
+  --color-teal-400: oklch(77.7% 0.152 181.912);
+  --color-teal-500: oklch(70.4% 0.14 182.503);
+  --color-teal-600: oklch(60% 0.118 184.704);
+  --color-teal-700: oklch(51.1% 0.096 186.391);
+  --color-teal-800: oklch(43.7% 0.078 188.216);
+  --color-teal-900: oklch(38.6% 0.063 188.416);
+  --color-teal-950: oklch(27.7% 0.046 192.524);
+
+  --color-cyan-50: oklch(98.4% 0.019 200.873);
+  --color-cyan-100: oklch(95.6% 0.045 203.388);
+  --color-cyan-200: oklch(91.7% 0.08 205.041);
+  --color-cyan-300: oklch(86.5% 0.127 207.078);
+  --color-cyan-400: oklch(78.9% 0.154 211.53);
+  --color-cyan-500: oklch(71.5% 0.143 215.221);
+  --color-cyan-600: oklch(60.9% 0.126 221.723);
+  --color-cyan-700: oklch(52% 0.105 223.128);
+  --color-cyan-800: oklch(45% 0.085 224.283);
+  --color-cyan-900: oklch(39.8% 0.07 227.392);
+  --color-cyan-950: oklch(30.2% 0.056 229.695);
+
+  --color-sky-50: oklch(97.7% 0.013 236.62);
+  --color-sky-100: oklch(95.1% 0.026 236.824);
+  --color-sky-200: oklch(90.1% 0.058 230.902);
+  --color-sky-300: oklch(82.8% 0.111 230.318);
+  --color-sky-400: oklch(74.6% 0.16 232.661);
+  --color-sky-500: oklch(68.5% 0.169 237.323);
+  --color-sky-600: oklch(58.8% 0.158 241.966);
+  --color-sky-700: oklch(50% 0.134 242.749);
+  --color-sky-800: oklch(44.3% 0.11 240.79);
+  --color-sky-900: oklch(39.1% 0.09 240.876);
+  --color-sky-950: oklch(29.3% 0.066 243.157);
+
+  --color-blue-50: oklch(97% 0.014 254.604);
+  --color-blue-100: oklch(93.2% 0.032 255.585);
+  --color-blue-200: oklch(88.2% 0.059 254.128);
+  --color-blue-300: oklch(80.9% 0.105 251.813);
+  --color-blue-400: oklch(70.7% 0.165 254.624);
+  --color-blue-500: oklch(62.3% 0.214 259.815);
+  --color-blue-600: oklch(54.6% 0.245 262.881);
+  --color-blue-700: oklch(48.8% 0.243 264.376);
+  --color-blue-800: oklch(42.4% 0.199 265.638);
+  --color-blue-900: oklch(37.9% 0.146 265.522);
+  --color-blue-950: oklch(28.2% 0.091 267.935);
+
+  --color-indigo-50: oklch(96.2% 0.018 272.314);
+  --color-indigo-100: oklch(93% 0.034 272.788);
+  --color-indigo-200: oklch(87% 0.065 274.039);
+  --color-indigo-300: oklch(78.5% 0.115 274.713);
+  --color-indigo-400: oklch(67.3% 0.182 276.935);
+  --color-indigo-500: oklch(58.5% 0.233 277.117);
+  --color-indigo-600: oklch(51.1% 0.262 276.966);
+  --color-indigo-700: oklch(45.7% 0.24 277.023);
+  --color-indigo-800: oklch(39.8% 0.195 277.366);
+  --color-indigo-900: oklch(35.9% 0.144 278.697);
+  --color-indigo-950: oklch(25.7% 0.09 281.288);
+
+  --color-violet-50: oklch(96.9% 0.016 293.756);
+  --color-violet-100: oklch(94.3% 0.029 294.588);
+  --color-violet-200: oklch(89.4% 0.057 293.283);
+  --color-violet-300: oklch(81.1% 0.111 293.571);
+  --color-violet-400: oklch(70.2% 0.183 293.541);
+  --color-violet-500: oklch(60.6% 0.25 292.717);
+  --color-violet-600: oklch(54.1% 0.281 293.009);
+  --color-violet-700: oklch(49.1% 0.27 292.581);
+  --color-violet-800: oklch(43.2% 0.232 292.759);
+  --color-violet-900: oklch(38% 0.189 293.745);
+  --color-violet-950: oklch(28.3% 0.141 291.089);
+
+  --color-purple-50: oklch(97.7% 0.014 308.299);
+  --color-purple-100: oklch(94.6% 0.033 307.174);
+  --color-purple-200: oklch(90.2% 0.063 306.703);
+  --color-purple-300: oklch(82.7% 0.119 306.383);
+  --color-purple-400: oklch(71.4% 0.203 305.504);
+  --color-purple-500: oklch(62.7% 0.265 303.9);
+  --color-purple-600: oklch(55.8% 0.288 302.321);
+  --color-purple-700: oklch(49.6% 0.265 301.924);
+  --color-purple-800: oklch(43.8% 0.218 303.724);
+  --color-purple-900: oklch(38.1% 0.176 304.987);
+  --color-purple-950: oklch(29.1% 0.149 302.717);
+
+  --color-fuchsia-50: oklch(97.7% 0.017 320.058);
+  --color-fuchsia-100: oklch(95.2% 0.037 318.852);
+  --color-fuchsia-200: oklch(90.3% 0.076 319.62);
+  --color-fuchsia-300: oklch(83.3% 0.145 321.434);
+  --color-fuchsia-400: oklch(74% 0.238 322.16);
+  --color-fuchsia-500: oklch(66.7% 0.295 322.15);
+  --color-fuchsia-600: oklch(59.1% 0.293 322.896);
+  --color-fuchsia-700: oklch(51.8% 0.253 323.949);
+  --color-fuchsia-800: oklch(45.2% 0.211 324.591);
+  --color-fuchsia-900: oklch(40.1% 0.17 325.612);
+  --color-fuchsia-950: oklch(29.3% 0.136 325.661);
+
+  --color-pink-50: oklch(97.1% 0.014 343.198);
+  --color-pink-100: oklch(94.8% 0.028 342.258);
+  --color-pink-200: oklch(89.9% 0.061 343.231);
+  --color-pink-300: oklch(82.3% 0.12 346.018);
+  --color-pink-400: oklch(71.8% 0.202 349.761);
+  --color-pink-500: oklch(65.6% 0.241 354.308);
+  --color-pink-600: oklch(59.2% 0.249 0.584);
+  --color-pink-700: oklch(52.5% 0.223 3.958);
+  --color-pink-800: oklch(45.9% 0.187 3.815);
+  --color-pink-900: oklch(40.8% 0.153 2.432);
+  --color-pink-950: oklch(28.4% 0.109 3.907);
+
+  --color-rose-50: oklch(96.9% 0.015 12.422);
+  --color-rose-100: oklch(94.1% 0.03 12.58);
+  --color-rose-200: oklch(89.2% 0.058 10.001);
+  --color-rose-300: oklch(81% 0.117 11.638);
+  --color-rose-400: oklch(71.2% 0.194 13.428);
+  --color-rose-500: oklch(64.5% 0.246 16.439);
+  --color-rose-600: oklch(58.6% 0.253 17.585);
+  --color-rose-700: oklch(51.4% 0.222 16.935);
+  --color-rose-800: oklch(45.5% 0.188 13.697);
+  --color-rose-900: oklch(41% 0.159 10.272);
+  --color-rose-950: oklch(27.1% 0.105 12.094);
+
+  --color-slate-50: oklch(98.4% 0.003 247.858);
+  --color-slate-100: oklch(96.8% 0.007 247.896);
+  --color-slate-200: oklch(92.9% 0.013 255.508);
+  --color-slate-300: oklch(86.9% 0.022 252.894);
+  --color-slate-400: oklch(70.4% 0.04 256.788);
+  --color-slate-500: oklch(55.4% 0.046 257.417);
+  --color-slate-600: oklch(44.6% 0.043 257.281);
+  --color-slate-700: oklch(37.2% 0.044 257.287);
+  --color-slate-800: oklch(27.9% 0.041 260.031);
+  --color-slate-900: oklch(20.8% 0.042 265.755);
+  --color-slate-950: oklch(12.9% 0.042 264.695);
+
+  --color-gray-50: oklch(98.5% 0.002 247.839);
+  --color-gray-100: oklch(96.7% 0.003 264.542);
+  --color-gray-200: oklch(92.8% 0.006 264.531);
+  --color-gray-300: oklch(87.2% 0.01 258.338);
+  --color-gray-400: oklch(70.7% 0.022 261.325);
+  --color-gray-500: oklch(55.1% 0.027 264.364);
+  --color-gray-600: oklch(44.6% 0.03 256.802);
+  --color-gray-700: oklch(37.3% 0.034 259.733);
+  --color-gray-800: oklch(27.8% 0.033 256.848);
+  --color-gray-900: oklch(21% 0.034 264.665);
+  --color-gray-950: oklch(13% 0.028 261.692);
+
+  --color-zinc-50: oklch(98.5% 0 0);
+  --color-zinc-100: oklch(96.7% 0.001 286.375);
+  --color-zinc-200: oklch(92% 0.004 286.32);
+  --color-zinc-300: oklch(87.1% 0.006 286.286);
+  --color-zinc-400: oklch(70.5% 0.015 286.067);
+  --color-zinc-500: oklch(55.2% 0.016 285.938);
+  --color-zinc-600: oklch(44.2% 0.017 285.786);
+  --color-zinc-700: oklch(37% 0.013 285.805);
+  --color-zinc-800: oklch(27.4% 0.006 286.033);
+  --color-zinc-900: oklch(21% 0.006 285.885);
+  --color-zinc-950: oklch(14.1% 0.005 285.823);
+
+  --color-neutral-50: oklch(98.5% 0 0);
+  --color-neutral-100: oklch(97% 0 0);
+  --color-neutral-200: oklch(92.2% 0 0);
+  --color-neutral-300: oklch(87% 0 0);
+  --color-neutral-400: oklch(70.8% 0 0);
+  --color-neutral-500: oklch(55.6% 0 0);
+  --color-neutral-600: oklch(43.9% 0 0);
+  --color-neutral-700: oklch(37.1% 0 0);
+  --color-neutral-800: oklch(26.9% 0 0);
+  --color-neutral-900: oklch(20.5% 0 0);
+  --color-neutral-950: oklch(14.5% 0 0);
+
+  --color-stone-50: oklch(98.5% 0.001 106.423);
+  --color-stone-100: oklch(97% 0.001 106.424);
+  --color-stone-200: oklch(92.3% 0.003 48.717);
+  --color-stone-300: oklch(86.9% 0.005 56.366);
+  --color-stone-400: oklch(70.9% 0.01 56.259);
+  --color-stone-500: oklch(55.3% 0.013 58.071);
+  --color-stone-600: oklch(44.4% 0.011 73.639);
+  --color-stone-700: oklch(37.4% 0.01 67.558);
+  --color-stone-800: oklch(26.8% 0.007 34.298);
+  --color-stone-900: oklch(21.6% 0.006 56.043);
+  --color-stone-950: oklch(14.7% 0.004 49.25);
+
+  --color-black: #000;
+  --color-white: #fff;
+
+  --spacing: 0.25rem;
+
+  --breakpoint-sm: 40rem;
+  --breakpoint-md: 48rem;
+  --breakpoint-lg: 64rem;
+  --breakpoint-xl: 80rem;
+  --breakpoint-2xl: 96rem;
+
+  --container-3xs: 16rem;
+  --container-2xs: 18rem;
+  --container-xs: 20rem;
+  --container-sm: 24rem;
+  --container-md: 28rem;
+  --container-lg: 32rem;
+  --container-xl: 36rem;
+  --container-2xl: 42rem;
+  --container-3xl: 48rem;
+  --container-4xl: 56rem;
+  --container-5xl: 64rem;
+  --container-6xl: 72rem;
+  --container-7xl: 80rem;
+
+  --text-xs: 0.75rem;
+  --text-xs--line-height: calc(1 / 0.75);
+  --text-sm: 0.875rem;
+  --text-sm--line-height: calc(1.25 / 0.875);
+  --text-base: 1rem;
+  --text-base--line-height: calc(1.5 / 1);
+  --text-lg: 1.125rem;
+  --text-lg--line-height: calc(1.75 / 1.125);
+  --text-xl: 1.25rem;
+  --text-xl--line-height: calc(1.75 / 1.25);
+  --text-2xl: 1.5rem;
+  --text-2xl--line-height: calc(2 / 1.5);
+  --text-3xl: 1.875rem;
+  --text-3xl--line-height: calc(2.25 / 1.875);
+  --text-4xl: 2.25rem;
+  --text-4xl--line-height: calc(2.5 / 2.25);
+  --text-5xl: 3rem;
+  --text-5xl--line-height: 1;
+  --text-6xl: 3.75rem;
+  --text-6xl--line-height: 1;
+  --text-7xl: 4.5rem;
+  --text-7xl--line-height: 1;
+  --text-8xl: 6rem;
+  --text-8xl--line-height: 1;
+  --text-9xl: 8rem;
+  --text-9xl--line-height: 1;
+
+  --font-weight-thin: 100;
+  --font-weight-extralight: 200;
+  --font-weight-light: 300;
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  --font-weight-extrabold: 800;
+  --font-weight-black: 900;
+
+  --tracking-tighter: -0.05em;
+  --tracking-tight: -0.025em;
+  --tracking-normal: 0em;
+  --tracking-wide: 0.025em;
+  --tracking-wider: 0.05em;
+  --tracking-widest: 0.1em;
+
+  --leading-tight: 1.25;
+  --leading-snug: 1.375;
+  --leading-normal: 1.5;
+  --leading-relaxed: 1.625;
+  --leading-loose: 2;
+
+  --radius-xs: 0.125rem;
+  --radius-sm: 0.25rem;
+  --radius-md: 0.375rem;
+  --radius-lg: 0.5rem;
+  --radius-xl: 0.75rem;
+  --radius-2xl: 1rem;
+  --radius-3xl: 1.5rem;
+  --radius-4xl: 2rem;
+
+  --shadow-2xs: 0 1px rgb(0 0 0 / 0.05);
+  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+
+  --inset-shadow-2xs: inset 0 1px rgb(0 0 0 / 0.05);
+  --inset-shadow-xs: inset 0 1px 1px rgb(0 0 0 / 0.05);
+  --inset-shadow-sm: inset 0 2px 4px rgb(0 0 0 / 0.05);
+
+  --drop-shadow-xs: 0 1px 1px rgb(0 0 0 / 0.05);
+  --drop-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.15);
+  --drop-shadow-md: 0 3px 3px rgb(0 0 0 / 0.12);
+  --drop-shadow-lg: 0 4px 4px rgb(0 0 0 / 0.15);
+  --drop-shadow-xl: 0 9px 7px rgb(0 0 0 / 0.1);
+  --drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / 0.15);
+
+  --text-shadow-2xs: 0px 1px 0px rgb(0 0 0 / 0.15);
+  --text-shadow-xs: 0px 1px 1px rgb(0 0 0 / 0.2);
+  --text-shadow-sm:
+    0px 1px 0px rgb(0 0 0 / 0.075), 0px 1px 1px rgb(0 0 0 / 0.075), 0px 2px 2px rgb(0 0 0 / 0.075);
+  --text-shadow-md:
+    0px 1px 1px rgb(0 0 0 / 0.1), 0px 1px 2px rgb(0 0 0 / 0.1), 0px 2px 4px rgb(0 0 0 / 0.1);
+  --text-shadow-lg:
+    0px 1px 2px rgb(0 0 0 / 0.1), 0px 3px 2px rgb(0 0 0 / 0.1), 0px 4px 8px rgb(0 0 0 / 0.1);
+
+  --ease-in: cubic-bezier(0.4, 0, 1, 1);
+  --ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+
+  --animate-spin: spin 1s linear infinite;
+  --animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
+  --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  --animate-bounce: bounce 1s infinite;
+
+  @keyframes spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  @keyframes ping {
+    75%,
+    100% {
+      transform: scale(2);
+      opacity: 0;
+    }
+  }
+
+  @keyframes pulse {
+    50% {
+      opacity: 0.5;
+    }
+  }
+
+  @keyframes bounce {
+    0%,
+    100% {
+      transform: translateY(-25%);
+      animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
+    }
+
+    50% {
+      transform: none;
+      animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+    }
+  }
+
+  --blur-xs: 4px;
+  --blur-sm: 8px;
+  --blur-md: 12px;
+  --blur-lg: 16px;
+  --blur-xl: 24px;
+  --blur-2xl: 40px;
+  --blur-3xl: 64px;
+
+  --perspective-dramatic: 100px;
+  --perspective-near: 300px;
+  --perspective-normal: 500px;
+  --perspective-midrange: 800px;
+  --perspective-distant: 1200px;
+
+  --aspect-video: 16 / 9;
+
+  --default-transition-duration: 150ms;
+  --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  --default-font-family: --theme(--font-sans, initial);
+  --default-font-feature-settings: --theme(--font-sans--font-feature-settings, initial);
+  --default-font-variation-settings: --theme(--font-sans--font-variation-settings, initial);
+  --default-mono-font-family: --theme(--font-mono, initial);
+  --default-mono-font-feature-settings: --theme(--font-mono--font-feature-settings, initial);
+  --default-mono-font-variation-settings: --theme(--font-mono--font-variation-settings, initial);
+}
+
+/* Deprecated */
+@theme default inline reference {
+  --blur: 8px;
+  --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
+  --drop-shadow: 0 1px 2px rgb(0 0 0 / 0.1), 0 1px 1px rgb(0 0 0 / 0.06);
+  --radius: 0.25rem;
+  --max-width-prose: 65ch;
+}
+`;
+var theme_default = css$1;
+
+//#endregion
+//#region src/tailwind/css/utilities.ts
+const css = `
+@tailwind utilities;
+`;
+var utilities_default = css;
+
+//#endregion
+//#region src/tailwind/setup-tailwind.ts
+async function setupTailwind(config) {
+	const baseCss = `
+@layer theme, base, components, utilities;
+@import "tailwindcss/theme.css" layer(theme);
+@import "tailwindcss/utilities.css" layer(utilities);
+@config;
+`;
+	const compiler = await (0, tailwindcss.compile)(baseCss, {
+		async loadModule(id, base, resourceHint) {
+			if (resourceHint === "config") return {
+				path: id,
+				base,
+				module: config
+			};
+			throw new Error(`NO-OP: should we implement support for ${resourceHint}?`);
+		},
+		polyfills: 0,
+		async loadStylesheet(id, base) {
+			if (id === "tailwindcss") return {
+				base,
+				path: "tailwindcss/index.css",
+				content: css_default
+			};
+			if (id === "tailwindcss/preflight.css") return {
+				base,
+				path: id,
+				content: preflight_default
+			};
+			if (id === "tailwindcss/theme.css") return {
+				base,
+				path: id,
+				content: theme_default
+			};
+			if (id === "tailwindcss/utilities.css") return {
+				base,
+				path: id,
+				content: utilities_default
+			};
+			throw new Error("stylesheet not supported, you can only import the ones from tailwindcss");
+		}
+	});
+	let css$4 = baseCss;
+	return {
+		addUtilities: function addUtilities(candidates) {
+			css$4 = compiler.build(candidates);
+		},
+		getStyleSheet: function getCss() {
+			return (0, css_tree.parse)(css$4);
+		}
+	};
+}
+
+//#endregion
+//#region src/tailwind/tailwind.tsx
+const pixelBasedPreset = { theme: { extend: {
+	fontSize: {
+		xs: ["12px", { lineHeight: "16px" }],
+		sm: ["14px", { lineHeight: "20px" }],
+		base: ["16px", { lineHeight: "24px" }],
+		lg: ["18px", { lineHeight: "28px" }],
+		xl: ["20px", { lineHeight: "28px" }],
+		"2xl": ["24px", { lineHeight: "32px" }],
+		"3xl": ["30px", { lineHeight: "36px" }],
+		"4xl": ["36px", { lineHeight: "36px" }],
+		"5xl": ["48px", { lineHeight: "1" }],
+		"6xl": ["60px", { lineHeight: "1" }],
+		"7xl": ["72px", { lineHeight: "1" }],
+		"8xl": ["96px", { lineHeight: "1" }],
+		"9xl": ["144px", { lineHeight: "1" }]
+	},
+	spacing: {
+		px: "1px",
+		0: "0",
+		.5: "2px",
+		1: "4px",
+		1.5: "6px",
+		2: "8px",
+		2.5: "10px",
+		3: "12px",
+		3.5: "14px",
+		4: "16px",
+		5: "20px",
+		6: "24px",
+		7: "28px",
+		8: "32px",
+		9: "36px",
+		10: "40px",
+		11: "44px",
+		12: "48px",
+		14: "56px",
+		16: "64px",
+		20: "80px",
+		24: "96px",
+		28: "112px",
+		32: "128px",
+		36: "144px",
+		40: "160px",
+		44: "176px",
+		48: "192px",
+		52: "208px",
+		56: "224px",
+		60: "240px",
+		64: "256px",
+		72: "288px",
+		80: "320px",
+		96: "384px"
+	}
+} } };
+function Tailwind({ children, config }) {
+	const tailwindSetup = useSuspensedPromise(() => setupTailwind(config ?? {}), JSON.stringify(config, (_key, value) => typeof value === "function" ? value.toString() : value));
+	let classesUsed = [];
+	let mappedChildren = mapReactTree(children, (node) => {
+		if (react.isValidElement(node)) {
+			if (node.props.className) {
+				const classes = node.props.className?.split(/\s+/);
+				classesUsed = [...classesUsed, ...classes];
+				tailwindSetup.addUtilities(classes);
+			}
+		}
+		return node;
+	});
+	const styleSheet = tailwindSetup.getStyleSheet();
+	sanitizeStyleSheet(styleSheet);
+	const { inlinable: inlinableRules, nonInlinable: nonInlinableRules } = extractRulesPerClass(styleSheet, classesUsed);
+	const customProperties = getCustomProperties(styleSheet);
+	const nonInlineStyles = {
+		type: "StyleSheet",
+		children: new css_tree.List().fromArray(Array.from(nonInlinableRules.values()))
+	};
+	sanitizeNonInlinableRules(nonInlineStyles);
+	const hasNonInlineStylesToApply = nonInlinableRules.size > 0;
+	let appliedNonInlineStyles = false;
+	mappedChildren = mapReactTree(mappedChildren, (node) => {
+		if (react.isValidElement(node)) {
+			const elementWithInlinedStyles = cloneElementWithInlinedStyles(node, inlinableRules, nonInlinableRules, customProperties);
+			if (elementWithInlinedStyles.type === "head") {
+				appliedNonInlineStyles = true;
+				const styleElement = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("style", { dangerouslySetInnerHTML: { __html: (0, css_tree.generate)(nonInlineStyles) } });
+				return react.cloneElement(elementWithInlinedStyles, elementWithInlinedStyles.props, styleElement, elementWithInlinedStyles.props.children);
+			}
+			return elementWithInlinedStyles;
+		}
+		return node;
+	});
+	if (hasNonInlineStylesToApply && !appliedNonInlineStyles) throw new Error(`You are trying to use the following Tailwind classes that cannot be inlined: ${Array.from(nonInlinableRules.keys()).join(" ")}.
+For the media queries to work properly on rendering, they need to be added into a <style> tag inside of a <head> tag.
+The Tailwind component tried finding a <head> element but was unable to find it.
+
+Make sure that you have a <head> element at some point inside of the <Tailwind> component at any depth. 
+This can also be unmail's <Head> component.`);
+	return mappedChildren;
+}
+
+//#endregion
+exports.Body = Body;
+exports.Button = Button;
+exports.Column = Column;
+exports.Container = Container;
+exports.Font = Font;
+exports.Head = Head;
+exports.Heading = Heading;
+exports.Hr = Hr;
+exports.Html = Html;
+exports.Img = Img;
+exports.Link = Link;
+exports.Markdown = Markdown;
+exports.Preview = Preview;
+exports.Row = Row;
+exports.Section = Section;
+exports.Tailwind = Tailwind;
+exports.Text = Text;
+exports.pixelBasedPreset = pixelBasedPreset;
+exports.render = render;