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-height="1023"
+     inkscape:window-width="2560"
+     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
-   width="162.68884mm"
-   height="42.772182mm"
-   viewBox="0 0 162.68884 42.772182"
-   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"><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"><inkscape:page
-       x="0"
-       y="5.1822312e-08"
-       width="162.68884"
-       height="42.772182"
-       id="page20"
-       margin="0"
-       bleed="0"
-       inkscape:export-filename="horizontal.inkscape.svg"
-       inkscape:export-xdpi="318.59933"
-       inkscape:export-ydpi="318.59933" /></sodipodi:namedview><defs
-     id="defs1"><linearGradient
-       id="linearGradient55"
-       inkscape:collect="always"
-       inkscape:label="background-gradient"><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"><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"
-       inkscape:label="color-stripe-gradient"><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"
-         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>
+<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 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"
+		inkscape:label="subtitle" 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 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"
+		inkscape:label="title" 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>
--- 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"
-	inkscape:version="1.3.1 (91b66b0783, 2023-11-16, custom)"
+	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">
-		<inkscape:page x="0" y="0" width="162.68883" height="42.772179" id="page19" margin="0" bleed="0" />
-	</sodipodi:namedview>
+		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" 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"
-			y1="57.455349" x2="159.75043" y2="57.455349" gradientUnits="userSpaceOnUse"
-			gradientTransform="translate(310.57446,-12.675088)" />
-		<linearGradient id="linearGradient82-2" inkscape:label="color-stripe-gradient">
+		<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" />
@@ -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"
-			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 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"
-			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" inkscape:label="Drop Shadow" id="filter56" x="-0.031419724"
-			y="-0.15732744" width="1.0628394" height="1.3991793">
+		<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" />
@@ -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"
-		inkscape:export-filename="horizontal.inkscape.svg" inkscape:export-xdpi="318.59933"
-		inkscape:export-ydpi="318.59933" transform="translate(-318.49757,-9.3628894)">
-		<path id="path20"
-			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 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"
-			inkscape:label="color-stripe"
-			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" />
-		<g id="background" inkscape:label="background" transform="translate(309.65655,2.5819009)">
-			<path id="fallback"
-				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="image" inkscape:label="image">
-				<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" inkscape:label="embed" mask="url(#mask17)"
-					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="gradient"
-				style="display:inline;opacity:1;fill:url(#linearGradient15);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="solid-color"
-				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="content" inkscape:label="content" transform="translate(310.57445,-10.033803)">
-			<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>
+	<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 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"
+		inkscape:label="gradient" />
+	<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 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" inkscape:label="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 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" inkscape:label="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>
--- 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">
-	<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">
-		<inkscape:page x="0" y="0" width="162.68883" height="42.772179" id="page19" margin="0" bleed="0" />
-	</sodipodi:namedview>
+<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 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 data-banner-class="color-stripe-gradient" id="linearGradient82-2">
+		<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" />
@@ -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" />
-		<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">
+		<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" />
@@ -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 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 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" />
-		<g data-banner-class="background" id="background" transform="translate(309.65655,2.5819009)">
-			<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" />
-			<g data-banner-class="image" id="image">
-				<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" />
-			</g>
-			<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" />
-			<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" />
-		</g>
-		<g data-banner-class="content" id="content" transform="translate(310.57445,-10.033803)">
-			<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">
-				<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 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>
+	<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>
--- 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
-   width="162.68884mm"
-   height="48.491169mm"
-   viewBox="0 0 162.68884 48.491168"
-   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"><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"><inkscape:page
-       x="0"
-       y="0"
-       width="162.68884"
-       height="48.491169"
-       id="page18"
-       margin="0"
-       bleed="0" /></sodipodi:namedview><defs
-     id="defs1"><linearGradient
-       id="linearGradient55"
-       inkscape:collect="always"
-       inkscape:label="background-gradient"><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"><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"
-       inkscape:label="color-stripe-gradient"><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
-       inkscape:collect="always"
-       xlink:href="#linearGradient82-2"
-       id="linearGradient19"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(309.94661,59.369176)"
-       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>
+<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 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"
+		inkscape:label="subtitle" 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 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"
+		inkscape:label="title" 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>
--- 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