@samva/markup 0.13.1 → 0.15.0

package/dist/components-DycSEKva.js

@@ -1,273 +0,0 @@
-import { i as escapeText, r as escapeAttribute } from "./html-eOZfDwVf.js";
-import { a as jsx, c as rawMarkup, l as reportEmailDiagnostic, n as Fragment, s as normalizeChildren, t as EmailNode } from "./jsx-runtime-CBlexoeR.js";
-//#region src/email/components.ts
-/** Marks the hidden preview block so the renderer can read it back and the text lane can keep it. */
-const PREHEADER_ATTRIBUTE = "data-samva-preheader";
-const PREHEADER_PADDING_ATTRIBUTE = "data-samva-preheader-padding";
-const PREHEADER_TARGET_LENGTH = 200;
-const PREHEADER_PADDING = "\xA0‌​‍‎‏";
-const presentation = (table, row, rowProps = {}) => jsx("table", {
-	role: "presentation",
-	border: 0,
-	cellpadding: 0,
-	cellspacing: 0,
-	...table,
-	children: jsx("tbody", { children: jsx("tr", {
-		...rowProps,
-		children: row
-	}) })
-});
-/** The hidden inbox preview block. Padding characters stop the client borrowing body copy. */
-const preheaderNode = (text) => jsx("div", {
-	[PREHEADER_ATTRIBUTE]: text,
-	style: {
-		display: "none",
-		overflow: "hidden",
-		lineHeight: "1px",
-		opacity: 0,
-		maxHeight: 0,
-		maxWidth: 0
-	},
-	children: [text, text.length >= PREHEADER_TARGET_LENGTH ? null : jsx("div", {
-		[PREHEADER_PADDING_ATTRIBUTE]: true,
-		children: PREHEADER_PADDING.repeat(Math.ceil((PREHEADER_TARGET_LENGTH - text.length) / 7))
-	})]
-});
-/** Document shell: the head every target client needs, plus the body content cell. */
-const Email = ({ className, lang = "en", dir = "ltr", title, backgroundColor, style, children }) => jsx("html", {
-	lang,
-	dir,
-	xmlns: "http://www.w3.org/1999/xhtml",
-	"xmlns:o": "urn:schemas-microsoft-com:office:office",
-	children: [jsx("head", { children: [
-		jsx("meta", { charset: "utf-8" }),
-		jsx("meta", {
-			"http-equiv": "Content-Type",
-			content: "text/html; charset=UTF-8"
-		}),
-		jsx("meta", {
-			name: "viewport",
-			content: "width=device-width, initial-scale=1"
-		}),
-		jsx("meta", { name: "x-apple-disable-message-reformatting" }),
-		jsx("meta", {
-			name: "color-scheme",
-			content: "light dark"
-		}),
-		jsx("meta", {
-			name: "supported-color-schemes",
-			content: "light dark"
-		}),
-		title === void 0 ? null : jsx("title", { children: title }),
-		rawMarkup("<!--[if mso]><xml><o:OfficeDocumentSettings><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml><![endif]-->")
-	] }), jsx("body", {
-		style: {
-			margin: 0,
-			padding: 0,
-			...backgroundColor === void 0 ? {} : { backgroundColor }
-		},
-		children: [presentation({
-			align: "center",
-			width: "100%",
-			...backgroundColor === void 0 ? {} : { bgcolor: backgroundColor }
-		}, jsx("td", {
-			className,
-			...style === void 0 ? {} : { style },
-			children
-		}))]
-	})]
-});
-/** A full-width band of content, as the single-cell table every client agrees on. */
-const Section = ({ className, align = "center", width = "100%", bgcolor, style, tableStyle, children }) => presentation({
-	align,
-	width,
-	...bgcolor === void 0 ? {} : { bgcolor },
-	...tableStyle === void 0 ? {} : { style: tableStyle }
-}, jsx("td", {
-	className,
-	...style === void 0 ? {} : { style },
-	children
-}));
-/** The equal share of a row that each of `count` cells takes, whole percent rounded down. */
-const equalColumnWidth = (count) => `${Math.floor(100 / count)}%`;
-/** Give a `Column` that states no width its equal share, keeping the primitive's attribute order. */
-const withColumnWidth = (node, width) => {
-	if (node.type === "Fragment") return EmailNode.Fragment({ children: node.children.map((child) => withColumnWidth(child, width)) });
-	if (node.type !== "Element" || node.tag !== "td" || node.props.width !== void 0) return node;
-	const props = {};
-	for (const [key, value] of Object.entries(node.props)) {
-		if (key === "style") props.width = width;
-		props[key] = value;
-	}
-	if (props.width === void 0) props.width = width;
-	return EmailNode.Element({
-		...node,
-		props
-	});
-};
-/**
-* A row of side-by-side `Column`s. No flex or grid conversion happens here. With `each` it repeats
-* its cells over a list, `per` to a row, and splits the row equally between cells that state no
-* width.
-*/
-const Columns = ({ className, align = "center", width = "100%", style, each, per, children }) => {
-	const table = {
-		className,
-		align,
-		width,
-		...style === void 0 ? {} : { style }
-	};
-	if (each === void 0 || typeof children !== "function") return presentation(table, children, { style: { width: "100%" } });
-	if (per !== void 0 && (!Number.isInteger(per) || per < 1)) reportEmailDiagnostic({
-		code: "invalid-columns-per",
-		severity: "error",
-		message: "<Columns per> must be a positive integer."
-	});
-	const size = per !== void 0 && Number.isInteger(per) && per >= 1 ? per : void 0;
-	const chunks = [];
-	if (size === void 0) chunks.push(each);
-	else for (let at = 0; at < each.length; at += size) chunks.push(each.slice(at, at + size));
-	const share = equalColumnWidth(size ?? Math.max(each.length, 1));
-	return jsx(Fragment, { children: chunks.map((chunk) => presentation(table, chunk.flatMap((item, index) => normalizeChildren(children(item, index)).map((cell) => withColumnWidth(cell, share))), { style: { width: "100%" } })) });
-};
-/** One cell of a `Columns` row. */
-const Column = ({ className, align, valign, width, style, children }) => jsx("td", {
-	className,
-	...align === void 0 ? {} : { align },
-	...valign === void 0 ? {} : { valign },
-	...width === void 0 ? {} : { width },
-	...style === void 0 ? {} : { style },
-	children
-});
-const DEFAULT_BUTTON_FONT = "Helvetica, Arial, sans-serif";
-/** Average advance of a bold sans-serif glyph, as a fraction of the font size. */
-const BOLD_GLYPH_ADVANCE = .6;
-const invalidButtonNumber = (name) => reportEmailDiagnostic({
-	code: "invalid-button-number",
-	severity: "error",
-	message: `<Button ${name}> must be a finite number.`
-});
-const buttonNumber = (name, value, fallback) => {
-	if (typeof value === "number" && Number.isFinite(value)) return value;
-	invalidButtonNumber(name);
-	return fallback;
-};
-const optionalButtonNumber = (name, value) => {
-	if (value === void 0) return void 0;
-	if (typeof value === "number" && Number.isFinite(value)) return value;
-	invalidButtonNumber(name);
-};
-const optionalPositiveButtonNumber = (name, value) => {
-	if (value === void 0) return void 0;
-	if (typeof value === "number" && Number.isFinite(value) && value > 0) return value;
-	reportEmailDiagnostic({
-		code: "invalid-button-number",
-		severity: "error",
-		message: `<Button ${name}> must be a positive finite number.`
-	});
-};
-/** A link styled as a button, with a VML fallback so classic Outlook draws the shape. */
-const Button = ({ className, href, width, height, paddingX = 16, backgroundColor = "#000000", color = "#ffffff", borderRadius = 0, borderColor, borderWidth = 0, fontSize = 16, fontFamily = DEFAULT_BUTTON_FONT, align = "left", style, children }) => {
-	const safeWidth = optionalButtonNumber("width", width);
-	const safeHeight = optionalPositiveButtonNumber("height", height);
-	const safePaddingX = buttonNumber("paddingX", paddingX, 16);
-	const safeBorderRadius = buttonNumber("borderRadius", borderRadius, 0);
-	const safeBorderWidth = buttonNumber("borderWidth", borderWidth, 0);
-	const safeFontSize = buttonNumber("fontSize", fontSize, 16);
-	const label = typeof children === "string" ? children : void 0;
-	const fallback = safeHeight !== void 0 && label !== void 0;
-	if (!fallback) reportEmailDiagnostic({
-		code: "button-outlook-fallback",
-		severity: "warning",
-		message: "<Button> draws its classic Outlook shape from VML, which needs a height and a plain string label. Without both, classic Windows Outlook shows an unstyled link.",
-		clients: ["outlook-windows"]
-	});
-	const arcsize = safeHeight === void 0 ? 0 : Math.round(safeBorderRadius / safeHeight * 100);
-	const fallbackWidth = safeWidth ?? Math.ceil((label?.length ?? 0) * safeFontSize * BOLD_GLYPH_ADVANCE) + 2 * safePaddingX;
-	return presentation({
-		width: "100%",
-		style: { borderCollapse: "collapse" }
-	}, jsx("td", {
-		align,
-		children: [fallback ? rawMarkup(`<!--[if mso]><v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="${escapeAttribute(href)}" style="height:${safeHeight}px;v-text-anchor:middle;width:${fallbackWidth}px;" arcsize="${arcsize}%" ${borderColor === void 0 ? "stroke=\"false\"" : `strokecolor="${escapeAttribute(borderColor)}" strokeweight="${safeBorderWidth}px"`} fillcolor="${escapeAttribute(backgroundColor)}"><w:anchorlock/><center style="color:${escapeAttribute(color)};font-family:${escapeAttribute(fontFamily)};font-size:${safeFontSize}px;font-weight:bold;">${escapeText(label)}</center></v:roundrect><![endif]-->`) : null, jsx("a", {
-			className,
-			href,
-			target: "_blank",
-			rel: "noopener noreferrer",
-			style: {
-				backgroundColor,
-				color,
-				borderRadius: `${safeBorderRadius}px`,
-				display: "inline-block",
-				fontFamily,
-				fontSize: `${safeFontSize}px`,
-				fontWeight: "bold",
-				lineHeight: safeHeight === void 0 ? "120%" : `${safeHeight - 2 * safeBorderWidth}px`,
-				textAlign: "center",
-				textDecoration: "none",
-				...safeWidth === void 0 ? { padding: `0 ${safePaddingX}px` } : {
-					width: `${safeWidth}px`,
-					maxWidth: "100%"
-				},
-				...borderColor === void 0 ? {} : { border: `${safeBorderWidth}px solid ${borderColor}` },
-				...fallback ? { msoHide: "all" } : {},
-				...style
-			},
-			children
-		})]
-	}));
-};
-/** Vertical space that survives clients which collapse margins. */
-const Spacer = ({ height }) => presentation({ width: "100%" }, jsx("td", {
-	height,
-	style: {
-		height: `${height}px`,
-		lineHeight: `${height}px`,
-		fontSize: "1px"
-	},
-	children: "​"
-}));
-/** A horizontal rule drawn as a cell border, which every target client renders. */
-const Divider = ({ className, color = "#e5e7eb", thickness = 1, style }) => presentation({ width: "100%" }, jsx("td", {
-	className,
-	style: {
-		borderTop: `${thickness}px solid ${color}`,
-		fontSize: "1px",
-		lineHeight: "1px",
-		...style
-	},
-	children: "​"
-}));
-/** An image with the width/height attributes Outlook sizes from before CSS applies. */
-const Image = ({ className, src, alt, width, height, align, style }) => jsx("img", {
-	className,
-	src,
-	alt,
-	border: 0,
-	...width === void 0 ? {} : { width },
-	...height === void 0 ? {} : { height },
-	...align === void 0 ? {} : { align },
-	style: {
-		display: "block",
-		outline: "none",
-		border: "none",
-		textDecoration: "none",
-		maxWidth: "100%",
-		...style
-	}
-});
-/** A text link that opens outside the client and cannot reach back at the opener. */
-const Link = ({ className, href, target = "_blank", rel = "noopener noreferrer", style, children }) => jsx("a", {
-	className,
-	href,
-	target,
-	rel,
-	style: {
-		color: "#067df7",
-		textDecoration: "none",
-		...style
-	},
-	children
-});
-//#endregion
-export { Email as a, PREHEADER_ATTRIBUTE as c, equalColumnWidth as d, preheaderNode as f, Divider as i, Section as l, Column as n, Image as o, Columns as r, Link as s, Button as t, Spacer as u };