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
34 changed files with 2690 additions and 48 deletions
--- a/.changeset/hot-seals-enjoy.md
+++ b/.changeset/hot-seals-enjoy.md
@@ -0,0 +1,5 @@
 ---
 "@LoredMarkdown/banners": minor
 ---
 Created the banners layouts for the Banner Library.
--- a/.gitignore
+++ b/.gitignore
@@ -5,4 +5,5 @@ node_modules
 !.env.example
 .vercel
 .turbo
 *.inkscape.svg.*
--- 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
@@ -10,13 +10,12 @@
 		"strict": true,
 		"module": "ES2022",
 		"target": "ES2022",
-		"alwaysStrict": true,
+		"alwaysStrict": true
 	},
 	"include": [
 		"./**/*.test.js",
 		"./src/**/*.js",
 		"./api/**/*.js",
 		"./packages/*/src/**/*.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
@@ -0,0 +1,7 @@
 {
 	"extends": "../../jsconfig.json",
 	"include": [
 		"./src/**/*",
 		"./scripts/**/*.js"
 	]
 }
--- a/packages/banners/package.json
+++ b/packages/banners/package.json
@@ -1,13 +1,24 @@
 {
 	"private": true,
-	"name": "banners",
+	"type": "module",
 	"name": "@LoredMarkdown/banners",
 	"version": "0.0.0",
 	"description": "",
 	"main": "index.js",
 	"scripts": {
-		"test": "echo \"Error: no test specified\" && exit 1"
+		"lint": "eslint .",
 		"scripts:banners": "node ./scripts/inkscape-convert.js ./static/horizontal.inkscape.svg ./static/horizontal-rtl.inkscape.svg ./static/vertical.inkscape.svg"
 	},
 	"keywords": [],
 	"author": "",
-	"license": "ISC"
+	"license": "ISC",
 	"devDependencies": {
 		"@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/pnpm-lock.yaml
+++ b/packages/banners/pnpm-lock.yaml
@@ -0,0 +1,764 @@
 lockfileVersion: '6.0'
 settings:
  autoInstallPeers: true
  excludeLinksFromLockfile: false
 devDependencies:
  '@types/node':
    specifier: ^20.10.0
    version: 20.10.0
  eslint:
    specifier: ^8.54.0
    version: 8.54.0
  linkedom:
    specifier: ^0.16.4
    version: 0.16.4
 packages:
  /@aashutoshrathi/word-wrap@1.2.6:
    resolution: {integrity: sha512-1Yjs2SvM8TflER/OD3cOjhWWOZb58A2t7wpE2S9XfBYTiIl+XFhQG2bjy4Pu1I+EAlCNUzRDYDdFwFYUKvXcIA==}
    engines: {node: '>=0.10.0'}
    dev: true
  /@eslint-community/eslint-utils@4.4.0(eslint@8.54.0):
    resolution: {integrity: sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==}
    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
    peerDependencies:
      eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
    dependencies:
      eslint: 8.54.0
      eslint-visitor-keys: 3.4.3
    dev: true
  /@eslint-community/regexpp@4.10.0:
    resolution: {integrity: sha512-Cu96Sd2By9mCNTx2iyKOmq10v22jUVQv0lQnlGNy16oE9589yE+QADPbrMGCkA51cKZSg3Pu/aTJVTGfL/qjUA==}
    engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
    dev: true
  /@eslint/eslintrc@2.1.3:
    resolution: {integrity: sha512-yZzuIG+jnVu6hNSzFEN07e8BxF3uAzYtQb6uDkaYZLo6oYZDCq454c5kB8zxnzfCYyP4MIuyBn10L0DqwujTmA==}
    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
    dependencies:
      ajv: 6.12.6
      debug: 4.3.4
      espree: 9.6.1
      globals: 13.23.0
      ignore: 5.3.0
      import-fresh: 3.3.0
      js-yaml: 4.1.0
      minimatch: 3.1.2
      strip-json-comments: 3.1.1
    transitivePeerDependencies:
      - supports-color
    dev: true
  /@eslint/js@8.54.0:
    resolution: {integrity: sha512-ut5V+D+fOoWPgGGNj83GGjnntO39xDy6DWxO0wb7Jp3DcMX0TfIqdzHF85VTQkerdyGmuuMD9AKAo5KiNlf/AQ==}
    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
    dev: true
  /@humanwhocodes/config-array@0.11.13:
    resolution: {integrity: sha512-JSBDMiDKSzQVngfRjOdFXgFfklaXI4K9nLF49Auh21lmBWRLIK3+xTErTWD4KU54pb6coM6ESE7Awz/FNU3zgQ==}
    engines: {node: '>=10.10.0'}
    dependencies:
      '@humanwhocodes/object-schema': 2.0.1
      debug: 4.3.4
      minimatch: 3.1.2
    transitivePeerDependencies:
      - supports-color
    dev: true
  /@humanwhocodes/module-importer@1.0.1:
    resolution: {integrity: sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==}
    engines: {node: '>=12.22'}
    dev: true
  /@humanwhocodes/object-schema@2.0.1:
    resolution: {integrity: sha512-dvuCeX5fC9dXgJn9t+X5atfmgQAzUOWqS1254Gh0m6i8wKd10ebXkfNKiRK+1GWi/yTvvLDHpoxLr0xxxeslWw==}
    dev: true
  /@nodelib/fs.scandir@2.1.5:
    resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
    engines: {node: '>= 8'}
    dependencies:
      '@nodelib/fs.stat': 2.0.5
      run-parallel: 1.2.0
    dev: true
  /@nodelib/fs.stat@2.0.5:
    resolution: {integrity: sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==}
    engines: {node: '>= 8'}
    dev: true
  /@nodelib/fs.walk@1.2.8:
    resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
    engines: {node: '>= 8'}
    dependencies:
      '@nodelib/fs.scandir': 2.1.5
      fastq: 1.15.0
    dev: true
  /@types/node@20.10.0:
    resolution: {integrity: sha512-D0WfRmU9TQ8I9PFx9Yc+EBHw+vSpIub4IDvQivcp26PtPrdMGAq5SDcpXEo/epqa/DXotVpekHiLNTg3iaKXBQ==}
    dependencies:
      undici-types: 5.26.5
    dev: true
  /@ungap/structured-clone@1.2.0:
    resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==}
    dev: true
  /acorn-jsx@5.3.2(acorn@8.11.2):
    resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
    peerDependencies:
      acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
    dependencies:
      acorn: 8.11.2
    dev: true
  /acorn@8.11.2:
    resolution: {integrity: sha512-nc0Axzp/0FILLEVsm4fNwLCwMttvhEI263QtVPQcbpfZZ3ts0hLsZGOpE6czNlid7CJ9MlyH8reXkpsf3YUY4w==}
    engines: {node: '>=0.4.0'}
    hasBin: true
    dev: true
  /ajv@6.12.6:
    resolution: {integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==}
    dependencies:
      fast-deep-equal: 3.1.3
      fast-json-stable-stringify: 2.1.0
      json-schema-traverse: 0.4.1
      uri-js: 4.4.1
    dev: true
  /ansi-regex@5.0.1:
    resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
    engines: {node: '>=8'}
    dev: true
  /ansi-styles@4.3.0:
    resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
    engines: {node: '>=8'}
    dependencies:
      color-convert: 2.0.1
    dev: true
  /argparse@2.0.1:
    resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
    dev: true
  /balanced-match@1.0.2:
    resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
    dev: true
  /boolbase@1.0.0:
    resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==}
    dev: true
  /brace-expansion@1.1.11:
    resolution: {integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==}
    dependencies:
      balanced-match: 1.0.2
      concat-map: 0.0.1
    dev: true
  /callsites@3.1.0:
    resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
    engines: {node: '>=6'}
    dev: true
  /chalk@4.1.2:
    resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
    engines: {node: '>=10'}
    dependencies:
      ansi-styles: 4.3.0
      supports-color: 7.2.0
    dev: true
  /color-convert@2.0.1:
    resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
    engines: {node: '>=7.0.0'}
    dependencies:
      color-name: 1.1.4
    dev: true
  /color-name@1.1.4:
    resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
    dev: true
  /concat-map@0.0.1:
    resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
    dev: true
  /cross-spawn@7.0.3:
    resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==}
    engines: {node: '>= 8'}
    dependencies:
      path-key: 3.1.1
      shebang-command: 2.0.0
      which: 2.0.2
    dev: true
  /css-select@5.1.0:
    resolution: {integrity: sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==}
    dependencies:
      boolbase: 1.0.0
      css-what: 6.1.0
      domhandler: 5.0.3
      domutils: 3.1.0
      nth-check: 2.1.1
    dev: true
  /css-what@6.1.0:
    resolution: {integrity: sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==}
    engines: {node: '>= 6'}
    dev: true
  /cssom@0.5.0:
    resolution: {integrity: sha512-iKuQcq+NdHqlAcwUY0o/HL69XQrUaQdMjmStJ8JFmUaiiQErlhrmuigkg/CU4E2J0IyUKUrMAgl36TvN67MqTw==}
    dev: true
  /debug@4.3.4:
    resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==}
    engines: {node: '>=6.0'}
    peerDependencies:
      supports-color: '*'
    peerDependenciesMeta:
      supports-color:
        optional: true
    dependencies:
      ms: 2.1.2
    dev: true
  /deep-is@0.1.4:
    resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
    dev: true
  /doctrine@3.0.0:
    resolution: {integrity: sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==}
    engines: {node: '>=6.0.0'}
    dependencies:
      esutils: 2.0.3
    dev: true
  /dom-serializer@2.0.0:
    resolution: {integrity: sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==}
    dependencies:
      domelementtype: 2.3.0
      domhandler: 5.0.3
      entities: 4.5.0
    dev: true
  /domelementtype@2.3.0:
    resolution: {integrity: sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==}
    dev: true
  /domhandler@5.0.3:
    resolution: {integrity: sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==}
    engines: {node: '>= 4'}
    dependencies:
      domelementtype: 2.3.0
    dev: true
  /domutils@3.1.0:
    resolution: {integrity: sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==}
    dependencies:
      dom-serializer: 2.0.0
      domelementtype: 2.3.0
      domhandler: 5.0.3
    dev: true
  /entities@4.5.0:
    resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
    engines: {node: '>=0.12'}
    dev: true
  /escape-string-regexp@4.0.0:
    resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
    engines: {node: '>=10'}
    dev: true
  /eslint-scope@7.2.2:
    resolution: {integrity: sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==}
    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
    dependencies:
      esrecurse: 4.3.0
      estraverse: 5.3.0
    dev: true
  /eslint-visitor-keys@3.4.3:
    resolution: {integrity: sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==}
    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
    dev: true
  /eslint@8.54.0:
    resolution: {integrity: sha512-NY0DfAkM8BIZDVl6PgSa1ttZbx3xHgJzSNJKYcQglem6CppHyMhRIQkBVSSMaSRnLhig3jsDbEzOjwCVt4AmmA==}
    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
    hasBin: true
    dependencies:
      '@eslint-community/eslint-utils': 4.4.0(eslint@8.54.0)
      '@eslint-community/regexpp': 4.10.0
      '@eslint/eslintrc': 2.1.3
      '@eslint/js': 8.54.0
      '@humanwhocodes/config-array': 0.11.13
      '@humanwhocodes/module-importer': 1.0.1
      '@nodelib/fs.walk': 1.2.8
      '@ungap/structured-clone': 1.2.0
      ajv: 6.12.6
      chalk: 4.1.2
      cross-spawn: 7.0.3
      debug: 4.3.4
      doctrine: 3.0.0
      escape-string-regexp: 4.0.0
      eslint-scope: 7.2.2
      eslint-visitor-keys: 3.4.3
      espree: 9.6.1
      esquery: 1.5.0
      esutils: 2.0.3
      fast-deep-equal: 3.1.3
      file-entry-cache: 6.0.1
      find-up: 5.0.0
      glob-parent: 6.0.2
      globals: 13.23.0
      graphemer: 1.4.0
      ignore: 5.3.0
      imurmurhash: 0.1.4
      is-glob: 4.0.3
      is-path-inside: 3.0.3
      js-yaml: 4.1.0
      json-stable-stringify-without-jsonify: 1.0.1
      levn: 0.4.1
      lodash.merge: 4.6.2
      minimatch: 3.1.2
      natural-compare: 1.4.0
      optionator: 0.9.3
      strip-ansi: 6.0.1
      text-table: 0.2.0
    transitivePeerDependencies:
      - supports-color
    dev: true
  /espree@9.6.1:
    resolution: {integrity: sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==}
    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
    dependencies:
      acorn: 8.11.2
      acorn-jsx: 5.3.2(acorn@8.11.2)
      eslint-visitor-keys: 3.4.3
    dev: true
  /esquery@1.5.0:
    resolution: {integrity: sha512-YQLXUplAwJgCydQ78IMJywZCceoqk1oH01OERdSAJc/7U2AylwjhSCLDEtqwg811idIS/9fIU5GjG73IgjKMVg==}
    engines: {node: '>=0.10'}
    dependencies:
      estraverse: 5.3.0
    dev: true
  /esrecurse@4.3.0:
    resolution: {integrity: sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==}
    engines: {node: '>=4.0'}
    dependencies:
      estraverse: 5.3.0
    dev: true
  /estraverse@5.3.0:
    resolution: {integrity: sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==}
    engines: {node: '>=4.0'}
    dev: true
  /esutils@2.0.3:
    resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
    engines: {node: '>=0.10.0'}
    dev: true
  /fast-deep-equal@3.1.3:
    resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
    dev: true
  /fast-json-stable-stringify@2.1.0:
    resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==}
    dev: true
  /fast-levenshtein@2.0.6:
    resolution: {integrity: sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==}
    dev: true
  /fastq@1.15.0:
    resolution: {integrity: sha512-wBrocU2LCXXa+lWBt8RoIRD89Fi8OdABODa/kEnyeyjS5aZO5/GNvI5sEINADqP/h8M29UHTHUb53sUu5Ihqdw==}
    dependencies:
      reusify: 1.0.4
    dev: true
  /file-entry-cache@6.0.1:
    resolution: {integrity: sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==}
    engines: {node: ^10.12.0 || >=12.0.0}
    dependencies:
      flat-cache: 3.2.0
    dev: true
  /find-up@5.0.0:
    resolution: {integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==}
    engines: {node: '>=10'}
    dependencies:
      locate-path: 6.0.0
      path-exists: 4.0.0
    dev: true
  /flat-cache@3.2.0:
    resolution: {integrity: sha512-CYcENa+FtcUKLmhhqyctpclsq7QF38pKjZHsGNiSQF5r4FtoKDWabFDl3hzaEQMvT1LHEysw5twgLvpYYb4vbw==}
    engines: {node: ^10.12.0 || >=12.0.0}
    dependencies:
      flatted: 3.2.9
      keyv: 4.5.4
      rimraf: 3.0.2
    dev: true
  /flatted@3.2.9:
    resolution: {integrity: sha512-36yxDn5H7OFZQla0/jFJmbIKTdZAQHngCedGxiMmpNfEZM0sdEeT+WczLQrjK6D7o2aiyLYDnkw0R3JK0Qv1RQ==}
    dev: true
  /fs.realpath@1.0.0:
    resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
    dev: true
  /glob-parent@6.0.2:
    resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==}
    engines: {node: '>=10.13.0'}
    dependencies:
      is-glob: 4.0.3
    dev: true
  /glob@7.2.3:
    resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==}
    dependencies:
      fs.realpath: 1.0.0
      inflight: 1.0.6
      inherits: 2.0.4
      minimatch: 3.1.2
      once: 1.4.0
      path-is-absolute: 1.0.1
    dev: true
  /globals@13.23.0:
    resolution: {integrity: sha512-XAmF0RjlrjY23MA51q3HltdlGxUpXPvg0GioKiD9X6HD28iMjo2dKC8Vqwm7lne4GNr78+RHTfliktR6ZH09wA==}
    engines: {node: '>=8'}
    dependencies:
      type-fest: 0.20.2
    dev: true
  /graphemer@1.4.0:
    resolution: {integrity: sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==}
    dev: true
  /has-flag@4.0.0:
    resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
    engines: {node: '>=8'}
    dev: true
  /html-escaper@3.0.3:
    resolution: {integrity: sha512-RuMffC89BOWQoY0WKGpIhn5gX3iI54O6nRA0yC124NYVtzjmFWBIiFd8M0x+ZdX0P9R4lADg1mgP8C7PxGOWuQ==}
    dev: true
  /htmlparser2@9.0.0:
    resolution: {integrity: sha512-uxbSI98wmFT/G4P2zXx4OVx04qWUmyFPrD2/CNepa2Zo3GPNaCaaxElDgwUrwYWkK1nr9fft0Ya8dws8coDLLQ==}
    dependencies:
      domelementtype: 2.3.0
      domhandler: 5.0.3
      domutils: 3.1.0
      entities: 4.5.0
    dev: true
  /ignore@5.3.0:
    resolution: {integrity: sha512-g7dmpshy+gD7mh88OC9NwSGTKoc3kyLAZQRU1mt53Aw/vnvfXnbC+F/7F7QoYVKbV+KNvJx8wArewKy1vXMtlg==}
    engines: {node: '>= 4'}
    dev: true
  /import-fresh@3.3.0:
    resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==}
    engines: {node: '>=6'}
    dependencies:
      parent-module: 1.0.1
      resolve-from: 4.0.0
    dev: true
  /imurmurhash@0.1.4:
    resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==}
    engines: {node: '>=0.8.19'}
    dev: true
  /inflight@1.0.6:
    resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==}
    dependencies:
      once: 1.4.0
      wrappy: 1.0.2
    dev: true
  /inherits@2.0.4:
    resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
    dev: true
  /is-extglob@2.1.1:
    resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
    engines: {node: '>=0.10.0'}
    dev: true
  /is-glob@4.0.3:
    resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
    engines: {node: '>=0.10.0'}
    dependencies:
      is-extglob: 2.1.1
    dev: true
  /is-path-inside@3.0.3:
    resolution: {integrity: sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==}
    engines: {node: '>=8'}
    dev: true
  /isexe@2.0.0:
    resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
    dev: true
  /js-yaml@4.1.0:
    resolution: {integrity: sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==}
    hasBin: true
    dependencies:
      argparse: 2.0.1
    dev: true
  /json-buffer@3.0.1:
    resolution: {integrity: sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==}
    dev: true
  /json-schema-traverse@0.4.1:
    resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==}
    dev: true
  /json-stable-stringify-without-jsonify@1.0.1:
    resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==}
    dev: true
  /keyv@4.5.4:
    resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
    dependencies:
      json-buffer: 3.0.1
    dev: true
  /levn@0.4.1:
    resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
    engines: {node: '>= 0.8.0'}
    dependencies:
      prelude-ls: 1.2.1
      type-check: 0.4.0
    dev: true
  /linkedom@0.16.4:
    resolution: {integrity: sha512-SykvDVh/jAnaO+WiPqH5vX3QpZrIRImuppzYhIHons3RXPhDwqN2dOyfopOVaHleqWtoS+3vWCqen+m8M3HToQ==}
    dependencies:
      css-select: 5.1.0
      cssom: 0.5.0
      html-escaper: 3.0.3
      htmlparser2: 9.0.0
      uhyphen: 0.2.0
    dev: true
  /locate-path@6.0.0:
    resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
    engines: {node: '>=10'}
    dependencies:
      p-locate: 5.0.0
    dev: true
  /lodash.merge@4.6.2:
    resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
    dev: true
  /minimatch@3.1.2:
    resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
    dependencies:
      brace-expansion: 1.1.11
    dev: true
  /ms@2.1.2:
    resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==}
    dev: true
  /natural-compare@1.4.0:
    resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
    dev: true
  /nth-check@2.1.1:
    resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==}
    dependencies:
      boolbase: 1.0.0
    dev: true
  /once@1.4.0:
    resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
    dependencies:
      wrappy: 1.0.2
    dev: true
  /optionator@0.9.3:
    resolution: {integrity: sha512-JjCoypp+jKn1ttEFExxhetCKeJt9zhAgAve5FXHixTvFDW/5aEktX9bufBKLRRMdU7bNtpLfcGu94B3cdEJgjg==}
    engines: {node: '>= 0.8.0'}
    dependencies:
      '@aashutoshrathi/word-wrap': 1.2.6
      deep-is: 0.1.4
      fast-levenshtein: 2.0.6
      levn: 0.4.1
      prelude-ls: 1.2.1
      type-check: 0.4.0
    dev: true
  /p-limit@3.1.0:
    resolution: {integrity: sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==}
    engines: {node: '>=10'}
    dependencies:
      yocto-queue: 0.1.0
    dev: true
  /p-locate@5.0.0:
    resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==}
    engines: {node: '>=10'}
    dependencies:
      p-limit: 3.1.0
    dev: true
  /parent-module@1.0.1:
    resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
    engines: {node: '>=6'}
    dependencies:
      callsites: 3.1.0
    dev: true
  /path-exists@4.0.0:
    resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
    engines: {node: '>=8'}
    dev: true
  /path-is-absolute@1.0.1:
    resolution: {integrity: sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==}
    engines: {node: '>=0.10.0'}
    dev: true
  /path-key@3.1.1:
    resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
    engines: {node: '>=8'}
    dev: true
  /prelude-ls@1.2.1:
    resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
    engines: {node: '>= 0.8.0'}
    dev: true
  /punycode@2.3.1:
    resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
    engines: {node: '>=6'}
    dev: true
  /queue-microtask@1.2.3:
    resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
    dev: true
  /resolve-from@4.0.0:
    resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
    engines: {node: '>=4'}
    dev: true
  /reusify@1.0.4:
    resolution: {integrity: sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==}
    engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
    dev: true
  /rimraf@3.0.2:
    resolution: {integrity: sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==}
    hasBin: true
    dependencies:
      glob: 7.2.3
    dev: true
  /run-parallel@1.2.0:
    resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
    dependencies:
      queue-microtask: 1.2.3
    dev: true
  /shebang-command@2.0.0:
    resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
    engines: {node: '>=8'}
    dependencies:
      shebang-regex: 3.0.0
    dev: true
  /shebang-regex@3.0.0:
    resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
    engines: {node: '>=8'}
    dev: true
  /strip-ansi@6.0.1:
    resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
    engines: {node: '>=8'}
    dependencies:
      ansi-regex: 5.0.1
    dev: true
  /strip-json-comments@3.1.1:
    resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
    engines: {node: '>=8'}
    dev: true
  /supports-color@7.2.0:
    resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
    engines: {node: '>=8'}
    dependencies:
      has-flag: 4.0.0
    dev: true
  /text-table@0.2.0:
    resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==}
    dev: true
  /type-check@0.4.0:
    resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
    engines: {node: '>= 0.8.0'}
    dependencies:
      prelude-ls: 1.2.1
    dev: true
  /type-fest@0.20.2:
    resolution: {integrity: sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==}
    engines: {node: '>=10'}
    dev: true
  /uhyphen@0.2.0:
    resolution: {integrity: sha512-qz3o9CHXmJJPGBdqzab7qAYuW8kQGKNEuoHFYrBwV6hWIMcpAmxDLXojcHfFr9US1Pe6zUswEIJIbLI610fuqA==}
    dev: true
  /undici-types@5.26.5:
    resolution: {integrity: sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==}
    dev: true
  /uri-js@4.4.1:
    resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
    dependencies:
      punycode: 2.3.1
    dev: true
  /which@2.0.2:
    resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
    engines: {node: '>= 8'}
    hasBin: true
    dependencies:
      isexe: 2.0.0
    dev: true
  /wrappy@1.0.2:
    resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
    dev: true
  /yocto-queue@0.1.0:
    resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
    engines: {node: '>=10'}
    dev: true
--- a/packages/banners/scripts/inkscape-convert.js
+++ b/packages/banners/scripts/inkscape-convert.js
@@ -0,0 +1,93 @@
 // eslint-disable-next-line jsdoc/no-bad-blocks
 /* eslint-disable
@typescript-eslint/no-unsafe-argument,
@typescript-eslint/no-unsafe-member-access,
@typescript-eslint/no-unsafe-assignment,
@typescript-eslint/no-unsafe-call,
 */
 import process from 'node:process';
 import fs from 'node:fs/promises';
 import path from 'node:path';
 import { parseHTML } from 'linkedom';
 /** @type {string[]} */
 const paths = process.argv
 	.filter(a => a.endsWith('.inkscape.svg'))
 	.map(a => (a.startsWith('/') ? a : path.join(process.cwd(), a)));
 /**
 * @typedef {import('linkedom').HTMLElement} HTMLElement
 * @param {HTMLElement} el - The element to crawl on.
 * @param {(el: HTMLElement) => HTMLElement | void} callback
 * - Callback function to be run on each element.
 */
 function crawl(el, callback) {
 	for (const child of el.childNodes) {
 		callback(child);
 		if (child.nodeType === child.ELEMENT_NODE)
 			crawl(child, callback);
 	}
 }
 /**
 * @param {string} file - Files string to be converted.
 * @returns {string} - The converted file string content.
 */
 function covert(file) {
 	const { document } = parseHTML(file);
 	// @ts-expect-error - because SVGElement is different from HTMLElement
 	const el =/** @type {HTMLElement} */ (document.querySelector('svg'));
 	crawl(el, (e) => {
 		if (e.tagName === undefined || !e.hasAttributes()) return;
 		/** @type {string | null } */
 		const label = e.getAttribute('inkscape:label');
 		if (!label)	return;
 		e.setAttribute('data-banner-class', label);
 		for (const attr of e.attributes) {
 			// eslint-disable-next-line max-len
 			if (attr.name.startsWith('inkscape:'))
 				e.removeAttribute(attr.name);
 			/* eslint-enable */
 		}
 	});
 	const tmp = document.createElement('template');
 	// @ts-expect-error el is type HTMLElement and not Node.
 	tmp.appendChild(el);
 	const capitalizedElements = [
 		'linearGradient',
 		'feFlood',
 		'feGaussianBlur',
 		'feOffset',
 		'feComposite',
 	];
 	let htmlString = tmp.innerHTML;
 	for (const e of capitalizedElements) {
 		htmlString = htmlString.replaceAll(`<${e.toLowerCase()}`, `<${e}`);
 		htmlString = htmlString.replaceAll(`</${e.toLowerCase()}`, `</${e}`);
 	}
 	return htmlString;
 }
 /* eslint-disable no-await-in-loop, security/detect-non-literal-fs-filename */
 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
@@ -0,0 +1,633 @@
 <?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.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.1011145"
     inkscape:cx="156.20537"
     inkscape:cy="-119.42446"
     inkscape:window-width="2560"
     inkscape:window-height="1011"
     inkscape:window-x="0"
     inkscape:window-y="32"
     inkscape:window-maximized="1"
     inkscape:current-layer="layer2"
     showgrid="false"
     inkscape:export-bgcolor="#ffffff00"><inkscape:page
       x="0"
       y="0"
       width="162.68884"
       height="48.491169"
       id="page18"
       margin="0"
       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"
       height="42.772179"
       id="page19"
       margin="0"
       bleed="0" /><inkscape:page
       x="0"
       y="-56.02528"
       width="162.68884"
       height="42.772182"
       id="page20"
       margin="0"
       bleed="0" /></sodipodi:namedview><defs
     id="defs1"><inkscape:path-effect
       effect="fillet_chamfer"
       id="path-effect21"
       is_visible="true"
       lpeversion="1"
       nodesatellites_param="F,0,0,1,0,4.2465822e-06,0,1 @ F,0,0,1,0,3.6765092,0,1 @ F,0,0,1,0,4.2465822e-06,0,1 @ F,0,0,1,0,4.2465822e-06,0,1 @ F,0,0,1,0,4.2465821e-06,0,1 @ F,0,0,1,0,4.2465821e-06,0,1 @ F,0,0,1,0,4.2465821e-06,0,1 @ F,0,0,1,0,4.2465821e-06,0,1"
       radius="1.6050074e-05"
       unit="px"
       method="auto"
       mode="F"
       chamfer_steps="1"
       flexible="false"
       use_knot_distance="true"
       apply_no_radius="true"
       apply_with_radius="true"
       only_selected="false"
       hide_knots="false" /><inkscape:path-effect
       effect="fillet_chamfer"
       id="path-effect20"
       is_visible="true"
       lpeversion="1"
       nodesatellites_param=""
       radius="0"
       unit="px"
       method="auto"
       mode="F"
       chamfer_steps="1"
       flexible="false"
       use_knot_distance="true"
       apply_no_radius="true"
       apply_with_radius="true"
       only_selected="false"
       hide_knots="false" /><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><clipPath
       clipPathUnits="userSpaceOnUse"
       id="clipPath25"><rect
         style="fill:#ff0000;stroke:none;stroke-width:3;stroke-linecap:square;stroke-linejoin:miter;paint-order:stroke markers fill;stop-color:#000000"
         id="rect25-8"
         width="78"
         height="45.033199"
         x="763.61322"
         y="452.82422" /></clipPath><clipPath
       clipPathUnits="userSpaceOnUse"
       id="clipPath47"><path
         id="path47"
         style="stroke-width:0.1;stroke-linecap:square;paint-order:markers fill stroke;stop-color:#000000"
         d="M 438.25066,553.76374 H 1298.1212 V 755.15928 H 438.25066 Z"
         sodipodi:nodetypes="ccccc" /></clipPath><clipPath
       clipPathUnits="userSpaceOnUse"
       id="clipPath33"><rect
         style="fill:#000000;stroke:#000000;stroke-width:0;stroke-linejoin:bevel;paint-order:stroke markers fill;stop-color:#000000"
         id="rect5-4"
         width="20"
         height="200"
         x="530"
         y="595" /></clipPath><clipPath
       clipPathUnits="userSpaceOnUse"
       id="clipPath23"><path
         id="path23"
         style="stroke-width:0.1;stroke-linecap:square;paint-order:markers fill stroke;stop-color:#000000"
         d="m -880.82767,-187.29769 h 1640.84 v 73.28155 h -1640.84 z" /></clipPath><clipPath
       clipPathUnits="userSpaceOnUse"
       id="clipPath52"><path
         id="path52"
         style="stroke-width:0.1;stroke-linecap:square;paint-order:markers fill stroke;stop-color:#000000"
         d="m -880.82767,-187.29769 h 1640.84 v 73.28155 h -1640.84 z" /></clipPath><clipPath
       clipPathUnits="userSpaceOnUse"
       id="clipPath5"><path
         id="path5"
         style="stroke-width:0.1;stroke-linecap:square;paint-order:markers fill stroke;stop-color:#000000"
         d="M 438.25066,553.76374 H 1298.1212 V 755.15928 H 438.25066 Z"
         sodipodi:nodetypes="ccccc" /></clipPath><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><inkscape:path-effect
       effect="fillet_chamfer"
       id="path-effect4"
       is_visible="true"
       lpeversion="1"
       nodesatellites_param="F,0,0,1,0,0,0,1 @ F,0,0,1,0,0,0,1 @ F,0,0,1,0,0,0,1 @ F,0,0,1,0,0,0,1 @ F,0,0,1,0,0,0,1 @ F,0,0,1,0,0,0,1 @ F,0,0,1,0,0,0,1 @ F,0,0,1,0,0,0,1"
       radius="0"
       unit="px"
       method="auto"
       mode="F"
       chamfer_steps="1"
       flexible="false"
       use_knot_distance="true"
       apply_no_radius="true"
       apply_with_radius="true"
       only_selected="false"
       hide_knots="false" /><inkscape:path-effect
       effect="fillet_chamfer"
       id="path-effect3"
       is_visible="true"
       lpeversion="1"
       nodesatellites_param="F,0,0,1,0,0,0,1 @ F,0,0,1,0,0,0,1 @ F,0,0,1,0,0,0,1 @ F,0,0,1,0,0,0,1 @ F,0,0,1,0,0,0,1 @ F,0,0,1,0,0,0,1 @ F,0,0,1,0,0,0,1 @ F,0,0,1,0,0,0,1"
       radius="0"
       unit="px"
       method="auto"
       mode="F"
       chamfer_steps="1"
       flexible="false"
       use_knot_distance="true"
       apply_no_radius="true"
       apply_with_radius="true"
       only_selected="false"
       hide_knots="false" /><inkscape:path-effect
       effect="fillet_chamfer"
       id="path-effect1"
       is_visible="true"
       lpeversion="1"
       nodesatellites_param="F,0,0,1,0,0,0,1 @ F,0,0,1,0,0,0,1 @ F,0,0,1,0,0,0,1 @ F,0,0,1,0,0,0,1 @ F,0,0,1,0,0,0,1 @ F,0,0,1,0,0,0,1 @ F,0,0,1,0,0,0,1 @ F,0,0,1,0,0,0,1"
       radius="0"
       unit="px"
       method="auto"
       mode="F"
       chamfer_steps="1"
       flexible="false"
       use_knot_distance="true"
       apply_no_radius="true"
       apply_with_radius="true"
       only_selected="false"
       hide_knots="false" /><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"><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><clipPath
       clipPathUnits="userSpaceOnUse"
       id="clipPath107-6"><path
         d="M 0,1674.565 H 2453.522 V 0 H 0 Z"
         transform="translate(-1479.7665,-631.83924)"
         id="path107-1" /></clipPath><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)" /><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" /><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" /><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"><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><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: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,-124.93908)"><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><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,-124.34603)"><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><g
     inkscape:groupmode="layer"
     id="g19"
     inkscape:label="vertical"
     inkscape:highlight-color="#a99e36"
     transform="translate(-317.8697,-75.726641)"
     inkscape:export-filename="vertical.inkscape.svg"
     inkscape:export-xdpi="318.5993"
     inkscape:export-ydpi="318.5993"><path
       id="path62"
       style="display:inline;opacity:1;fill:#ffffff;stroke-width:0.342;paint-order:fill markers stroke;filter:url(#filter63)"
       inkscape:label="shadow"
       d="m 326.35112,80.536055 h 145.72601 c 2.03429,0 3.672,1.637712 3.672,3.672 v 28.944465 c 0,2.03429 -1.63771,3.672 -3.672,3.672 H 326.35112 c -2.03429,0 -3.672,-1.63771 -3.672,-3.672 V 84.208055 c 0,-2.034288 1.63771,-3.672 3.672,-3.672 z" /><path
       id="path12"
       style="fill:url(#linearGradient19);stroke-width:0.0784105;paint-order:fill markers stroke"
       inkscape:label="color-stripe"
       d="m 330.21907,115.71413 h 137.9901 c 0.82427,0 1.48786,0.49523 1.48786,1.11039 0,0.61516 -0.66359,1.1104 -1.48786,1.1104 h -137.9901 c -0.82427,0 -1.48785,-0.49524 -1.48785,-1.1104 0,-0.61516 0.66358,-1.11039 1.48785,-1.11039 z" /><g
       id="g15"
       inkscape:label="background"
       transform="matrix(-1,0,0,1,489.39954,68.86868)"><path
         id="rect12"
         style="display:inline;opacity:1;fill:#ffffff;stroke-width:0.341536;paint-order:fill markers stroke"
         inkscape:label="fallback"
         transform="scale(-1,1)"
         d="m -162.97125,11.691942 h 145.528694 c 2.031534,0 3.667028,1.635495 3.667028,3.667028 v 28.905275 c 0,2.031533 -1.635494,3.667028 -3.667028,3.667028 H -162.97125 c -2.03153,0 -3.66703,-1.635495 -3.66703,-3.667028 V 15.35897 c 0,-2.031533 1.6355,-3.667028 3.66703,-3.667028 z" /><g
         id="g5"
         inkscape:label="image"><image
           width="153.07002"
           height="102.04668"
           preserveAspectRatio="none"
           xlink:href="../../../../../Downloads/alexandre-debieve-FO7JIlwjOtU-unsplash.jpg"
           id="image13"
           x="13.650405"
           y="-21.211729"
           inkscape:label="embed"
           mask="url(#mask13)"
           style="image-rendering:optimizeSpeed"
           inkscape:svg-dpi="1"
           inkscape:export-filename="horizontal.svg"
           inkscape:export-xdpi="96"
           inkscape:export-ydpi="96" /></g><path
         id="rect20"
         style="display:inline;opacity:1;fill:url(#linearGradient2);stroke-width:0.342;paint-order:fill markers stroke"
         inkscape:label="gradient"
         transform="matrix(-1,0,0,1,180.37085,-48.064185)"
         d="m 17.32243,59.73156 h 145.72601 c 2.03429,0 3.672,1.637712 3.672,3.672 v 28.944467 c 0,2.034288 -1.63771,3.672 -3.672,3.672 H 17.32243 c -2.034288,0 -3.672,-1.637712 -3.672,-3.672 V 63.40356 c 0,-2.034288 1.637712,-3.672 3.672,-3.672 z" /><path
         id="rect1"
         style="display:inline;opacity:1;fill:#ffffff;stroke-width:0.342;paint-order:fill markers stroke"
         inkscape:label="solid-color"
         transform="matrix(-1,0,0,1,180.37085,-48.064185)"
         d="m 17.32243,59.73156 h 145.72601 c 2.03429,0 3.672,1.637712 3.672,3.672 v 28.944467 c 0,2.034288 -1.63771,3.672 -3.672,3.672 H 17.32243 c -2.034288,0 -3.672,-1.637712 -3.672,-3.672 V 63.40356 c 0,-2.034288 1.637712,-3.672 3.672,-3.672 z" /></g><g
       id="g17"
       inkscape:label="content"
       transform="matrix(-1,0,0,1,461.33439,62.953888)"><text
         xml:space="preserve"
         style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-size:2.95147px;font-family:'Cal Sans';-inkscape-font-specification:'Cal Sans, Semi-Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:center;text-anchor:middle;opacity:1;fill:#000000;fill-opacity:1;stroke-width:0.113359;paint-order:fill markers stroke"
         x="-62.127644"
         y="42.596745"
         id="text15"
         inkscape:label="subtitle"
         transform="scale(-1,1)"><tspan
           sodipodi:role="line"
           id="tspan15"
           style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-size:2.95147px;font-family:'Cal Sans';-inkscape-font-specification:'Cal Sans, Semi-Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:center;text-anchor:middle;fill:#000000;fill-opacity:1;stroke-width:0.113359"
           x="-62.127644"
           y="42.596745">Subtitle placeholder</tspan></text><text
         xml:space="preserve"
         style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-size:4.3054px;font-family:'Cal Sans';-inkscape-font-specification:'Cal Sans, Semi-Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:center;text-anchor:middle;opacity:1;fill:#000000;fill-opacity:1;stroke-width:0.16536;paint-order:fill markers stroke"
         x="-62.141792"
         y="38.374268"
         id="text16"
         inkscape:label="title"
         transform="scale(-1,1)"><tspan
           sodipodi:role="line"
           id="tspan16"
           style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-size:4.3054px;font-family:'Cal Sans';-inkscape-font-specification:'Cal Sans, Semi-Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:center;text-anchor:middle;fill:#000000;fill-opacity:1;stroke-width:0.16536"
           x="-62.141792"
           y="38.374268">Title placeholder</tspan></text><g
         id="g16"
         inkscape:label="icon"
         transform="matrix(-0.85209125,0,0,0.85209125,86.561334,-5.292951)"><path
           fill="currentColor"
           d="m 25.227101,34.205286 c -0.235876,0.06157 -0.387336,0.148721 -0.505541,0.264214 -0.166159,0.16342 -0.274563,0.392234 -0.333944,0.82424 -0.06095,0.445075 -0.06219,1.034514 -0.06219,1.879454 v 4.66868 a 2.2727811,2.2727811 0 0 1 0.70765,-0.323048 1.7922937,1.7922937 0 0 1 0.193956,-0.03922 v -7.274315 z m 0.901602,7.238362 h 6.913129 V 37.17374 c 0,-0.845486 -10e-4,-1.434925 -0.06219,-1.88 -0.05929,-0.432006 -0.167805,-0.660808 -0.333943,-0.82424 -0.166777,-0.162884 -0.399875,-0.269115 -0.841133,-0.326862 -0.454332,-0.05992 -1.055759,-0.061 -1.918675,-0.061 h -2.404613 c -0.545855,0 -0.987134,0 -1.352664,0.01585 z m 0.751773,0.883071 h -0.662432 c -0.588352,0 -0.793735,0.0036 -0.95172,0.04521 a 1.3423135,1.3423135 0 0 0 -0.924479,0.837858 c 0.0083,0.208103 0.02347,0.391689 0.04572,0.555118 0.05929,0.432006 0.167806,0.660808 0.333945,0.82424 0.166776,0.162884 0.399853,0.269115 0.841132,0.326862 0.454333,0.05992 1.055759,0.061 1.918675,0.061 h 2.404613 c 0.862917,0 1.464878,-10e-4 1.918676,-0.06047 0.441258,-0.0583 0.674973,-0.164512 0.841132,-0.327408 0.166159,-0.163419 0.274564,-0.392233 0.333945,-0.824235 0.05003,-0.362818 0.05992,-0.822603 0.06157,-1.438194 h -3.756205 v 1.638125 c 0,0.162349 0,0.243512 -0.05724,0.276199 -0.05724,0.03269 -0.135068,-0.0039 -0.290912,-0.07627 L 28.19057,43.817203 c -0.05334,-0.02452 -0.07948,-0.0365 -0.107886,-0.0365 -0.02842,0 -0.05456,0.01194 -0.107885,0.0365 l -0.746338,0.347566 c -0.156276,0.07245 -0.234249,0.108958 -0.291447,0.07626 -0.05662,-0.03268 -0.05662,-0.114397 -0.05662,-0.276199 z"
           id="path16"
           style="stroke-width:0.544769"
           inkscape:label="icon-svg" /></g></g></g></svg>
--- a/packages/banners/static/horizontal-rtl.inkscape.svg
+++ b/packages/banners/static/horizontal-rtl.inkscape.svg
@@ -0,0 +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" 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
@@ -0,0 +1,46 @@
 <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>
--- 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
@@ -0,0 +1,91 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <!-- 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="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 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
@@ -0,0 +1,48 @@
 <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>
--- 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
@@ -0,0 +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="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
@@ -0,0 +1,47 @@
 <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>
--- 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
@@ -4,39 +4,63 @@ settings:
  autoInstallPeers: true
  excludeLinksFromLockfile: false
-dependencies:
+importers:
  '@eslegant/js':
    specifier: 0.0.0-next-20230910004746
    version: 0.0.0-next-20230910004746(eslint-plugin-import@2.29.0)(eslint@8.54.0)(typescript@5.3.2)
-devDependencies:
+  .:
-  '@changesets/cli':
+    dependencies:
-    specifier: ^2.26.2
+      '@eslegant/js':
-    version: 2.26.2
+        specifier: 0.0.0-next-20230910004746
-  '@commitlint/config-conventional':
+        version: 0.0.0-next-20230910004746(eslint-plugin-import@2.29.0)(eslint@8.54.0)(typescript@5.3.2)
-    specifier: ^18.4.3
+    devDependencies:
-    version: 18.4.3
+      '@changesets/cli':
-  '@commitlint/types':
+        specifier: ^2.26.2
-    specifier: ^18.4.3
+        version: 2.26.2
-    version: 18.4.3
+      '@commitlint/config-conventional':
-  '@vercel/node':
+        specifier: ^18.4.3
-    specifier: ^3.0.11
+        version: 18.4.3
-    version: 3.0.11
+      '@commitlint/types':
-  eslint:
+        specifier: ^18.4.3
-    specifier: ^8.54.0
+        version: 18.4.3
-    version: 8.54.0
+      '@vercel/node':
-  husky:
+        specifier: ^3.0.11
-    specifier: ^8.0.0
+        version: 3.0.11
-    version: 8.0.3
+      cal-sans:
-  turbo:
+        specifier: ^1.0.1
-    specifier: ^1.10.16
+        version: 1.0.1
-    version: 1.10.16
+      eslint:
-  vercel:
+        specifier: ^8.54.0
-    specifier: ^32.5.6
+        version: 8.54.0
-    version: 32.5.6
+      husky:
-  vitest:
+        specifier: ^8.0.0
-    specifier: ^0.34.6
+        version: 8.0.3
-    version: 0.34.6
+      turbo:
        specifier: ^1.10.16
        version: 1.10.16
      vercel:
        specifier: ^32.5.6
        version: 32.5.6
      vitest:
        specifier: ^0.34.6
        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
        version: 20.10.0
      eslint:
        specifier: ^8.54.0
        version: 8.54.0
      linkedom:
        specifier: ^0.16.4
        version: 0.16.4
 packages:
@@ -860,6 +884,12 @@ packages:
    resolution: {integrity: sha512-qelS/Ra6sacc4loe/3MSjXNL1dNQ/GjxNHVzuChwMfmk7HuycRLVQN2qNY3XahK+fZc5E2szqQSKUyAF0E+2bg==}
    dev: true
  /@types/node@20.10.0:
    resolution: {integrity: sha512-D0WfRmU9TQ8I9PFx9Yc+EBHw+vSpIub4IDvQivcp26PtPrdMGAq5SDcpXEo/epqa/DXotVpekHiLNTg3iaKXBQ==}
    dependencies:
      undici-types: 5.26.5
    dev: true
  /@types/normalize-package-data@2.4.4:
    resolution: {integrity: sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA==}
@@ -1523,6 +1553,10 @@ packages:
      file-uri-to-path: 1.0.0
    dev: true
  /boolbase@1.0.0:
    resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==}
    dev: true
  /brace-expansion@1.1.11:
    resolution: {integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==}
    dependencies:
@@ -1583,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:
@@ -1789,6 +1826,25 @@ packages:
      shebang-command: 2.0.0
      which: 2.0.2
  /css-select@5.1.0:
    resolution: {integrity: sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==}
    dependencies:
      boolbase: 1.0.0
      css-what: 6.1.0
      domhandler: 5.0.3
      domutils: 3.1.0
      nth-check: 2.1.1
    dev: true
  /css-what@6.1.0:
    resolution: {integrity: sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==}
    engines: {node: '>= 6'}
    dev: true
  /cssom@0.5.0:
    resolution: {integrity: sha512-iKuQcq+NdHqlAcwUY0o/HL69XQrUaQdMjmStJ8JFmUaiiQErlhrmuigkg/CU4E2J0IyUKUrMAgl36TvN67MqTw==}
    dev: true
  /csv-generate@3.4.3:
    resolution: {integrity: sha512-w/T+rqR0vwvHqWs/1ZyMDWtHHSJaN06klRqJXBEpDJaM/+dZkso0OKh1VcuuYvK3XM53KysVNq8Ko/epCK8wOw==}
    dev: true
@@ -1938,6 +1994,33 @@ packages:
    dependencies:
      esutils: 2.0.3
  /dom-serializer@2.0.0:
    resolution: {integrity: sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==}
    dependencies:
      domelementtype: 2.3.0
      domhandler: 5.0.3
      entities: 4.5.0
    dev: true
  /domelementtype@2.3.0:
    resolution: {integrity: sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==}
    dev: true
  /domhandler@5.0.3:
    resolution: {integrity: sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==}
    engines: {node: '>= 4'}
    dependencies:
      domelementtype: 2.3.0
    dev: true
  /domutils@3.1.0:
    resolution: {integrity: sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==}
    dependencies:
      dom-serializer: 2.0.0
      domelementtype: 2.3.0
      domhandler: 5.0.3
    dev: true
  /dot-prop@5.3.0:
    resolution: {integrity: sha512-QM8q3zDe58hqUqjraQOmzZ1LIH9SWQJTlEKCH4kJ2oQvLZk7RbQXvtDM2XEq3fwkV9CCvvH4LA0AV+ogFsBM2Q==}
    engines: {node: '>=8'}
@@ -1997,6 +2080,11 @@ packages:
      strip-ansi: 6.0.1
    dev: true
  /entities@4.5.0:
    resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
    engines: {node: '>=0.12'}
    dev: true
  /error-ex@1.3.2:
    resolution: {integrity: sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==}
    dependencies:
@@ -3044,6 +3132,19 @@ packages:
  /hosted-git-info@2.8.9:
    resolution: {integrity: sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==}
  /html-escaper@3.0.3:
    resolution: {integrity: sha512-RuMffC89BOWQoY0WKGpIhn5gX3iI54O6nRA0yC124NYVtzjmFWBIiFd8M0x+ZdX0P9R4lADg1mgP8C7PxGOWuQ==}
    dev: true
  /htmlparser2@9.0.0:
    resolution: {integrity: sha512-uxbSI98wmFT/G4P2zXx4OVx04qWUmyFPrD2/CNepa2Zo3GPNaCaaxElDgwUrwYWkK1nr9fft0Ya8dws8coDLLQ==}
    dependencies:
      domelementtype: 2.3.0
      domhandler: 5.0.3
      domutils: 3.1.0
      entities: 4.5.0
    dev: true
  /http-errors@1.4.0:
    resolution: {integrity: sha512-oLjPqve1tuOl5aRhv8GK5eHpqP1C9fb+Ol+XTLjKfLltE44zdDbEdjPSbU7Ch5rSNsVFqZn97SrMmZLdu1/YMw==}
    engines: {node: '>= 0.6'}
@@ -3410,6 +3511,16 @@ packages:
  /lines-and-columns@1.2.4:
    resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
  /linkedom@0.16.4:
    resolution: {integrity: sha512-SykvDVh/jAnaO+WiPqH5vX3QpZrIRImuppzYhIHons3RXPhDwqN2dOyfopOVaHleqWtoS+3vWCqen+m8M3HToQ==}
    dependencies:
      css-select: 5.1.0
      cssom: 0.5.0
      html-escaper: 3.0.3
      htmlparser2: 9.0.0
      uhyphen: 0.2.0
    dev: true
  /load-yaml-file@0.2.0:
    resolution: {integrity: sha512-OfCBkGEw4nN6JLtgRidPX6QxjBQGQf72q3si2uvqyFEMbycSFFHwAZeXx6cJgFM9wmLrf9zBwCP3Ivqa+LLZPw==}
    engines: {node: '>=6'}
@@ -3741,6 +3852,12 @@ packages:
      set-blocking: 2.0.0
    dev: true
  /nth-check@2.1.1:
    resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==}
    dependencies:
      boolbase: 1.0.0
    dev: true
  /object-assign@4.1.1:
    resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
    engines: {node: '>=0.10.0'}
@@ -3807,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'}
@@ -4440,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'}
@@ -4560,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
@@ -4832,6 +4966,10 @@ packages:
    resolution: {integrity: sha512-o+ORpgGwaYQXgqGDwd+hkS4PuZ3QnmqMMxRuajK/a38L6fTpcE5GPIfrf+L/KemFzfUpeUQc1rRS1iDBozvnFA==}
    dev: true
  /uhyphen@0.2.0:
    resolution: {integrity: sha512-qz3o9CHXmJJPGBdqzab7qAYuW8kQGKNEuoHFYrBwV6hWIMcpAmxDLXojcHfFr9US1Pe6zUswEIJIbLI610fuqA==}
    dev: true
  /uid-promise@1.0.0:
    resolution: {integrity: sha512-R8375j0qwXyIu/7R0tjdF06/sElHqbmdmWC9M2qQHpEVbvE4I5+38KJI7LUUmQMp7NVq4tKHiBMkT0NFM453Ig==}
    dev: true
@@ -4844,6 +4982,10 @@ packages:
      has-symbols: 1.0.3
      which-boxed-primitive: 1.0.2
  /undici-types@5.26.5:
    resolution: {integrity: sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==}
    dev: true
  /undici@5.26.5:
    resolution: {integrity: sha512-cSb4bPFd5qgR7qr2jYAi0hlX9n5YKK2ONKkLFkxl+v/9BvC0sOpZjBHDBSXc5lWAf5ty9oZdRXytBIHzgUcerw==}
    engines: {node: '>=14.0'}
@@ -4926,7 +5068,7 @@ packages:
      - supports-color
    dev: true
-  /vite-node@0.34.6(@types/node@14.18.33):
+  /vite-node@0.34.6(@types/node@20.10.0):
    resolution: {integrity: sha512-nlBMJ9x6n7/Amaz6F3zJ97EBwR2FkzhBRxF5e+jE6LA3yi6Wtc2lyTij1OnDMIr34v5g/tVQtsVAzhT0jc5ygA==}
    engines: {node: '>=v14.18.0'}
    hasBin: true
@@ -4936,7 +5078,7 @@ packages:
      mlly: 1.4.2
      pathe: 1.1.1
      picocolors: 1.0.0
-      vite: 5.0.2(@types/node@14.18.33)
+      vite: 5.0.2(@types/node@20.10.0)
    transitivePeerDependencies:
      - '@types/node'
      - less
@@ -4948,7 +5090,7 @@ packages:
      - terser
    dev: true
-  /vite@5.0.2(@types/node@14.18.33):
+  /vite@5.0.2(@types/node@20.10.0):
    resolution: {integrity: sha512-6CCq1CAJCNM1ya2ZZA7+jS2KgnhbzvxakmlIjN24cF/PXhRMzpM/z8QgsVJA/Dm5fWUWnVEsmtBoMhmerPxT0g==}
    engines: {node: ^18.0.0 || >=20.0.0}
    hasBin: true
@@ -4976,7 +5118,7 @@ packages:
      terser:
        optional: true
    dependencies:
-      '@types/node': 14.18.33
+      '@types/node': 20.10.0
      esbuild: 0.19.8
      postcss: 8.4.31
      rollup: 4.6.0
@@ -5017,7 +5159,7 @@ packages:
    dependencies:
      '@types/chai': 4.3.11
      '@types/chai-subset': 1.3.5
-      '@types/node': 14.18.33
+      '@types/node': 20.10.0
      '@vitest/expect': 0.34.6
      '@vitest/runner': 0.34.6
      '@vitest/snapshot': 0.34.6
@@ -5036,8 +5178,8 @@ packages:
      strip-literal: 1.3.0
      tinybench: 2.5.1
      tinypool: 0.7.0
-      vite: 5.0.2(@types/node@14.18.33)
+      vite: 5.0.2(@types/node@20.10.0)
-      vite-node: 0.34.6(@types/node@14.18.33)
+      vite-node: 0.34.6(@types/node@20.10.0)
      why-is-node-running: 2.2.2
    transitivePeerDependencies:
      - less
--- a/pnpm-workspaces.yaml
+++ b/pnpm-workspaces.yaml
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
Guz013	41587354aa	revert: fix(ci) install command for monorepo	2023-11-29 10:31:00 -03:00
Guz013	599cb5f202	fix: 🐛 project structure and pnpm workspaces	2023-11-29 10:29:24 -03:00
Guz013	dd845fc550	chore: 🔧 add missing changeset	2023-11-28 17:45:02 -03:00
Guz013	de8964f1f3	Merge branch 'dev' of github.com:LoredDev/LoredMarkdown into dev	2023-11-28 17:41:12 -03:00
Guz	ccd30e609b	chore: merge pull request #16 from LoredDev/8-feat-banner-layouts Merge pull request, adding the new banner layouts.	2023-11-28 17:40:43 -03:00
Guz013	ca7e58d453	fix(ci): 🐛 👷 install command for monorepo	2023-11-28 17:38:03 -03:00
Guz013	c4434a5c3e	refactor: ♻️ remove in between code eslint-disable comments	2023-11-28 17:33:24 -03:00
Guz013	0761b45d56	chore: 🔧 create script for converting the banners	2023-11-28 17:20:40 -03:00
Guz013	aa95cb5366	chore: 🔧 export banners to their repective files	2023-11-28 17:19:30 -03:00
Guz013	d3f63086f8	refactor: ♻️ place banners in different pages Orgnanized the banners in the design file, now each is on a different page/canvas. This also fixes the exported SVGs having the other banners code in them.	2023-11-28 17:18:22 -03:00
Guz013	3ed39f18b2	chore: 🔧 ignore Inkscape backup files	2023-11-28 13:32:20 -03:00
Guz013	df77a46db6	feat: ✨ inkscape svg files for the banners These files will be converted to standard SVG files using a script. So things like Inkscape's labels can be converted to IDs (because Inkscape doesn't support duplicated IDs on the design.inkscape.svg file).	2023-11-28 13:30:21 -03:00
Guz013	c5c036d4da	feat(banners-lib): ✨ horizontal banner layouts Created the basic layout SVG file in Inkscape. The exported SVG needs to have specific ids for each element, so it can be edited programically later.	2023-11-28 10:47:20 -03:00