refactor(text-rendering): ♻️ good enough text to path

refactor: ♻️ ignore more files
refactor: ♻️ flatten svg files
2024-01-17 23:18:27 -03:00 · 2024-01-17 23:17:38 -03:00 · 2024-01-17 23:08:42 -03:00 · 2024-01-17 15:26:59 -03:00 · 2024-01-17 13:33:39 -03:00 · 2024-01-16 18:58:57 -03:00
30 changed files with 975 additions and 587 deletions
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
@@ -2,5 +2,5 @@
 . "$(dirname -- "$0")/_/husky.sh"
 pnpm dlx commitlint --edit ${1}
-pnpm run lint:fix
+pnpm dlx lint-staged
--- a/.lintstagedrc
+++ b/.lintstagedrc
@@ -0,0 +1,4 @@
 {
 	"gitDir": "./.git",
 	"*": "eslint --fix"
 }
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -1,6 +1,14 @@
 import { configs, defineConfig, presets } from '@eslegant/js';
 export default defineConfig([
 	{
 		ignores: [
 			'**/*.svg.js',
 			'**/*/test.*',
 			'**/*.{woff,woff2,ttf}',
 			'**/*/package.json',
 		],
 	},
 	// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
 	...presets.strict,
 	configs.environments.node.strict.default,
--- a/index.html
+++ b/index.html
@@ -5,13 +5,13 @@
 	<title></title>
 	<meta charset="UTF-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<link href="css/style.css" rel="stylesheet">
 	<!-- auto-refresh in dev -->
 	<!-- <script type="text/javascript" src="https://livejs.com/live.js"></script> -->
 	<script type="module" src="./packages/banners/src/index.js"></script>
 </head>
 <body>
 	<a href="packages/banners/test.html">Test</a>
 	<h1> Hello, world </h1>
 </body>
--- a/jsconfig.json
+++ b/jsconfig.json
@@ -16,8 +16,6 @@
 		"./**/*.test.js",
 		"./src/**/*.js",
 		"./api/**/*.js",
 		"./packages/*/src/**/*.js",
 		"./packages/*/scripts/**/*.js",
 		"./commitlint.config.cjs",
 		"./eslint.config.js"
 	],
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
 		"@commitlint/config-conventional": "^18.4.3",
 		"@commitlint/types": "^18.4.3",
 		"@vercel/node": "^3.0.11",
 		"cal-sans": "^1.0.1",
 		"eslint": "^8.54.0",
 		"husky": "^8.0.0",
 		"turbo": "^1.10.16",
--- a/packages/banners/.lintstagedrc
+++ b/packages/banners/.lintstagedrc
@@ -0,0 +1,4 @@
 {
 	"gitDir": "../../.git",
 	"*": "eslint --fix"
 }
--- a/packages/banners/jsconfig.json
+++ b/packages/banners/jsconfig.json
@@ -1,3 +1,7 @@
 {
-	"extends": "../../jsconfig.json"
+	"extends": "../../jsconfig.json",
 	"include": [
 		"./src/**/*",
 		"./scripts/**/*.js"
 	]
 }
--- a/packages/banners/package.json
+++ b/packages/banners/package.json
@@ -16,5 +16,9 @@
 		"@types/node": "^20.10.0",
 		"eslint": "^8.54.0",
 		"linkedom": "^0.16.4"
 	},
 	"dependencies": {
 		"cal-sans": "^1.0.1",
 		"opentype.js": "^1.3.4"
 	}
 }
--- a/packages/banners/scripts/inkscape-convert.js
+++ b/packages/banners/scripts/inkscape-convert.js
@@ -83,6 +83,9 @@ for (const p of paths) {
 	const file = await fs.readFile(p);
 	const svg = covert(file.toString());
 	const fileContent = `/* eslint-disable */\nconst svg = \`${svg}\`;\nexport default svg;`;
 	await fs.writeFile(p.replaceAll('.inkscape.svg', '.svg.js'), fileContent);
 	await fs.writeFile(p.replaceAll('.inkscape.svg', '.svg'), svg);
 	// eslint-disable-next-line no-console
 	console.log(`File ${p.replace(process.cwd(), '')} converted!`);
--- a/packages/banners/src/index.d.ts
+++ b/packages/banners/src/index.d.ts
@@ -0,0 +1,42 @@
 import type { BuiltinLayouts, DeepReadonly } from './types';
 type BannerObject = DeepReadonly<{
 	background?: [string, string] | {
 		color?: string,
 		image?: string,
 	} | string,
 	icon?: string,
 	layout?: {
 		rtl: boolean,
 		type: BuiltinLayouts,
 	} | string,
 	lib?: {
 		document: Document,
 		fetch?: ((
 			info: RequestInfo | URL,
 			init?: RequestInit
 		) => Promise<Response>) | undefined,
 	},
 	repository?: {
 		contributors?: boolean,
 		issues?: boolean,
 		pullRequests?: boolean,
 		starts?: boolean,
 		url: string,
 	} | string,
 	subtitle?: string,
 	textColor?: {
 		icon?: string,
 		subtitle?: string,
 		title: string,
 	} | string,
 	title: string,
 }>;
 declare class Banner {
 	public constructor(banner: BannerObject);
 	public toString(): string;
 }
 export { Banner, type BannerObject };
--- a/packages/banners/src/index.js
+++ b/packages/banners/src/index.js
@@ -1,2 +1,270 @@
-// eslint-disable-next-line no-console
+/**
-console.log('Hello world from the package!');
+ * @typedef {import('./index.js').BannerObject} BannerObject
 */
 import opentype from 'opentype.js';
 // eslint-disable-next-line import/no-unassigned-import
 import 'cal-sans';
 import getLocalLayout from './layouts.js';
 import { isValidIcon } from './utils.js';
 /**
 * @param {Readonly<string>} string - The string to be converted.
 * @param {Document} document - The document API to be used.
 * @returns {Element} - The DOM of the string.
 */
 function stringToHtml(string, document) {
 	const tmp = document.createElement('template');
 	tmp.innerHTML = string;
 	/** @type {Element} */
 	const dom = tmp.children[0];
 	return dom;
 }
 /**
 * @param {Element} element - The element to be converted to string.
 * @param {Document} document - The document API to be used.
 * @returns {string} - The resulting string.
 */
 function htmlToString(element, document) {
 	const tmp = document.createElement('template');
 	tmp.appendChild(element);
 	return tmp.innerHTML;
 }
 /**
 * @typedef {{
 * modify(query: string, callback: (el: Element | null) => T): T,
 * asyncModify(query: string, callback: (el: Element | null) => Promise<T>): Promise<T>,
 * }} DOMHelper
 * @param {Element} element - The element to be manipulated.
 * @returns {DOMHelper}
 */
 function domHelper(element) {
 	return {
 		/**
 		 * @template T
 		 * @param {string} query - The query selector to find the element.
 		 * @param {(el: Element | null) => Promise<T>} callback - Callback to modify the element.
 		 * @returns {Promise<T>} - The return value of the callback.
 		 * @throws {Error} - Throws if the element is not found.
 		 */
 		async asyncModify(query, callback) {
 			const el = element.querySelector(query);
 			return callback(el);
 		},
 		/**
 		 * @template T
 		 * @param {string} query - The query selector to find the element.
 		 * @param {(el: Element | null) => T} callback - Callback to modify the element.
 		 * @returns {T} - The return value of the callback.
 		 * @throws {Error} - Throws if the element is not found.
 		 */
 		modify(query, callback) {
 			const el = element.querySelector(query);
 			return callback(el);
 		},
 	};
 }
 /**
 * @typedef {{
 * getTranslate(): [number, number],
 * getFontSize(): { value: number, type: string },
 * }} RegexHelper
 * @param {Readonly<string>} string - The string to get values from.
 * @returns {RegexHelper}
 */
 function regexHelper(string) {
 	// TODO (@guz013) [>=1.0.0]: Prevent possible ReDoS attacks.
 	/* eslint-disable security/detect-unsafe-regex */
 	return {
 		/**
 		 * Gets the value from `font-size` of a style string.
 		 * Returns 0px if none is found.
 		 *
 		 * @returns {{value: number, type: string}}
 		 */
 		getFontSize() {
 			if (!string.includes('font-size'))
 				return { type: 'px', value: 0 };
 			const fontSizeRegex = /font-size:(?:[^;]+)/gu;
 			const match = string.match(fontSizeRegex)?.[0].split(':')[1];
 			const type = [...match ?? '']
 				.filter(l => !'1234567890.'.includes(l))
 				.join('');
 			if (match) return { type, value: Number.parseFloat(match) };
 			return { type: 'px', value: 0 };
 		},
 		/**
 		 * Gets the `translate` x,y values from a transform string.
 		 * Returns [0,0] if none is found.
 		 *
 		 * @returns {[number, number]}
 		 */
 		getTranslate() {
 			if (!string.includes('translate')) return [0, 0];
 			const translateRegex = /translate\((?:[^,]+),(?:[^)]+)\)/gu;
 			const match = [...(string.match(translateRegex)?.[0] ?? '')]
 				.filter(l => Number.parseFloat(l));
 			return [
 				Number.parseFloat(match[0] ?? '0'),
 				Number.parseFloat(match[1] ?? '0'),
 			];
 		},
 	};
 	/* eslint-enable */
 }
 // eslint-disable-next-line max-len
 /* eslint-disable @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access */
 /**
 * @param {Element} el - The tspan element.
 * @param {Document} doc - The document object.
 * @returns {Promise<void>}
 */
 async function textToPath(el, doc) {
 	const fontFile = await fetch(
 		import.meta.resolve('/packages/banners/static/CalSans-SemiBold.ttf'),
 	);
 	const x = Number(el.getAttribute('x') ?? 0);
 	const y = Number(el.getAttribute('y') ?? 0);
 	const overlay = stringToHtml('<g data-banner-class="overlay"></g>', doc);
 	const styles = el.getAttribute('style');
 	const size = regexHelper(styles ?? '').getFontSize();
 	const font = opentype.parse(await fontFile.arrayBuffer());
 	const path = font.getPath(el.innerHTML, 0, 0, size.value);
 	const bbox = path.getBoundingBox();
 	const svg = path.toSVG(2);
 	overlay.innerHTML += `<g fill="#ff0000" transform="translate(${x - (bbox.x2 / 2)}, ${y})">${svg}</g>`;
 	el.parentElement?.parentElement?.appendChild(overlay);
 }
 /* eslint-enable */
 /**
 * @param {BannerObject} object - The Banner Object to be generated from.
 * @returns {Promise<string>} - The SVG of the banner.
 */
 async function banner(object) {
 	/** @type {Document} */
 	// @ts-expect-error because Document is not compatible with Readonly<Document>
 	const doc = object.lib?.document ?? globalThis.document;
 	/** @type {(info: URL | RequestInfo, init?: RequestInit) => Promise<Response>} */
 	// @ts-expect-error because fetch is Readonly in Banner object;
 	const lFetch = object.lib?.fetch ?? globalThis.fetch;
 	/** @type {Readonly<string>} */
 	const layoutSvg = await getLocalLayout('vertical', true);
 	const dom = stringToHtml(layoutSvg, doc);
 	const helper = domHelper(dom);
 	await helper.asyncModify('[data-banner-class="icon"]', async (el) => {
 		if (!el || !object.icon || !isValidIcon(object.icon)) return;
 		const [iconSet, iconName] = object.icon.split(':');
 		const res = await lFetch(`https://api.iconify.design/${iconSet}/${iconName}.svg`);
 		const resSvg = stringToHtml(await res.text(), doc);
 		resSvg.setAttribute('x', '22');
 		resSvg.setAttribute('y', '33');
 		resSvg.setAttribute('width', '13');
 		resSvg.setAttribute('height', '13');
 		if (resSvg.children[0].getAttribute('fill') === 'currentColor')
 			resSvg.children[0].setAttribute('fill', '#000000');
 		// eslint-disable-next-line require-atomic-updates
 		el.innerHTML = htmlToString(resSvg, doc);
 	});
 	await helper.asyncModify(
 		'[data-banner-class="title"] > tspan',
 		async (el) => {
 			if (!el) return;
 			el.innerHTML = object.title;
 			if (!object.subtitle) {
 				const transform = el.parentElement?.getAttribute('transform');
 				const coords = regexHelper(transform ?? '').getTranslate();
 				coords[1] += 3;
 				el.parentElement?.setAttribute('transform', `${transform ?? ''} translate(${coords.join(',')})`);
 				const styles = el.getAttribute('style');
 				const size = regexHelper(styles ?? '').getFontSize();
 				el.setAttribute('style', `${styles};font-size:${size.value + 2}${size.type};`);
 			}
 			await textToPath(el, doc);
 		},
 	);
 	await helper.asyncModify(
 		'[data-banner-class="subtitle"] > tspan',
 		async (el) => {
 			if (!el) return;
 			el.innerHTML = object.subtitle ?? '';
 			await textToPath(el, doc);
 		},
 	);
 	helper.modify(
 		'[data-banner-class="solid-color"]',
 		(el) => {
 			if (
 				!el ||
 				!object.background ||
 				!(typeof object.background === 'string') ||
 				!object.background.toString().startsWith('#')
 			) return;
 			const styles = el.getAttribute('style');
 			el.setAttribute('style', `${styles};fill:${object.background};`);
 		},
 	);
 	return htmlToString(dom, doc);
 }
 /**
 * Test function.
 */
 async function test() {
 	const testBanner = await banner({
 		background: '#ffff00',
 		icon: 'solar:4k-bold',
 		lib: {
 			// @ts-expect-error because Document is not DeepReadonly<Document>
 			document: new Document(),
 			fetch,
 		},
 		subtitle: 'this is a test with icon',
 		title: 'Hello, world',
 	});
 	const body = globalThis.document.getElementsByTagName('body')[0];
 	body.innerHTML += `${testBanner}`;
 }
 await test();
 export default banner;
--- a/packages/banners/src/layouts.js
+++ b/packages/banners/src/layouts.js
@@ -0,0 +1,30 @@
 /**
 * Imports a local layout from the static folder.
 *
 * @param {import('./types.d.ts').BuiltinLayouts} layout - The banner layout.
 * @param {boolean} [rtl] - Is the layout right-to-left?
 * @returns {Promise<string>} - The SVG string of the layout file.
 */
 async function getLocalLayout(layout, rtl = false) {
 	let layoutFile;
 	/* eslint-disable import/no-relative-parent-imports */
 	switch (layout) {
 		case 'vertical': {
 			layoutFile = await import('../static/vertical.svg.js');
 			break;
 		}
 		default: {
 			if (rtl) {
 				layoutFile = await import('../static/horizontal-rtl.svg.js');
 				break;
 			}
 			layoutFile = await import('../static/horizontal.svg.js');
 			break;
 		}
 	}
 	/* eslint-enable */
 	return layoutFile.default;
 }
 export default getLocalLayout;
--- a/packages/banners/src/types.d.ts
+++ b/packages/banners/src/types.d.ts
@@ -0,0 +1,30 @@
 type primitive = boolean | null | number | string | undefined;
 /* eslint-disable no-use-before-define */
 /**
 * Makes all property of a object readonly.
 *
 * @package
 * @see https://github.com/microsoft/Typescript/issues/13923#issue-comment-372258196
 * @author Dean177
 */
 type DeepReadonly<T> =
 	T extends primitive ? T :
 		T extends (infer U)[] ? DeepReadonlyArray<U> :
 			DeepReadonlyObject<T>;
 /* eslint-enable */
 type DeepReadonlyArray<T> = readonly DeepReadonly<T>[];
 type DeepReadonlyObject<T> = {
 	readonly [P in keyof T]: DeepReadonly<T[P]>
 };
 /**
 * Built-in banner layouts.
 *
 * @package
 */
 type BuiltinLayouts = 'horizontal' | 'vertical';
 export type { BuiltinLayouts, DeepReadonly };
--- a/packages/banners/src/utils.js
+++ b/packages/banners/src/utils.js
@@ -0,0 +1,39 @@
 /**
 * Checks if a given string is a URL.
 *
 * @param {Readonly<string>} string - The string to be checked.
 * @returns {boolean}
 */
 function isURL(string) {
 	try {
 		const url = new URL(string);
 		return url.protocol === 'http' || url.protocol === 'https';
 	}
 	catch {
 		return false;
 	}
 }
 /**
 * Checks if a given string is a valid Iconify's icon name.
 *
 * @param {string} string - The string to be checked.
 * @returns {boolean}
 */
 function isValidIcon(string) {
 	if (string.includes('--')) return false;
 	// eslint-disable-next-line no-secrets/no-secrets
 	const VALID_CHARS = 'abcdefghijklmnopqrstuvwxyz1234567890-:';
 	if ([...string].some(l => !VALID_CHARS.includes(l)))
 		return false;
 	if (!string.includes(':')) return false;
 	return true;
 }
 export { isURL, isValidIcon };
--- a/packages/banners/static/CalSans-SemiBold.ttf
+++ b/packages/banners/static/CalSans-SemiBold.ttf
--- a/packages/banners/static/CalSans-SemiBold.woff
+++ b/packages/banners/static/CalSans-SemiBold.woff
--- a/packages/banners/static/CalSans-SemiBold.woff2
+++ b/packages/banners/static/CalSans-SemiBold.woff2
--- a/packages/banners/static/design.inkscape.svg
+++ b/packages/banners/static/design.inkscape.svg
@@ -9,7 +9,7 @@
   id="svg1"
   xml:space="preserve"
   sodipodi:docname="design.inkscape.svg"
-   inkscape:version="1.3.1 (91b66b0783, 2023-11-16, custom)"
+   inkscape:version="1.3.2 (091e20ef0f, 2023-11-25)"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:xlink="http://www.w3.org/1999/xlink"
@@ -25,12 +25,12 @@
     inkscape:deskcolor="#505050"
     inkscape:document-units="mm"
     inkscape:zoom="1.1011145"
-     inkscape:cx="155.75129"
+     inkscape:cx="156.20537"
     inkscape:cy="-119.42446"
-     inkscape:window-width="2540"
+     inkscape:window-width="2560"
-     inkscape:window-height="1023"
+     inkscape:window-height="1011"
     inkscape:window-x="0"
-     inkscape:window-y="0"
+     inkscape:window-y="32"
     inkscape:window-maximized="1"
     inkscape:current-layer="layer2"
     showgrid="false"
@@ -41,7 +41,10 @@
       height="48.491169"
       id="page18"
       margin="0"
-       bleed="0" /><inkscape:page
+       bleed="0"
       inkscape:export-filename="horizontal-rtl.inkscape.svg"
       inkscape:export-xdpi="96"
       inkscape:export-ydpi="96" /><inkscape:page
       x="0"
       y="-115.57619"
       width="162.68883"
--- a/packages/banners/static/horizontal-rtl.inkscape.svg
+++ b/packages/banners/static/horizontal-rtl.inkscape.svg
@@ -1,233 +1,81 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <!-- Created with Inkscape (http://www.inkscape.org/) -->
-<svg
+<svg width="162.68884mm" height="42.772182mm" viewBox="0 0 162.68884 42.772182" version="1.1" id="svg1"
-   width="162.68884mm"
+	xml:space="preserve" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"
-   height="42.772182mm"
+	xmlns:svg="http://www.w3.org/2000/svg">
-   viewBox="0 0 162.68884 42.772182"
+	<defs id="defs1">
-   version="1.1"
+		<linearGradient id="linearGradient55">
-   id="svg1"
+			<stop style="stop-color:#ffffff;stop-opacity:1;" offset="0.30320638" id="stop54" />
-   xml:space="preserve"
+			<stop style="stop-color:#ffffff;stop-opacity:0;" offset="1" id="stop55" />
-   sodipodi:docname="design.inkscape.svg"
+		</linearGradient>
-   inkscape:version="1.3.1 (91b66b0783, 2023-11-16, custom)"
+		<linearGradient id="linearGradient14">
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+			<stop style="stop-color:#000000;stop-opacity:1;" offset="0.30320638" id="stop14" />
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+			<stop style="stop-color:#ffffff;stop-opacity:1;" offset="1" id="stop15" />
-   xmlns:xlink="http://www.w3.org/1999/xlink"
+		</linearGradient>
-   xmlns="http://www.w3.org/2000/svg"
+		<linearGradient id="linearGradient82-2">
-   xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
+			<stop style="stop-color:#ff0000;stop-opacity:1;" offset="0" id="stop104" />
-     id="namedview1"
+			<stop style="stop-color:#ffff00;stop-opacity:1;" offset="0.18269952" id="stop105" />
-     pagecolor="#505050"
+			<stop style="stop-color:#00ff00;stop-opacity:1;" offset="0.39030838" id="stop106" />
-     bordercolor="#eeeeee"
+			<stop style="stop-color:#00ffff;stop-opacity:1;" offset="0.59760052" id="stop107" />
-     borderopacity="1"
+			<stop style="stop-color:#0000ff;stop-opacity:1;" offset="0.79487675" id="stop108" />
-     inkscape:showpageshadow="0"
+			<stop style="stop-color:#ff00ff;stop-opacity:1;" offset="1" id="stop109" />
-     inkscape:pageopacity="0"
+		</linearGradient>
-     inkscape:pagecheckerboard="0"
+		<mask maskUnits="userSpaceOnUse" id="mask2">
-     inkscape:deskcolor="#505050"
+			<path id="path2"
-     inkscape:document-units="mm"
+				style="display:inline;opacity:1;fill:url(#linearGradient3);stroke-width:0.303146;paint-order:fill markers stroke"
-     inkscape:zoom="1.1011145"
+				d="M 16.447515,24.244587 H 162.08752 c 2.05812,0 3.71501,1.65689 3.71501,3.715001 v 23.139473 c 0,2.058112 -1.65689,3.715002 -3.71501,3.715002 H 16.447515 c -2.05811,0 -3.715,-1.65689 -3.715,-3.715002 V 27.959588 c 0,-2.058111 1.65689,-3.715001 3.715,-3.715001 z" />
-     inkscape:cx="155.75129"
+		</mask>
-     inkscape:cy="-119.42446"
+		<linearGradient xlink:href="#linearGradient14" id="linearGradient3" gradientUnits="userSpaceOnUse"
-     inkscape:window-width="2540"
+			gradientTransform="matrix(1,0,0,0.78569196,-1e-8,11.747095)" x1="12.732515" y1="45.720142" x2="165.80252"
-     inkscape:window-height="1023"
+			y2="15.906352" />
-     inkscape:window-x="0"
+		<linearGradient xlink:href="#linearGradient82-2" id="linearGradient10" gradientUnits="userSpaceOnUse"
-     inkscape:window-y="0"
+			gradientTransform="translate(-7.92313,-22.037966)" x1="18.784613" y1="57.455349" x2="159.75043"
-     inkscape:window-maximized="1"
+			y2="57.455349" />
-     inkscape:current-layer="layer2"
+		<linearGradient xlink:href="#linearGradient55" id="linearGradient11" gradientUnits="userSpaceOnUse"
-     showgrid="false"
+			gradientTransform="matrix(-1,0,0,0.78569196,170.61192,-7.6495857)" x1="12.732515" y1="45.720142"
-     inkscape:export-bgcolor="#ffffff00"><inkscape:page
+			x2="165.80252" y2="15.906352" />
-       x="0"
+		<filter style="color-interpolation-filters:sRGB" id="filter56" x="-0.031419723" y="-0.15732742"
-       y="5.1822312e-08"
+			width="1.0628394" height="1.3991792">
-       width="162.68884"
+			<feFlood result="flood" in="SourceGraphic" flood-opacity="0.200000" flood-color="rgb(0,0,0)"
-       height="42.772182"
+				id="feFlood55" />
-       id="page20"
+			<feGaussianBlur result="blur" in="SourceGraphic" stdDeviation="2.003924" id="feGaussianBlur55" />
-       margin="0"
+			<feOffset result="offset" in="blur" dx="0.000000" dy="2.583867" id="feOffset55" />
-       bleed="0"
+			<feComposite result="comp1" operator="in" in="flood" in2="offset" id="feComposite55" />
-       inkscape:export-filename="horizontal.inkscape.svg"
+			<feComposite result="comp2" operator="over" in="SourceGraphic" in2="comp1" id="feComposite56" />
-       inkscape:export-xdpi="318.59933"
+		</filter>
-       inkscape:export-ydpi="318.59933" /></sodipodi:namedview><defs
+	</defs>
-     id="defs1"><linearGradient
+	<path id="path56"
-       id="linearGradient55"
+		style="display:inline;fill:#ffffff;fill-opacity:1;stroke-width:0.303146;paint-order:fill markers stroke;filter:url(#filter56)"
-       inkscape:collect="always"
+		d="m 8.5244,4.809412 h 145.64001 c 2.05811,0 3.715,1.65689 3.715,3.715 v 23.139475 c 0,2.058115 -1.65689,3.715005 -3.715,3.715005 H 8.5244 c -2.05811,0 -3.715,-1.65689 -3.715,-3.715005 V 8.524412 c 0,-2.05811 1.65689,-3.715 3.715,-3.715 z" />
-       inkscape:label="background-gradient"><stop
+	<path id="path3" style="fill:url(#linearGradient10);stroke-width:0.0784105;paint-order:fill markers stroke"
-         style="stop-color:#ffffff;stop-opacity:1;"
+		d="m 12.34934,34.306982 h 137.9901 c 0.82427,0 1.48786,0.49524 1.48786,1.1104 0,0.61516 -0.66359,1.1104 -1.48786,1.1104 H 12.34934 c -0.82427,0 -1.48785,-0.49524 -1.48785,-1.1104 0,-0.61516 0.66358,-1.1104 1.48785,-1.1104 z" />
-         offset="0.30320638"
+	<path id="path4" style="display:inline;fill:#ffffff;stroke-width:0.302511;paint-order:fill markers stroke"
-         id="stop54" /><stop
+		d="M 154.1129,4.886402 H 8.57589 c -2.05665,0 -3.71237,1.652718 -3.71237,3.705644 v 23.081198 c 0,2.052926 1.65572,3.705643 3.71237,3.705643 H 154.1129 c 2.05665,0 3.71237,-1.652717 3.71237,-3.705643 V 8.592046 c 0,-2.052926 -1.65572,-3.705644 -3.71237,-3.705644 z" />
-         style="stop-color:#ffffff;stop-opacity:0;"
+	<image width="134.7771" height="89.851387" preserveAspectRatio="none"
-         offset="1"
+		xlink:href="../../../../../Downloads/alexandre-debieve-FO7JIlwjOtU-unsplash.jpg" id="image4" x="60.238495"
-         id="stop55" /></linearGradient><linearGradient
+		y="-3.5220199" mask="url(#mask2)" transform="matrix(-1,0,0,1,170.61192,-19.396681)"
-       id="linearGradient14"
+		style="image-rendering:optimizeSpeed" />
-       inkscape:collect="always"
+	<path id="path6"
-       inkscape:label="background-image-mask-gradient"><stop
+		style="display:inline;fill:url(#linearGradient11);stroke-width:0.303146;paint-order:fill markers stroke"
-         style="stop-color:#000000;stop-opacity:1;"
+		d="M 154.1644,4.847907 H 8.52439 c -2.05811,0 -3.715,1.65689 -3.715,3.715 v 23.139475 c 0,2.05811 1.65689,3.715 3.715,3.715 H 154.1644 c 2.05811,0 3.715,-1.65689 3.715,-3.715 V 8.562907 c 0,-2.05811 -1.65689,-3.715 -3.715,-3.715 z" />
-         offset="0.30320638"
+	<path id="path7" style="display:inline;fill:#ffffff;stroke-width:0.303146;paint-order:fill markers stroke"
-         id="stop14" /><stop
+		d="M 154.16441,4.809412 H 8.5244 c -2.05811,0 -3.715,1.65689 -3.715,3.715 v 23.139475 c 0,2.05811 1.65689,3.715 3.715,3.715 h 145.64001 c 2.05811,0 3.715,-1.65689 3.715,-3.715 V 8.524412 c 0,-2.05811 -1.65689,-3.715 -3.715,-3.715 z" />
-         style="stop-color:#ffffff;stop-opacity:1;"
+	<text xml:space="preserve"
-         offset="1"
+		style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-size:3.4638px;font-family:'Cal Sans';-inkscape-font-specification:'Cal Sans, Semi-Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:end;text-anchor:end;fill:#000000;fill-opacity:1;stroke-width:0.133036;paint-order:fill markers stroke"
-         id="stop15" /></linearGradient><linearGradient
+		inkscape:label="subtitle" x="132.04556" y="24.535566" id="text7">
-       id="linearGradient82-2"
+		<tspan id="tspan7"
-       inkscape:label="color-stripe-gradient"><stop
+			style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-size:3.4638px;font-family:'Cal Sans';-inkscape-font-specification:'Cal Sans, Semi-Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:end;text-anchor:end;fill:#000000;fill-opacity:1;stroke-width:0.133036"
-         style="stop-color:#ff0000;stop-opacity:1;"
+			x="132.04556" y="24.535566">Subtitle placeholder</tspan>
-         offset="0"
+	</text>
-         id="stop104" /><stop
+	<text xml:space="preserve"
-         style="stop-color:#ffff00;stop-opacity:1;"
+		style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-size:5.05275px;font-family:'Cal Sans';-inkscape-font-specification:'Cal Sans, Semi-Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:end;text-anchor:end;fill:#000000;fill-opacity:1;stroke-width:0.194064;paint-order:fill markers stroke"
-         offset="0.18269952"
+		inkscape:label="title" x=" 132.00441" y="19.122091" id="text8">
-         id="stop105" /><stop
+		<tspan id="tspan8"
-         style="stop-color:#00ff00;stop-opacity:1;"
+			style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-size:5.05275px;font-family:'Cal Sans';-inkscape-font-specification:'Cal Sans, Semi-Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:end;text-anchor:end;fill:#000000;fill-opacity:1;stroke-width:0.194064"
-         offset="0.39030838"
+			x="132.00441" y="19.122091">Title placeholder</tspan>
-         id="stop106" /><stop
+	</text>
-         style="stop-color:#00ffff;stop-opacity:1;"
+	<path fill="currentColor"
-         offset="0.59760052"
+		d="m 138.47176,14.808605 c -0.23588,0.06157 -0.38734,0.148721 -0.50554,0.264214 -0.16616,0.16342 -0.27456,0.392234 -0.33394,0.82424 -0.061,0.445075 -0.0622,1.034514 -0.0622,1.879454 v 4.66868 a 2.2727811,2.2727811 0 0 1 0.70765,-0.323048 1.7922937,1.7922937 0 0 1 0.19395,-0.03922 V 14.80861 Z m 0.9016,7.238362 h 6.91313 v -4.269908 c 0,-0.845486 -10e-4,-1.434925 -0.0622,-1.88 -0.0593,-0.432006 -0.1678,-0.660808 -0.33394,-0.82424 -0.16678,-0.162884 -0.39988,-0.269115 -0.84113,-0.326862 -0.45434,-0.05992 -1.05576,-0.061 -1.91868,-0.061 h -2.40461 c -0.54586,0 -0.98714,0 -1.35267,0.01585 z m 0.75178,0.883071 h -0.66244 c -0.58835,0 -0.79373,0.0036 -0.95172,0.04521 a 1.3423135,1.3423135 0 0 0 -0.92448,0.837858 c 0.008,0.208103 0.0235,0.391689 0.0457,0.555118 0.0593,0.432006 0.16781,0.660808 0.33395,0.82424 0.16678,0.162884 0.39985,0.269115 0.84113,0.326862 0.45433,0.05992 1.05576,0.061 1.91868,0.061 h 2.40461 c 0.86292,0 1.46488,-0.001 1.91868,-0.06047 0.44125,-0.0583 0.67497,-0.164512 0.84113,-0.327408 0.16616,-0.163419 0.27456,-0.392233 0.33394,-0.824235 0.05,-0.362818 0.0599,-0.822603 0.0616,-1.438194 h -3.7562 v 1.638125 c 0,0.162349 0,0.243512 -0.0572,0.276199 -0.0572,0.03269 -0.13507,-0.0039 -0.29091,-0.07627 l -0.74633,-0.347551 c -0.0533,-0.02452 -0.0795,-0.0365 -0.10789,-0.0365 -0.0284,0 -0.0546,0.01194 -0.10788,0.0365 l -0.74634,0.347566 c -0.15628,0.07245 -0.23425,0.108958 -0.29145,0.07626 -0.0566,-0.03268 -0.0566,-0.114397 -0.0566,-0.276199 z"
-         id="stop107" /><stop
+		id="path8" style="stroke-width:0.544769" />
-         style="stop-color:#0000ff;stop-opacity:1;"
+</svg>
         offset="0.79487675"
         id="stop108" /><stop
         style="stop-color:#ff00ff;stop-opacity:1;"
         offset="1"
         id="stop109" /></linearGradient><mask
       maskUnits="userSpaceOnUse"
       id="mask2"><path
         id="path2"
         style="display:inline;opacity:1;fill:url(#linearGradient3);stroke-width:0.303146;paint-order:fill markers stroke"
         inkscape:label="mask"
         d="M 16.447515,24.244587 H 162.08752 c 2.05812,0 3.71501,1.65689 3.71501,3.715001 v 23.139473 c 0,2.058112 -1.65689,3.715002 -3.71501,3.715002 H 16.447515 c -2.05811,0 -3.715,-1.65689 -3.715,-3.715002 V 27.959588 c 0,-2.058111 1.65689,-3.715001 3.715,-3.715001 z" /></mask><linearGradient
       inkscape:collect="always"
       xlink:href="#linearGradient14"
       id="linearGradient3"
       gradientUnits="userSpaceOnUse"
       gradientTransform="matrix(1,0,0,0.78569196,-1e-8,11.747095)"
       x1="12.732515"
       y1="45.720142"
       x2="165.80252"
       y2="15.906352" /><linearGradient
       inkscape:collect="always"
       xlink:href="#linearGradient82-2"
       id="linearGradient10"
       gradientUnits="userSpaceOnUse"
       gradientTransform="translate(309.94657,46.282782)"
       x1="18.784613"
       y1="57.455349"
       x2="159.75043"
       y2="57.455349" /><linearGradient
       inkscape:collect="always"
       xlink:href="#linearGradient55"
       id="linearGradient11"
       gradientUnits="userSpaceOnUse"
       gradientTransform="matrix(1,0,0,0.78569196,0.91790394,-0.86860867)"
       x1="12.732515"
       y1="45.720142"
       x2="165.80252"
       y2="15.906352" /><filter
       style="color-interpolation-filters:sRGB"
       inkscape:label="Drop Shadow"
       id="filter56"
       x="-0.031419724"
       y="-0.15732744"
       width="1.0628394"
       height="1.3991793"><feFlood
         result="flood"
         in="SourceGraphic"
         flood-opacity="0.200000"
         flood-color="rgb(0,0,0)"
         id="feFlood55" /><feGaussianBlur
         result="blur"
         in="SourceGraphic"
         stdDeviation="2.003924"
         id="feGaussianBlur55" /><feOffset
         result="offset"
         in="blur"
         dx="0.000000"
         dy="2.583867"
         id="feOffset55" /><feComposite
         result="comp1"
         operator="in"
         in="flood"
         in2="offset"
         id="feComposite55" /><feComposite
         result="comp2"
         operator="over"
         in="SourceGraphic"
         in2="comp1"
         id="feComposite56" /></filter></defs><g
     inkscape:groupmode="layer"
     id="layer2"
     inkscape:label="horizontal-rtl"
     inkscape:highlight-color="#3645a9"
     inkscape:export-filename="./horizontal-rtl.inkscape.svg"
     inkscape:export-xdpi="318.5993"
     inkscape:export-ydpi="318.5993"
     transform="translate(-317.8697,-68.320748)"><path
       id="path56"
       style="display:inline;opacity:1;fill:#ffffff;fill-opacity:1;stroke-width:0.303146;paint-order:fill markers stroke;filter:url(#filter56)"
       inkscape:label="shadow"
       d="m 326.3941,73.13016 h 145.64001 c 2.05811,0 3.715,1.65689 3.715,3.715 v 23.139475 c 0,2.058115 -1.65689,3.715005 -3.715,3.715005 H 326.3941 c -2.05811,0 -3.715,-1.65689 -3.715,-3.715005 V 76.84516 c 0,-2.05811 1.65689,-3.715 3.715,-3.715 z" /><path
       id="path3"
       style="fill:url(#linearGradient10);stroke-width:0.0784105;paint-order:fill markers stroke"
       inkscape:label="color-stripe"
       d="m 330.21904,102.62773 h 137.9901 c 0.82427,0 1.48786,0.49524 1.48786,1.1104 0,0.61516 -0.66359,1.1104 -1.48786,1.1104 h -137.9901 c -0.82427,0 -1.48785,-0.49524 -1.48785,-1.1104 0,-0.61516 0.66358,-1.1104 1.48785,-1.1104 z" /><g
       id="g7"
       inkscape:label="background"
       transform="matrix(-1,0,0,1,489.39952,61.539771)"><path
         id="path4"
         style="display:inline;opacity:1;fill:#ffffff;stroke-width:0.302511;paint-order:fill markers stroke"
         inkscape:label="fallback"
         d="M 17.416924,11.667379 H 162.95393 c 2.05665,0 3.71237,1.652718 3.71237,3.705644 v 23.081198 c 0,2.052926 -1.65572,3.705643 -3.71237,3.705643 H 17.416924 c -2.056654,0 -3.712372,-1.652717 -3.712372,-3.705643 V 15.373023 c 0,-2.052926 1.655718,-3.705644 3.712372,-3.705644 z" /><g
         id="g4"
         inkscape:label="image"><image
           width="134.7771"
           height="89.851387"
           preserveAspectRatio="none"
           xlink:href="../../../../../Downloads/alexandre-debieve-FO7JIlwjOtU-unsplash.jpg"
           id="image4"
           x="60.238495"
           y="-3.5220199"
           inkscape:label="embed"
           mask="url(#mask2)"
           transform="translate(0.91790394,-12.615704)"
           style="image-rendering:optimizeSpeed"
           inkscape:svg-dpi="1"
           inkscape:export-filename="horizontal.svg"
           inkscape:export-xdpi="96"
           inkscape:export-ydpi="96" /></g><path
         id="path6"
         style="display:inline;opacity:1;fill:url(#linearGradient11);stroke-width:0.303146;paint-order:fill markers stroke"
         inkscape:label="gradient"
         d="M 17.365419,11.628884 H 163.00543 c 2.05811,0 3.715,1.65689 3.715,3.715 v 23.139475 c 0,2.05811 -1.65689,3.715 -3.715,3.715 H 17.365419 c -2.05811,0 -3.715,-1.65689 -3.715,-3.715 V 15.343884 c 0,-2.05811 1.65689,-3.715 3.715,-3.715 z" /><path
         id="path7"
         style="display:inline;opacity:1;fill:#ffffff;stroke-width:0.303146;paint-order:fill markers stroke"
         inkscape:label="solid-color"
         d="M 17.365414,11.590389 H 163.00542 c 2.05811,0 3.715,1.65689 3.715,3.715 v 23.139475 c 0,2.05811 -1.65689,3.715 -3.715,3.715 H 17.365414 c -2.05811,0 -3.715,-1.65689 -3.715,-3.715 V 15.305389 c 0,-2.05811 1.65689,-3.715 3.715,-3.715 z" /></g><g
       id="g9"
       inkscape:label="content"
       transform="matrix(-1,0,0,1,488.48162,48.924067)"><text
         xml:space="preserve"
         style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-size:3.4638px;font-family:'Cal Sans';-inkscape-font-specification:'Cal Sans, Semi-Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:end;text-anchor:end;opacity:1;fill:#000000;fill-opacity:1;stroke-width:0.133036;paint-order:fill markers stroke"
         x="-38.566364"
         y="43.932247"
         id="text7"
         inkscape:label="subtitle"
         transform="scale(-1,1)"><tspan
           sodipodi:role="line"
           id="tspan7"
           style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-size:3.4638px;font-family:'Cal Sans';-inkscape-font-specification:'Cal Sans, Semi-Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:end;text-anchor:end;fill:#000000;fill-opacity:1;stroke-width:0.133036"
           x="-38.566364"
           y="43.932247">Subtitle placeholder</tspan></text><text
         xml:space="preserve"
         style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-size:5.05275px;font-family:'Cal Sans';-inkscape-font-specification:'Cal Sans, Semi-Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:end;text-anchor:end;opacity:1;fill:#000000;fill-opacity:1;stroke-width:0.194064;paint-order:fill markers stroke"
         x="-38.607517"
         y="38.518772"
         id="text8"
         inkscape:label="title"
         transform="scale(-1,1)"><tspan
           sodipodi:role="line"
           id="tspan8"
           style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-size:5.05275px;font-family:'Cal Sans';-inkscape-font-specification:'Cal Sans, Semi-Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:end;text-anchor:end;fill:#000000;fill-opacity:1;stroke-width:0.194064"
           x="-38.607517"
           y="38.518772">Title placeholder</tspan></text><g
         id="g8"
         inkscape:label="icon"
         transform="matrix(-1,0,0,1,57.367258,0)"><path
           fill="currentColor"
           d="m 25.227101,34.205286 c -0.235876,0.06157 -0.387336,0.148721 -0.505541,0.264214 -0.166159,0.16342 -0.274563,0.392234 -0.333944,0.82424 -0.06095,0.445075 -0.06219,1.034514 -0.06219,1.879454 v 4.66868 a 2.2727811,2.2727811 0 0 1 0.70765,-0.323048 1.7922937,1.7922937 0 0 1 0.193956,-0.03922 v -7.274315 z m 0.901602,7.238362 h 6.913129 V 37.17374 c 0,-0.845486 -10e-4,-1.434925 -0.06219,-1.88 -0.05929,-0.432006 -0.167805,-0.660808 -0.333943,-0.82424 -0.166777,-0.162884 -0.399875,-0.269115 -0.841133,-0.326862 -0.454332,-0.05992 -1.055759,-0.061 -1.918675,-0.061 h -2.404613 c -0.545855,0 -0.987134,0 -1.352664,0.01585 z m 0.751773,0.883071 h -0.662432 c -0.588352,0 -0.793735,0.0036 -0.95172,0.04521 a 1.3423135,1.3423135 0 0 0 -0.924479,0.837858 c 0.0083,0.208103 0.02347,0.391689 0.04572,0.555118 0.05929,0.432006 0.167806,0.660808 0.333945,0.82424 0.166776,0.162884 0.399853,0.269115 0.841132,0.326862 0.454333,0.05992 1.055759,0.061 1.918675,0.061 h 2.404613 c 0.862917,0 1.464878,-10e-4 1.918676,-0.06047 0.441258,-0.0583 0.674973,-0.164512 0.841132,-0.327408 0.166159,-0.163419 0.274564,-0.392233 0.333945,-0.824235 0.05003,-0.362818 0.05992,-0.822603 0.06157,-1.438194 h -3.756205 v 1.638125 c 0,0.162349 0,0.243512 -0.05724,0.276199 -0.05724,0.03269 -0.135068,-0.0039 -0.290912,-0.07627 L 28.19057,43.817203 c -0.05334,-0.02452 -0.07948,-0.0365 -0.107886,-0.0365 -0.02842,0 -0.05456,0.01194 -0.107885,0.0365 l -0.746338,0.347566 c -0.156276,0.07245 -0.234249,0.108958 -0.291447,0.07626 -0.05662,-0.03268 -0.05662,-0.114397 -0.05662,-0.276199 z"
           id="path8"
           style="stroke-width:0.544769"
           inkscape:label="icon-svg" /></g></g></g></svg>
--- a/packages/banners/static/horizontal-rtl.svg
+++ b/packages/banners/static/horizontal-rtl.svg
--- a/packages/banners/static/horizontal-rtl.svg.js
+++ b/packages/banners/static/horizontal-rtl.svg.js
@@ -0,0 +1,48 @@
 /* eslint-disable */
 const svg = `<svg width="162.68884mm" height="42.772182mm" viewBox="0 0 162.68884 42.772182" version="1.1" id="svg1" xml:space="preserve" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
 	<defs id="defs1">
 		<linearGradient id="linearGradient55">
 			<stop style="stop-color:#ffffff;stop-opacity:1;" offset="0.30320638" id="stop54" />
 			<stop style="stop-color:#ffffff;stop-opacity:0;" offset="1" id="stop55" />
 		</linearGradient>
 		<linearGradient id="linearGradient14">
 			<stop style="stop-color:#000000;stop-opacity:1;" offset="0.30320638" id="stop14" />
 			<stop style="stop-color:#ffffff;stop-opacity:1;" offset="1" id="stop15" />
 		</linearGradient>
 		<linearGradient id="linearGradient82-2">
 			<stop style="stop-color:#ff0000;stop-opacity:1;" offset="0" id="stop104" />
 			<stop style="stop-color:#ffff00;stop-opacity:1;" offset="0.18269952" id="stop105" />
 			<stop style="stop-color:#00ff00;stop-opacity:1;" offset="0.39030838" id="stop106" />
 			<stop style="stop-color:#00ffff;stop-opacity:1;" offset="0.59760052" id="stop107" />
 			<stop style="stop-color:#0000ff;stop-opacity:1;" offset="0.79487675" id="stop108" />
 			<stop style="stop-color:#ff00ff;stop-opacity:1;" offset="1" id="stop109" />
 		</linearGradient>
 		<mask maskUnits="userSpaceOnUse" id="mask2">
 			<path id="path2" style="display:inline;opacity:1;fill:url(#linearGradient3);stroke-width:0.303146;paint-order:fill markers stroke" d="M 16.447515,24.244587 H 162.08752 c 2.05812,0 3.71501,1.65689 3.71501,3.715001 v 23.139473 c 0,2.058112 -1.65689,3.715002 -3.71501,3.715002 H 16.447515 c -2.05811,0 -3.715,-1.65689 -3.715,-3.715002 V 27.959588 c 0,-2.058111 1.65689,-3.715001 3.715,-3.715001 z" />
 		</mask>
 		<linearGradient xlink:href="#linearGradient14" id="linearGradient3" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1,0,0,0.78569196,-1e-8,11.747095)" x1="12.732515" y1="45.720142" x2="165.80252" y2="15.906352" />
 		<linearGradient xlink:href="#linearGradient82-2" id="linearGradient10" gradientUnits="userSpaceOnUse" gradientTransform="translate(-7.92313,-22.037966)" x1="18.784613" y1="57.455349" x2="159.75043" y2="57.455349" />
 		<linearGradient xlink:href="#linearGradient55" id="linearGradient11" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-1,0,0,0.78569196,170.61192,-7.6495857)" x1="12.732515" y1="45.720142" x2="165.80252" y2="15.906352" />
 		<filter style="color-interpolation-filters:sRGB" id="filter56" x="-0.031419723" y="-0.15732742" width="1.0628394" height="1.3991792">
 			<feFlood result="flood" in="SourceGraphic" flood-opacity="0.200000" flood-color="rgb(0,0,0)" id="feFlood55" />
 			<feGaussianBlur result="blur" in="SourceGraphic" stdDeviation="2.003924" id="feGaussianBlur55" />
 			<feOffset result="offset" in="blur" dx="0.000000" dy="2.583867" id="feOffset55" />
 			<feComposite result="comp1" operator="in" in="flood" in2="offset" id="feComposite55" />
 			<feComposite result="comp2" operator="over" in="SourceGraphic" in2="comp1" id="feComposite56" />
 		</filter>
 	</defs>
 	<path id="path56" style="display:inline;fill:#ffffff;fill-opacity:1;stroke-width:0.303146;paint-order:fill markers stroke;filter:url(#filter56)" d="m 8.5244,4.809412 h 145.64001 c 2.05811,0 3.715,1.65689 3.715,3.715 v 23.139475 c 0,2.058115 -1.65689,3.715005 -3.715,3.715005 H 8.5244 c -2.05811,0 -3.715,-1.65689 -3.715,-3.715005 V 8.524412 c 0,-2.05811 1.65689,-3.715 3.715,-3.715 z" />
 	<path id="path3" style="fill:url(#linearGradient10);stroke-width:0.0784105;paint-order:fill markers stroke" d="m 12.34934,34.306982 h 137.9901 c 0.82427,0 1.48786,0.49524 1.48786,1.1104 0,0.61516 -0.66359,1.1104 -1.48786,1.1104 H 12.34934 c -0.82427,0 -1.48785,-0.49524 -1.48785,-1.1104 0,-0.61516 0.66358,-1.1104 1.48785,-1.1104 z" />
 	<path id="path4" style="display:inline;fill:#ffffff;stroke-width:0.302511;paint-order:fill markers stroke" d="M 154.1129,4.886402 H 8.57589 c -2.05665,0 -3.71237,1.652718 -3.71237,3.705644 v 23.081198 c 0,2.052926 1.65572,3.705643 3.71237,3.705643 H 154.1129 c 2.05665,0 3.71237,-1.652717 3.71237,-3.705643 V 8.592046 c 0,-2.052926 -1.65572,-3.705644 -3.71237,-3.705644 z" />
 	<image width="134.7771" height="89.851387" preserveAspectRatio="none" xlink:href="../../../../../Downloads/alexandre-debieve-FO7JIlwjOtU-unsplash.jpg" id="image4" x="60.238495" y="-3.5220199" mask="url(#mask2)" transform="matrix(-1,0,0,1,170.61192,-19.396681)" style="image-rendering:optimizeSpeed" />
 	<path id="path6" style="display:inline;fill:url(#linearGradient11);stroke-width:0.303146;paint-order:fill markers stroke" d="M 154.1644,4.847907 H 8.52439 c -2.05811,0 -3.715,1.65689 -3.715,3.715 v 23.139475 c 0,2.05811 1.65689,3.715 3.715,3.715 H 154.1644 c 2.05811,0 3.715,-1.65689 3.715,-3.715 V 8.562907 c 0,-2.05811 -1.65689,-3.715 -3.715,-3.715 z" />
 	<path id="path7" style="display:inline;fill:#ffffff;stroke-width:0.303146;paint-order:fill markers stroke" d="M 154.16441,4.809412 H 8.5244 c -2.05811,0 -3.715,1.65689 -3.715,3.715 v 23.139475 c 0,2.05811 1.65689,3.715 3.715,3.715 h 145.64001 c 2.05811,0 3.715,-1.65689 3.715,-3.715 V 8.524412 c 0,-2.05811 -1.65689,-3.715 -3.715,-3.715 z" />
 	<text data-banner-class="subtitle" xml:space="preserve" style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-size:3.4638px;font-family:'Cal Sans';-inkscape-font-specification:'Cal Sans, Semi-Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:end;text-anchor:end;fill:#000000;fill-opacity:1;stroke-width:0.133036;paint-order:fill markers stroke" x="132.04556" y="24.535566" id="text7">
 		<tspan id="tspan7" style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-size:3.4638px;font-family:'Cal Sans';-inkscape-font-specification:'Cal Sans, Semi-Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:end;text-anchor:end;fill:#000000;fill-opacity:1;stroke-width:0.133036" x="132.04556" y="24.535566">Subtitle placeholder</tspan>
 	</text>
 	<text data-banner-class="title" xml:space="preserve" style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-size:5.05275px;font-family:'Cal Sans';-inkscape-font-specification:'Cal Sans, Semi-Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:end;text-anchor:end;fill:#000000;fill-opacity:1;stroke-width:0.194064;paint-order:fill markers stroke" x=" 132.00441" y="19.122091" id="text8">
 		<tspan id="tspan8" style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-size:5.05275px;font-family:'Cal Sans';-inkscape-font-specification:'Cal Sans, Semi-Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:end;text-anchor:end;fill:#000000;fill-opacity:1;stroke-width:0.194064" x="132.00441" y="19.122091">Title placeholder</tspan>
 	</text>
 	<path fill="currentColor" d="m 138.47176,14.808605 c -0.23588,0.06157 -0.38734,0.148721 -0.50554,0.264214 -0.16616,0.16342 -0.27456,0.392234 -0.33394,0.82424 -0.061,0.445075 -0.0622,1.034514 -0.0622,1.879454 v 4.66868 a 2.2727811,2.2727811 0 0 1 0.70765,-0.323048 1.7922937,1.7922937 0 0 1 0.19395,-0.03922 V 14.80861 Z m 0.9016,7.238362 h 6.91313 v -4.269908 c 0,-0.845486 -10e-4,-1.434925 -0.0622,-1.88 -0.0593,-0.432006 -0.1678,-0.660808 -0.33394,-0.82424 -0.16678,-0.162884 -0.39988,-0.269115 -0.84113,-0.326862 -0.45434,-0.05992 -1.05576,-0.061 -1.91868,-0.061 h -2.40461 c -0.54586,0 -0.98714,0 -1.35267,0.01585 z m 0.75178,0.883071 h -0.66244 c -0.58835,0 -0.79373,0.0036 -0.95172,0.04521 a 1.3423135,1.3423135 0 0 0 -0.92448,0.837858 c 0.008,0.208103 0.0235,0.391689 0.0457,0.555118 0.0593,0.432006 0.16781,0.660808 0.33395,0.82424 0.16678,0.162884 0.39985,0.269115 0.84113,0.326862 0.45433,0.05992 1.05576,0.061 1.91868,0.061 h 2.40461 c 0.86292,0 1.46488,-0.001 1.91868,-0.06047 0.44125,-0.0583 0.67497,-0.164512 0.84113,-0.327408 0.16616,-0.163419 0.27456,-0.392233 0.33394,-0.824235 0.05,-0.362818 0.0599,-0.822603 0.0616,-1.438194 h -3.7562 v 1.638125 c 0,0.162349 0,0.243512 -0.0572,0.276199 -0.0572,0.03269 -0.13507,-0.0039 -0.29091,-0.07627 l -0.74633,-0.347551 c -0.0533,-0.02452 -0.0795,-0.0365 -0.10789,-0.0365 -0.0284,0 -0.0546,0.01194 -0.10788,0.0365 l -0.74634,0.347566 c -0.15628,0.07245 -0.23425,0.108958 -0.29145,0.07626 -0.0566,-0.03268 -0.0566,-0.114397 -0.0566,-0.276199 z" id="path8" style="stroke-width:0.544769" />
 </svg>`;
 export default svg;
--- a/packages/banners/static/horizontal.inkscape.svg
+++ b/packages/banners/static/horizontal.inkscape.svg
@@ -2,32 +2,29 @@
 <!-- Created with Inkscape (http://www.inkscape.org/) -->
 <svg width="162.68883mm" height="42.772179mm" viewBox="0 0 162.68882 42.772178" version="1.1" id="svg1"
-	xml:space="preserve" sodipodi:docname="design.inkscape.svg"
+	xml:space="preserve" sodipodi:docname="horizontal.inkscape.svg" inkscape:version="1.3.2 (091e20ef0f, 2023-11-25)"
-	inkscape:version="1.3.1 (91b66b0783, 2023-11-16, custom)"
+	inkscape:export-filename="horizontal.inkscape.svg" inkscape:export-xdpi="96" inkscape:export-ydpi="96"
 	xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
 	xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:xlink="http://www.w3.org/1999/xlink"
 	xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
 	<sodipodi:namedview id="namedview1" pagecolor="#505050" bordercolor="#eeeeee" borderopacity="1"
 		inkscape:showpageshadow="0" inkscape:pageopacity="0" inkscape:pagecheckerboard="0" inkscape:deskcolor="#505050"
-		inkscape:document-units="mm" inkscape:zoom="1.1011145" inkscape:cx="155.75129" inkscape:cy="-119.42446"
+		inkscape:document-units="mm" inkscape:zoom="2.2965073" inkscape:cx="210.31939" inkscape:cy="116.48123"
-		inkscape:window-width="2540" inkscape:window-height="1023" inkscape:window-x="0" inkscape:window-y="0"
+		inkscape:window-width="2560" inkscape:window-height="1011" inkscape:window-x="0" inkscape:window-y="32"
-		inkscape:window-maximized="1" inkscape:current-layer="layer2" showgrid="false"
+		inkscape:window-maximized="1" inkscape:current-layer="svg1" />
 		inkscape:export-bgcolor="#ffffff00">
 		<inkscape:page x="0" y="0" width="162.68883" height="42.772179" id="page19" margin="0" bleed="0" />
 	</sodipodi:namedview>
 	<defs id="defs1">
-		<linearGradient id="linearGradient55" inkscape:collect="always" inkscape:label="background-gradient">
+		<linearGradient id="linearGradient55">
 			<stop style="stop-color:#ffffff;stop-opacity:1;" offset="0.30320638" id="stop54" />
 			<stop style="stop-color:#ffffff;stop-opacity:0;" offset="1" id="stop55" />
 		</linearGradient>
-		<linearGradient id="linearGradient14" inkscape:collect="always" inkscape:label="background-image-mask-gradient">
+		<linearGradient id="linearGradient14">
 			<stop style="stop-color:#000000;stop-opacity:1;" offset="0.30320638" id="stop14" />
 			<stop style="stop-color:#ffffff;stop-opacity:1;" offset="1" id="stop15" />
 		</linearGradient>
-		<linearGradient inkscape:collect="always" xlink:href="#linearGradient82-2" id="linearGradient5" x1="18.784613"
+		<linearGradient xlink:href="#linearGradient82-2" id="linearGradient5" x1="18.784613" y1="57.455349"
-			y1="57.455349" x2="159.75043" y2="57.455349" gradientUnits="userSpaceOnUse"
+			x2="159.75043" y2="57.455349" gradientUnits="userSpaceOnUse"
-			gradientTransform="translate(310.57446,-12.675088)" />
+			gradientTransform="translate(-7.92311,-22.037977)" />
-		<linearGradient id="linearGradient82-2" inkscape:label="color-stripe-gradient">
+		<linearGradient id="linearGradient82-2">
 			<stop style="stop-color:#ff0000;stop-opacity:1;" offset="0" id="stop104" />
 			<stop style="stop-color:#ffff00;stop-opacity:1;" offset="0.18269952" id="stop105" />
 			<stop style="stop-color:#00ff00;stop-opacity:1;" offset="0.39030838" id="stop106" />
@@ -35,20 +32,19 @@
 			<stop style="stop-color:#0000ff;stop-opacity:1;" offset="0.79487675" id="stop108" />
 			<stop style="stop-color:#ff00ff;stop-opacity:1;" offset="1" id="stop109" />
 		</linearGradient>
-		<linearGradient inkscape:collect="always" xlink:href="#linearGradient55" id="linearGradient15" x1="12.732515"
+		<linearGradient xlink:href="#linearGradient55" id="linearGradient15" x1="12.732515" y1="45.720142"
-			y1="45.720142" x2="165.80252" y2="15.906352" gradientUnits="userSpaceOnUse"
+			x2="165.80252" y2="15.906352" gradientUnits="userSpaceOnUse"
-			gradientTransform="matrix(1,0,0,0.78569196,0.91790394,-0.86860867)" />
+			gradientTransform="matrix(1,0,0,0.78569196,-7.92312,-7.6495972)" />
 		<mask maskUnits="userSpaceOnUse" id="mask17">
 			<path id="path18"
 				style="display:inline;opacity:1;fill:url(#linearGradient18);stroke-width:0.303146;paint-order:fill markers stroke"
 				inkscape:label="mask"
 				d="M 16.447515,24.244587 H 162.08752 c 2.05812,0 3.71501,1.65689 3.71501,3.715001 v 23.139473 c 0,2.058112 -1.65689,3.715002 -3.71501,3.715002 H 16.447515 c -2.05811,0 -3.715,-1.65689 -3.715,-3.715002 V 27.959588 c 0,-2.058111 1.65689,-3.715001 3.715,-3.715001 z" />
 		</mask>
-		<linearGradient inkscape:collect="always" xlink:href="#linearGradient14" id="linearGradient18"
+		<linearGradient xlink:href="#linearGradient14" id="linearGradient18" gradientUnits="userSpaceOnUse"
-			gradientUnits="userSpaceOnUse" gradientTransform="matrix(1,0,0,0.78569196,-1e-8,11.747095)" x1="12.732515"
+			gradientTransform="matrix(1,0,0,0.78569196,-1e-8,11.747095)" x1="12.732515" y1="45.720142" x2="165.80252"
-			y1="45.720142" x2="165.80252" y2="15.906352" />
+			y2="15.906352" />
-		<filter style="color-interpolation-filters:sRGB" inkscape:label="Drop Shadow" id="filter56" x="-0.031419724"
+		<filter style="color-interpolation-filters:sRGB" id="filter56" x="-0.031419724" y="-0.15732745"
-			y="-0.15732744" width="1.0628394" height="1.3991793">
+			width="1.0628394" height="1.3991793">
 			<feFlood result="flood" in="SourceGraphic" flood-opacity="0.200000" flood-color="rgb(0,0,0)"
 				id="feFlood55" />
 			<feGaussianBlur result="blur" in="SourceGraphic" stdDeviation="2.003924" id="feGaussianBlur55" />
@@ -57,60 +53,39 @@
 			<feComposite result="comp2" operator="over" in="SourceGraphic" in2="comp1" id="feComposite56" />
 		</filter>
 	</defs>
-	<g inkscape:label="horizontal" inkscape:groupmode="layer" id="layer1"
+	<path id="path20"
-		inkscape:export-filename="horizontal.inkscape.svg" inkscape:export-xdpi="318.59933"
+		style="display:inline;fill:#ffffff;fill-opacity:1;stroke-width:0.303146;paint-order:fill markers stroke;filter:url(#filter56)"
-		inkscape:export-ydpi="318.59933" transform="translate(-318.49757,-9.3628894)">
+		d="M 8.524394,4.8094005 H 154.1644 c 2.05811,0 3.715,1.65689 3.715,3.715 V 31.663876 c 0,2.05811 -1.65689,3.714999 -3.715,3.714999 H 8.524394 c -2.05811,0 -3.715,-1.656889 -3.715,-3.715 V 8.5244005 c 0,-2.05811 1.65689,-3.715 3.715,-3.715 z" />
-		<path id="path20"
+	<path id="color-stripe" style="fill:url(#linearGradient5);stroke-width:0.0784105;paint-order:fill markers stroke"
-			style="display:inline;opacity:1;fill:#ffffff;fill-opacity:1;stroke-width:0.303146;paint-order:fill markers stroke;filter:url(#filter56)"
+		d="m 12.34935,34.30697 h 137.9901 c 0.82427,0 1.48786,0.49524 1.48786,1.1104 0,0.61516 -0.66359,1.1104 -1.48786,1.1104 H 12.34935 c -0.82427,0 -1.48785,-0.49524 -1.48785,-1.1104 0,-0.61516 0.66358,-1.1104 1.48785,-1.1104 z" />
-			inkscape:label="shadow"
+	<path id="fallback" style="display:inline;fill:#ffffff;stroke-width:0.302511;paint-order:fill markers stroke"
-			d="M 17.365414,11.590389 H 163.00542 c 2.05811,0 3.715,1.65689 3.715,3.715 v 23.139475 c 0,2.05811 -1.65689,3.715 -3.715,3.715 H 17.365414 c -2.05811,0 -3.715,-1.65689 -3.715,-3.715 V 15.305389 c 0,-2.05811 1.65689,-3.715 3.715,-3.715 z"
+		d="m 8.5759,4.8863906 h 145.53701 c 2.05665,0 3.71237,1.652718 3.71237,3.705644 V 31.673233 c 0,2.052926 -1.65572,3.705643 -3.71237,3.705643 H 8.5759 c -2.05665,0 -3.71237,-1.652717 -3.71237,-3.705643 V 8.5920346 c 0,-2.052926 1.65572,-3.705644 3.71237,-3.705644 z" />
-			transform="translate(309.65655,2.5819009)" />
+	<image width="134.7771" height="89.851387" preserveAspectRatio="none"
-		<path id="color-stripe"
+		xlink:href="../../../../../Downloads/alexandre-debieve-FO7JIlwjOtU-unsplash.jpg" id="embed" x="60.238495"
-			style="fill:url(#linearGradient5);stroke-width:0.0784105;paint-order:fill markers stroke"
+		y="-3.5220199" mask="url(#mask17)" transform="translate(-7.92312,-19.396692)"
-			inkscape:label="color-stripe"
+		style="image-rendering:optimizeSpeed" />
-			d="m 330.84692,43.669859 h 137.9901 c 0.82427,0 1.48786,0.49524 1.48786,1.1104 0,0.61516 -0.66359,1.1104 -1.48786,1.1104 h -137.9901 c -0.82427,0 -1.48785,-0.49524 -1.48785,-1.1104 0,-0.61516 0.66358,-1.1104 1.48785,-1.1104 z" />
+	<path id="gradient"
-		<g id="background" inkscape:label="background" transform="translate(309.65655,2.5819009)">
+		style="display:inline;fill:url(#linearGradient15);stroke-width:0.303146;paint-order:fill markers stroke"
-			<path id="fallback"
+		d="m 8.5244,4.8478956 h 145.64001 c 2.05811,0 3.715,1.65689 3.715,3.715 V 31.702371 c 0,2.05811 -1.65689,3.715 -3.715,3.715 H 8.5244 c -2.05811,0 -3.715,-1.65689 -3.715,-3.715 V 8.5628956 c 0,-2.05811 1.65689,-3.715 3.715,-3.715 z"
-				style="display:inline;opacity:1;fill:#ffffff;stroke-width:0.302511;paint-order:fill markers stroke"
+		inkscape:label="gradient" />
-				inkscape:label="fallback"
+	<path id="solid-color" style="display:inline;fill:#ffffff;stroke-width:0.303146;paint-order:fill markers stroke"
-				d="M 17.416924,11.667379 H 162.95393 c 2.05665,0 3.71237,1.652718 3.71237,3.705644 v 23.081198 c 0,2.052926 -1.65572,3.705643 -3.71237,3.705643 H 17.416924 c -2.056654,0 -3.712372,-1.652717 -3.712372,-3.705643 V 15.373023 c 0,-2.052926 1.655718,-3.705644 3.712372,-3.705644 z" />
+		d="M 8.52439,4.8094006 H 154.1644 c 2.05811,0 3.715,1.65689 3.715,3.715 V 31.663876 c 0,2.05811 -1.65689,3.715 -3.715,3.715 H 8.52439 c -2.05811,0 -3.715,-1.65689 -3.715,-3.715 V 8.5244006 c 0,-2.05811 1.65689,-3.715 3.715,-3.715 z" />
-			<g id="image" inkscape:label="image">
+	<text xml:space="preserve"
-				<image width="134.7771" height="89.851387" preserveAspectRatio="none"
+		style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-size:3.4638px;font-family:'Cal Sans';-inkscape-font-specification:'Cal Sans, Semi-Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#000000;fill-opacity:1;stroke-width:0.133036;paint-order:fill markers stroke"
-					xlink:href="../../../../../Downloads/alexandre-debieve-FO7JIlwjOtU-unsplash.jpg" id="embed"
+		x="30.573963" y="24.535555" id="subtitle" inkscape:label="subtitle">
-					x="60.238495" y="-3.5220199" inkscape:label="embed" mask="url(#mask17)"
+		<title id="title12">subtitle</title>
-					transform="translate(0.91790394,-12.615704)" style="image-rendering:optimizeSpeed"
+		<tspan id="tspan4"
-					inkscape:svg-dpi="1" inkscape:export-filename="horizontal.svg" inkscape:export-xdpi="96"
+			style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-size:3.4638px;font-family:'Cal Sans';-inkscape-font-specification:'Cal Sans, Semi-Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#000000;fill-opacity:1;stroke-width:0.133036"
-					inkscape:export-ydpi="96" />
+			x="30.573963" y="24.535555">Subtitle placeholder</tspan>
-			</g>
+	</text>
-			<path id="gradient"
+	<text xml:space="preserve"
-				style="display:inline;opacity:1;fill:url(#linearGradient15);stroke-width:0.303146;paint-order:fill markers stroke"
+		style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-size:5.05275px;font-family:'Cal Sans';-inkscape-font-specification:'Cal Sans, Semi-Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#000000;fill-opacity:1;stroke-width:0.194064;paint-order:fill markers stroke"
-				inkscape:label="gradient"
+		x="30.532825" y="19.122078" id="title" inkscape:label="title">
-				d="M 17.365419,11.628884 H 163.00543 c 2.05811,0 3.715,1.65689 3.715,3.715 v 23.139475 c 0,2.05811 -1.65689,3.715 -3.715,3.715 H 17.365419 c -2.05811,0 -3.715,-1.65689 -3.715,-3.715 V 15.343884 c 0,-2.05811 1.65689,-3.715 3.715,-3.715 z" />
+		<tspan id="tspan3"
-			<path id="solid-color"
+			style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-size:5.05275px;font-family:'Cal Sans';-inkscape-font-specification:'Cal Sans, Semi-Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#000000;fill-opacity:1;stroke-width:0.194064"
-				style="display:inline;opacity:1;fill:#ffffff;stroke-width:0.303146;paint-order:fill markers stroke"
+			x="30.532825" y="19.122078">Title placeholder</tspan>
-				inkscape:label="solid-color"
+	</text>
-				d="M 17.365414,11.590389 H 163.00542 c 2.05811,0 3.715,1.65689 3.715,3.715 v 23.139475 c 0,2.05811 -1.65689,3.715 -3.715,3.715 H 17.365414 c -2.05811,0 -3.715,-1.65689 -3.715,-3.715 V 15.305389 c 0,-2.05811 1.65689,-3.715 3.715,-3.715 z" />
+	<path fill="currentColor"
-		</g>
+		d="m 17.30398,14.808594 c -0.23588,0.06157 -0.38733,0.148721 -0.50554,0.264214 -0.16616,0.16342 -0.27456,0.392234 -0.33394,0.82424 -0.0609,0.445075 -0.0622,1.034514 -0.0622,1.879454 v 4.66868 a 2.2727811,2.2727811 0 0 1 0.70765,-0.323048 1.7922937,1.7922937 0 0 1 0.19395,-0.03922 v -7.274315 z m 0.9016,7.238362 h 6.91313 v -4.269908 c 0,-0.845486 -0.001,-1.434925 -0.0622,-1.88 -0.0593,-0.432006 -0.1678,-0.660808 -0.33394,-0.82424 -0.16678,-0.162884 -0.39988,-0.269115 -0.84113,-0.326862 -0.45434,-0.05992 -1.05576,-0.061 -1.91868,-0.061 h -2.40461 c -0.54586,0 -0.98714,0 -1.35267,0.01585 z m 0.75178,0.883071 h -0.66244 c -0.58835,0 -0.79373,0.0036 -0.95172,0.04521 a 1.3423135,1.3423135 0 0 0 -0.92448,0.837858 c 0.008,0.208103 0.0235,0.391689 0.0457,0.555118 0.0593,0.432006 0.16781,0.660808 0.33395,0.82424 0.16678,0.162884 0.39985,0.269115 0.84113,0.326862 0.45434,0.05992 1.05576,0.061 1.91868,0.061 h 2.40461 c 0.86292,0 1.46488,-10e-4 1.91868,-0.06047 0.44125,-0.0583 0.67497,-0.164512 0.84113,-0.327408 0.16616,-0.163419 0.27456,-0.392233 0.33394,-0.824235 0.05,-0.362818 0.0599,-0.822603 0.0616,-1.438194 h -3.7562 v 1.638125 c 0,0.162349 0,0.243512 -0.0572,0.276199 -0.0572,0.03269 -0.13507,-0.0039 -0.29091,-0.07627 l -0.74638,-0.347551 c -0.0533,-0.02452 -0.0795,-0.0365 -0.10789,-0.0365 -0.0284,0 -0.0546,0.01194 -0.10788,0.0365 l -0.74634,0.347566 c -0.15628,0.07245 -0.23425,0.108958 -0.29145,0.07626 -0.0566,-0.03268 -0.0566,-0.114397 -0.0566,-0.276199 z"
-		<g id="content" inkscape:label="content" transform="translate(310.57445,-10.033803)">
+		id="icon-svg" style="stroke-width:0.544769" />
 			<title id="title11">content</title><text xml:space="preserve"
 				style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-size:3.4638px;font-family:'Cal Sans';-inkscape-font-specification:'Cal Sans, Semi-Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;opacity:1;fill:#000000;fill-opacity:1;stroke-width:0.133036;paint-order:fill markers stroke"
 				x="38.497089" y="43.932247" id="subtitle" inkscape:label="subtitle">
 				<title id="title12">subtitle</title>
 				<tspan sodipodi:role="line" id="tspan4"
 					style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-size:3.4638px;font-family:'Cal Sans';-inkscape-font-specification:'Cal Sans, Semi-Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#000000;fill-opacity:1;stroke-width:0.133036"
 					x="38.497089" y="43.932247">Subtitle placeholder</tspan>
 			</text><text xml:space="preserve"
 				style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-size:5.05275px;font-family:'Cal Sans';-inkscape-font-specification:'Cal Sans, Semi-Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;opacity:1;fill:#000000;fill-opacity:1;stroke-width:0.194064;paint-order:fill markers stroke"
 				x="38.455933" y="38.518772" id="title" inkscape:label="title">
 				<tspan sodipodi:role="line" id="tspan3"
 					style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-size:5.05275px;font-family:'Cal Sans';-inkscape-font-specification:'Cal Sans, Semi-Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#000000;fill-opacity:1;stroke-width:0.194064"
 					x="38.455933" y="38.518772">Title placeholder</tspan>
 			</text>
 			<g id="icon" inkscape:label="icon">
 				<path fill="currentColor"
 					d="m 25.227101,34.205286 c -0.235876,0.06157 -0.387336,0.148721 -0.505541,0.264214 -0.166159,0.16342 -0.274563,0.392234 -0.333944,0.82424 -0.06095,0.445075 -0.06219,1.034514 -0.06219,1.879454 v 4.66868 a 2.2727811,2.2727811 0 0 1 0.70765,-0.323048 1.7922937,1.7922937 0 0 1 0.193956,-0.03922 v -7.274315 z m 0.901602,7.238362 h 6.913129 V 37.17374 c 0,-0.845486 -10e-4,-1.434925 -0.06219,-1.88 -0.05929,-0.432006 -0.167805,-0.660808 -0.333943,-0.82424 -0.166777,-0.162884 -0.399875,-0.269115 -0.841133,-0.326862 -0.454332,-0.05992 -1.055759,-0.061 -1.918675,-0.061 h -2.404613 c -0.545855,0 -0.987134,0 -1.352664,0.01585 z m 0.751773,0.883071 h -0.662432 c -0.588352,0 -0.793735,0.0036 -0.95172,0.04521 a 1.3423135,1.3423135 0 0 0 -0.924479,0.837858 c 0.0083,0.208103 0.02347,0.391689 0.04572,0.555118 0.05929,0.432006 0.167806,0.660808 0.333945,0.82424 0.166776,0.162884 0.399853,0.269115 0.841132,0.326862 0.454333,0.05992 1.055759,0.061 1.918675,0.061 h 2.404613 c 0.862917,0 1.464878,-10e-4 1.918676,-0.06047 0.441258,-0.0583 0.674973,-0.164512 0.841132,-0.327408 0.166159,-0.163419 0.274564,-0.392233 0.333945,-0.824235 0.05003,-0.362818 0.05992,-0.822603 0.06157,-1.438194 h -3.756205 v 1.638125 c 0,0.162349 0,0.243512 -0.05724,0.276199 -0.05724,0.03269 -0.135068,-0.0039 -0.290912,-0.07627 L 28.19057,43.817203 c -0.05334,-0.02452 -0.07948,-0.0365 -0.107886,-0.0365 -0.02842,0 -0.05456,0.01194 -0.107885,0.0365 l -0.746338,0.347566 c -0.156276,0.07245 -0.234249,0.108958 -0.291447,0.07626 -0.05662,-0.03268 -0.05662,-0.114397 -0.05662,-0.276199 z"
 					id="icon-svg" style="stroke-width:0.544769" inkscape:label="icon-svg" />
 			</g>
 		</g>
 	</g>
 </svg>
--- a/packages/banners/static/horizontal.svg
+++ b/packages/banners/static/horizontal.svg
@@ -1,18 +1,16 @@
-<svg width="162.68883mm" height="42.772179mm" viewBox="0 0 162.68882 42.772178" version="1.1" id="svg1" xml:space="preserve" sodipodi:docname="design.inkscape.svg" inkscape:version="1.3.1 (91b66b0783, 2023-11-16, custom)" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+<svg width="162.68883mm" height="42.772179mm" viewBox="0 0 162.68882 42.772178" version="1.1" id="svg1" xml:space="preserve" sodipodi:docname="horizontal.inkscape.svg" inkscape:version="1.3.2 (091e20ef0f, 2023-11-25)" inkscape:export-filename="horizontal.inkscape.svg" inkscape:export-xdpi="96" inkscape:export-ydpi="96" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
-	<sodipodi:namedview id="namedview1" pagecolor="#505050" bordercolor="#eeeeee" borderopacity="1" inkscape:showpageshadow="0" inkscape:pageopacity="0" inkscape:pagecheckerboard="0" inkscape:deskcolor="#505050" inkscape:document-units="mm" inkscape:zoom="1.1011145" inkscape:cx="155.75129" inkscape:cy="-119.42446" inkscape:window-width="2540" inkscape:window-height="1023" inkscape:window-x="0" inkscape:window-y="0" inkscape:window-maximized="1" inkscape:current-layer="layer2" showgrid="false" inkscape:export-bgcolor="#ffffff00">
+	<sodipodi:namedview id="namedview1" pagecolor="#505050" bordercolor="#eeeeee" borderopacity="1" inkscape:showpageshadow="0" inkscape:pageopacity="0" inkscape:pagecheckerboard="0" inkscape:deskcolor="#505050" inkscape:document-units="mm" inkscape:zoom="2.2965073" inkscape:cx="210.31939" inkscape:cy="116.48123" inkscape:window-width="2560" inkscape:window-height="1011" inkscape:window-x="0" inkscape:window-y="32" inkscape:window-maximized="1" inkscape:current-layer="svg1" />
 		<inkscape:page x="0" y="0" width="162.68883" height="42.772179" id="page19" margin="0" bleed="0" />
 	</sodipodi:namedview>
 	<defs id="defs1">
-		<linearGradient data-banner-class="background-gradient" id="linearGradient55">
+		<linearGradient id="linearGradient55">
 			<stop style="stop-color:#ffffff;stop-opacity:1;" offset="0.30320638" id="stop54" />
 			<stop style="stop-color:#ffffff;stop-opacity:0;" offset="1" id="stop55" />
 		</linearGradient>
-		<linearGradient data-banner-class="background-image-mask-gradient" id="linearGradient14">
+		<linearGradient id="linearGradient14">
 			<stop style="stop-color:#000000;stop-opacity:1;" offset="0.30320638" id="stop14" />
 			<stop style="stop-color:#ffffff;stop-opacity:1;" offset="1" id="stop15" />
 		</linearGradient>
-		<linearGradient inkscape:collect="always" xlink:href="#linearGradient82-2" id="linearGradient5" x1="18.784613" y1="57.455349" x2="159.75043" y2="57.455349" gradientUnits="userSpaceOnUse" gradientTransform="translate(310.57446,-12.675088)" />
+		<linearGradient xlink:href="#linearGradient82-2" id="linearGradient5" x1="18.784613" y1="57.455349" x2="159.75043" y2="57.455349" gradientUnits="userSpaceOnUse" gradientTransform="translate(-7.92311,-22.037977)" />
-		<linearGradient data-banner-class="color-stripe-gradient" id="linearGradient82-2">
+		<linearGradient id="linearGradient82-2">
 			<stop style="stop-color:#ff0000;stop-opacity:1;" offset="0" id="stop104" />
 			<stop style="stop-color:#ffff00;stop-opacity:1;" offset="0.18269952" id="stop105" />
 			<stop style="stop-color:#00ff00;stop-opacity:1;" offset="0.39030838" id="stop106" />
@@ -20,12 +18,12 @@
 			<stop style="stop-color:#0000ff;stop-opacity:1;" offset="0.79487675" id="stop108" />
 			<stop style="stop-color:#ff00ff;stop-opacity:1;" offset="1" id="stop109" />
 		</linearGradient>
-		<linearGradient inkscape:collect="always" xlink:href="#linearGradient55" id="linearGradient15" x1="12.732515" y1="45.720142" x2="165.80252" y2="15.906352" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1,0,0,0.78569196,0.91790394,-0.86860867)" />
+		<linearGradient xlink:href="#linearGradient55" id="linearGradient15" x1="12.732515" y1="45.720142" x2="165.80252" y2="15.906352" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1,0,0,0.78569196,-7.92312,-7.6495972)" />
 		<mask maskUnits="userSpaceOnUse" id="mask17">
-			<path data-banner-class="mask" id="path18" style="display:inline;opacity:1;fill:url(#linearGradient18);stroke-width:0.303146;paint-order:fill markers stroke" d="M 16.447515,24.244587 H 162.08752 c 2.05812,0 3.71501,1.65689 3.71501,3.715001 v 23.139473 c 0,2.058112 -1.65689,3.715002 -3.71501,3.715002 H 16.447515 c -2.05811,0 -3.715,-1.65689 -3.715,-3.715002 V 27.959588 c 0,-2.058111 1.65689,-3.715001 3.715,-3.715001 z" />
+			<path id="path18" style="display:inline;opacity:1;fill:url(#linearGradient18);stroke-width:0.303146;paint-order:fill markers stroke" d="M 16.447515,24.244587 H 162.08752 c 2.05812,0 3.71501,1.65689 3.71501,3.715001 v 23.139473 c 0,2.058112 -1.65689,3.715002 -3.71501,3.715002 H 16.447515 c -2.05811,0 -3.715,-1.65689 -3.715,-3.715002 V 27.959588 c 0,-2.058111 1.65689,-3.715001 3.715,-3.715001 z" />
 		</mask>
-		<linearGradient inkscape:collect="always" xlink:href="#linearGradient14" id="linearGradient18" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1,0,0,0.78569196,-1e-8,11.747095)" x1="12.732515" y1="45.720142" x2="165.80252" y2="15.906352" />
+		<linearGradient xlink:href="#linearGradient14" id="linearGradient18" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1,0,0,0.78569196,-1e-8,11.747095)" x1="12.732515" y1="45.720142" x2="165.80252" y2="15.906352" />
-		<filter data-banner-class="Drop Shadow" style="color-interpolation-filters:sRGB" id="filter56" x="-0.031419724" y="-0.15732744" width="1.0628394" height="1.3991793">
+		<filter style="color-interpolation-filters:sRGB" id="filter56" x="-0.031419724" y="-0.15732745" width="1.0628394" height="1.3991793">
 			<feFlood result="flood" in="SourceGraphic" flood-opacity="0.200000" flood-color="rgb(0,0,0)" id="feFlood55" />
 			<feGaussianBlur result="blur" in="SourceGraphic" stdDeviation="2.003924" id="feGaussianBlur55" />
 			<feOffset result="offset" in="blur" dx="0.000000" dy="2.583867" id="feOffset55" />
@@ -33,27 +31,18 @@
 			<feComposite result="comp2" operator="over" in="SourceGraphic" in2="comp1" id="feComposite56" />
 		</filter>
 	</defs>
-	<g data-banner-class="horizontal" id="layer1" transform="translate(-318.49757,-9.3628894)">
+	<path id="path20" style="display:inline;fill:#ffffff;fill-opacity:1;stroke-width:0.303146;paint-order:fill markers stroke;filter:url(#filter56)" d="M 8.524394,4.8094005 H 154.1644 c 2.05811,0 3.715,1.65689 3.715,3.715 V 31.663876 c 0,2.05811 -1.65689,3.714999 -3.715,3.714999 H 8.524394 c -2.05811,0 -3.715,-1.656889 -3.715,-3.715 V 8.5244005 c 0,-2.05811 1.65689,-3.715 3.715,-3.715 z" />
-		<path data-banner-class="shadow" id="path20" style="display:inline;opacity:1;fill:#ffffff;fill-opacity:1;stroke-width:0.303146;paint-order:fill markers stroke;filter:url(#filter56)" d="M 17.365414,11.590389 H 163.00542 c 2.05811,0 3.715,1.65689 3.715,3.715 v 23.139475 c 0,2.05811 -1.65689,3.715 -3.715,3.715 H 17.365414 c -2.05811,0 -3.715,-1.65689 -3.715,-3.715 V 15.305389 c 0,-2.05811 1.65689,-3.715 3.715,-3.715 z" transform="translate(309.65655,2.5819009)" />
+	<path id="color-stripe" style="fill:url(#linearGradient5);stroke-width:0.0784105;paint-order:fill markers stroke" d="m 12.34935,34.30697 h 137.9901 c 0.82427,0 1.48786,0.49524 1.48786,1.1104 0,0.61516 -0.66359,1.1104 -1.48786,1.1104 H 12.34935 c -0.82427,0 -1.48785,-0.49524 -1.48785,-1.1104 0,-0.61516 0.66358,-1.1104 1.48785,-1.1104 z" />
-		<path data-banner-class="color-stripe" id="color-stripe" style="fill:url(#linearGradient5);stroke-width:0.0784105;paint-order:fill markers stroke" d="m 330.84692,43.669859 h 137.9901 c 0.82427,0 1.48786,0.49524 1.48786,1.1104 0,0.61516 -0.66359,1.1104 -1.48786,1.1104 h -137.9901 c -0.82427,0 -1.48785,-0.49524 -1.48785,-1.1104 0,-0.61516 0.66358,-1.1104 1.48785,-1.1104 z" />
+	<path id="fallback" style="display:inline;fill:#ffffff;stroke-width:0.302511;paint-order:fill markers stroke" d="m 8.5759,4.8863906 h 145.53701 c 2.05665,0 3.71237,1.652718 3.71237,3.705644 V 31.673233 c 0,2.052926 -1.65572,3.705643 -3.71237,3.705643 H 8.5759 c -2.05665,0 -3.71237,-1.652717 -3.71237,-3.705643 V 8.5920346 c 0,-2.052926 1.65572,-3.705644 3.71237,-3.705644 z" />
-		<g data-banner-class="background" id="background" transform="translate(309.65655,2.5819009)">
+	<image width="134.7771" height="89.851387" preserveAspectRatio="none" xlink:href="../../../../../Downloads/alexandre-debieve-FO7JIlwjOtU-unsplash.jpg" id="embed" x="60.238495" y="-3.5220199" mask="url(#mask17)" transform="translate(-7.92312,-19.396692)" style="image-rendering:optimizeSpeed" />
-			<path data-banner-class="fallback" id="fallback" style="display:inline;opacity:1;fill:#ffffff;stroke-width:0.302511;paint-order:fill markers stroke" d="M 17.416924,11.667379 H 162.95393 c 2.05665,0 3.71237,1.652718 3.71237,3.705644 v 23.081198 c 0,2.052926 -1.65572,3.705643 -3.71237,3.705643 H 17.416924 c -2.056654,0 -3.712372,-1.652717 -3.712372,-3.705643 V 15.373023 c 0,-2.052926 1.655718,-3.705644 3.712372,-3.705644 z" />
+	<path data-banner-class="gradient" id="gradient" style="display:inline;fill:url(#linearGradient15);stroke-width:0.303146;paint-order:fill markers stroke" d="m 8.5244,4.8478956 h 145.64001 c 2.05811,0 3.715,1.65689 3.715,3.715 V 31.702371 c 0,2.05811 -1.65689,3.715 -3.715,3.715 H 8.5244 c -2.05811,0 -3.715,-1.65689 -3.715,-3.715 V 8.5628956 c 0,-2.05811 1.65689,-3.715 3.715,-3.715 z" />
-			<g data-banner-class="image" id="image">
+	<path id="solid-color" style="display:inline;fill:#ffffff;stroke-width:0.303146;paint-order:fill markers stroke" d="M 8.52439,4.8094006 H 154.1644 c 2.05811,0 3.715,1.65689 3.715,3.715 V 31.663876 c 0,2.05811 -1.65689,3.715 -3.715,3.715 H 8.52439 c -2.05811,0 -3.715,-1.65689 -3.715,-3.715 V 8.5244006 c 0,-2.05811 1.65689,-3.715 3.715,-3.715 z" />
-				<image data-banner-class="embed" width="134.7771" height="89.851387" preserveAspectRatio="none" xlink:href="../../../../../Downloads/alexandre-debieve-FO7JIlwjOtU-unsplash.jpg" id="embed" x="60.238495" y="-3.5220199" mask="url(#mask17)" transform="translate(0.91790394,-12.615704)" style="image-rendering:optimizeSpeed" />
+	<text data-banner-class="subtitle" xml:space="preserve" style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-size:3.4638px;font-family:'Cal Sans';-inkscape-font-specification:'Cal Sans, Semi-Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#000000;fill-opacity:1;stroke-width:0.133036;paint-order:fill markers stroke" x="30.573963" y="24.535555" id="subtitle">
-			</g>
+		<title id="title12">subtitle</title>
-			<path data-banner-class="gradient" id="gradient" style="display:inline;opacity:1;fill:url(#linearGradient15);stroke-width:0.303146;paint-order:fill markers stroke" d="M 17.365419,11.628884 H 163.00543 c 2.05811,0 3.715,1.65689 3.715,3.715 v 23.139475 c 0,2.05811 -1.65689,3.715 -3.715,3.715 H 17.365419 c -2.05811,0 -3.715,-1.65689 -3.715,-3.715 V 15.343884 c 0,-2.05811 1.65689,-3.715 3.715,-3.715 z" />
+		<tspan id="tspan4" style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-size:3.4638px;font-family:'Cal Sans';-inkscape-font-specification:'Cal Sans, Semi-Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#000000;fill-opacity:1;stroke-width:0.133036" x="30.573963" y="24.535555">Subtitle placeholder</tspan>
-			<path data-banner-class="solid-color" id="solid-color" style="display:inline;opacity:1;fill:#ffffff;stroke-width:0.303146;paint-order:fill markers stroke" d="M 17.365414,11.590389 H 163.00542 c 2.05811,0 3.715,1.65689 3.715,3.715 v 23.139475 c 0,2.05811 -1.65689,3.715 -3.715,3.715 H 17.365414 c -2.05811,0 -3.715,-1.65689 -3.715,-3.715 V 15.305389 c 0,-2.05811 1.65689,-3.715 3.715,-3.715 z" />
+	</text>
-		</g>
+	<text data-banner-class="title" xml:space="preserve" style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-size:5.05275px;font-family:'Cal Sans';-inkscape-font-specification:'Cal Sans, Semi-Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#000000;fill-opacity:1;stroke-width:0.194064;paint-order:fill markers stroke" x="30.532825" y="19.122078" id="title">
-		<g data-banner-class="content" id="content" transform="translate(310.57445,-10.033803)">
+		<tspan id="tspan3" style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-size:5.05275px;font-family:'Cal Sans';-inkscape-font-specification:'Cal Sans, Semi-Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#000000;fill-opacity:1;stroke-width:0.194064" x="30.532825" y="19.122078">Title placeholder</tspan>
-			<title id="title11">content</title><text data-banner-class="subtitle" xml:space="preserve" style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-size:3.4638px;font-family:'Cal Sans';-inkscape-font-specification:'Cal Sans, Semi-Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;opacity:1;fill:#000000;fill-opacity:1;stroke-width:0.133036;paint-order:fill markers stroke" x="38.497089" y="43.932247" id="subtitle">
+	</text>
-				<title id="title12">subtitle</title>
+	<path fill="currentColor" d="m 17.30398,14.808594 c -0.23588,0.06157 -0.38733,0.148721 -0.50554,0.264214 -0.16616,0.16342 -0.27456,0.392234 -0.33394,0.82424 -0.0609,0.445075 -0.0622,1.034514 -0.0622,1.879454 v 4.66868 a 2.2727811,2.2727811 0 0 1 0.70765,-0.323048 1.7922937,1.7922937 0 0 1 0.19395,-0.03922 v -7.274315 z m 0.9016,7.238362 h 6.91313 v -4.269908 c 0,-0.845486 -0.001,-1.434925 -0.0622,-1.88 -0.0593,-0.432006 -0.1678,-0.660808 -0.33394,-0.82424 -0.16678,-0.162884 -0.39988,-0.269115 -0.84113,-0.326862 -0.45434,-0.05992 -1.05576,-0.061 -1.91868,-0.061 h -2.40461 c -0.54586,0 -0.98714,0 -1.35267,0.01585 z m 0.75178,0.883071 h -0.66244 c -0.58835,0 -0.79373,0.0036 -0.95172,0.04521 a 1.3423135,1.3423135 0 0 0 -0.92448,0.837858 c 0.008,0.208103 0.0235,0.391689 0.0457,0.555118 0.0593,0.432006 0.16781,0.660808 0.33395,0.82424 0.16678,0.162884 0.39985,0.269115 0.84113,0.326862 0.45434,0.05992 1.05576,0.061 1.91868,0.061 h 2.40461 c 0.86292,0 1.46488,-10e-4 1.91868,-0.06047 0.44125,-0.0583 0.67497,-0.164512 0.84113,-0.327408 0.16616,-0.163419 0.27456,-0.392233 0.33394,-0.824235 0.05,-0.362818 0.0599,-0.822603 0.0616,-1.438194 h -3.7562 v 1.638125 c 0,0.162349 0,0.243512 -0.0572,0.276199 -0.0572,0.03269 -0.13507,-0.0039 -0.29091,-0.07627 l -0.74638,-0.347551 c -0.0533,-0.02452 -0.0795,-0.0365 -0.10789,-0.0365 -0.0284,0 -0.0546,0.01194 -0.10788,0.0365 l -0.74634,0.347566 c -0.15628,0.07245 -0.23425,0.108958 -0.29145,0.07626 -0.0566,-0.03268 -0.0566,-0.114397 -0.0566,-0.276199 z" id="icon-svg" style="stroke-width:0.544769" />
 				<tspan sodipodi:role="line" id="tspan4" style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-size:3.4638px;font-family:'Cal Sans';-inkscape-font-specification:'Cal Sans, Semi-Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#000000;fill-opacity:1;stroke-width:0.133036" x="38.497089" y="43.932247">Subtitle placeholder</tspan>
 			</text><text data-banner-class="title" xml:space="preserve" style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-size:5.05275px;font-family:'Cal Sans';-inkscape-font-specification:'Cal Sans, Semi-Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;opacity:1;fill:#000000;fill-opacity:1;stroke-width:0.194064;paint-order:fill markers stroke" x="38.455933" y="38.518772" id="title">
 				<tspan sodipodi:role="line" id="tspan3" style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-size:5.05275px;font-family:'Cal Sans';-inkscape-font-specification:'Cal Sans, Semi-Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#000000;fill-opacity:1;stroke-width:0.194064" x="38.455933" y="38.518772">Title placeholder</tspan>
 			</text>
 			<g data-banner-class="icon" id="icon">
 				<path data-banner-class="icon-svg" fill="currentColor" d="m 25.227101,34.205286 c -0.235876,0.06157 -0.387336,0.148721 -0.505541,0.264214 -0.166159,0.16342 -0.274563,0.392234 -0.333944,0.82424 -0.06095,0.445075 -0.06219,1.034514 -0.06219,1.879454 v 4.66868 a 2.2727811,2.2727811 0 0 1 0.70765,-0.323048 1.7922937,1.7922937 0 0 1 0.193956,-0.03922 v -7.274315 z m 0.901602,7.238362 h 6.913129 V 37.17374 c 0,-0.845486 -10e-4,-1.434925 -0.06219,-1.88 -0.05929,-0.432006 -0.167805,-0.660808 -0.333943,-0.82424 -0.166777,-0.162884 -0.399875,-0.269115 -0.841133,-0.326862 -0.454332,-0.05992 -1.055759,-0.061 -1.918675,-0.061 h -2.404613 c -0.545855,0 -0.987134,0 -1.352664,0.01585 z m 0.751773,0.883071 h -0.662432 c -0.588352,0 -0.793735,0.0036 -0.95172,0.04521 a 1.3423135,1.3423135 0 0 0 -0.924479,0.837858 c 0.0083,0.208103 0.02347,0.391689 0.04572,0.555118 0.05929,0.432006 0.167806,0.660808 0.333945,0.82424 0.166776,0.162884 0.399853,0.269115 0.841132,0.326862 0.454333,0.05992 1.055759,0.061 1.918675,0.061 h 2.404613 c 0.862917,0 1.464878,-10e-4 1.918676,-0.06047 0.441258,-0.0583 0.674973,-0.164512 0.841132,-0.327408 0.166159,-0.163419 0.274564,-0.392233 0.333945,-0.824235 0.05003,-0.362818 0.05992,-0.822603 0.06157,-1.438194 h -3.756205 v 1.638125 c 0,0.162349 0,0.243512 -0.05724,0.276199 -0.05724,0.03269 -0.135068,-0.0039 -0.290912,-0.07627 L 28.19057,43.817203 c -0.05334,-0.02452 -0.07948,-0.0365 -0.107886,-0.0365 -0.02842,0 -0.05456,0.01194 -0.107885,0.0365 l -0.746338,0.347566 c -0.156276,0.07245 -0.234249,0.108958 -0.291447,0.07626 -0.05662,-0.03268 -0.05662,-0.114397 -0.05662,-0.276199 z" id="icon-svg" style="stroke-width:0.544769" />
 			</g>
 		</g>
 	</g>
 </svg>
--- a/packages/banners/static/horizontal.svg.js
+++ b/packages/banners/static/horizontal.svg.js
@@ -0,0 +1,50 @@
 /* eslint-disable */
 const svg = `<svg width="162.68883mm" height="42.772179mm" viewBox="0 0 162.68882 42.772178" version="1.1" id="svg1" xml:space="preserve" sodipodi:docname="horizontal.inkscape.svg" inkscape:version="1.3.2 (091e20ef0f, 2023-11-25)" inkscape:export-filename="horizontal.inkscape.svg" inkscape:export-xdpi="96" inkscape:export-ydpi="96" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
 	<sodipodi:namedview id="namedview1" pagecolor="#505050" bordercolor="#eeeeee" borderopacity="1" inkscape:showpageshadow="0" inkscape:pageopacity="0" inkscape:pagecheckerboard="0" inkscape:deskcolor="#505050" inkscape:document-units="mm" inkscape:zoom="2.2965073" inkscape:cx="210.31939" inkscape:cy="116.48123" inkscape:window-width="2560" inkscape:window-height="1011" inkscape:window-x="0" inkscape:window-y="32" inkscape:window-maximized="1" inkscape:current-layer="svg1" />
 	<defs id="defs1">
 		<linearGradient id="linearGradient55">
 			<stop style="stop-color:#ffffff;stop-opacity:1;" offset="0.30320638" id="stop54" />
 			<stop style="stop-color:#ffffff;stop-opacity:0;" offset="1" id="stop55" />
 		</linearGradient>
 		<linearGradient id="linearGradient14">
 			<stop style="stop-color:#000000;stop-opacity:1;" offset="0.30320638" id="stop14" />
 			<stop style="stop-color:#ffffff;stop-opacity:1;" offset="1" id="stop15" />
 		</linearGradient>
 		<linearGradient xlink:href="#linearGradient82-2" id="linearGradient5" x1="18.784613" y1="57.455349" x2="159.75043" y2="57.455349" gradientUnits="userSpaceOnUse" gradientTransform="translate(-7.92311,-22.037977)" />
 		<linearGradient id="linearGradient82-2">
 			<stop style="stop-color:#ff0000;stop-opacity:1;" offset="0" id="stop104" />
 			<stop style="stop-color:#ffff00;stop-opacity:1;" offset="0.18269952" id="stop105" />
 			<stop style="stop-color:#00ff00;stop-opacity:1;" offset="0.39030838" id="stop106" />
 			<stop style="stop-color:#00ffff;stop-opacity:1;" offset="0.59760052" id="stop107" />
 			<stop style="stop-color:#0000ff;stop-opacity:1;" offset="0.79487675" id="stop108" />
 			<stop style="stop-color:#ff00ff;stop-opacity:1;" offset="1" id="stop109" />
 		</linearGradient>
 		<linearGradient xlink:href="#linearGradient55" id="linearGradient15" x1="12.732515" y1="45.720142" x2="165.80252" y2="15.906352" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1,0,0,0.78569196,-7.92312,-7.6495972)" />
 		<mask maskUnits="userSpaceOnUse" id="mask17">
 			<path id="path18" style="display:inline;opacity:1;fill:url(#linearGradient18);stroke-width:0.303146;paint-order:fill markers stroke" d="M 16.447515,24.244587 H 162.08752 c 2.05812,0 3.71501,1.65689 3.71501,3.715001 v 23.139473 c 0,2.058112 -1.65689,3.715002 -3.71501,3.715002 H 16.447515 c -2.05811,0 -3.715,-1.65689 -3.715,-3.715002 V 27.959588 c 0,-2.058111 1.65689,-3.715001 3.715,-3.715001 z" />
 		</mask>
 		<linearGradient xlink:href="#linearGradient14" id="linearGradient18" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1,0,0,0.78569196,-1e-8,11.747095)" x1="12.732515" y1="45.720142" x2="165.80252" y2="15.906352" />
 		<filter style="color-interpolation-filters:sRGB" id="filter56" x="-0.031419724" y="-0.15732745" width="1.0628394" height="1.3991793">
 			<feFlood result="flood" in="SourceGraphic" flood-opacity="0.200000" flood-color="rgb(0,0,0)" id="feFlood55" />
 			<feGaussianBlur result="blur" in="SourceGraphic" stdDeviation="2.003924" id="feGaussianBlur55" />
 			<feOffset result="offset" in="blur" dx="0.000000" dy="2.583867" id="feOffset55" />
 			<feComposite result="comp1" operator="in" in="flood" in2="offset" id="feComposite55" />
 			<feComposite result="comp2" operator="over" in="SourceGraphic" in2="comp1" id="feComposite56" />
 		</filter>
 	</defs>
 	<path id="path20" style="display:inline;fill:#ffffff;fill-opacity:1;stroke-width:0.303146;paint-order:fill markers stroke;filter:url(#filter56)" d="M 8.524394,4.8094005 H 154.1644 c 2.05811,0 3.715,1.65689 3.715,3.715 V 31.663876 c 0,2.05811 -1.65689,3.714999 -3.715,3.714999 H 8.524394 c -2.05811,0 -3.715,-1.656889 -3.715,-3.715 V 8.5244005 c 0,-2.05811 1.65689,-3.715 3.715,-3.715 z" />
 	<path id="color-stripe" style="fill:url(#linearGradient5);stroke-width:0.0784105;paint-order:fill markers stroke" d="m 12.34935,34.30697 h 137.9901 c 0.82427,0 1.48786,0.49524 1.48786,1.1104 0,0.61516 -0.66359,1.1104 -1.48786,1.1104 H 12.34935 c -0.82427,0 -1.48785,-0.49524 -1.48785,-1.1104 0,-0.61516 0.66358,-1.1104 1.48785,-1.1104 z" />
 	<path id="fallback" style="display:inline;fill:#ffffff;stroke-width:0.302511;paint-order:fill markers stroke" d="m 8.5759,4.8863906 h 145.53701 c 2.05665,0 3.71237,1.652718 3.71237,3.705644 V 31.673233 c 0,2.052926 -1.65572,3.705643 -3.71237,3.705643 H 8.5759 c -2.05665,0 -3.71237,-1.652717 -3.71237,-3.705643 V 8.5920346 c 0,-2.052926 1.65572,-3.705644 3.71237,-3.705644 z" />
 	<image width="134.7771" height="89.851387" preserveAspectRatio="none" xlink:href="../../../../../Downloads/alexandre-debieve-FO7JIlwjOtU-unsplash.jpg" id="embed" x="60.238495" y="-3.5220199" mask="url(#mask17)" transform="translate(-7.92312,-19.396692)" style="image-rendering:optimizeSpeed" />
 	<path data-banner-class="gradient" id="gradient" style="display:inline;fill:url(#linearGradient15);stroke-width:0.303146;paint-order:fill markers stroke" d="m 8.5244,4.8478956 h 145.64001 c 2.05811,0 3.715,1.65689 3.715,3.715 V 31.702371 c 0,2.05811 -1.65689,3.715 -3.715,3.715 H 8.5244 c -2.05811,0 -3.715,-1.65689 -3.715,-3.715 V 8.5628956 c 0,-2.05811 1.65689,-3.715 3.715,-3.715 z" />
 	<path id="solid-color" style="display:inline;fill:#ffffff;stroke-width:0.303146;paint-order:fill markers stroke" d="M 8.52439,4.8094006 H 154.1644 c 2.05811,0 3.715,1.65689 3.715,3.715 V 31.663876 c 0,2.05811 -1.65689,3.715 -3.715,3.715 H 8.52439 c -2.05811,0 -3.715,-1.65689 -3.715,-3.715 V 8.5244006 c 0,-2.05811 1.65689,-3.715 3.715,-3.715 z" />
 	<text data-banner-class="subtitle" xml:space="preserve" style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-size:3.4638px;font-family:'Cal Sans';-inkscape-font-specification:'Cal Sans, Semi-Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#000000;fill-opacity:1;stroke-width:0.133036;paint-order:fill markers stroke" x="30.573963" y="24.535555" id="subtitle">
 		<title id="title12">subtitle</title>
 		<tspan id="tspan4" style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-size:3.4638px;font-family:'Cal Sans';-inkscape-font-specification:'Cal Sans, Semi-Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#000000;fill-opacity:1;stroke-width:0.133036" x="30.573963" y="24.535555">Subtitle placeholder</tspan>
 	</text>
 	<text data-banner-class="title" xml:space="preserve" style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-size:5.05275px;font-family:'Cal Sans';-inkscape-font-specification:'Cal Sans, Semi-Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#000000;fill-opacity:1;stroke-width:0.194064;paint-order:fill markers stroke" x="30.532825" y="19.122078" id="title">
 		<tspan id="tspan3" style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-size:5.05275px;font-family:'Cal Sans';-inkscape-font-specification:'Cal Sans, Semi-Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#000000;fill-opacity:1;stroke-width:0.194064" x="30.532825" y="19.122078">Title placeholder</tspan>
 	</text>
 	<path fill="currentColor" d="m 17.30398,14.808594 c -0.23588,0.06157 -0.38733,0.148721 -0.50554,0.264214 -0.16616,0.16342 -0.27456,0.392234 -0.33394,0.82424 -0.0609,0.445075 -0.0622,1.034514 -0.0622,1.879454 v 4.66868 a 2.2727811,2.2727811 0 0 1 0.70765,-0.323048 1.7922937,1.7922937 0 0 1 0.19395,-0.03922 v -7.274315 z m 0.9016,7.238362 h 6.91313 v -4.269908 c 0,-0.845486 -0.001,-1.434925 -0.0622,-1.88 -0.0593,-0.432006 -0.1678,-0.660808 -0.33394,-0.82424 -0.16678,-0.162884 -0.39988,-0.269115 -0.84113,-0.326862 -0.45434,-0.05992 -1.05576,-0.061 -1.91868,-0.061 h -2.40461 c -0.54586,0 -0.98714,0 -1.35267,0.01585 z m 0.75178,0.883071 h -0.66244 c -0.58835,0 -0.79373,0.0036 -0.95172,0.04521 a 1.3423135,1.3423135 0 0 0 -0.92448,0.837858 c 0.008,0.208103 0.0235,0.391689 0.0457,0.555118 0.0593,0.432006 0.16781,0.660808 0.33395,0.82424 0.16678,0.162884 0.39985,0.269115 0.84113,0.326862 0.45434,0.05992 1.05576,0.061 1.91868,0.061 h 2.40461 c 0.86292,0 1.46488,-10e-4 1.91868,-0.06047 0.44125,-0.0583 0.67497,-0.164512 0.84113,-0.327408 0.16616,-0.163419 0.27456,-0.392233 0.33394,-0.824235 0.05,-0.362818 0.0599,-0.822603 0.0616,-1.438194 h -3.7562 v 1.638125 c 0,0.162349 0,0.243512 -0.0572,0.276199 -0.0572,0.03269 -0.13507,-0.0039 -0.29091,-0.07627 l -0.74638,-0.347551 c -0.0533,-0.02452 -0.0795,-0.0365 -0.10789,-0.0365 -0.0284,0 -0.0546,0.01194 -0.10788,0.0365 l -0.74634,0.347566 c -0.15628,0.07245 -0.23425,0.108958 -0.29145,0.07626 -0.0566,-0.03268 -0.0566,-0.114397 -0.0566,-0.276199 z" id="icon-svg" style="stroke-width:0.544769" />
 </svg>`;
 export default svg;
--- a/packages/banners/static/vertical.inkscape.svg
+++ b/packages/banners/static/vertical.inkscape.svg
@@ -1,231 +1,88 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <!-- Created with Inkscape (http://www.inkscape.org/) -->
-<svg
+<svg width="162.68884mm" height="48.491169mm" viewBox="0 0 162.68884 48.491168" version="1.1" id="svg1"
-   width="162.68884mm"
+	xml:space="preserve" sodipodi:docname="vertical.inkscape.svg" inkscape:export-filename="vertical.inkscape.svg"
-   height="48.491169mm"
+	inkscape:export-xdpi="96" inkscape:export-ydpi="96" inkscape:version="1.3.2 (091e20ef0f, 2023-11-25)"
-   viewBox="0 0 162.68884 48.491168"
+	xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   version="1.1"
+	xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:xlink="http://www.w3.org/1999/xlink"
-   id="svg1"
+	xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
-   xml:space="preserve"
+	<sodipodi:namedview id="namedview1" pagecolor="#505050" bordercolor="#eeeeee" borderopacity="1"
-   sodipodi:docname="design.inkscape.svg"
+		inkscape:showpageshadow="0" inkscape:pageopacity="0" inkscape:pagecheckerboard="0" inkscape:deskcolor="#505050"
-   inkscape:version="1.3.1 (91b66b0783, 2023-11-16, custom)"
+		inkscape:document-units="mm" inkscape:zoom="1.6238757" inkscape:cx="197.05942" inkscape:cy="147.48666"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+		inkscape:window-width="2560" inkscape:window-height="1011" inkscape:window-x="0" inkscape:window-y="32"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+		inkscape:window-maximized="1" inkscape:current-layer="svg1" />
-   xmlns:xlink="http://www.w3.org/1999/xlink"
+	<defs id="defs1">
-   xmlns="http://www.w3.org/2000/svg"
+		<linearGradient id="linearGradient55">
-   xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
+			<stop style="stop-color:#ffffff;stop-opacity:1;" offset="0.30320638" id="stop54" />
-     id="namedview1"
+			<stop style="stop-color:#ffffff;stop-opacity:0;" offset="1" id="stop55" />
-     pagecolor="#505050"
+		</linearGradient>
-     bordercolor="#eeeeee"
+		<linearGradient id="linearGradient14">
-     borderopacity="1"
+			<stop style="stop-color:#000000;stop-opacity:1;" offset="0.30320638" id="stop14" />
-     inkscape:showpageshadow="0"
+			<stop style="stop-color:#ffffff;stop-opacity:1;" offset="1" id="stop15" />
-     inkscape:pageopacity="0"
+		</linearGradient>
-     inkscape:pagecheckerboard="0"
+		<linearGradient id="linearGradient82-2">
-     inkscape:deskcolor="#505050"
+			<stop style="stop-color:#ff0000;stop-opacity:1;" offset="0" id="stop104" />
-     inkscape:document-units="mm"
+			<stop style="stop-color:#ffff00;stop-opacity:1;" offset="0.18269952" id="stop105" />
-     inkscape:zoom="1.1011145"
+			<stop style="stop-color:#00ff00;stop-opacity:1;" offset="0.39030838" id="stop106" />
-     inkscape:cx="155.75129"
+			<stop style="stop-color:#00ffff;stop-opacity:1;" offset="0.59760052" id="stop107" />
-     inkscape:cy="-119.42446"
+			<stop style="stop-color:#0000ff;stop-opacity:1;" offset="0.79487675" id="stop108" />
-     inkscape:window-width="2540"
+			<stop style="stop-color:#ff00ff;stop-opacity:1;" offset="1" id="stop109" />
-     inkscape:window-height="1023"
+		</linearGradient>
-     inkscape:window-x="0"
+		<linearGradient xlink:href="#linearGradient82-2" id="linearGradient19" gradientUnits="userSpaceOnUse"
-     inkscape:window-y="0"
+			gradientTransform="translate(-7.92309,-16.357465)" x1="18.784613" y1="57.455349" x2="159.75043"
-     inkscape:window-maximized="1"
+			y2="57.455349" />
-     inkscape:current-layer="layer2"
+		<linearGradient xlink:href="#linearGradient55" id="linearGradient2" x1="90.18544" y1="96.020027" x2="90.18544"
-     showgrid="false"
+			y2="59.73156" gradientUnits="userSpaceOnUse" gradientTransform="translate(-8.84101,-54.922146)" />
-     inkscape:export-bgcolor="#ffffff00"><inkscape:page
+		<mask maskUnits="userSpaceOnUse" id="mask13">
-       x="0"
+			<path id="path14"
-       y="0"
+				style="opacity:1;fill:url(#linearGradient16);stroke-width:0.342;paint-order:fill markers stroke"
-       width="162.68884"
+				d="M 163.04842,11.667375 H 17.322411 c -2.034292,0 -3.672002,1.637713 -3.672002,3.671999 v 28.944467 c 0,2.034288 1.63771,3.672001 3.672002,3.672001 H 163.04842 c 2.03429,0 3.672,-1.637713 3.672,-3.672001 V 15.339374 c 0,-2.034286 -1.63771,-3.671999 -3.672,-3.671999 z" />
-       height="48.491169"
+		</mask>
-       id="page18"
+		<linearGradient xlink:href="#linearGradient14" id="linearGradient16" gradientUnits="userSpaceOnUse"
-       margin="0"
+			gradientTransform="matrix(-1,0,0,1,180.37085,-48.064185)" x1="90.18544" y1="95.033531" x2="90.18544"
-       bleed="0" /></sodipodi:namedview><defs
+			y2="47.599419" />
-     id="defs1"><linearGradient
+		<filter style="color-interpolation-filters:sRGB" id="filter63" x="-0.031419723" y="-0.13253295"
-       id="linearGradient55"
+			width="1.0628394" height="1.3362694">
-       inkscape:collect="always"
+			<feFlood result="flood" in="SourceGraphic" flood-opacity="0.200000" flood-color="rgb(0,0,0)"
-       inkscape:label="background-gradient"><stop
+				id="feFlood62" />
-         style="stop-color:#ffffff;stop-opacity:1;"
+			<feGaussianBlur result="blur" in="SourceGraphic" stdDeviation="2.003924" id="feGaussianBlur62" />
-         offset="0.30320638"
+			<feOffset result="offset" in="blur" dx="0.000000" dy="2.583867" id="feOffset62" />
-         id="stop54" /><stop
+			<feComposite result="comp1" operator="in" in="flood" in2="offset" id="feComposite62" />
-         style="stop-color:#ffffff;stop-opacity:0;"
+			<feComposite result="comp2" operator="over" in="SourceGraphic" in2="comp1" id="feComposite63" />
-         offset="1"
+		</filter>
-         id="stop55" /></linearGradient><linearGradient
+	</defs>
-       id="linearGradient14"
+	<path id="path62"
-       inkscape:collect="always"
+		style="display:inline;fill:#ffffff;stroke-width:0.342;paint-order:fill markers stroke;filter:url(#filter63)"
-       inkscape:label="background-image-mask-gradient"><stop
+		d="m 8.48142,4.809414 h 145.72601 c 2.03429,0 3.672,1.637712 3.672,3.672 v 28.944465 c 0,2.03429 -1.63771,3.672 -3.672,3.672 H 8.48142 c -2.03429,0 -3.672,-1.63771 -3.672,-3.672 V 8.481414 c 0,-2.034288 1.63771,-3.672 3.672,-3.672 z" />
-         style="stop-color:#000000;stop-opacity:1;"
+	<path id="path12" style="fill:url(#linearGradient19);stroke-width:0.0784105;paint-order:fill markers stroke"
-         offset="0.30320638"
+		d="m 12.34937,39.987489 h 137.9901 c 0.82427,0 1.48786,0.49523 1.48786,1.11039 0,0.61516 -0.66359,1.1104 -1.48786,1.1104 H 12.34937 c -0.82427,0 -1.48785,-0.49524 -1.48785,-1.1104 0,-0.61516 0.66358,-1.11039 1.48785,-1.11039 z" />
-         id="stop14" /><stop
+	<path id="rect12" style="display:inline;fill:#ffffff;stroke-width:0.341536;paint-order:fill markers stroke"
-         style="stop-color:#ffffff;stop-opacity:1;"
+		d="m 8.55859,4.833981 h 145.52869 c 2.03154,0 3.66703,1.635495 3.66703,3.667028 v 28.905275 c 0,2.031533 -1.63549,3.667028 -3.66703,3.667028 H 8.55859 c -2.03153,0 -3.66703,-1.635495 -3.66703,-3.667028 V 8.501009 c 0,-2.031533 1.6355,-3.667028 3.66703,-3.667028 z" />
-         offset="1"
+	<image width="153.07002" height="102.04668" preserveAspectRatio="none"
-         id="stop15" /></linearGradient><linearGradient
+		xlink:href="../../../../../Downloads/alexandre-debieve-FO7JIlwjOtU-unsplash.jpg" id="image13" x="13.650405"
-       id="linearGradient82-2"
+		y="-21.211729" mask="url(#mask13)" style="image-rendering:optimizeSpeed"
-       inkscape:label="color-stripe-gradient"><stop
+		transform="matrix(-1,0,0,1,171.52984,-6.857961)" />
-         style="stop-color:#ff0000;stop-opacity:1;"
+	<path id="rect20"
-         offset="0"
+		style="display:inline;fill:url(#linearGradient2);stroke-width:0.342;paint-order:fill markers stroke"
-         id="stop104" /><stop
+		d="m 8.48142,4.809414 h 145.72601 c 2.03429,0 3.672,1.637712 3.672,3.672 v 28.944467 c 0,2.034288 -1.63771,3.672 -3.672,3.672 H 8.48142 c -2.034288,0 -3.672,-1.637712 -3.672,-3.672 V 8.481414 c 0,-2.034288 1.637712,-3.672 3.672,-3.672 z" />
-         style="stop-color:#ffff00;stop-opacity:1;"
+	<path id="rect1" style="display:inline;fill:#ffffff;stroke-width:0.342;paint-order:fill markers stroke"
-         offset="0.18269952"
+		d="m 8.48142,4.809414 h 145.72601 c 2.03429,0 3.672,1.637712 3.672,3.672 v 28.944467 c 0,2.034288 -1.63771,3.672 -3.672,3.672 H 8.48142 c -2.034288,0 -3.672,-1.637712 -3.672,-3.672 V 8.481414 c 0,-2.034288 1.637712,-3.672 3.672,-3.672 z" />
-         id="stop105" /><stop
+	<text xml:space="preserve"
-         style="stop-color:#00ff00;stop-opacity:1;"
+		style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-size:2.95147px;font-family:'Cal Sans';-inkscape-font-specification:'Cal Sans, Semi-Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:center;text-anchor:middle;fill:#000000;fill-opacity:1;stroke-width:0.113359;paint-order:fill markers stroke"
-         offset="0.39030838"
+		inkscape:label="subtitle" x="81.337044" y="29.823992" id="text15">
-         id="stop106" /><stop
+		<tspan id="tspan15"
-         style="stop-color:#00ffff;stop-opacity:1;"
+			style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-size:2.95147px;font-family:'Cal Sans';-inkscape-font-specification:'Cal Sans, Semi-Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:center;text-anchor:middle;fill:#000000;fill-opacity:1;stroke-width:0.113359"
-         offset="0.59760052"
+			x="81.337044" y="29.823992">Subtitle placeholder</tspan>
-         id="stop107" /><stop
+	</text>
-         style="stop-color:#0000ff;stop-opacity:1;"
+	<text xml:space="preserve"
-         offset="0.79487675"
+		style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-size:4.3054px;font-family:'Cal Sans';-inkscape-font-specification:'Cal Sans, Semi-Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:center;text-anchor:middle;fill:#000000;fill-opacity:1;stroke-width:0.16536;paint-order:fill markers stroke"
-         id="stop108" /><stop
+		inkscape:label="title" x="81.322899" y="25.601515" id="text16">
-         style="stop-color:#ff00ff;stop-opacity:1;"
+		<tspan id="tspan16"
-         offset="1"
+			style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-size:4.3054px;font-family:'Cal Sans';-inkscape-font-specification:'Cal Sans, Semi-Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:center;text-anchor:middle;fill:#000000;fill-opacity:1;stroke-width:0.16536"
-         id="stop109" /></linearGradient><linearGradient
+			x="81.322899" y="25.601515">Title placeholder</tspan>
-       inkscape:collect="always"
+	</text>
-       xlink:href="#linearGradient82-2"
+	<path fill="currentColor"
-       id="linearGradient19"
+		d="m 78.399148,11.080321 c -0.200988,0.05246 -0.330046,0.126724 -0.430767,0.225134 -0.141583,0.139249 -0.233953,0.33422 -0.284551,0.702328 -0.05194,0.379245 -0.05299,0.8815 -0.05299,1.601466 v 3.978142 a 1.9366169,1.9366169 0 0 1 0.602982,-0.275267 1.5271978,1.5271978 0 0 1 0.165268,-0.03342 v -6.19838 z m 0.768247,6.167745 h 5.890617 v -3.638351 c 0,-0.720432 -8.52e-4,-1.222687 -0.05299,-1.601932 -0.05052,-0.368108 -0.142985,-0.563069 -0.28455,-0.702328 -0.142109,-0.138792 -0.34073,-0.22931 -0.716722,-0.278516 -0.387132,-0.05106 -0.899603,-0.05198 -1.634886,-0.05198 h -2.048949 c -0.465119,0 -0.841129,0 -1.152594,0.01351 z m 0.640579,0.752457 h -0.564452 c -0.50133,0 -0.676335,0.0031 -0.810952,0.03852 a 1.1437736,1.1437736 0 0 0 -0.787741,0.713931 c 0.0071,0.177323 0.02,0.333755 0.03896,0.473012 0.05052,0.368108 0.142986,0.563068 0.284551,0.702327 0.142109,0.138792 0.340712,0.229311 0.716722,0.278517 0.387133,0.05106 0.899603,0.05198 1.634886,0.05198 h 2.048949 c 0.735284,0 1.24821,-8.52e-4 1.634887,-0.05153 0.375993,-0.04968 0.575139,-0.140179 0.716722,-0.278981 0.141582,-0.139248 0.233953,-0.334219 0.284551,-0.702324 0.04263,-0.309154 0.05106,-0.700933 0.05246,-1.225472 h -3.20063 v 1.395832 c 0,0.138336 0,0.207494 -0.04877,0.235346 -0.04877,0.02785 -0.11509,-0.0033 -0.247883,-0.06499 l -0.635938,-0.296145 c -0.04545,-0.02089 -0.06772,-0.0311 -0.09193,-0.0311 -0.02422,0 -0.04649,0.01017 -0.09193,0.0311 l -0.635948,0.296158 c -0.133161,0.06173 -0.199601,0.09284 -0.248339,0.06498 -0.04824,-0.02785 -0.04824,-0.09748 -0.04824,-0.235347 z"
-       gradientUnits="userSpaceOnUse"
+		id="path16" style="stroke-width:0.464193" />
-       gradientTransform="translate(309.94661,59.369176)"
+</svg>
       x1="18.784613"
       y1="57.455349"
       x2="159.75043"
       y2="57.455349" /><linearGradient
       inkscape:collect="always"
       xlink:href="#linearGradient55"
       id="linearGradient2"
       x1="90.18544"
       y1="96.020027"
       x2="90.18544"
       y2="59.73156"
       gradientUnits="userSpaceOnUse" /><mask
       maskUnits="userSpaceOnUse"
       id="mask13"><path
         id="path14"
         style="opacity:1;fill:url(#linearGradient16);stroke-width:0.342;paint-order:fill markers stroke"
         inkscape:label="mask"
         d="M 163.04842,11.667375 H 17.322411 c -2.034292,0 -3.672002,1.637713 -3.672002,3.671999 v 28.944467 c 0,2.034288 1.63771,3.672001 3.672002,3.672001 H 163.04842 c 2.03429,0 3.672,-1.637713 3.672,-3.672001 V 15.339374 c 0,-2.034286 -1.63771,-3.671999 -3.672,-3.671999 z" /></mask><linearGradient
       inkscape:collect="always"
       xlink:href="#linearGradient14"
       id="linearGradient16"
       gradientUnits="userSpaceOnUse"
       gradientTransform="matrix(-1,0,0,1,180.37085,-48.064185)"
       x1="90.18544"
       y1="95.033531"
       x2="90.18544"
       y2="47.599419" /><filter
       style="color-interpolation-filters:sRGB"
       inkscape:label="Drop Shadow"
       id="filter63"
       x="-0.031419723"
       y="-0.13253295"
       width="1.0628394"
       height="1.3362694"><feFlood
         result="flood"
         in="SourceGraphic"
         flood-opacity="0.200000"
         flood-color="rgb(0,0,0)"
         id="feFlood62" /><feGaussianBlur
         result="blur"
         in="SourceGraphic"
         stdDeviation="2.003924"
         id="feGaussianBlur62" /><feOffset
         result="offset"
         in="blur"
         dx="0.000000"
         dy="2.583867"
         id="feOffset62" /><feComposite
         result="comp1"
         operator="in"
         in="flood"
         in2="offset"
         id="feComposite62" /><feComposite
         result="comp2"
         operator="over"
         in="SourceGraphic"
         in2="comp1"
         id="feComposite63" /></filter></defs><g
     inkscape:groupmode="layer"
     id="g19"
     inkscape:label="vertical"
     inkscape:highlight-color="#a99e36"
     transform="translate(-317.8697,-75.726641)"
     inkscape:export-filename="vertical.inkscape.svg"
     inkscape:export-xdpi="318.5993"
     inkscape:export-ydpi="318.5993"><path
       id="path62"
       style="display:inline;opacity:1;fill:#ffffff;stroke-width:0.342;paint-order:fill markers stroke;filter:url(#filter63)"
       inkscape:label="shadow"
       d="m 326.35112,80.536055 h 145.72601 c 2.03429,0 3.672,1.637712 3.672,3.672 v 28.944465 c 0,2.03429 -1.63771,3.672 -3.672,3.672 H 326.35112 c -2.03429,0 -3.672,-1.63771 -3.672,-3.672 V 84.208055 c 0,-2.034288 1.63771,-3.672 3.672,-3.672 z" /><path
       id="path12"
       style="fill:url(#linearGradient19);stroke-width:0.0784105;paint-order:fill markers stroke"
       inkscape:label="color-stripe"
       d="m 330.21907,115.71413 h 137.9901 c 0.82427,0 1.48786,0.49523 1.48786,1.11039 0,0.61516 -0.66359,1.1104 -1.48786,1.1104 h -137.9901 c -0.82427,0 -1.48785,-0.49524 -1.48785,-1.1104 0,-0.61516 0.66358,-1.11039 1.48785,-1.11039 z" /><g
       id="g15"
       inkscape:label="background"
       transform="matrix(-1,0,0,1,489.39954,68.86868)"><path
         id="rect12"
         style="display:inline;opacity:1;fill:#ffffff;stroke-width:0.341536;paint-order:fill markers stroke"
         inkscape:label="fallback"
         transform="scale(-1,1)"
         d="m -162.97125,11.691942 h 145.528694 c 2.031534,0 3.667028,1.635495 3.667028,3.667028 v 28.905275 c 0,2.031533 -1.635494,3.667028 -3.667028,3.667028 H -162.97125 c -2.03153,0 -3.66703,-1.635495 -3.66703,-3.667028 V 15.35897 c 0,-2.031533 1.6355,-3.667028 3.66703,-3.667028 z" /><g
         id="g5"
         inkscape:label="image"><image
           width="153.07002"
           height="102.04668"
           preserveAspectRatio="none"
           xlink:href="../../../../../Downloads/alexandre-debieve-FO7JIlwjOtU-unsplash.jpg"
           id="image13"
           x="13.650405"
           y="-21.211729"
           inkscape:label="embed"
           mask="url(#mask13)"
           style="image-rendering:optimizeSpeed"
           inkscape:svg-dpi="1"
           inkscape:export-filename="horizontal.svg"
           inkscape:export-xdpi="96"
           inkscape:export-ydpi="96" /></g><path
         id="rect20"
         style="display:inline;opacity:1;fill:url(#linearGradient2);stroke-width:0.342;paint-order:fill markers stroke"
         inkscape:label="gradient"
         transform="matrix(-1,0,0,1,180.37085,-48.064185)"
         d="m 17.32243,59.73156 h 145.72601 c 2.03429,0 3.672,1.637712 3.672,3.672 v 28.944467 c 0,2.034288 -1.63771,3.672 -3.672,3.672 H 17.32243 c -2.034288,0 -3.672,-1.637712 -3.672,-3.672 V 63.40356 c 0,-2.034288 1.637712,-3.672 3.672,-3.672 z" /><path
         id="rect1"
         style="display:inline;opacity:1;fill:#ffffff;stroke-width:0.342;paint-order:fill markers stroke"
         inkscape:label="solid-color"
         transform="matrix(-1,0,0,1,180.37085,-48.064185)"
         d="m 17.32243,59.73156 h 145.72601 c 2.03429,0 3.672,1.637712 3.672,3.672 v 28.944467 c 0,2.034288 -1.63771,3.672 -3.672,3.672 H 17.32243 c -2.034288,0 -3.672,-1.637712 -3.672,-3.672 V 63.40356 c 0,-2.034288 1.637712,-3.672 3.672,-3.672 z" /></g><g
       id="g17"
       inkscape:label="content"
       transform="matrix(-1,0,0,1,461.33439,62.953888)"><text
         xml:space="preserve"
         style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-size:2.95147px;font-family:'Cal Sans';-inkscape-font-specification:'Cal Sans, Semi-Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:center;text-anchor:middle;opacity:1;fill:#000000;fill-opacity:1;stroke-width:0.113359;paint-order:fill markers stroke"
         x="-62.127644"
         y="42.596745"
         id="text15"
         inkscape:label="subtitle"
         transform="scale(-1,1)"><tspan
           sodipodi:role="line"
           id="tspan15"
           style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-size:2.95147px;font-family:'Cal Sans';-inkscape-font-specification:'Cal Sans, Semi-Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:center;text-anchor:middle;fill:#000000;fill-opacity:1;stroke-width:0.113359"
           x="-62.127644"
           y="42.596745">Subtitle placeholder</tspan></text><text
         xml:space="preserve"
         style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-size:4.3054px;font-family:'Cal Sans';-inkscape-font-specification:'Cal Sans, Semi-Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:center;text-anchor:middle;opacity:1;fill:#000000;fill-opacity:1;stroke-width:0.16536;paint-order:fill markers stroke"
         x="-62.141792"
         y="38.374268"
         id="text16"
         inkscape:label="title"
         transform="scale(-1,1)"><tspan
           sodipodi:role="line"
           id="tspan16"
           style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-size:4.3054px;font-family:'Cal Sans';-inkscape-font-specification:'Cal Sans, Semi-Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:center;text-anchor:middle;fill:#000000;fill-opacity:1;stroke-width:0.16536"
           x="-62.141792"
           y="38.374268">Title placeholder</tspan></text><g
         id="g16"
         inkscape:label="icon"
         transform="matrix(-0.85209125,0,0,0.85209125,86.561334,-5.292951)"><path
           fill="currentColor"
           d="m 25.227101,34.205286 c -0.235876,0.06157 -0.387336,0.148721 -0.505541,0.264214 -0.166159,0.16342 -0.274563,0.392234 -0.333944,0.82424 -0.06095,0.445075 -0.06219,1.034514 -0.06219,1.879454 v 4.66868 a 2.2727811,2.2727811 0 0 1 0.70765,-0.323048 1.7922937,1.7922937 0 0 1 0.193956,-0.03922 v -7.274315 z m 0.901602,7.238362 h 6.913129 V 37.17374 c 0,-0.845486 -10e-4,-1.434925 -0.06219,-1.88 -0.05929,-0.432006 -0.167805,-0.660808 -0.333943,-0.82424 -0.166777,-0.162884 -0.399875,-0.269115 -0.841133,-0.326862 -0.454332,-0.05992 -1.055759,-0.061 -1.918675,-0.061 h -2.404613 c -0.545855,0 -0.987134,0 -1.352664,0.01585 z m 0.751773,0.883071 h -0.662432 c -0.588352,0 -0.793735,0.0036 -0.95172,0.04521 a 1.3423135,1.3423135 0 0 0 -0.924479,0.837858 c 0.0083,0.208103 0.02347,0.391689 0.04572,0.555118 0.05929,0.432006 0.167806,0.660808 0.333945,0.82424 0.166776,0.162884 0.399853,0.269115 0.841132,0.326862 0.454333,0.05992 1.055759,0.061 1.918675,0.061 h 2.404613 c 0.862917,0 1.464878,-10e-4 1.918676,-0.06047 0.441258,-0.0583 0.674973,-0.164512 0.841132,-0.327408 0.166159,-0.163419 0.274564,-0.392233 0.333945,-0.824235 0.05003,-0.362818 0.05992,-0.822603 0.06157,-1.438194 h -3.756205 v 1.638125 c 0,0.162349 0,0.243512 -0.05724,0.276199 -0.05724,0.03269 -0.135068,-0.0039 -0.290912,-0.07627 L 28.19057,43.817203 c -0.05334,-0.02452 -0.07948,-0.0365 -0.107886,-0.0365 -0.02842,0 -0.05456,0.01194 -0.107885,0.0365 l -0.746338,0.347566 c -0.156276,0.07245 -0.234249,0.108958 -0.291447,0.07626 -0.05662,-0.03268 -0.05662,-0.114397 -0.05662,-0.276199 z"
           id="path16"
           style="stroke-width:0.544769"
           inkscape:label="icon-svg" /></g></g></g></svg>
--- a/packages/banners/static/vertical.svg
+++ b/packages/banners/static/vertical.svg
--- a/packages/banners/static/vertical.svg.js
+++ b/packages/banners/static/vertical.svg.js
@@ -0,0 +1,49 @@
 /* eslint-disable */
 const svg = `<svg width="162.68884mm" height="48.491169mm" viewBox="0 0 162.68884 48.491168" version="1.1" id="svg1" xml:space="preserve" sodipodi:docname="vertical.inkscape.svg" inkscape:export-filename="vertical.inkscape.svg" inkscape:export-xdpi="96" inkscape:export-ydpi="96" inkscape:version="1.3.2 (091e20ef0f, 2023-11-25)" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
 	<sodipodi:namedview id="namedview1" pagecolor="#505050" bordercolor="#eeeeee" borderopacity="1" inkscape:showpageshadow="0" inkscape:pageopacity="0" inkscape:pagecheckerboard="0" inkscape:deskcolor="#505050" inkscape:document-units="mm" inkscape:zoom="1.6238757" inkscape:cx="197.05942" inkscape:cy="147.48666" inkscape:window-width="2560" inkscape:window-height="1011" inkscape:window-x="0" inkscape:window-y="32" inkscape:window-maximized="1" inkscape:current-layer="svg1" />
 	<defs id="defs1">
 		<linearGradient id="linearGradient55">
 			<stop style="stop-color:#ffffff;stop-opacity:1;" offset="0.30320638" id="stop54" />
 			<stop style="stop-color:#ffffff;stop-opacity:0;" offset="1" id="stop55" />
 		</linearGradient>
 		<linearGradient id="linearGradient14">
 			<stop style="stop-color:#000000;stop-opacity:1;" offset="0.30320638" id="stop14" />
 			<stop style="stop-color:#ffffff;stop-opacity:1;" offset="1" id="stop15" />
 		</linearGradient>
 		<linearGradient id="linearGradient82-2">
 			<stop style="stop-color:#ff0000;stop-opacity:1;" offset="0" id="stop104" />
 			<stop style="stop-color:#ffff00;stop-opacity:1;" offset="0.18269952" id="stop105" />
 			<stop style="stop-color:#00ff00;stop-opacity:1;" offset="0.39030838" id="stop106" />
 			<stop style="stop-color:#00ffff;stop-opacity:1;" offset="0.59760052" id="stop107" />
 			<stop style="stop-color:#0000ff;stop-opacity:1;" offset="0.79487675" id="stop108" />
 			<stop style="stop-color:#ff00ff;stop-opacity:1;" offset="1" id="stop109" />
 		</linearGradient>
 		<linearGradient xlink:href="#linearGradient82-2" id="linearGradient19" gradientUnits="userSpaceOnUse" gradientTransform="translate(-7.92309,-16.357465)" x1="18.784613" y1="57.455349" x2="159.75043" y2="57.455349" />
 		<linearGradient xlink:href="#linearGradient55" id="linearGradient2" x1="90.18544" y1="96.020027" x2="90.18544" y2="59.73156" gradientUnits="userSpaceOnUse" gradientTransform="translate(-8.84101,-54.922146)" />
 		<mask maskUnits="userSpaceOnUse" id="mask13">
 			<path id="path14" style="opacity:1;fill:url(#linearGradient16);stroke-width:0.342;paint-order:fill markers stroke" d="M 163.04842,11.667375 H 17.322411 c -2.034292,0 -3.672002,1.637713 -3.672002,3.671999 v 28.944467 c 0,2.034288 1.63771,3.672001 3.672002,3.672001 H 163.04842 c 2.03429,0 3.672,-1.637713 3.672,-3.672001 V 15.339374 c 0,-2.034286 -1.63771,-3.671999 -3.672,-3.671999 z" />
 		</mask>
 		<linearGradient xlink:href="#linearGradient14" id="linearGradient16" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-1,0,0,1,180.37085,-48.064185)" x1="90.18544" y1="95.033531" x2="90.18544" y2="47.599419" />
 		<filter style="color-interpolation-filters:sRGB" id="filter63" x="-0.031419723" y="-0.13253295" width="1.0628394" height="1.3362694">
 			<feFlood result="flood" in="SourceGraphic" flood-opacity="0.200000" flood-color="rgb(0,0,0)" id="feFlood62" />
 			<feGaussianBlur result="blur" in="SourceGraphic" stdDeviation="2.003924" id="feGaussianBlur62" />
 			<feOffset result="offset" in="blur" dx="0.000000" dy="2.583867" id="feOffset62" />
 			<feComposite result="comp1" operator="in" in="flood" in2="offset" id="feComposite62" />
 			<feComposite result="comp2" operator="over" in="SourceGraphic" in2="comp1" id="feComposite63" />
 		</filter>
 	</defs>
 	<path id="path62" style="display:inline;fill:#ffffff;stroke-width:0.342;paint-order:fill markers stroke;filter:url(#filter63)" d="m 8.48142,4.809414 h 145.72601 c 2.03429,0 3.672,1.637712 3.672,3.672 v 28.944465 c 0,2.03429 -1.63771,3.672 -3.672,3.672 H 8.48142 c -2.03429,0 -3.672,-1.63771 -3.672,-3.672 V 8.481414 c 0,-2.034288 1.63771,-3.672 3.672,-3.672 z" />
 	<path id="path12" style="fill:url(#linearGradient19);stroke-width:0.0784105;paint-order:fill markers stroke" d="m 12.34937,39.987489 h 137.9901 c 0.82427,0 1.48786,0.49523 1.48786,1.11039 0,0.61516 -0.66359,1.1104 -1.48786,1.1104 H 12.34937 c -0.82427,0 -1.48785,-0.49524 -1.48785,-1.1104 0,-0.61516 0.66358,-1.11039 1.48785,-1.11039 z" />
 	<path id="rect12" style="display:inline;fill:#ffffff;stroke-width:0.341536;paint-order:fill markers stroke" d="m 8.55859,4.833981 h 145.52869 c 2.03154,0 3.66703,1.635495 3.66703,3.667028 v 28.905275 c 0,2.031533 -1.63549,3.667028 -3.66703,3.667028 H 8.55859 c -2.03153,0 -3.66703,-1.635495 -3.66703,-3.667028 V 8.501009 c 0,-2.031533 1.6355,-3.667028 3.66703,-3.667028 z" />
 	<image width="153.07002" height="102.04668" preserveAspectRatio="none" xlink:href="../../../../../Downloads/alexandre-debieve-FO7JIlwjOtU-unsplash.jpg" id="image13" x="13.650405" y="-21.211729" mask="url(#mask13)" style="image-rendering:optimizeSpeed" transform="matrix(-1,0,0,1,171.52984,-6.857961)" />
 	<path id="rect20" style="display:inline;fill:url(#linearGradient2);stroke-width:0.342;paint-order:fill markers stroke" d="m 8.48142,4.809414 h 145.72601 c 2.03429,0 3.672,1.637712 3.672,3.672 v 28.944467 c 0,2.034288 -1.63771,3.672 -3.672,3.672 H 8.48142 c -2.034288,0 -3.672,-1.637712 -3.672,-3.672 V 8.481414 c 0,-2.034288 1.637712,-3.672 3.672,-3.672 z" />
 	<path id="rect1" style="display:inline;fill:#ffffff;stroke-width:0.342;paint-order:fill markers stroke" d="m 8.48142,4.809414 h 145.72601 c 2.03429,0 3.672,1.637712 3.672,3.672 v 28.944467 c 0,2.034288 -1.63771,3.672 -3.672,3.672 H 8.48142 c -2.034288,0 -3.672,-1.637712 -3.672,-3.672 V 8.481414 c 0,-2.034288 1.637712,-3.672 3.672,-3.672 z" />
 	<text data-banner-class="subtitle" xml:space="preserve" style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-size:2.95147px;font-family:'Cal Sans';-inkscape-font-specification:'Cal Sans, Semi-Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:center;text-anchor:middle;fill:#000000;fill-opacity:1;stroke-width:0.113359;paint-order:fill markers stroke" x="81.337044" y="29.823992" id="text15">
 		<tspan id="tspan15" style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-size:2.95147px;font-family:'Cal Sans';-inkscape-font-specification:'Cal Sans, Semi-Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:center;text-anchor:middle;fill:#000000;fill-opacity:1;stroke-width:0.113359" x="81.337044" y="29.823992">Subtitle placeholder</tspan>
 	</text>
 	<text data-banner-class="title" xml:space="preserve" style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-size:4.3054px;font-family:'Cal Sans';-inkscape-font-specification:'Cal Sans, Semi-Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:center;text-anchor:middle;fill:#000000;fill-opacity:1;stroke-width:0.16536;paint-order:fill markers stroke" x="81.322899" y="25.601515" id="text16">
 		<tspan id="tspan16" style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-size:4.3054px;font-family:'Cal Sans';-inkscape-font-specification:'Cal Sans, Semi-Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:center;text-anchor:middle;fill:#000000;fill-opacity:1;stroke-width:0.16536" x="81.322899" y="25.601515">Title placeholder</tspan>
 	</text>
 	<path fill="currentColor" d="m 78.399148,11.080321 c -0.200988,0.05246 -0.330046,0.126724 -0.430767,0.225134 -0.141583,0.139249 -0.233953,0.33422 -0.284551,0.702328 -0.05194,0.379245 -0.05299,0.8815 -0.05299,1.601466 v 3.978142 a 1.9366169,1.9366169 0 0 1 0.602982,-0.275267 1.5271978,1.5271978 0 0 1 0.165268,-0.03342 v -6.19838 z m 0.768247,6.167745 h 5.890617 v -3.638351 c 0,-0.720432 -8.52e-4,-1.222687 -0.05299,-1.601932 -0.05052,-0.368108 -0.142985,-0.563069 -0.28455,-0.702328 -0.142109,-0.138792 -0.34073,-0.22931 -0.716722,-0.278516 -0.387132,-0.05106 -0.899603,-0.05198 -1.634886,-0.05198 h -2.048949 c -0.465119,0 -0.841129,0 -1.152594,0.01351 z m 0.640579,0.752457 h -0.564452 c -0.50133,0 -0.676335,0.0031 -0.810952,0.03852 a 1.1437736,1.1437736 0 0 0 -0.787741,0.713931 c 0.0071,0.177323 0.02,0.333755 0.03896,0.473012 0.05052,0.368108 0.142986,0.563068 0.284551,0.702327 0.142109,0.138792 0.340712,0.229311 0.716722,0.278517 0.387133,0.05106 0.899603,0.05198 1.634886,0.05198 h 2.048949 c 0.735284,0 1.24821,-8.52e-4 1.634887,-0.05153 0.375993,-0.04968 0.575139,-0.140179 0.716722,-0.278981 0.141582,-0.139248 0.233953,-0.334219 0.284551,-0.702324 0.04263,-0.309154 0.05106,-0.700933 0.05246,-1.225472 h -3.20063 v 1.395832 c 0,0.138336 0,0.207494 -0.04877,0.235346 -0.04877,0.02785 -0.11509,-0.0033 -0.247883,-0.06499 l -0.635938,-0.296145 c -0.04545,-0.02089 -0.06772,-0.0311 -0.09193,-0.0311 -0.02422,0 -0.04649,0.01017 -0.09193,0.0311 l -0.635948,0.296158 c -0.133161,0.06173 -0.199601,0.09284 -0.248339,0.06498 -0.04824,-0.02785 -0.04824,-0.09748 -0.04824,-0.235347 z" id="path16" style="stroke-width:0.464193" />
 </svg>`;
 export default svg;
--- a/packages/banners/test.html
+++ b/packages/banners/test.html
@@ -0,0 +1,13 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
 	<title></title>
 	<meta charset="UTF-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<script type="module" src="src/index.js"></script>
 </head>
 <body></body>
 </html>
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -24,6 +24,9 @@ importers:
      '@vercel/node':
        specifier: ^3.0.11
        version: 3.0.11
      cal-sans:
        specifier: ^1.0.1
        version: 1.0.1
      eslint:
        specifier: ^8.54.0
        version: 8.54.0
@@ -41,6 +44,13 @@ importers:
        version: 0.34.6
  packages/banners:
    dependencies:
      cal-sans:
        specifier: ^1.0.1
        version: 1.0.1
      opentype.js:
        specifier: ^1.3.4
        version: 1.3.4
    devDependencies:
      '@types/node':
        specifier: ^20.10.0
@@ -1607,6 +1617,9 @@ packages:
    engines: {node: '>=8'}
    dev: true
  /cal-sans@1.0.1:
    resolution: {integrity: sha512-XwN3/7jez8WmFVcNnNqO2K9lh133KiIcURCyGFnSM+ZmNZ8zIcOTNfr3SpenLAkRceYsq+fQNX/PL4C1rIkEPQ==}
  /call-bind@1.0.5:
    resolution: {integrity: sha512-C3nQxfFZxFRVoJoGKKI8y3MOEo129NQ+FgQ08iye+Mk4zNZZGdjfs06bVTr+DBSlA66Q2VEcMki/cUCP4SercQ==}
    dependencies:
@@ -3911,6 +3924,15 @@ packages:
      mimic-fn: 2.1.0
    dev: true
  /opentype.js@1.3.4:
    resolution: {integrity: sha512-d2JE9RP/6uagpQAVtJoF0pJJA/fgai89Cc50Yp0EJHk+eLp6QQ7gBoblsnubRULNY132I0J1QKMJ+JTbMqz4sw==}
    engines: {node: '>= 8.0.0'}
    hasBin: true
    dependencies:
      string.prototype.codepointat: 0.2.1
      tiny-inflate: 1.0.3
    dev: false
  /optionator@0.9.3:
    resolution: {integrity: sha512-JjCoypp+jKn1ttEFExxhetCKeJt9zhAgAve5FXHixTvFDW/5aEktX9bufBKLRRMdU7bNtpLfcGu94B3cdEJgjg==}
    engines: {node: '>= 0.8.0'}
@@ -4544,6 +4566,10 @@ packages:
      strip-ansi: 6.0.1
    dev: true
  /string.prototype.codepointat@0.2.1:
    resolution: {integrity: sha512-2cBVCj6I4IOvEnjgO/hWqXjqBGsY+zwPmHl12Srk9IXSZ56Jwwmy+66XO5Iut/oQVR7t5ihYdLB0GMa4alEUcg==}
    dev: false
  /string.prototype.trim@1.2.8:
    resolution: {integrity: sha512-lfjY4HcixfQXOfaqCvcBuOIapyaroTXhbkfJN3gcB1OtyupngWK4sEET9Knd0cXd28kTUqu/kHoV4HKSJdnjiQ==}
    engines: {node: '>= 0.4'}
@@ -4664,6 +4690,10 @@ packages:
      convert-hrtime: 3.0.0
    dev: true
  /tiny-inflate@1.0.3:
    resolution: {integrity: sha512-pkY1fj1cKHb2seWDy0B16HeWyczlJA9/WW3u3c4z/NiWDsO3DOU5D7nhTLE9CF0yXv/QZFY7sEJmj24dK+Rrqw==}
    dev: false
  /tinybench@2.5.1:
    resolution: {integrity: sha512-65NKvSuAVDP/n4CqH+a9w2kTlLReS9vhsAP06MWx+/89nMinJyB2icyl58RIcqCmIggpojIGeuJGhjU1aGMBSg==}
    dev: true
Author	SHA1	Message	Date
Gustavo "Guz" L. de Mello	063e31687a	refactor(text-rendering): ♻️ good enough text to path	2024-01-17 23:18:27 -03:00
Gustavo "Guz" L. de Mello	b0dfe09a1f	refactor: ♻️ ignore more files	2024-01-17 23:17:38 -03:00
Gustavo "Guz" L. de Mello	74bb268d8d	refactor: ♻️ flatten svg files	2024-01-17 23:08:42 -03:00
Gustavo "Guz" L. de Mello	ba31a3bc29	revert(text-rendering): font embedding time to reinvent the wheel again	2024-01-17 15:26:59 -03:00
Gustavo "Guz" L. de Mello	eb491916bc	fix: 🐛 xlink namespace missing	2024-01-17 13:33:39 -03:00
Gustavo "Guz" L. de Mello	555b70a0e4	chore: 🔧 upload test.svg, to be tested on github Uploaded the generated svg to be tested on github and other environments	2024-01-16 18:58:57 -03:00
Gustavo "Guz" L. de Mello	08b66076f6	chore: 🔧 ignore test files	2024-01-16 18:58:00 -03:00
Gustavo "Guz" L. de Mello	40c89b11c4	refactor(text-rendering): ♻️ use embeded fonts Removed the text to path conversion, it was too complicated to align the generated paths with the dynamic layouts' texts. So embeded font files using data URIs is being used, this is experimental and a "quick-fix", because data URIs could be not compatible and/or work in some environments and browsers. A comment and/or issue with more details about this will be created.	2024-01-16 18:55:41 -03:00
Guz013	fc3243dfe7	feat(banners-lib): ✨ text to svg converting	2023-12-01 15:32:52 -03:00
Guz013	2a464eeee4	feat(banners-lib): ✨ background solid color change	2023-12-01 10:59:42 -03:00
Guz013	9ad2ca0d3c	feat(banners-lib): ✨ basic custom icon fetching	2023-11-30 17:53:51 -03:00
Guz013	171c5ffd96	feat(banners-lib): ✨ title position manipulation The banner's title now can changes position to fit correctly when there's no subtitle.	2023-11-30 15:15:50 -03:00
Guz013	416f6a3cd2	fix(banners-lib): 🐛 right-to-left layouts not being imported	2023-11-30 15:14:48 -03:00
Guz013	784ad332a3	fix(types): 🐛 change HTMLElement to Element type	2023-11-30 15:13:30 -03:00
Guz013	47bbf1da46	refactor(banners-lib)!: 💥 ♻️ move library setting to the Banner Object	2023-11-30 15:10:50 -03:00
Guz013	bd580db9f5	feat(banners-lib): ✨ basic title and subtitle manipulation	2023-11-30 14:16:20 -03:00
Guz013	9f71f741e8	refactor(banners-lib): ♻️ moved type definitions files	2023-11-29 16:35:20 -03:00
Guz013	42f4091087	feat(banners-lib): ✨ read svg files without node:fs Added to the SVG converting script a line to create .svg.js files. These files are normal JS files that exports just a single string, the SVG file content. This way the library doesn't need a build step to embed these files and/or node:fs to read them.	2023-11-29 16:33:24 -03:00
Guz013	94fca1a902	feat(ci): ✨ 👷 add lint-staged back	2023-11-29 16:31:01 -03:00
Guz013	f8dfce5aac	feat(banners-lib): ✨ Banner Object API type definitions	2023-11-29 12:07:11 -03:00