fix: reduce default list item row gap

packages/pdf/src/templates/azurill/AzurillPage.tsx

@@ -208,8 +208,9 @@ const useAzurillTemplate = (): AzurillTemplate => {
 				textAlign: r.listMarkerTextAlign,
 			},
 			richListItemContent: {
-				flex: 1,
 				...bodyText,
+				flex: 1,
+				lineHeight: metadata.typography.body.lineHeight * 0.5,
 			},
 			splitRow: {
 				flexDirection: r.row,

packages/pdf/src/templates/bronzor/BronzorPage.tsx

@@ -204,8 +204,9 @@ const useBronzorTemplate = (): BronzorTemplate => {
 				textAlign: r.listMarkerTextAlign,
 			},
 			richListItemContent: {
-				flex: 1,
 				...bodyText,
+				flex: 1,
+				lineHeight: metadata.typography.body.lineHeight * 0.5,
 			},
 			splitRow: {
 				flexDirection: r.row,

packages/pdf/src/templates/chikorita/ChikoritaPage.tsx

@@ -218,8 +218,9 @@ const useChikoritaTemplate = (): ChikoritaTemplate => {
 				textAlign: r.listMarkerTextAlign,
 			},
 			richListItemContent: {
-				flex: 1,
 				...bodyText,
+				flex: 1,
+				lineHeight: metadata.typography.body.lineHeight * 0.5,
 			},
 			splitRow: {
 				flexDirection: r.row,

packages/pdf/src/templates/ditgar/DitgarPage.tsx

@@ -212,15 +212,44 @@ const useDitgarTemplate = (): DitgarTemplate => {
 				color: foreground,
 				...r.text,
 			},
-			div: { rowGap: metrics.gapY(0.125), columnGap: metrics.gapX(1 / 3) },
-			inline: { flexDirection: r.row, alignItems: "center", columnGap: metrics.gapX(1 / 3) },
-			link: { textDecoration: "none", color: foreground },
-			small: { fontSize: metadata.typography.body.fontSize * 0.875 },
-			bold: { fontWeight: metadata.typography.body.fontWeights.at(-1) ?? "600" },
-			richParagraph: { margin: 0, ...bodyText },
-			richListItemRow: { flexDirection: "row", columnGap: metrics.gapX(1 / 3), alignItems: "flex-start" },
-			richListItemMarker: { ...bodyText, width: metadata.typography.body.fontSize, textAlign: r.listMarkerTextAlign },
-			richListItemContent: { flex: 1, ...bodyText },
+			div: {
+				rowGap: metrics.gapY(0.125),
+				columnGap: metrics.gapX(1 / 3),
+			},
+			inline: {
+				flexDirection: r.row,
+				alignItems: "center",
+				columnGap: metrics.gapX(1 / 3),
+			},
+			link: {
+				textDecoration: "none",
+				color: foreground,
+			},
+			small: {
+				fontSize: metadata.typography.body.fontSize * 0.875,
+			},
+			bold: {
+				fontWeight: metadata.typography.body.fontWeights.at(-1) ?? "600",
+			},
+			richParagraph: {
+				margin: 0,
+				...bodyText,
+			},
+			richListItemRow: {
+				flexDirection: "row",
+				columnGap: metrics.gapX(1 / 3),
+				alignItems: "flex-start",
+			},
+			richListItemMarker: {
+				...bodyText,
+				width: metadata.typography.body.fontSize,
+				textAlign: r.listMarkerTextAlign,
+			},
+			richListItemContent: {
+				...bodyText,
+				flex: 1,
+				lineHeight: metadata.typography.body.lineHeight * 0.5,
+			},
 			splitRow: {
 				flexDirection: r.row,
 				flexWrap: "wrap",
@@ -228,8 +257,13 @@ const useDitgarTemplate = (): DitgarTemplate => {
 				justifyContent: "space-between",
 				columnGap: metrics.gapX(2 / 3),
 			},
-			alignEnd: { ...r.alignEnd },
-			section: { flexDirection: "column", rowGap: metrics.gapY(0.25) },
+			alignEnd: {
+				...r.alignEnd,
+			},
+			section: {
+				flexDirection: "column",
+				rowGap: metrics.gapY(0.25),
+			},
 			sectionHeading: {
 				fontSize: metadata.typography.heading.fontSize * 0.9,
 				color: primary,
@@ -237,10 +271,18 @@ const useDitgarTemplate = (): DitgarTemplate => {
 				borderBottomColor: primary,
 				paddingBottom: metrics.gapY(0.125),
 			},
-			item: { rowGap: metrics.gapY(0.125) },
-			levelContainer: { width: "70%" },
-			levelItem: { borderColor: primary },
-			levelItemActive: { backgroundColor: primary },
+			item: {
+				rowGap: metrics.gapY(0.125),
+			},
+			levelContainer: {
+				width: "70%",
+			},
+			levelItem: {
+				borderColor: primary,
+			},
+			levelItemActive: {
+				backgroundColor: primary,
+			},
 			sidebarColumn: {
 				flexShrink: 0,
 				backgroundColor: primaryTint,
@@ -250,7 +292,9 @@ const useDitgarTemplate = (): DitgarTemplate => {
 				paddingTop: metrics.page.paddingVertical,
 				paddingBottom: metrics.page.paddingVertical,
 			},
-			mainColumn: { flex: 1 },
+			mainColumn: {
+				flex: 1,
+			},
 			mainContent: {
 				paddingHorizontal: metrics.page.paddingHorizontal,
 				paddingTop: metrics.page.paddingVertical,
@@ -290,8 +334,12 @@ const useDitgarTemplate = (): DitgarTemplate => {
 				lineHeight: headerNameLineHeight,
 				color: background,
 			},
-			headerText: { color: background },
-			contactList: { rowGap: metrics.gapY(0.125) },
+			headerText: {
+				color: background,
+			},
+			contactList: {
+				rowGap: metrics.gapY(0.125),
+			},
 			contactItem: {
 				flexDirection: r.row,
 				alignItems: "center",

packages/pdf/src/templates/ditto/DittoPage.tsx

@@ -214,8 +214,9 @@ const useDittoTemplate = (): DittoTemplate => {
 				textAlign: r.listMarkerTextAlign,
 			},
 			richListItemContent: {
-				flex: 1,
 				...bodyText,
+				flex: 1,
+				lineHeight: metadata.typography.body.lineHeight * 0.5,
 			},
 			splitRow: {
 				flexDirection: r.row,

packages/pdf/src/templates/gengar/GengarPage.tsx

@@ -243,8 +243,9 @@ const useGengarTemplate = (): GengarTemplate => {
 				textAlign: r.listMarkerTextAlign,
 			},
 			richListItemContent: {
-				flex: 1,
 				...bodyText,
+				flex: 1,
+				lineHeight: metadata.typography.body.lineHeight * 0.5,
 			},
 			splitRow: {
 				flexDirection: r.row,

packages/pdf/src/templates/glalie/GlaliePage.tsx

@@ -189,15 +189,44 @@ const useGlalieTemplate = (): GlalieTemplate => {
 				color: foreground,
 				...r.text,
 			},
-			div: { rowGap: metrics.gapY(0.125), columnGap: metrics.gapX(1 / 3) },
-			inline: { flexDirection: r.row, alignItems: "center", columnGap: metrics.gapX(1 / 3) },
-			link: { textDecoration: "none", color: foreground },
-			small: { fontSize: metadata.typography.body.fontSize * 0.875 },
-			bold: { fontWeight: metadata.typography.body.fontWeights.at(-1) ?? "600" },
-			richParagraph: { margin: 0, ...bodyText },
-			richListItemRow: { flexDirection: "row", columnGap: metrics.gapX(1 / 3), alignItems: "flex-start" },
-			richListItemMarker: { ...bodyText, width: metadata.typography.body.fontSize, textAlign: r.listMarkerTextAlign },
-			richListItemContent: { flex: 1, ...bodyText },
+			div: {
+				rowGap: metrics.gapY(0.125),
+				columnGap: metrics.gapX(1 / 3),
+			},
+			inline: {
+				flexDirection: r.row,
+				alignItems: "center",
+				columnGap: metrics.gapX(1 / 3),
+			},
+			link: {
+				textDecoration: "none",
+				color: foreground,
+			},
+			small: {
+				fontSize: metadata.typography.body.fontSize * 0.875,
+			},
+			bold: {
+				fontWeight: metadata.typography.body.fontWeights.at(-1) ?? "600",
+			},
+			richParagraph: {
+				margin: 0,
+				...bodyText,
+			},
+			richListItemRow: {
+				flexDirection: "row",
+				columnGap: metrics.gapX(1 / 3),
+				alignItems: "flex-start",
+			},
+			richListItemMarker: {
+				...bodyText,
+				width: metadata.typography.body.fontSize,
+				textAlign: r.listMarkerTextAlign,
+			},
+			richListItemContent: {
+				...bodyText,
+				flex: 1,
+				lineHeight: metadata.typography.body.lineHeight * 0.5,
+			},
 			splitRow: {
 				flexDirection: r.row,
 				flexWrap: "wrap",
@@ -205,13 +234,29 @@ const useGlalieTemplate = (): GlalieTemplate => {
 				justifyContent: "space-between",
 				columnGap: metrics.gapX(2 / 3),
 			},
-			alignEnd: { ...r.alignEnd },
-			section: { flexDirection: "column", rowGap: metrics.gapY(0.25) },
-			sectionHeading: { borderBottomWidth: 1, borderBottomColor: primary },
-			item: { rowGap: metrics.gapY(0.125) },
-			levelContainer: { width: "100%" },
-			levelItem: { borderColor: primary },
-			levelItemActive: { backgroundColor: primary },
+			alignEnd: {
+				...r.alignEnd,
+			},
+			section: {
+				flexDirection: "column",
+				rowGap: metrics.gapY(0.25),
+			},
+			sectionHeading: {
+				borderBottomWidth: 1,
+				borderBottomColor: primary,
+			},
+			item: {
+				rowGap: metrics.gapY(0.125),
+			},
+			levelContainer: {
+				width: "100%",
+			},
+			levelItem: {
+				borderColor: primary,
+			},
+			levelItemActive: {
+				backgroundColor: primary,
+			},
 			sidebarBackground: {
 				position: "absolute",
 				top: 0,
@@ -220,7 +265,10 @@ const useGlalieTemplate = (): GlalieTemplate => {
 				width: `${metadata.layout.sidebarWidth}%`,
 				backgroundColor: primaryTint,
 			},
-			layout: { flexDirection: r.row, minHeight: "100%" },
+			layout: {
+				flexDirection: r.row,
+				minHeight: "100%",
+			},
 			sidebarColumn: {
 				zIndex: 1,
 				backgroundColor: primaryTint,
@@ -228,8 +276,13 @@ const useGlalieTemplate = (): GlalieTemplate => {
 				paddingTop: metrics.page.paddingVertical,
 				rowGap: metrics.sectionGap,
 			},
-			sidebarContent: { overflow: "hidden" },
-			mainColumn: { flex: 1, zIndex: 1 },
+			sidebarContent: {
+				overflow: "hidden",
+			},
+			mainColumn: {
+				flex: 1,
+				zIndex: 1,
+			},
 			mainContent: {
 				paddingHorizontal: metrics.page.paddingHorizontal,
 				paddingTop: metrics.page.paddingVertical,
@@ -250,9 +303,19 @@ const useGlalieTemplate = (): GlalieTemplate => {
 				shadowWidth: picture.shadowWidth,
 				transform: `rotate(${picture.rotation}deg)`,
 			},
-			headerTitle: { alignItems: "center", textAlign: "center" },
-			headerIdentity: { alignItems: "center", textAlign: "center", rowGap: metrics.gapY(0.35) },
-			headerName: { fontSize: metadata.typography.heading.fontSize * 1.5, lineHeight: headerNameLineHeight },
+			headerTitle: {
+				alignItems: "center",
+				textAlign: "center",
+			},
+			headerIdentity: {
+				alignItems: "center",
+				textAlign: "center",
+				rowGap: metrics.gapY(0.35),
+			},
+			headerName: {
+				fontSize: metadata.typography.heading.fontSize * 1.5,
+				lineHeight: headerNameLineHeight,
+			},
 			contactList: {
 				width: "100%",
 				borderWidth: 1,
@@ -261,7 +324,11 @@ const useGlalieTemplate = (): GlalieTemplate => {
 				padding: metrics.gapX(0.75),
 				rowGap: metrics.gapY(0.125),
 			},
-			contactItem: { flexDirection: r.row, alignItems: "center", columnGap: metrics.gapX(1 / 6) },
+			contactItem: {
+				flexDirection: r.row,
+				alignItems: "center",
+				columnGap: metrics.gapX(1 / 6),
+			},
 		});
 
 		const accentFor = ({ colors }: TemplateStyleContext) => colors.primary;

packages/pdf/src/templates/kakuna/KakunaPage.tsx

@@ -186,8 +186,9 @@ const useKakunaTemplate = (): KakunaTemplate => {
 				textAlign: r.listMarkerTextAlign,
 			},
 			richListItemContent: {
-				flex: 1,
 				...bodyText,
+				flex: 1,
+				lineHeight: metadata.typography.body.lineHeight * 0.5,
 			},
 			splitRow: {
 				flexDirection: r.row,

packages/pdf/src/templates/lapras/LaprasPage.tsx

@@ -154,15 +154,44 @@ const useLaprasTemplate = (): LaprasTemplate => {
 				color: foreground,
 				...r.text,
 			},
-			div: { rowGap: metrics.gapY(0.125), columnGap: metrics.gapX(1 / 3) },
-			inline: { flexDirection: r.row, alignItems: "center", columnGap: metrics.gapX(1 / 3) },
-			link: { textDecoration: "none", color: foreground },
-			small: { fontSize: metadata.typography.body.fontSize * 0.875 },
-			bold: { fontWeight: metadata.typography.body.fontWeights.at(-1) ?? "600" },
-			richParagraph: { margin: 0, ...bodyText },
-			richListItemRow: { flexDirection: "row", columnGap: metrics.gapX(1 / 3), alignItems: "flex-start" },
-			richListItemMarker: { ...bodyText, width: metadata.typography.body.fontSize, textAlign: r.listMarkerTextAlign },
-			richListItemContent: { flex: 1, ...bodyText },
+			div: {
+				rowGap: metrics.gapY(0.125),
+				columnGap: metrics.gapX(1 / 3),
+			},
+			inline: {
+				flexDirection: r.row,
+				alignItems: "center",
+				columnGap: metrics.gapX(1 / 3),
+			},
+			link: {
+				textDecoration: "none",
+				color: foreground,
+			},
+			small: {
+				fontSize: metadata.typography.body.fontSize * 0.875,
+			},
+			bold: {
+				fontWeight: metadata.typography.body.fontWeights.at(-1) ?? "600",
+			},
+			richParagraph: {
+				margin: 0,
+				...bodyText,
+			},
+			richListItemRow: {
+				flexDirection: "row",
+				columnGap: metrics.gapX(1 / 3),
+				alignItems: "flex-start",
+			},
+			richListItemMarker: {
+				...bodyText,
+				width: metadata.typography.body.fontSize,
+				textAlign: r.listMarkerTextAlign,
+			},
+			richListItemContent: {
+				...bodyText,
+				flex: 1,
+				lineHeight: metadata.typography.body.lineHeight * 0.5,
+			},
 			splitRow: {
 				flexDirection: r.row,
 				flexWrap: "wrap",
@@ -170,7 +199,9 @@ const useLaprasTemplate = (): LaprasTemplate => {
 				justifyContent: "space-between",
 				columnGap: metrics.gapX(2 / 3),
 			},
-			alignEnd: { ...r.alignEnd },
+			alignEnd: {
+				...r.alignEnd,
+			},
 			section: {
 				flexDirection: "column",
 				rowGap: metrics.gapY(0.25),
@@ -186,10 +217,18 @@ const useLaprasTemplate = (): LaprasTemplate => {
 				backgroundColor: background,
 				paddingHorizontal: metrics.gapX(1),
 			},
-			item: { rowGap: metrics.gapY(0.125) },
-			levelContainer: { width: "100%" },
-			levelItem: { borderColor: primary },
-			levelItemActive: { backgroundColor: primary },
+			item: {
+				rowGap: metrics.gapY(0.125),
+			},
+			levelContainer: {
+				width: "100%",
+			},
+			levelItem: {
+				borderColor: primary,
+			},
+			levelItemActive: {
+				backgroundColor: primary,
+			},
 			header: {
 				flexDirection: r.row,
 				alignItems: "center",
@@ -212,16 +251,28 @@ const useLaprasTemplate = (): LaprasTemplate => {
 				shadowWidth: picture.shadowWidth,
 				transform: `rotate(${picture.rotation}deg)`,
 			},
-			headerTitle: { rowGap: metrics.gapY(0.5) },
-			headerIdentity: { ...r.headerIdentity, rowGap: metrics.gapY(0.35) },
-			headerName: { fontSize: metadata.typography.heading.fontSize * 1.5, lineHeight: headerNameLineHeight },
+			headerTitle: {
+				rowGap: metrics.gapY(0.5),
+			},
+			headerIdentity: {
+				...r.headerIdentity,
+				rowGap: metrics.gapY(0.35),
+			},
+			headerName: {
+				fontSize: metadata.typography.heading.fontSize * 1.5,
+				lineHeight: headerNameLineHeight,
+			},
 			contactList: {
 				flexDirection: r.row,
 				flexWrap: "wrap",
 				rowGap: metrics.gapY(0.125),
 				columnGap: metrics.gapX(0.5),
 			},
-			contactItem: { flexDirection: r.row, alignItems: "center", columnGap: metrics.gapX(1 / 6) },
+			contactItem: {
+				flexDirection: r.row,
+				alignItems: "center",
+				columnGap: metrics.gapX(1 / 6),
+			},
 			sectionGroup: {},
 		});
 

packages/pdf/src/templates/leafish/LeafishPage.tsx

@@ -180,15 +180,44 @@ const useLeafishTemplate = (): LeafishTemplate => {
 				color: foreground,
 				...r.text,
 			},
-			div: { rowGap: metrics.gapY(0.125), columnGap: metrics.gapX(1 / 3) },
-			inline: { flexDirection: r.row, alignItems: "center", columnGap: metrics.gapX(1 / 3) },
-			link: { textDecoration: "none", color: foreground },
-			small: { fontSize: metadata.typography.body.fontSize * 0.875 },
-			bold: { fontWeight: metadata.typography.body.fontWeights.at(-1) ?? "600" },
-			richParagraph: { margin: 0, ...bodyText },
-			richListItemRow: { flexDirection: "row", columnGap: metrics.gapX(1 / 3), alignItems: "flex-start" },
-			richListItemMarker: { ...bodyText, width: metadata.typography.body.fontSize, textAlign: r.listMarkerTextAlign },
-			richListItemContent: { flex: 1, ...bodyText },
+			div: {
+				rowGap: metrics.gapY(0.125),
+				columnGap: metrics.gapX(1 / 3),
+			},
+			inline: {
+				flexDirection: r.row,
+				alignItems: "center",
+				columnGap: metrics.gapX(1 / 3),
+			},
+			link: {
+				textDecoration: "none",
+				color: foreground,
+			},
+			small: {
+				fontSize: metadata.typography.body.fontSize * 0.875,
+			},
+			bold: {
+				fontWeight: metadata.typography.body.fontWeights.at(-1) ?? "600",
+			},
+			richParagraph: {
+				margin: 0,
+				...bodyText,
+			},
+			richListItemRow: {
+				flexDirection: "row",
+				columnGap: metrics.gapX(1 / 3),
+				alignItems: "flex-start",
+			},
+			richListItemMarker: {
+				...bodyText,
+				width: metadata.typography.body.fontSize,
+				textAlign: r.listMarkerTextAlign,
+			},
+			richListItemContent: {
+				...bodyText,
+				flex: 1,
+				lineHeight: metadata.typography.body.lineHeight * 0.5,
+			},
 			splitRow: {
 				flexDirection: r.row,
 				flexWrap: "wrap",
@@ -196,13 +225,29 @@ const useLeafishTemplate = (): LeafishTemplate => {
 				justifyContent: "space-between",
 				columnGap: metrics.gapX(2 / 3),
 			},
-			alignEnd: { ...r.alignEnd },
-			section: { flexDirection: "column", rowGap: metrics.gapY(0.25) },
-			sectionHeading: { borderBottomWidth: 1, borderBottomColor: primary },
-			item: { rowGap: metrics.gapY(0.125) },
-			levelContainer: { width: "100%" },
-			levelItem: { borderColor: primary },
-			levelItemActive: { backgroundColor: primary },
+			alignEnd: {
+				...r.alignEnd,
+			},
+			section: {
+				flexDirection: "column",
+				rowGap: metrics.gapY(0.25),
+			},
+			sectionHeading: {
+				borderBottomWidth: 1,
+				borderBottomColor: primary,
+			},
+			item: {
+				rowGap: metrics.gapY(0.125),
+			},
+			levelContainer: {
+				width: "100%",
+			},
+			levelItem: {
+				borderColor: primary,
+			},
+			levelItemActive: {
+				backgroundColor: primary,
+			},
 			header: {},
 			headerIntro: {
 				backgroundColor: primaryTintLight,
@@ -218,8 +263,14 @@ const useLeafishTemplate = (): LeafishTemplate => {
 				flex: 1,
 				rowGap: metrics.gapY(0.5),
 			},
-			headerIdentity: { ...r.headerIdentity, rowGap: metrics.gapY(0.35) },
-			headerName: { fontSize: metadata.typography.heading.fontSize * 1.5, lineHeight: headerNameLineHeight },
+			headerIdentity: {
+				...r.headerIdentity,
+				rowGap: metrics.gapY(0.35),
+			},
+			headerName: {
+				fontSize: metadata.typography.heading.fontSize * 1.5,
+				lineHeight: headerNameLineHeight,
+			},
 			headerContactBand: {
 				backgroundColor: primaryTintDark,
 				paddingHorizontal: metrics.page.paddingHorizontal,
@@ -254,8 +305,12 @@ const useLeafishTemplate = (): LeafishTemplate => {
 				paddingHorizontal: metrics.page.paddingHorizontal,
 				paddingTop: metrics.page.paddingVertical,
 			},
-			mainColumn: { flex: 1 },
-			sidebarColumn: { flexShrink: 0 },
+			mainColumn: {
+				flex: 1,
+			},
+			sidebarColumn: {
+				flexShrink: 0,
+			},
 		});
 
 		const accentFor = ({ colors }: TemplateStyleContext) => colors.primary;

packages/pdf/src/templates/meowth/MeowthPage.tsx

@@ -155,15 +155,44 @@ const useMeowthTemplate = (): MeowthTemplate => {
 				color: foreground,
 				...r.text,
 			},
-			div: { rowGap: metrics.gapY(0.125), columnGap: metrics.gapX(1 / 3) },
-			inline: { flexDirection: r.row, alignItems: "center", columnGap: metrics.gapX(1 / 3) },
-			link: { textDecoration: "none", color: foreground },
-			small: { fontSize: metadata.typography.body.fontSize * 0.875 },
-			bold: { fontWeight: metadata.typography.body.fontWeights.at(-1) ?? "600" },
-			richParagraph: { margin: 0, ...bodyText },
-			richListItemRow: { flexDirection: "row", columnGap: metrics.gapX(1 / 3), alignItems: "flex-start" },
-			richListItemMarker: { ...bodyText, width: metadata.typography.body.fontSize, textAlign: r.listMarkerTextAlign },
-			richListItemContent: { flex: 1, ...bodyText },
+			div: {
+				rowGap: metrics.gapY(0.125),
+				columnGap: metrics.gapX(1 / 3),
+			},
+			inline: {
+				flexDirection: r.row,
+				alignItems: "center",
+				columnGap: metrics.gapX(1 / 3),
+			},
+			link: {
+				textDecoration: "none",
+				color: foreground,
+			},
+			small: {
+				fontSize: metadata.typography.body.fontSize * 0.875,
+			},
+			bold: {
+				fontWeight: metadata.typography.body.fontWeights.at(-1) ?? "600",
+			},
+			richParagraph: {
+				margin: 0,
+				...bodyText,
+			},
+			richListItemRow: {
+				flexDirection: "row",
+				columnGap: metrics.gapX(1 / 3),
+				alignItems: "flex-start",
+			},
+			richListItemMarker: {
+				...bodyText,
+				width: metadata.typography.body.fontSize,
+				textAlign: r.listMarkerTextAlign,
+			},
+			richListItemContent: {
+				...bodyText,
+				flex: 1,
+				lineHeight: metadata.typography.body.lineHeight * 0.5,
+			},
 			splitRow: {
 				flexDirection: r.row,
 				flexWrap: "wrap",
@@ -171,12 +200,30 @@ const useMeowthTemplate = (): MeowthTemplate => {
 				justifyContent: "space-between",
 				columnGap: metrics.gapX(2 / 3),
 			},
-			alignEnd: { ...r.alignEnd },
-			inlineItemHeader: { flexDirection: r.row, alignItems: "flex-start", columnGap: metrics.gapX(0.75) },
-			inlineItemHeaderLeading: { flex: 1, minWidth: 0 },
-			inlineItemHeaderMiddle: { flex: 1, minWidth: 0 },
-			inlineItemHeaderTrailing: { flexShrink: 0, textAlign: "right" },
-			section: { flexDirection: "column", rowGap: metrics.gapY(0.25) },
+			alignEnd: {
+				...r.alignEnd,
+			},
+			inlineItemHeader: {
+				flexDirection: r.row,
+				alignItems: "flex-start",
+				columnGap: metrics.gapX(0.75),
+			},
+			inlineItemHeaderLeading: {
+				flex: 1,
+				minWidth: 0,
+			},
+			inlineItemHeaderMiddle: {
+				flex: 1,
+				minWidth: 0,
+			},
+			inlineItemHeaderTrailing: {
+				flexShrink: 0,
+				textAlign: "right",
+			},
+			section: {
+				flexDirection: "column",
+				rowGap: metrics.gapY(0.25),
+			},
 			sectionHeading: {
 				color: primary,
 				textTransform: "uppercase",
@@ -186,22 +233,49 @@ const useMeowthTemplate = (): MeowthTemplate => {
 				paddingBottom: metrics.gapY(0.125),
 				textAlign: r.sectionHeadingTextAlign,
 			},
-			item: { rowGap: metrics.gapY(0.125) },
-			levelContainer: { width: "100%" },
-			levelItem: { borderColor: primary },
-			levelItemActive: { backgroundColor: primary },
-			header: { flexDirection: r.row, alignItems: "flex-start", columnGap: metrics.gapX(1) },
-			headerTitle: { flex: 1, rowGap: metrics.gapY(0.5) },
-			headerIdentity: { ...r.headerIdentity, rowGap: metrics.gapY(0.35) },
-			headerName: { fontSize: metadata.typography.heading.fontSize * 1.5, lineHeight: headerNameLineHeight },
-			headerHeadline: { opacity: 0.8 },
+			item: {
+				rowGap: metrics.gapY(0.125),
+			},
+			levelContainer: {
+				width: "100%",
+			},
+			levelItem: {
+				borderColor: primary,
+			},
+			levelItemActive: {
+				backgroundColor: primary,
+			},
+			header: {
+				flexDirection: r.row,
+				alignItems: "flex-start",
+				columnGap: metrics.gapX(1),
+			},
+			headerTitle: {
+				flex: 1,
+				rowGap: metrics.gapY(0.5),
+			},
+			headerIdentity: {
+				...r.headerIdentity,
+				rowGap: metrics.gapY(0.35),
+			},
+			headerName: {
+				fontSize: metadata.typography.heading.fontSize * 1.5,
+				lineHeight: headerNameLineHeight,
+			},
+			headerHeadline: {
+				opacity: 0.8,
+			},
 			contactList: {
 				flexDirection: r.row,
 				flexWrap: "wrap",
 				rowGap: metrics.gapY(0.125),
 				columnGap: metrics.gapX(0.75),
 			},
-			contactItem: { flexDirection: r.row, alignItems: "center", columnGap: metrics.gapX(1 / 6) },
+			contactItem: {
+				flexDirection: r.row,
+				alignItems: "center",
+				columnGap: metrics.gapX(1 / 6),
+			},
 			picture: {
 				width: picture.size,
 				height: picture.size,

packages/pdf/src/templates/onyx/OnyxPage.tsx

@@ -150,15 +150,44 @@ const useOnyxTemplate = (): OnyxTemplate => {
 				color: foreground,
 				...r.text,
 			},
-			div: { rowGap: metrics.gapY(0.125), columnGap: metrics.gapX(1 / 3) },
-			inline: { flexDirection: r.row, alignItems: "center", columnGap: metrics.gapX(1 / 3) },
-			link: { textDecoration: "none", color: foreground },
-			small: { fontSize: metadata.typography.body.fontSize * 0.875 },
-			bold: { fontWeight: metadata.typography.body.fontWeights.at(-1) ?? "600" },
-			richParagraph: { margin: 0, ...bodyText },
-			richListItemRow: { flexDirection: "row", columnGap: metrics.gapX(1 / 3), alignItems: "flex-start" },
-			richListItemMarker: { ...bodyText, width: metadata.typography.body.fontSize, textAlign: r.listMarkerTextAlign },
-			richListItemContent: { flex: 1, ...bodyText },
+			div: {
+				rowGap: metrics.gapY(0.125),
+				columnGap: metrics.gapX(1 / 3),
+			},
+			inline: {
+				flexDirection: r.row,
+				alignItems: "center",
+				columnGap: metrics.gapX(1 / 3),
+			},
+			link: {
+				textDecoration: "none",
+				color: foreground,
+			},
+			small: {
+				fontSize: metadata.typography.body.fontSize * 0.875,
+			},
+			bold: {
+				fontWeight: metadata.typography.body.fontWeights.at(-1) ?? "600",
+			},
+			richParagraph: {
+				margin: 0,
+				...bodyText,
+			},
+			richListItemRow: {
+				flexDirection: "row",
+				columnGap: metrics.gapX(1 / 3),
+				alignItems: "flex-start",
+			},
+			richListItemMarker: {
+				...bodyText,
+				width: metadata.typography.body.fontSize,
+				textAlign: r.listMarkerTextAlign,
+			},
+			richListItemContent: {
+				...bodyText,
+				flex: 1,
+				lineHeight: metadata.typography.body.lineHeight * 0.5,
+			},
 			splitRow: {
 				flexDirection: r.row,
 				flexWrap: "wrap",
@@ -166,12 +195,25 @@ const useOnyxTemplate = (): OnyxTemplate => {
 				justifyContent: "space-between",
 				columnGap: metrics.gapX(2 / 3),
 			},
-			alignEnd: { ...r.alignEnd },
-			section: { flexDirection: "column", rowGap: metrics.gapY(0.25) },
-			item: { rowGap: metrics.gapY(0.125) },
-			levelContainer: { width: "100%" },
-			levelItem: { borderColor: primary },
-			levelItemActive: { backgroundColor: primary },
+			alignEnd: {
+				...r.alignEnd,
+			},
+			section: {
+				flexDirection: "column",
+				rowGap: metrics.gapY(0.25),
+			},
+			item: {
+				rowGap: metrics.gapY(0.125),
+			},
+			levelContainer: {
+				width: "100%",
+			},
+			levelItem: {
+				borderColor: primary,
+			},
+			levelItemActive: {
+				backgroundColor: primary,
+			},
 			header: {
 				flexDirection: r.row,
 				alignItems: "center",
@@ -192,16 +234,28 @@ const useOnyxTemplate = (): OnyxTemplate => {
 				shadowWidth: picture.shadowWidth,
 				transform: `rotate(${picture.rotation}deg)`,
 			},
-			headerTitle: { rowGap: metrics.gapY(0.5) },
-			headerIdentity: { ...r.headerIdentity, rowGap: metrics.gapY(0.35) },
-			headerName: { fontSize: metadata.typography.heading.fontSize * 1.5, lineHeight: headerNameLineHeight },
+			headerTitle: {
+				rowGap: metrics.gapY(0.5),
+			},
+			headerIdentity: {
+				...r.headerIdentity,
+				rowGap: metrics.gapY(0.35),
+			},
+			headerName: {
+				fontSize: metadata.typography.heading.fontSize * 1.5,
+				lineHeight: headerNameLineHeight,
+			},
 			contactList: {
 				flexDirection: r.row,
 				flexWrap: "wrap",
 				rowGap: metrics.gapY(0.125),
 				columnGap: metrics.gapX(0.75),
 			},
-			contactItem: { flexDirection: r.row, alignItems: "center", columnGap: metrics.gapX(1 / 6) },
+			contactItem: {
+				flexDirection: r.row,
+				alignItems: "center",
+				columnGap: metrics.gapX(1 / 6),
+			},
 			sectionGroup: {},
 		});
 

packages/pdf/src/templates/pikachu/PikachuPage.tsx

@@ -187,15 +187,44 @@ const usePikachuTemplate = (): PikachuTemplate => {
 				color: foreground,
 				...r.text,
 			},
-			div: { rowGap: metrics.gapY(0.125), columnGap: metrics.gapX(1 / 3) },
-			inline: { flexDirection: r.row, alignItems: "center", columnGap: metrics.gapX(1 / 3) },
-			link: { textDecoration: "none", color: foreground },
-			small: { fontSize: metadata.typography.body.fontSize * 0.875 },
-			bold: { fontWeight: metadata.typography.body.fontWeights.at(-1) ?? "600" },
-			richParagraph: { margin: 0, ...bodyText },
-			richListItemRow: { flexDirection: "row", columnGap: metrics.gapX(1 / 3), alignItems: "flex-start" },
-			richListItemMarker: { ...bodyText, width: metadata.typography.body.fontSize, textAlign: r.listMarkerTextAlign },
-			richListItemContent: { flex: 1, ...bodyText },
+			div: {
+				rowGap: metrics.gapY(0.125),
+				columnGap: metrics.gapX(1 / 3),
+			},
+			inline: {
+				flexDirection: r.row,
+				alignItems: "center",
+				columnGap: metrics.gapX(1 / 3),
+			},
+			link: {
+				textDecoration: "none",
+				color: foreground,
+			},
+			small: {
+				fontSize: metadata.typography.body.fontSize * 0.875,
+			},
+			bold: {
+				fontWeight: metadata.typography.body.fontWeights.at(-1) ?? "600",
+			},
+			richParagraph: {
+				margin: 0,
+				...bodyText,
+			},
+			richListItemRow: {
+				flexDirection: "row",
+				columnGap: metrics.gapX(1 / 3),
+				alignItems: "flex-start",
+			},
+			richListItemMarker: {
+				...bodyText,
+				width: metadata.typography.body.fontSize,
+				textAlign: r.listMarkerTextAlign,
+			},
+			richListItemContent: {
+				...bodyText,
+				flex: 1,
+				lineHeight: metadata.typography.body.lineHeight * 0.5,
+			},
 			splitRow: {
 				flexDirection: r.row,
 				flexWrap: "wrap",
@@ -203,13 +232,29 @@ const usePikachuTemplate = (): PikachuTemplate => {
 				justifyContent: "space-between",
 				columnGap: metrics.gapX(2 / 3),
 			},
-			alignEnd: { ...r.alignEnd },
-			section: { flexDirection: "column", rowGap: metrics.gapY(0.25) },
-			sectionHeading: { borderBottomWidth: 1, borderBottomColor: primary },
-			item: { rowGap: metrics.gapY(0.125) },
-			levelContainer: { width: "100%" },
-			levelItem: { borderColor: primary },
-			levelItemActive: { backgroundColor: primary },
+			alignEnd: {
+				...r.alignEnd,
+			},
+			section: {
+				flexDirection: "column",
+				rowGap: metrics.gapY(0.25),
+			},
+			sectionHeading: {
+				borderBottomWidth: 1,
+				borderBottomColor: primary,
+			},
+			item: {
+				rowGap: metrics.gapY(0.125),
+			},
+			levelContainer: {
+				width: "100%",
+			},
+			levelItem: {
+				borderColor: primary,
+			},
+			levelItemActive: {
+				backgroundColor: primary,
+			},
 			layout: {
 				flexDirection: r.row,
 				columnGap: metrics.columnGap,
@@ -217,7 +262,9 @@ const usePikachuTemplate = (): PikachuTemplate => {
 			sidebarColumn: {
 				flexShrink: 0,
 			},
-			sidebarContent: { overflow: "hidden" },
+			sidebarContent: {
+				overflow: "hidden",
+			},
 			mainColumn: {
 				flex: 1,
 			},
@@ -250,7 +297,9 @@ const usePikachuTemplate = (): PikachuTemplate => {
 				fontSize: metadata.typography.heading.fontSize * 1.5,
 				lineHeight: headerNameLineHeight,
 			},
-			headerText: { color: background },
+			headerText: {
+				color: background,
+			},
 			contactList: {
 				flexDirection: r.row,
 				flexWrap: "wrap",

packages/pdf/src/templates/rhyhorn/RhyhornPage.tsx

@@ -73,7 +73,10 @@ export const RhyhornPage = ({ page, pageIndex }: TemplatePageProps) => {
 const Header = ({ styles }: { styles: RhyhornStyles }) => {
 	const { basics, picture } = useRender();
 	const hasPicture = hasTemplatePicture(picture);
-	const contactItems: { id: string; content: ReactNode }[] = [];
+	const contactItems: {
+		id: string;
+		content: ReactNode;
+	}[] = [];
 
 	if (basics.email) {
 		contactItems.push({
@@ -195,12 +198,29 @@ const useRhyhornTemplate = (): RhyhornTemplate => {
 				color: foreground,
 				...r.text,
 			},
-			div: { rowGap: metrics.gapY(0.125), columnGap: metrics.gapX(1 / 3) },
-			inline: { flexDirection: r.row, alignItems: "center", columnGap: metrics.gapX(1 / 3) },
-			link: { textDecoration: "none", color: foreground },
-			small: { fontSize: metadata.typography.body.fontSize * 0.875 },
-			bold: { fontWeight: metadata.typography.body.fontWeights.at(-1) ?? "600" },
-			richParagraph: { margin: 0, ...bodyText },
+			div: {
+				rowGap: metrics.gapY(0.125),
+				columnGap: metrics.gapX(1 / 3),
+			},
+			inline: {
+				flexDirection: r.row,
+				alignItems: "center",
+				columnGap: metrics.gapX(1 / 3),
+			},
+			link: {
+				textDecoration: "none",
+				color: foreground,
+			},
+			small: {
+				fontSize: metadata.typography.body.fontSize * 0.875,
+			},
+			bold: {
+				fontWeight: metadata.typography.body.fontWeights.at(-1) ?? "600",
+			},
+			richParagraph: {
+				margin: 0,
+				...bodyText,
+			},
 			richListItemRow: {
 				// Stays `row` for both LTR and RTL; the <li> renderer swaps DOM order for RTL.
 				flexDirection: "row",
@@ -213,7 +233,11 @@ const useRhyhornTemplate = (): RhyhornTemplate => {
 				width: metadata.typography.body.fontSize,
 				textAlign: r.listMarkerTextAlign,
 			},
-			richListItemContent: { flex: 1, ...bodyText },
+			richListItemContent: {
+				...bodyText,
+				flex: 1,
+				lineHeight: metadata.typography.body.lineHeight * 0.5,
+			},
 			splitRow: {
 				flexDirection: r.row,
 				flexWrap: "wrap",
@@ -221,26 +245,53 @@ const useRhyhornTemplate = (): RhyhornTemplate => {
 				justifyContent: "space-between",
 				columnGap: metrics.gapX(2 / 3),
 			},
-			alignEnd: { ...r.alignEnd },
-			section: { flexDirection: "column", rowGap: metrics.gapY(0.25) },
+			alignEnd: {
+				...r.alignEnd,
+			},
+			section: {
+				flexDirection: "column",
+				rowGap: metrics.gapY(0.25),
+			},
 			sectionHeading: {
 				color: primary,
 				borderBottomWidth: 1,
 				borderBottomColor: primary,
 				textAlign: r.sectionHeadingTextAlign,
 			},
-			item: { rowGap: metrics.gapY(0.125) },
-			levelContainer: { width: "100%" },
-			levelItem: { borderColor: primary },
-			levelItemActive: { backgroundColor: primary },
-			header: { flexDirection: r.row, alignItems: "center", columnGap: metrics.gapX(0.5) },
-			headerTitle: { flex: 1, rowGap: metrics.gapY(0.5) },
+			item: {
+				rowGap: metrics.gapY(0.125),
+			},
+			levelContainer: {
+				width: "100%",
+			},
+			levelItem: {
+				borderColor: primary,
+			},
+			levelItemActive: {
+				backgroundColor: primary,
+			},
+			header: {
+				flexDirection: r.row,
+				alignItems: "center",
+				columnGap: metrics.gapX(0.5),
+			},
+			headerTitle: {
+				flex: 1,
+				rowGap: metrics.gapY(0.5),
+			},
 			headerIdentity: {
 				...r.headerIdentity,
 				rowGap: metrics.gapY(0.35),
 			},
-			headerName: { fontSize: metadata.typography.heading.fontSize * 1.5, lineHeight: headerNameLineHeight },
-			contactList: { flexDirection: r.row, flexWrap: "wrap", rowGap: metrics.gapY(0.125) },
+			headerName: {
+				fontSize: metadata.typography.heading.fontSize * 1.5,
+				lineHeight: headerNameLineHeight,
+			},
+			contactList: {
+				flexDirection: r.row,
+				flexWrap: "wrap",
+				rowGap: metrics.gapY(0.125),
+			},
 			contactItem: {
 				flexDirection: r.row,
 				alignItems: "center",

packages/pdf/src/templates/scizor/ScizorPage.tsx

@@ -146,15 +146,45 @@ const useScizorTemplate = (): ScizorTemplate => {
 				color: foreground,
 				...r.text,
 			},
-			div: { rowGap: metrics.gapY(0.125), columnGap: metrics.gapX(1 / 3) },
-			inline: { flexDirection: r.row, alignItems: "center", columnGap: metrics.gapX(1 / 3) },
-			link: { textDecoration: "none", color: foreground },
-			small: { fontSize: metadata.typography.body.fontSize * 0.875 },
-			bold: { fontWeight: metadata.typography.body.fontWeights.at(-1) ?? "700", color: foreground },
-			richParagraph: { margin: 0, ...bodyText },
-			richListItemRow: { flexDirection: "row", columnGap: metrics.gapX(1 / 3), alignItems: "flex-start" },
-			richListItemMarker: { ...bodyText, width: metadata.typography.body.fontSize, textAlign: r.listMarkerTextAlign },
-			richListItemContent: { flex: 1, ...bodyText },
+			div: {
+				rowGap: metrics.gapY(0.125),
+				columnGap: metrics.gapX(1 / 3),
+			},
+			inline: {
+				flexDirection: r.row,
+				alignItems: "center",
+				columnGap: metrics.gapX(1 / 3),
+			},
+			link: {
+				textDecoration: "none",
+				color: foreground,
+			},
+			small: {
+				fontSize: metadata.typography.body.fontSize * 0.875,
+			},
+			bold: {
+				fontWeight: metadata.typography.body.fontWeights.at(-1) ?? "700",
+				color: foreground,
+			},
+			richParagraph: {
+				margin: 0,
+				...bodyText,
+			},
+			richListItemRow: {
+				flexDirection: "row",
+				columnGap: metrics.gapX(1 / 3),
+				alignItems: "flex-start",
+			},
+			richListItemMarker: {
+				...bodyText,
+				width: metadata.typography.body.fontSize,
+				textAlign: r.listMarkerTextAlign,
+			},
+			richListItemContent: {
+				...bodyText,
+				flex: 1,
+				lineHeight: metadata.typography.body.lineHeight * 0.5,
+			},
 			splitRow: {
 				flexDirection: r.row,
 				flexWrap: "wrap",
@@ -162,7 +192,9 @@ const useScizorTemplate = (): ScizorTemplate => {
 				justifyContent: "space-between",
 				columnGap: metrics.gapX(2 / 3),
 			},
-			alignEnd: { ...r.alignEnd },
+			alignEnd: {
+				...r.alignEnd,
+			},
 			section: {
 				flexDirection: "column",
 				rowGap: metrics.gapY(0.25),
@@ -176,18 +208,32 @@ const useScizorTemplate = (): ScizorTemplate => {
 				fontWeight: metadata.typography.heading.fontWeights.at(-1) ?? "700",
 				textTransform: "uppercase",
 			},
-			sectionItems: { rowGap: metrics.itemGapY },
-			item: { rowGap: metrics.gapY(0.125) },
-			levelContainer: { width: "100%" },
-			levelItem: { borderColor: primary },
-			levelItemActive: { backgroundColor: primary },
+			sectionItems: {
+				rowGap: metrics.itemGapY,
+			},
+			item: {
+				rowGap: metrics.gapY(0.125),
+			},
+			levelContainer: {
+				width: "100%",
+			},
+			levelItem: {
+				borderColor: primary,
+			},
+			levelItemActive: {
+				backgroundColor: primary,
+			},
 			header: {
 				flexDirection: r.row,
 				alignItems: "flex-start",
 				columnGap: metrics.gapX(1),
 				paddingBottom: metrics.gapY(0.35),
 			},
-			headerIdentity: { flex: 1, ...r.headerIdentity, rowGap: metrics.gapY(0.45) },
+			headerIdentity: {
+				flex: 1,
+				...r.headerIdentity,
+				rowGap: metrics.gapY(0.45),
+			},
 			headerName: {
 				color: foreground,
 				fontSize: metadata.typography.heading.fontSize * 1.85,
@@ -198,7 +244,9 @@ const useScizorTemplate = (): ScizorTemplate => {
 				borderBottomWidth: 2,
 				borderBottomColor: divider,
 			},
-			headerHeadline: { color: foreground },
+			headerHeadline: {
+				color: foreground,
+			},
 			headerContactRow: {
 				flexDirection: r.row,
 				flexWrap: "wrap",
@@ -223,7 +271,9 @@ const useScizorTemplate = (): ScizorTemplate => {
 				shadowWidth: picture.shadowWidth,
 				transform: `rotate(${picture.rotation}deg)`,
 			},
-			sections: { flexDirection: "column" },
+			sections: {
+				flexDirection: "column",
+			},
 		});
 
 		const accentFor = ({ colors }: TemplateStyleContext) => colors.primary;