@netlify/spark-ui 0.0.1

package/README.md

@@ -0,0 +1,31 @@
+# Netlify Bits
+
+Foundational design tokens, components, utilities, and other global assets to be shared across Netlify sites.
+
+## Code Quality
+
+### Linting
+
+This project uses ESLint to maintain code quality and consistency. To run the linter, use the following command:
+
+```bash
+npm run lint
+```
+
+### Code Formatting
+
+Prettier is used to format the code. To format the codebase, run:
+
+```bash
+npm run format
+```
+
+## Design Tokens
+
+Tokens provide a shared foundation of colors, typography, spacing, and more for our sites and apps. All token information is stored in the `/packages/tokens` directory. These aim to follow standards proposed in the [Design Tokens Format Module](https://tr.designtokens.org/format/).
+
+Tokens are converted into CSS variables using the [terrazzo](https://terrazzo.app/) tool.
+
+### Rebuild CSS token variables
+
+When any files in this tokens directory are updated and merged into the `main` branch, the [build-tokens-css](https://github.com/netlify/netlify-bits/blob/main/.github/workflows/build-tokens-css.yml) GitHub Action is executed. This runs the `build:tokens` script, recreating the [tokens.css](https://github.com/netlify/netlify-bits/blob/main/packages/styles/tokens.css) file with updated CSS variables.

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@netlify/spark-ui",
+  "description": "Assets, design tokens, components, and utilities",
+  "version": "0.0.1",
+  "scripts": {
+    "build:tokens": "npx tz build",
+    "lint": "eslint . --ext .js,.jsx,.ts,.tsx,.astro",
+    "lint:fix": "eslint . --ext .js,.jsx,.ts,.tsx,.astro --fix",
+    "format": "prettier --write \"**/*.{js,jsx,ts,tsx,astro,json,css,md,mdx}\" --ignore-path packages/styles/tokens.css",
+    "format:check": "prettier --check \"**/*.{js,jsx,ts,tsx,astro,json,css,md,mdx}\" --ignore-path packages/styles/tokens.css"
+  },
+  "files": [
+    "packages/",
+    "README.md"
+  ],
+  "exports": {
+    "./assets": "./packages/assets/*",
+    "./components": "./packages/components/*",
+    "./styles": "./packages/styles/*",
+    "./utils": "./packages/utils/index.js"
+  },
+  "devDependencies": {
+    "@terrazzo/cli": "^0.6.3",
+    "@terrazzo/plugin-css": "^0.6.0",
+    "@typescript-eslint/eslint-plugin": "^8.26.0",
+    "@typescript-eslint/parser": "^8.26.0",
+    "astro-eslint-parser": "^1.2.1",
+    "eslint": "^8.57.1",
+    "eslint-config-prettier": "^10.1.1",
+    "eslint-plugin-astro": "^1.3.1",
+    "prettier": "^3.5.3",
+    "prettier-plugin-astro": "^0.14.1"
+  }
+}

package/packages/assets/favicons/icon.svg

@@ -0,0 +1,30 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <style>
+    .favicon-center-dot {
+      fill: #014847;
+    }
+
+    .favicon-lines {
+      fill: #05BDBA;
+    }
+
+    @media (prefers-color-scheme: dark) {
+      .favicon-center-dot {
+        fill: #fff;
+      }
+
+      .favicon-lines {
+        fill: #05BDBA;
+      }
+    }
+  </style>
+  <path class="favicon-center-dot" stroke="none" d="M17.9922 18.3225H14.005L13.6746 17.9921V14.005L14.005 13.6746H17.9922L18.3226 14.005V17.9921L17.9922 18.3225Z" />
+  <g class="favicon-lines" stroke="none">
+    <path d="M9.6958 24.3311H9.35705L7.6661 22.6401V22.3041L10.2511 19.7164L12.042 19.7191L12.2808 19.9552V21.7461L9.6958 24.3311Z" />
+    <path d="M7.6661 9.69576V9.35701L9.35705 7.66606H9.6958L12.2808 10.2511V12.0392L12.042 12.2808H10.2511L7.6661 9.69576Z" />
+    <path d="M10.0457 17.4369H0.205466L0 17.2314V14.7658L0.205466 14.5603H10.0457L10.2511 14.7658V17.2314L10.0457 17.4369Z" />
+    <path d="M31.7945 17.4369H21.9544L21.7489 17.2314V14.7658L21.9544 14.5603H31.7945L32 14.7658V17.2314L31.7945 17.4369Z" />
+    <path d="M14.5631 10.0456V2.66547L14.7686 2.46001H17.2343L17.4396 2.66547V10.0456L17.2343 10.2511H14.7686L14.5631 10.0456Z" />
+    <path d="M14.5631 29.3316V21.9515L14.7686 21.746H17.2343L17.4396 21.9515V29.3316L17.2343 29.5371H14.7686L14.5631 29.3316Z" />
+  </g>
+</svg>

package/packages/assets/logos/encapsulated/darkmode/logo-netlify-encapsulated-fullcolor-darkmode.svg

@@ -0,0 +1,17 @@
+<svg width="128" height="128" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_204_153)">
+<path d="M125.189 54.7739L73.2261 2.81074L71.2959 0.885028L69.1612 0H58.8388L56.7041 0.885028L54.7739 2.81074L2.81074 54.7739L0.885028 56.7041L0 58.8388V69.1612L0.885028 71.2959L2.81074 73.2261L54.7739 125.189L56.7041 127.115L58.8388 128H69.1612L71.2959 127.115L73.2261 125.189L125.189 73.2261L127.115 71.2959L128 69.1612V58.8388L127.115 56.7041L125.189 54.7739Z" fill="white"/>
+<path d="M59.3681 116.019V91.0556L60.0307 90.393H67.9737L68.6364 91.0556V116.019L67.9737 116.681H60.0307L59.3681 116.019Z" fill="#05BDBA"/>
+<path d="M59.3681 36.9444V11.9812L60.0307 11.3186H67.9737L68.6364 11.9812V36.9444L67.9737 37.607H60.0307L59.3681 36.9444Z" fill="#05BDBA"/>
+<path d="M38.3898 97.5221H37.2957L31.8388 92.0652V90.9711L39.1102 83.6952L44.8874 83.6997L45.6612 84.4691V90.2462L38.3898 97.5221Z" fill="#05BDBA"/>
+<path d="M31.8388 37.3046V36.215L37.2957 30.7536H38.3853L45.6612 38.0295V43.8022L44.8918 44.5805H39.1147L31.8388 37.3046Z" fill="#05BDBA"/>
+<path d="M9.85984 59.3547H37.9361L38.5988 60.0174V67.9693L37.9361 68.632H9.85984L9.19718 67.9693V60.0174L9.85984 59.3547Z" fill="#05BDBA"/>
+<path d="M78.8831 80.5376H70.9446L70.2819 79.8749V61.2938C70.2864 57.9849 68.9877 55.4232 64.994 55.3387C62.9437 55.2854 60.5911 55.3387 58.0828 55.441L57.7047 55.8279L57.7092 79.8749L57.0465 80.5376H49.108L48.4453 79.8749V48.1251L49.108 47.4624H66.9686C73.911 47.4624 79.5369 53.0884 79.5369 60.0307V79.8749L78.8743 80.5376H78.8831Z" fill="#014847"/>
+<path d="M118.14 68.6453H90.0639L89.4012 67.9826V60.0307L90.0639 59.3681H118.14L118.803 60.0307V67.9826L118.14 68.6453Z" fill="#05BDBA"/>
+</g>
+<defs>
+<clipPath id="clip0_204_153">
+<rect width="128" height="128" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/packages/assets/logos/encapsulated/darkmode/logo-netlify-encapsulated-monochrome-darkmode.svg

@@ -0,0 +1,10 @@
+<svg width="128" height="128" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_211_6)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M73.2261 2.81074L125.189 54.7739L127.115 56.7041L128 58.8388V69.1612L127.115 71.2959L125.189 73.2261L73.2261 125.189L71.2959 127.115L69.1612 128H58.8388L56.7041 127.115L54.7739 125.189L2.81074 73.2261L0.885028 71.2959L0 69.1612V58.8388L0.885028 56.7041L2.81074 54.7739L54.7739 2.81074L56.7041 0.885028L58.8388 0H69.1612L71.2959 0.885028L73.2261 2.81074ZM59.3681 91.0557V116.019L60.0307 116.681H67.9738L68.6364 116.019V91.0557L67.9738 90.393H60.0307L59.3681 91.0557ZM59.3681 36.9444V11.9813L60.0307 11.3186H67.9738L68.6364 11.9813V36.9444L67.9738 37.6071H60.0307L59.3681 36.9444ZM37.2957 97.5221H38.3898L45.6613 90.2462V84.4691L44.8874 83.6997L39.1103 83.6952L31.8388 90.9712V92.0652L37.2957 97.5221ZM31.8388 37.3046V36.215L37.2957 30.7536H38.3853L45.6613 38.0296V43.8023L44.8919 44.5805H39.1147L31.8388 37.3046ZM37.9362 59.3547H9.85986L9.1972 60.0174V67.9693L9.85986 68.632H37.9362L38.5988 67.9693V60.0174L37.9362 59.3547ZM78.8743 80.5376H70.9446L70.282 79.875V61.2938C70.2864 57.985 68.9878 55.4233 64.994 55.3388C62.9438 55.2854 60.5911 55.3388 58.0828 55.4411L57.7048 55.828L57.7092 79.875L57.0466 80.5376H49.108L48.4453 79.875V48.1251L49.108 47.4625H66.9687C73.911 47.4625 79.5369 53.0884 79.5369 60.0307V79.875L78.8743 80.5376ZM90.0639 68.6453H118.14L118.803 67.9827V60.0307L118.14 59.3681H90.0639L89.4012 60.0307V67.9827L90.0639 68.6453Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_211_6">
+<rect width="128" height="128" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/packages/assets/logos/encapsulated/darkmode/logo-netlify-encapsulated-monochrome-darkmodealt.svg

@@ -0,0 +1,10 @@
+<svg width="128" height="128" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_204_165)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M73.2261 2.81074L125.189 54.7739L127.115 56.7041L128 58.8388V69.1612L127.115 71.2959L125.189 73.2261L73.2261 125.189L71.2959 127.115L69.1612 128H58.8388L56.7041 127.115L54.7739 125.189L2.81074 73.2261L0.885028 71.2959L0 69.1612V58.8388L0.885028 56.7041L2.81074 54.7739L54.7739 2.81074L56.7041 0.885028L58.8388 0H69.1612L71.2959 0.885028L73.2261 2.81074ZM59.3681 91.0557V116.019L60.0307 116.681H67.9737L68.6364 116.019V91.0557L67.9737 90.393H60.0307L59.3681 91.0557ZM59.3681 36.9444V11.9813L60.0307 11.3186H67.9737L68.6364 11.9813V36.9444L67.9737 37.6071H60.0307L59.3681 36.9444ZM37.2957 97.5221H38.3898L45.6612 90.2462V84.4691L44.8874 83.6997L39.1103 83.6952L31.8388 90.9712V92.0652L37.2957 97.5221ZM31.8388 37.3046V36.215L37.2957 30.7536H38.3853L45.6612 38.0296V43.8023L44.8918 44.5805H39.1147L31.8388 37.3046ZM37.9361 59.3547H9.85984L9.19718 60.0174V67.9693L9.85984 68.632H37.9361L38.5988 67.9693V60.0174L37.9361 59.3547ZM78.8743 80.5376H70.9446L70.2819 79.875V61.2938C70.2864 57.985 68.9877 55.4233 64.994 55.3388C62.9437 55.2854 60.5911 55.3388 58.0828 55.4411L57.7047 55.828L57.7092 79.875L57.0465 80.5376H49.108L48.4453 79.875V48.1251L49.108 47.4625H66.9686C73.911 47.4625 79.5369 53.0884 79.5369 60.0307V79.875L78.8743 80.5376ZM90.0639 68.6453H118.14L118.803 67.9827V60.0307L118.14 59.3681H90.0639L89.4012 60.0307V67.9827L90.0639 68.6453Z" fill="#32E6E2"/>
+</g>
+<defs>
+<clipPath id="clip0_204_165">
+<rect width="128" height="128" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/packages/assets/logos/encapsulated/lightmode/logo-netlify-encapsulated-fullcolor-lightmode.svg

@@ -0,0 +1,17 @@
+<svg width="128" height="128" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_204_235)">
+<path d="M125.189 54.7739L73.2261 2.81074L71.2959 0.885028L69.1612 0H58.8388L56.7041 0.885028L54.7739 2.81074L2.81074 54.7739L0.885028 56.7041L0 58.8388V69.1612L0.885028 71.2959L2.81074 73.2261L54.7739 125.189L56.7041 127.115L58.8388 128H69.1612L71.2959 127.115L73.2261 125.189L125.189 73.2261L127.115 71.2959L128 69.1612V58.8388L127.115 56.7041L125.189 54.7739Z" fill="#014847"/>
+<path d="M59.3681 116.019V91.0556L60.0307 90.393H67.9737L68.6364 91.0556V116.019L67.9737 116.681H60.0307L59.3681 116.019Z" fill="#32E6E2"/>
+<path d="M59.3681 36.9444V11.9812L60.0307 11.3186H67.9737L68.6364 11.9812V36.9444L67.9737 37.607H60.0307L59.3681 36.9444Z" fill="#32E6E2"/>
+<path d="M38.3898 97.5221H37.2957L31.8388 92.0652V90.9711L39.1102 83.6952L44.8874 83.6997L45.6612 84.4691V90.2462L38.3898 97.5221Z" fill="#32E6E2"/>
+<path d="M31.8388 37.3046V36.215L37.2957 30.7536H38.3853L45.6612 38.0295V43.8022L44.8918 44.5805H39.1147L31.8388 37.3046Z" fill="#32E6E2"/>
+<path d="M9.85984 59.3547H37.9361L38.5988 60.0174V67.9693L37.9361 68.632H9.85984L9.19718 67.9693V60.0174L9.85984 59.3547Z" fill="#32E6E2"/>
+<path d="M78.8831 80.5376H70.9446L70.2819 79.8749V61.2938C70.2864 57.9849 68.9877 55.4232 64.994 55.3387C62.9437 55.2854 60.5911 55.3387 58.0828 55.441L57.7047 55.8279L57.7092 79.8749L57.0465 80.5376H49.108L48.4453 79.8749V48.1251L49.108 47.4624H66.9686C73.911 47.4624 79.5369 53.0884 79.5369 60.0307V79.8749L78.8743 80.5376H78.8831Z" fill="white"/>
+<path d="M118.14 68.6453H90.0639L89.4012 67.9826V60.0307L90.0639 59.3681H118.14L118.803 60.0307V67.9826L118.14 68.6453Z" fill="#32E6E2"/>
+</g>
+<defs>
+<clipPath id="clip0_204_235">
+<rect width="128" height="128" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/packages/assets/logos/encapsulated/lightmode/logo-netlify-encapsulated-monochrome-lightmode.svg

@@ -0,0 +1,10 @@
+<svg width="128" height="128" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_211_18)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M73.2261 2.81074L125.189 54.7739L127.115 56.7041L128 58.8388V69.1612L127.115 71.2959L125.189 73.2261L73.2261 125.189L71.2959 127.115L69.1612 128H58.8388L56.7041 127.115L54.7739 125.189L2.81074 73.2261L0.885028 71.2959L0 69.1612V58.8388L0.885028 56.7041L2.81074 54.7739L54.7739 2.81074L56.7041 0.885028L58.8388 0H69.1612L71.2959 0.885028L73.2261 2.81074ZM59.3681 91.0557V116.019L60.0307 116.681H67.9737L68.6364 116.019V91.0557L67.9737 90.393H60.0307L59.3681 91.0557ZM59.3681 36.9444V11.9813L60.0307 11.3186H67.9737L68.6364 11.9813V36.9444L67.9737 37.6071H60.0307L59.3681 36.9444ZM37.2957 97.5221H38.3898L45.6612 90.2462V84.4691L44.8874 83.6997L39.1102 83.6952L31.8388 90.9712V92.0652L37.2957 97.5221ZM31.8388 37.3046V36.215L37.2957 30.7536H38.3853L45.6612 38.0296V43.8023L44.8918 44.5805H39.1147L31.8388 37.3046ZM37.9361 59.3547H9.85983L9.19717 60.0174V67.9693L9.85983 68.632H37.9361L38.5988 67.9693V60.0174L37.9361 59.3547ZM78.8743 80.5376H70.9446L70.2819 79.875V61.2938C70.2864 57.985 68.9877 55.4233 64.994 55.3388C62.9437 55.2854 60.5911 55.3388 58.0828 55.4411L57.7047 55.828L57.7092 79.875L57.0465 80.5376H49.1079L48.4453 79.875V48.1251L49.1079 47.4625H66.9686C73.911 47.4625 79.5369 53.0884 79.5369 60.0307V79.875L78.8743 80.5376ZM90.0639 68.6453H118.14L118.803 67.9827V60.0307L118.14 59.3681H90.0639L89.4012 60.0307V67.9827L90.0639 68.6453Z" fill="#181A1C"/>
+</g>
+<defs>
+<clipPath id="clip0_211_18">
+<rect width="128" height="128" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/packages/assets/logos/full/large/darkmode/logo-netlify-large-fullcolor-darkmode.svg

@@ -0,0 +1,22 @@
+<svg width="512" height="209" viewBox="0 0 512 209" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_235_26)">
+<path d="M117.436 207.036V154.604L118.529 153.51H129.452L130.545 154.604V207.036L129.452 208.13H118.529L117.436 207.036Z" fill="#32E6E2"/>
+<path d="M117.436 53.5225V1.09339L118.529 0H129.452L130.545 1.09339V53.5225L129.452 54.6159H118.529L117.436 53.5225Z" fill="#32E6E2"/>
+<path d="M69.9539 169.238H68.4094L60.6869 161.512V159.967L78.7201 141.938L86.8976 141.942L87.9948 143.031V151.209L69.9539 169.238Z" fill="#32E6E2"/>
+<path d="M69.9462 38.8917H68.4017L60.6792 46.6181V48.1626L78.7124 66.192L86.8899 66.1882L87.9871 65.0986V56.9212L69.9462 38.8917Z" fill="#32E6E2"/>
+<path d="M1.09339 97.5104H75.3711L76.4645 98.6038V109.526L75.3711 110.62H1.09339L0 109.526V98.6038L1.09339 97.5104Z" fill="#32E6E2"/>
+<path d="M440.999 97.5104H510.91L512.004 98.6038V109.526L510.91 110.62H436.633L435.539 109.526L439.905 98.6038L440.999 97.5104Z" fill="#32E6E2"/>
+<path d="M212.056 108.727L210.963 109.821H177.079L175.986 110.914C175.986 113.101 178.173 119.657 186.916 119.657C190.196 119.657 193.472 118.564 194.566 116.377L195.659 115.284H208.776L209.869 116.377C208.776 122.934 203.313 132.774 186.916 132.774C168.336 132.774 159.589 119.657 159.589 104.357C159.589 89.0576 168.332 75.9408 185.822 75.9408C203.313 75.9408 212.056 89.0576 212.056 104.357V108.731V108.727ZM195.659 97.7971C195.659 96.7037 194.566 89.0538 185.822 89.0538C177.079 89.0538 175.986 96.7037 175.986 97.7971L177.079 98.8905H194.566L195.659 97.7971Z" fill="white"/>
+<path d="M242.66 115.284C242.66 117.47 243.753 118.564 245.94 118.564H255.776L256.87 119.657V130.587L255.776 131.681H245.94C236.103 131.681 227.36 127.307 227.36 115.284V91.2368L226.266 90.1434H218.617L217.523 89.05V78.1199L218.617 77.0265H226.266L227.36 75.9332V66.0965L228.453 65.0031H241.57L242.663 66.0965V75.9332L243.757 77.0265H255.78L256.874 78.1199V89.05L255.78 90.1434H243.757L242.663 91.2368V115.284H242.66Z" fill="white"/>
+<path d="M283.1 131.681H269.983L268.889 130.587V56.2636L269.983 55.1702H283.1L284.193 56.2636V130.587L283.1 131.681Z" fill="white"/>
+<path d="M312.61 68.2871H299.493L298.399 67.1937V56.2636L299.493 55.1702H312.61L313.703 56.2636V67.1937L312.61 68.2871ZM312.61 131.681H299.493L298.399 130.587V78.1237L299.493 77.0304H312.61L313.703 78.1237V130.587L312.61 131.681Z" fill="white"/>
+<path d="M363.98 56.2636V67.1937L362.886 68.2871H353.05C350.863 68.2871 349.769 69.3805 349.769 71.5672V75.9408L350.863 77.0342H361.793L362.886 78.1276V89.0576L361.793 90.151H350.863L349.769 91.2444V130.591L348.676 131.684H335.559L334.466 130.591V91.2444L333.372 90.151H325.723L324.629 89.0576V78.1276L325.723 77.0342H333.372L334.466 75.9408V71.5672C334.466 59.5438 343.209 55.1702 353.046 55.1702H362.882L363.976 56.2636H363.98Z" fill="white"/>
+<path d="M404.42 132.774C400.046 143.704 395.677 150.261 380.373 150.261H374.906L373.813 149.167V138.237L374.906 137.144H380.373C385.836 137.144 386.929 136.05 388.023 132.77V131.677L370.536 89.05V78.1199L371.63 77.0265H381.466L382.56 78.1199L395.677 115.284H396.77L409.887 78.1199L410.98 77.0265H420.817L421.91 78.1199V89.05L404.424 132.77L404.42 132.774Z" fill="white"/>
+<path d="M135.454 131.681L134.361 130.587L134.368 98.9172C134.368 93.4541 132.22 89.2182 125.625 89.0806C122.234 88.9926 118.354 89.0729 114.209 89.2488L113.59 89.8834L113.598 130.587L112.504 131.681H99.3913L98.2979 130.587V77.5388L99.3913 76.4454L128.901 76.1778C143.685 76.1778 149.668 86.3356 149.668 97.8009V130.587L148.575 131.681H135.454Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_235_26">
+<rect width="512" height="208.126" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/packages/assets/logos/full/large/darkmode/logo-netlify-large-monochrome-darkmode.svg

@@ -0,0 +1,22 @@
+<svg width="512" height="209" viewBox="0 0 512 209" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_236_77)">
+<path d="M117.436 207.036V154.604L118.529 153.51H129.452L130.545 154.604V207.036L129.452 208.13H118.529L117.436 207.036Z" fill="white"/>
+<path d="M117.436 53.5225V1.09339L118.529 0H129.452L130.545 1.09339V53.5225L129.452 54.6159H118.529L117.436 53.5225Z" fill="white"/>
+<path d="M69.9539 169.238H68.4094L60.6869 161.512V159.967L78.7201 141.938L86.8976 141.942L87.9948 143.031V151.209L69.9539 169.238Z" fill="white"/>
+<path d="M69.9462 38.8917H68.4017L60.6792 46.6181V48.1626L78.7124 66.192L86.8899 66.1882L87.9871 65.0986V56.9212L69.9462 38.8917Z" fill="white"/>
+<path d="M1.09339 97.5104H75.3711L76.4645 98.6038V109.526L75.3711 110.62H1.09339L0 109.526V98.6038L1.09339 97.5104Z" fill="white"/>
+<path d="M440.999 97.5104H510.91L512.004 98.6038V109.526L510.91 110.62H436.633L435.539 109.526L439.905 98.6038L440.999 97.5104Z" fill="white"/>
+<path d="M212.056 108.727L210.963 109.821H177.079L175.986 110.914C175.986 113.101 178.173 119.657 186.916 119.657C190.196 119.657 193.472 118.564 194.566 116.377L195.659 115.284H208.776L209.869 116.377C208.776 122.934 203.313 132.774 186.916 132.774C168.336 132.774 159.589 119.657 159.589 104.357C159.589 89.0576 168.332 75.9408 185.822 75.9408C203.313 75.9408 212.056 89.0576 212.056 104.357V108.731V108.727ZM195.659 97.7971C195.659 96.7037 194.566 89.0538 185.822 89.0538C177.079 89.0538 175.986 96.7037 175.986 97.7971L177.079 98.8905H194.566L195.659 97.7971Z" fill="white"/>
+<path d="M242.66 115.284C242.66 117.47 243.753 118.564 245.94 118.564H255.776L256.87 119.657V130.587L255.776 131.681H245.94C236.103 131.681 227.36 127.307 227.36 115.284V91.2368L226.266 90.1434H218.617L217.523 89.05V78.1199L218.617 77.0265H226.266L227.36 75.9332V66.0965L228.453 65.0031H241.57L242.663 66.0965V75.9332L243.757 77.0265H255.78L256.874 78.1199V89.05L255.78 90.1434H243.757L242.663 91.2368V115.284H242.66Z" fill="white"/>
+<path d="M283.1 131.681H269.983L268.889 130.587V56.2636L269.983 55.1702H283.1L284.193 56.2636V130.587L283.1 131.681Z" fill="white"/>
+<path d="M312.61 68.2871H299.493L298.399 67.1937V56.2636L299.493 55.1702H312.61L313.703 56.2636V67.1937L312.61 68.2871ZM312.61 131.681H299.493L298.399 130.587V78.1237L299.493 77.0304H312.61L313.703 78.1237V130.587L312.61 131.681Z" fill="white"/>
+<path d="M363.98 56.2636V67.1937L362.886 68.2871H353.05C350.863 68.2871 349.769 69.3805 349.769 71.5672V75.9408L350.863 77.0342H361.793L362.886 78.1276V89.0576L361.793 90.151H350.863L349.769 91.2444V130.591L348.676 131.684H335.559L334.466 130.591V91.2444L333.372 90.151H325.723L324.629 89.0576V78.1276L325.723 77.0342H333.372L334.466 75.9408V71.5672C334.466 59.5438 343.209 55.1702 353.046 55.1702H362.882L363.976 56.2636H363.98Z" fill="white"/>
+<path d="M404.42 132.774C400.046 143.704 395.677 150.261 380.373 150.261H374.906L373.813 149.167V138.237L374.906 137.144H380.373C385.836 137.144 386.929 136.05 388.023 132.77V131.677L370.536 89.05V78.1199L371.63 77.0265H381.466L382.56 78.1199L395.677 115.284H396.77L409.887 78.1199L410.98 77.0265H420.817L421.91 78.1199V89.05L404.424 132.77L404.42 132.774Z" fill="white"/>
+<path d="M135.454 131.681L134.361 130.587L134.368 98.9172C134.368 93.4541 132.22 89.2182 125.625 89.0806C122.234 88.9926 118.354 89.0729 114.209 89.2488L113.59 89.8834L113.598 130.587L112.504 131.681H99.3913L98.2979 130.587V77.5388L99.3913 76.4454L128.901 76.1778C143.685 76.1778 149.668 86.3356 149.668 97.8009V130.587L148.575 131.681H135.454Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_236_77">
+<rect width="512" height="208.126" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/packages/assets/logos/full/large/lightmode/logo-netlify-large-fullcolor-lightmode.svg

@@ -0,0 +1,22 @@
+<svg width="512" height="209" viewBox="0 0 512 209" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_235_8)">
+<path d="M117.436 207.036V154.604L118.529 153.51H129.452L130.545 154.604V207.036L129.452 208.13H118.529L117.436 207.036Z" fill="#05BDBA"/>
+<path d="M117.436 53.5225V1.09339L118.529 0H129.452L130.545 1.09339V53.5225L129.452 54.6159H118.529L117.436 53.5225Z" fill="#05BDBA"/>
+<path d="M69.9539 169.238H68.4094L60.6869 161.512V159.967L78.7201 141.938L86.8976 141.942L87.9948 143.031V151.209L69.9539 169.238Z" fill="#05BDBA"/>
+<path d="M69.9462 38.8917H68.4017L60.6792 46.6181V48.1626L78.7124 66.192L86.8899 66.1882L87.9871 65.0986V56.9212L69.9462 38.8917Z" fill="#05BDBA"/>
+<path d="M1.09339 97.5104H75.3711L76.4645 98.6038V109.526L75.3711 110.62H1.09339L0 109.526V98.6038L1.09339 97.5104Z" fill="#05BDBA"/>
+<path d="M440.999 97.5104H510.91L512.004 98.6038V109.526L510.91 110.62H436.633L435.539 109.526L439.905 98.6038L440.999 97.5104Z" fill="#05BDBA"/>
+<path d="M212.056 108.727L210.963 109.821H177.079L175.986 110.914C175.986 113.101 178.173 119.657 186.916 119.657C190.196 119.657 193.472 118.564 194.566 116.377L195.659 115.284H208.776L209.869 116.377C208.776 122.934 203.313 132.774 186.916 132.774C168.336 132.774 159.589 119.657 159.589 104.357C159.589 89.0576 168.332 75.9408 185.822 75.9408C203.313 75.9408 212.056 89.0576 212.056 104.357V108.731V108.727ZM195.659 97.7971C195.659 96.7037 194.566 89.0538 185.822 89.0538C177.079 89.0538 175.986 96.7037 175.986 97.7971L177.079 98.8905H194.566L195.659 97.7971Z" fill="#014847"/>
+<path d="M242.66 115.284C242.66 117.47 243.753 118.564 245.94 118.564H255.776L256.87 119.657V130.587L255.776 131.681H245.94C236.103 131.681 227.36 127.307 227.36 115.284V91.2368L226.266 90.1434H218.617L217.523 89.05V78.1199L218.617 77.0265H226.266L227.36 75.9332V66.0965L228.453 65.0031H241.57L242.663 66.0965V75.9332L243.757 77.0265H255.78L256.874 78.1199V89.05L255.78 90.1434H243.757L242.663 91.2368V115.284H242.66Z" fill="#014847"/>
+<path d="M283.1 131.681H269.983L268.889 130.587V56.2636L269.983 55.1702H283.1L284.193 56.2636V130.587L283.1 131.681Z" fill="#014847"/>
+<path d="M312.61 68.2871H299.493L298.399 67.1937V56.2636L299.493 55.1702H312.61L313.703 56.2636V67.1937L312.61 68.2871ZM312.61 131.681H299.493L298.399 130.587V78.1237L299.493 77.0304H312.61L313.703 78.1237V130.587L312.61 131.681Z" fill="#014847"/>
+<path d="M363.98 56.2636V67.1937L362.886 68.2871H353.05C350.863 68.2871 349.769 69.3805 349.769 71.5672V75.9408L350.863 77.0342H361.793L362.886 78.1276V89.0576L361.793 90.151H350.863L349.769 91.2444V130.591L348.676 131.684H335.559L334.466 130.591V91.2444L333.372 90.151H325.723L324.629 89.0576V78.1276L325.723 77.0342H333.372L334.466 75.9408V71.5672C334.466 59.5438 343.209 55.1702 353.046 55.1702H362.882L363.976 56.2636H363.98Z" fill="#014847"/>
+<path d="M404.42 132.774C400.046 143.704 395.677 150.261 380.373 150.261H374.906L373.813 149.167V138.237L374.906 137.144H380.373C385.836 137.144 386.929 136.05 388.023 132.77V131.677L370.536 89.05V78.1199L371.63 77.0265H381.466L382.56 78.1199L395.677 115.284H396.77L409.887 78.1199L410.98 77.0265H420.817L421.91 78.1199V89.05L404.424 132.77L404.42 132.774Z" fill="#014847"/>
+<path d="M135.454 131.681L134.361 130.587L134.368 98.9172C134.368 93.4541 132.22 89.2182 125.625 89.0806C122.234 88.9926 118.354 89.0729 114.209 89.2488L113.59 89.8834L113.598 130.587L112.504 131.681H99.3913L98.2979 130.587V77.5388L99.3913 76.4454L128.901 76.1778C143.685 76.1778 149.668 86.3356 149.668 97.8009V130.587L148.575 131.681H135.454Z" fill="#014847"/>
+</g>
+<defs>
+<clipPath id="clip0_235_8">
+<rect width="512" height="208.126" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/packages/assets/logos/full/large/lightmode/logo-netlify-large-monochrome-lightmode.svg

@@ -0,0 +1,22 @@
+<svg width="512" height="209" viewBox="0 0 512 209" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_236_60)">
+<path d="M117.436 207.036V154.604L118.529 153.51H129.452L130.545 154.604V207.036L129.452 208.13H118.529L117.436 207.036Z" fill="#181A1C"/>
+<path d="M117.436 53.5225V1.09339L118.529 0H129.452L130.545 1.09339V53.5225L129.452 54.6159H118.529L117.436 53.5225Z" fill="#181A1C"/>
+<path d="M69.9539 169.238H68.4094L60.6869 161.512V159.967L78.7201 141.938L86.8976 141.942L87.9948 143.031V151.209L69.9539 169.238Z" fill="#181A1C"/>
+<path d="M69.9462 38.8917H68.4017L60.6792 46.6181V48.1626L78.7124 66.192L86.8899 66.1882L87.9871 65.0986V56.9212L69.9462 38.8917Z" fill="#181A1C"/>
+<path d="M1.09339 97.5104H75.3711L76.4645 98.6038V109.526L75.3711 110.62H1.09339L0 109.526V98.6038L1.09339 97.5104Z" fill="#181A1C"/>
+<path d="M440.999 97.5104H510.91L512.004 98.6038V109.526L510.91 110.62H436.633L435.539 109.526L439.905 98.6038L440.999 97.5104Z" fill="#181A1C"/>
+<path d="M212.056 108.727L210.963 109.821H177.079L175.986 110.914C175.986 113.101 178.173 119.657 186.916 119.657C190.196 119.657 193.472 118.564 194.566 116.377L195.659 115.284H208.776L209.869 116.377C208.776 122.934 203.313 132.774 186.916 132.774C168.336 132.774 159.589 119.657 159.589 104.357C159.589 89.0576 168.332 75.9408 185.822 75.9408C203.313 75.9408 212.056 89.0576 212.056 104.357V108.731V108.727ZM195.659 97.7971C195.659 96.7037 194.566 89.0538 185.822 89.0538C177.079 89.0538 175.986 96.7037 175.986 97.7971L177.079 98.8905H194.566L195.659 97.7971Z" fill="#181A1C"/>
+<path d="M242.66 115.284C242.66 117.47 243.753 118.564 245.94 118.564H255.776L256.87 119.657V130.587L255.776 131.681H245.94C236.103 131.681 227.36 127.307 227.36 115.284V91.2368L226.266 90.1434H218.617L217.523 89.05V78.1199L218.617 77.0265H226.266L227.36 75.9332V66.0965L228.453 65.0031H241.57L242.663 66.0965V75.9332L243.757 77.0265H255.78L256.874 78.1199V89.05L255.78 90.1434H243.757L242.663 91.2368V115.284H242.66Z" fill="#181A1C"/>
+<path d="M283.1 131.681H269.983L268.889 130.587V56.2636L269.983 55.1702H283.1L284.193 56.2636V130.587L283.1 131.681Z" fill="#181A1C"/>
+<path d="M312.61 68.2871H299.493L298.399 67.1937V56.2636L299.493 55.1702H312.61L313.703 56.2636V67.1937L312.61 68.2871ZM312.61 131.681H299.493L298.399 130.587V78.1237L299.493 77.0304H312.61L313.703 78.1237V130.587L312.61 131.681Z" fill="#181A1C"/>
+<path d="M363.98 56.2636V67.1937L362.886 68.2871H353.05C350.863 68.2871 349.769 69.3805 349.769 71.5672V75.9408L350.863 77.0342H361.793L362.886 78.1276V89.0576L361.793 90.151H350.863L349.769 91.2444V130.591L348.676 131.684H335.559L334.466 130.591V91.2444L333.372 90.151H325.723L324.629 89.0576V78.1276L325.723 77.0342H333.372L334.466 75.9408V71.5672C334.466 59.5438 343.209 55.1702 353.046 55.1702H362.882L363.976 56.2636H363.98Z" fill="#181A1C"/>
+<path d="M404.42 132.774C400.046 143.704 395.677 150.261 380.373 150.261H374.906L373.813 149.167V138.237L374.906 137.144H380.373C385.836 137.144 386.929 136.05 388.023 132.77V131.677L370.536 89.05V78.1199L371.63 77.0265H381.466L382.56 78.1199L395.677 115.284H396.77L409.887 78.1199L410.98 77.0265H420.817L421.91 78.1199V89.05L404.424 132.77L404.42 132.774Z" fill="#181A1C"/>
+<path d="M135.454 131.681L134.361 130.587L134.368 98.9172C134.368 93.4541 132.22 89.2182 125.625 89.0806C122.234 88.9926 118.354 89.0729 114.209 89.2488L113.59 89.8834L113.598 130.587L112.504 131.681H99.3913L98.2979 130.587V77.5388L99.3913 76.4454L128.901 76.1778C143.685 76.1778 149.668 86.3356 149.668 97.8009V130.587L148.575 131.681H135.454Z" fill="#181A1C"/>
+</g>
+<defs>
+<clipPath id="clip0_236_60">
+<rect width="512" height="208.126" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/packages/assets/logos/full/small/darkmode/logo-netlify-small-fullcolor-darkmode.svg

@@ -0,0 +1,22 @@
+<svg width="256" height="105" viewBox="0 0 256 105" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_236_43)">
+<path d="M58.4704 103.765V77.4144L59.0165 76.8683H65.6043L66.1504 77.4144V103.765L65.6043 104.311H59.0165L58.4704 103.765Z" fill="#32E6E2"/>
+<path d="M58.4704 26.8971V0.546133L59.0165 0H65.6043L66.1504 0.546133V26.8971L65.6043 27.4432H59.0165L58.4704 26.8971Z" fill="#32E6E2"/>
+<path d="M35.7973 85.2395H34.8928L30.3616 80.7083V79.8037L38.8523 71.3045L43.648 71.3131L44.288 71.9445V76.7403L35.7973 85.2395Z" fill="#32E6E2"/>
+<path d="M30.3616 24.7467V23.8336L34.8928 19.3109H35.7973L44.288 27.8016V32.5888L43.648 33.2373H38.8523L30.3616 24.7467Z" fill="#32E6E2"/>
+<path d="M0.546133 48.3072H37.8795L38.4256 48.8533V55.4496L37.8795 55.9958H0.546133L0 55.4496V48.8533L0.546133 48.3072Z" fill="#32E6E2"/>
+<path d="M255.445 48.3157L255.991 48.8619V55.4496L255.445 55.9957H217.566L217.02 55.4496L219.759 48.8619L220.305 48.3157H255.445Z" fill="#32E6E2"/>
+<path d="M74.6667 65.8859H68.0789L67.5328 65.3397V49.92C67.5328 47.1723 66.4576 45.0475 63.1467 44.9792C61.44 44.9365 59.4944 44.9792 57.4123 45.0645L57.0965 45.3803V65.3312L56.5504 65.8773H49.9627L49.4165 65.3312V38.9803L49.9627 38.4341H64.7851C70.5451 38.4341 75.2128 43.1019 75.2128 48.8619V65.3312L74.6667 65.8773V65.8859Z" fill="white"/>
+<path d="M106.573 54.3488L106.027 54.8949H88.9941L88.448 55.4411C88.448 56.5419 89.5488 59.8357 93.9435 59.8357C95.5904 59.8357 97.2373 59.2896 97.792 58.1888L98.3381 57.6427H104.926L105.472 58.1888C104.926 61.4827 102.178 66.432 93.9349 66.432C84.5995 66.432 80.2048 59.8443 80.2048 52.1472C80.2048 44.4501 84.5995 37.8624 93.3888 37.8624C102.178 37.8624 106.573 44.4501 106.573 52.1472V54.3488ZM98.3296 48.8533C98.3296 48.3072 97.7835 44.4587 93.3888 44.4587C88.9941 44.4587 88.448 48.3072 88.448 48.8533L88.9941 49.3995H97.7835L98.3296 48.8533Z" fill="white"/>
+<path d="M121.95 57.6427C121.95 58.7435 122.496 59.2896 123.597 59.2896H128.538L129.084 59.8358V65.3312L128.538 65.8773H123.597C118.656 65.8773 114.261 63.6758 114.261 57.6342V45.5509L113.715 45.0048H109.867L109.321 44.4587V38.9632L109.867 38.4171H113.715L114.261 37.8709V32.9301L114.807 32.384H121.395L121.941 32.9301V37.8709L122.487 38.4171H128.529L129.075 38.9632V44.4587L128.529 45.0048H122.487L121.941 45.5509V57.6342L121.95 57.6427Z" fill="white"/>
+<path d="M142.276 65.8859H135.689L135.142 65.3397V27.9808L135.689 27.4347H142.276L142.822 27.9808V65.3312L142.276 65.8773V65.8859Z" fill="white"/>
+<path d="M157.107 34.0224H150.519L149.973 33.4763V27.9808L150.519 27.4347H157.107L157.653 27.9808V33.4763L157.107 34.0224ZM157.107 65.8859H150.519L149.973 65.3397V38.9717L150.519 38.4256H157.107L157.653 38.9717V65.3397L157.107 65.8859Z" fill="white"/>
+<path d="M182.929 27.9808V33.4763L182.383 34.0224H177.442C176.341 34.0224 175.795 34.5685 175.795 35.6693V37.8709L176.341 38.4171H181.837L182.383 38.9632V44.4587L181.837 45.0048H176.341L175.795 45.5509V65.3227L175.249 65.8688H168.661L168.115 65.3227V45.5509L167.569 45.0048H163.721L163.174 44.4587V38.9632L163.721 38.4171H167.569L168.115 37.8709V35.6693C168.115 29.6277 172.51 27.4261 177.451 27.4261H182.391L182.938 27.9723L182.929 27.9808Z" fill="white"/>
+<path d="M203.247 66.432C201.045 71.9275 198.852 75.2213 191.164 75.2213H188.416L187.87 74.6752V69.1797L188.416 68.6336H191.164C193.911 68.6336 194.458 68.0875 195.012 66.4405V65.8944L186.223 44.4672V38.9717L186.769 38.4256H191.71L192.256 38.9717L198.844 57.6512H199.39L205.978 38.9717L206.524 38.4256H211.465L212.011 38.9717V44.4672L203.221 66.4405L203.247 66.432Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_236_43">
+<rect width="256" height="104.311" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/packages/assets/logos/full/small/darkmode/logo-netlify-small-monochrome-darkmode.svg

@@ -0,0 +1,22 @@
+<svg width="256" height="105" viewBox="0 0 256 105" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_236_111)">
+<path d="M58.4704 103.765V77.4144L59.0165 76.8683H65.6043L66.1504 77.4144V103.765L65.6043 104.311H59.0165L58.4704 103.765Z" fill="white"/>
+<path d="M58.4704 26.8971V0.546133L59.0165 0H65.6043L66.1504 0.546133V26.8971L65.6043 27.4432H59.0165L58.4704 26.8971Z" fill="white"/>
+<path d="M35.7973 85.2395H34.8928L30.3616 80.7083V79.8037L38.8523 71.3045L43.648 71.3131L44.288 71.9445V76.7403L35.7973 85.2395Z" fill="white"/>
+<path d="M30.3616 24.7467V23.8336L34.8928 19.3109H35.7973L44.288 27.8016V32.5888L43.648 33.2373H38.8523L30.3616 24.7467Z" fill="white"/>
+<path d="M0.546133 48.3072H37.8795L38.4256 48.8533V55.4496L37.8795 55.9958H0.546133L0 55.4496V48.8533L0.546133 48.3072Z" fill="white"/>
+<path d="M255.445 48.3157L255.991 48.8619V55.4496L255.445 55.9957H217.566L217.02 55.4496L219.759 48.8619L220.305 48.3157H255.445Z" fill="white"/>
+<path d="M74.6667 65.8859H68.0789L67.5328 65.3397V49.92C67.5328 47.1723 66.4576 45.0475 63.1467 44.9792C61.44 44.9365 59.4944 44.9792 57.4123 45.0645L57.0965 45.3803V65.3312L56.5504 65.8773H49.9627L49.4165 65.3312V38.9803L49.9627 38.4341H64.7851C70.5451 38.4341 75.2128 43.1019 75.2128 48.8619V65.3312L74.6667 65.8773V65.8859Z" fill="white"/>
+<path d="M106.573 54.3488L106.027 54.8949H88.9941L88.448 55.4411C88.448 56.5419 89.5488 59.8357 93.9435 59.8357C95.5904 59.8357 97.2373 59.2896 97.792 58.1888L98.3381 57.6427H104.926L105.472 58.1888C104.926 61.4827 102.178 66.432 93.9349 66.432C84.5995 66.432 80.2048 59.8443 80.2048 52.1472C80.2048 44.4501 84.5995 37.8624 93.3888 37.8624C102.178 37.8624 106.573 44.4501 106.573 52.1472V54.3488ZM98.3296 48.8533C98.3296 48.3072 97.7835 44.4587 93.3888 44.4587C88.9941 44.4587 88.448 48.3072 88.448 48.8533L88.9941 49.3995H97.7835L98.3296 48.8533Z" fill="white"/>
+<path d="M121.95 57.6427C121.95 58.7435 122.496 59.2896 123.597 59.2896H128.538L129.084 59.8358V65.3312L128.538 65.8773H123.597C118.656 65.8773 114.261 63.6758 114.261 57.6342V45.5509L113.715 45.0048H109.867L109.321 44.4587V38.9632L109.867 38.4171H113.715L114.261 37.8709V32.9301L114.807 32.384H121.395L121.941 32.9301V37.8709L122.487 38.4171H128.529L129.075 38.9632V44.4587L128.529 45.0048H122.487L121.941 45.5509V57.6342L121.95 57.6427Z" fill="white"/>
+<path d="M142.276 65.8859H135.689L135.142 65.3397V27.9808L135.689 27.4347H142.276L142.822 27.9808V65.3312L142.276 65.8773V65.8859Z" fill="white"/>
+<path d="M157.107 34.0224H150.519L149.973 33.4763V27.9808L150.519 27.4347H157.107L157.653 27.9808V33.4763L157.107 34.0224ZM157.107 65.8859H150.519L149.973 65.3397V38.9717L150.519 38.4256H157.107L157.653 38.9717V65.3397L157.107 65.8859Z" fill="white"/>
+<path d="M182.929 27.9808V33.4763L182.383 34.0224H177.442C176.341 34.0224 175.795 34.5685 175.795 35.6693V37.8709L176.341 38.4171H181.837L182.383 38.9632V44.4587L181.837 45.0048H176.341L175.795 45.5509V65.3227L175.249 65.8688H168.661L168.115 65.3227V45.5509L167.569 45.0048H163.721L163.174 44.4587V38.9632L163.721 38.4171H167.569L168.115 37.8709V35.6693C168.115 29.6277 172.51 27.4261 177.451 27.4261H182.391L182.938 27.9723L182.929 27.9808Z" fill="white"/>
+<path d="M203.247 66.432C201.045 71.9275 198.852 75.2213 191.164 75.2213H188.416L187.87 74.6752V69.1797L188.416 68.6336H191.164C193.911 68.6336 194.458 68.0875 195.012 66.4405V65.8944L186.223 44.4672V38.9717L186.769 38.4256H191.71L192.256 38.9717L198.844 57.6512H199.39L205.978 38.9717L206.524 38.4256H211.465L212.011 38.9717V44.4672L203.221 66.4405L203.247 66.432Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_236_111">
+<rect width="256" height="104.311" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/packages/assets/logos/full/small/lightmode/logo-netlify-small-fullcolor-lightmode.svg

@@ -0,0 +1,22 @@
+<svg width="256" height="105" viewBox="0 0 256 105" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_236_25)">
+<path d="M58.4704 103.765V77.4144L59.0165 76.8683H65.6043L66.1504 77.4144V103.765L65.6043 104.311H59.0165L58.4704 103.765Z" fill="#05BDBA"/>
+<path d="M58.4704 26.8971V0.546133L59.0165 0H65.6043L66.1504 0.546133V26.8971L65.6043 27.4432H59.0165L58.4704 26.8971Z" fill="#05BDBA"/>
+<path d="M35.7973 85.2395H34.8928L30.3616 80.7083V79.8037L38.8523 71.3045L43.648 71.3131L44.288 71.9445V76.7403L35.7973 85.2395Z" fill="#05BDBA"/>
+<path d="M30.3616 24.7467V23.8336L34.8928 19.3109H35.7973L44.288 27.8016V32.5888L43.648 33.2373H38.8523L30.3616 24.7467Z" fill="#05BDBA"/>
+<path d="M0.546133 48.3072H37.8795L38.4256 48.8533V55.4496L37.8795 55.9958H0.546133L0 55.4496V48.8533L0.546133 48.3072Z" fill="#05BDBA"/>
+<path d="M255.445 48.3157L255.991 48.8619V55.4496L255.445 55.9957H217.566L217.02 55.4496L219.759 48.8619L220.305 48.3157H255.445Z" fill="#05BDBA"/>
+<path d="M74.6667 65.8859H68.0789L67.5328 65.3397V49.92C67.5328 47.1723 66.4576 45.0475 63.1467 44.9792C61.44 44.9365 59.4944 44.9792 57.4123 45.0645L57.0965 45.3803V65.3312L56.5504 65.8773H49.9627L49.4165 65.3312V38.9803L49.9627 38.4341H64.7851C70.5451 38.4341 75.2128 43.1019 75.2128 48.8619V65.3312L74.6667 65.8773V65.8859Z" fill="#014847"/>
+<path d="M106.573 54.3488L106.027 54.8949H88.9941L88.448 55.4411C88.448 56.5419 89.5488 59.8357 93.9435 59.8357C95.5904 59.8357 97.2373 59.2896 97.792 58.1888L98.3381 57.6427H104.926L105.472 58.1888C104.926 61.4827 102.178 66.432 93.9349 66.432C84.5995 66.432 80.2048 59.8443 80.2048 52.1472C80.2048 44.4501 84.5995 37.8624 93.3888 37.8624C102.178 37.8624 106.573 44.4501 106.573 52.1472V54.3488ZM98.3296 48.8533C98.3296 48.3072 97.7835 44.4587 93.3888 44.4587C88.9941 44.4587 88.448 48.3072 88.448 48.8533L88.9941 49.3995H97.7835L98.3296 48.8533Z" fill="#014847"/>
+<path d="M121.95 57.6427C121.95 58.7435 122.496 59.2896 123.597 59.2896H128.538L129.084 59.8358V65.3312L128.538 65.8773H123.597C118.656 65.8773 114.261 63.6758 114.261 57.6342V45.5509L113.715 45.0048H109.867L109.321 44.4587V38.9632L109.867 38.4171H113.715L114.261 37.8709V32.9301L114.807 32.384H121.395L121.941 32.9301V37.8709L122.487 38.4171H128.529L129.075 38.9632V44.4587L128.529 45.0048H122.487L121.941 45.5509V57.6342L121.95 57.6427Z" fill="#014847"/>
+<path d="M142.276 65.8859H135.689L135.142 65.3397V27.9808L135.689 27.4347H142.276L142.822 27.9808V65.3312L142.276 65.8773V65.8859Z" fill="#014847"/>
+<path d="M157.107 34.0224H150.519L149.973 33.4763V27.9808L150.519 27.4347H157.107L157.653 27.9808V33.4763L157.107 34.0224ZM157.107 65.8859H150.519L149.973 65.3397V38.9717L150.519 38.4256H157.107L157.653 38.9717V65.3397L157.107 65.8859Z" fill="#014847"/>
+<path d="M182.929 27.9808V33.4763L182.383 34.0224H177.442C176.341 34.0224 175.795 34.5685 175.795 35.6693V37.8709L176.341 38.4171H181.837L182.383 38.9632V44.4587L181.837 45.0048H176.341L175.795 45.5509V65.3227L175.249 65.8688H168.661L168.115 65.3227V45.5509L167.569 45.0048H163.721L163.174 44.4587V38.9632L163.721 38.4171H167.569L168.115 37.8709V35.6693C168.115 29.6277 172.51 27.4261 177.451 27.4261H182.391L182.938 27.9723L182.929 27.9808Z" fill="#014847"/>
+<path d="M203.247 66.432C201.045 71.9275 198.852 75.2213 191.164 75.2213H188.416L187.87 74.6752V69.1797L188.416 68.6336H191.164C193.911 68.6336 194.458 68.0875 195.012 66.4405V65.8944L186.223 44.4672V38.9717L186.769 38.4256H191.71L192.256 38.9717L198.844 57.6512H199.39L205.978 38.9717L206.524 38.4256H211.465L212.011 38.9717V44.4672L203.221 66.4405L203.247 66.432Z" fill="#014847"/>
+</g>
+<defs>
+<clipPath id="clip0_236_25">
+<rect width="256" height="104.311" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/packages/assets/logos/full/small/lightmode/logo-netlify-small-monochrome-lightmode.svg

@@ -0,0 +1,22 @@
+<svg width="256" height="105" viewBox="0 0 256 105" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_236_94)">
+<path d="M58.4704 103.765V77.4144L59.0165 76.8683H65.6043L66.1504 77.4144V103.765L65.6043 104.312H59.0165L58.4704 103.765Z" fill="#181A1C"/>
+<path d="M58.4704 26.8971V0.546133L59.0166 0H65.6043L66.1504 0.546133V26.8971L65.6043 27.4432H59.0166L58.4704 26.8971Z" fill="#181A1C"/>
+<path d="M35.7973 85.2395H34.8928L30.3616 80.7083V79.8037L38.8523 71.3045L43.648 71.3131L44.288 71.9445V76.7403L35.7973 85.2395Z" fill="#181A1C"/>
+<path d="M30.3616 24.7467V23.8336L34.8928 19.3109H35.7973L44.288 27.8016V32.5888L43.648 33.2373H38.8523L30.3616 24.7467Z" fill="#181A1C"/>
+<path d="M0.546133 48.3072H37.8795L38.4256 48.8534V55.4496L37.8795 55.9958H0.546133L0 55.4496V48.8534L0.546133 48.3072Z" fill="#181A1C"/>
+<path d="M255.445 48.3157L255.991 48.8619V55.4496L255.445 55.9957H217.566L217.02 55.4496L219.759 48.8619L220.305 48.3157H255.445Z" fill="#181A1C"/>
+<path d="M74.6667 65.8859H68.0789L67.5328 65.3398V49.92C67.5328 47.1723 66.4576 45.0475 63.1467 44.9792C61.44 44.9365 59.4944 44.9792 57.4123 45.0645L57.0965 45.3803V65.3312L56.5504 65.8773H49.9627L49.4165 65.3312V38.9803L49.9627 38.4341H64.7851C70.5451 38.4341 75.2128 43.1019 75.2128 48.8619V65.3312L74.6667 65.8773V65.8859Z" fill="#181A1C"/>
+<path d="M106.573 54.3488L106.027 54.8949H88.9941L88.448 55.4411C88.448 56.5419 89.5488 59.8357 93.9435 59.8357C95.5904 59.8357 97.2373 59.2896 97.792 58.1888L98.3381 57.6427H104.926L105.472 58.1888C104.926 61.4827 102.178 66.432 93.9349 66.432C84.5995 66.432 80.2048 59.8443 80.2048 52.1472C80.2048 44.4501 84.5995 37.8624 93.3888 37.8624C102.178 37.8624 106.573 44.4501 106.573 52.1472V54.3488ZM98.3296 48.8533C98.3296 48.3072 97.7835 44.4587 93.3888 44.4587C88.9941 44.4587 88.448 48.3072 88.448 48.8533L88.9941 49.3995H97.7835L98.3296 48.8533Z" fill="#181A1C"/>
+<path d="M121.95 57.6427C121.95 58.7435 122.496 59.2896 123.597 59.2896H128.538L129.084 59.8358V65.3312L128.538 65.8774H123.597C118.656 65.8774 114.261 63.6758 114.261 57.6342V45.5509L113.715 45.0048H109.867L109.321 44.4587V38.9632L109.867 38.4171H113.715L114.261 37.8709V32.9301L114.807 32.384H121.395L121.941 32.9301V37.8709L122.487 38.4171H128.529L129.075 38.9632V44.4587L128.529 45.0048H122.487L121.941 45.5509V57.6342L121.95 57.6427Z" fill="#181A1C"/>
+<path d="M142.276 65.8859H135.689L135.142 65.3397V27.9808L135.689 27.4347H142.276L142.822 27.9808V65.3312L142.276 65.8773V65.8859Z" fill="#181A1C"/>
+<path d="M157.107 34.0224H150.519L149.973 33.4763V27.9808L150.519 27.4347H157.107L157.653 27.9808V33.4763L157.107 34.0224ZM157.107 65.8859H150.519L149.973 65.3397V38.9717L150.519 38.4256H157.107L157.653 38.9717V65.3397L157.107 65.8859Z" fill="#181A1C"/>
+<path d="M182.929 27.9808V33.4763L182.383 34.0224H177.442C176.341 34.0224 175.795 34.5685 175.795 35.6693V37.8709L176.341 38.4171H181.837L182.383 38.9632V44.4587L181.837 45.0048H176.341L175.795 45.5509V65.3227L175.249 65.8688H168.661L168.115 65.3227V45.5509L167.569 45.0048H163.721L163.174 44.4587V38.9632L163.721 38.4171H167.569L168.115 37.8709V35.6693C168.115 29.6277 172.51 27.4261 177.451 27.4261H182.391L182.938 27.9723L182.929 27.9808Z" fill="#181A1C"/>
+<path d="M203.247 66.432C201.045 71.9275 198.852 75.2214 191.164 75.2214H188.416L187.87 74.6752V69.1797L188.416 68.6336H191.164C193.911 68.6336 194.458 68.0875 195.012 66.4406V65.8944L186.223 44.4672V38.9717L186.769 38.4256H191.71L192.256 38.9717L198.844 57.6512H199.39L205.978 38.9717L206.524 38.4256H211.465L212.011 38.9717V44.4672L203.221 66.4406L203.247 66.432Z" fill="#181A1C"/>
+</g>
+<defs>
+<clipPath id="clip0_236_94">
+<rect width="256" height="104.311" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/packages/assets/logos/monogram/darkmode/logo-netlify-monogram-fullcolor-darkmode.svg

@@ -0,0 +1,16 @@
+<svg width="128" height="113" viewBox="0 0 128 113" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_236_149)">
+<path d="M34.593 94.0509H33.3844L27.3514 88.0179V86.8094L36.5743 77.5866H42.9639L43.8158 78.4385V84.8281L34.593 94.0509Z" fill="#32E6E2"/>
+<path d="M27.3514 25.816V24.6074L33.3844 18.5744H34.593L43.8158 27.7972V34.1868L42.9639 35.0388H36.5743L27.3514 25.816Z" fill="#32E6E2"/>
+<path d="M80.4594 74.6047H71.6824L70.9493 73.8717V53.3259C70.9493 49.6705 69.5129 46.8372 65.1046 46.7382C62.836 46.6787 60.2405 46.7382 57.4668 46.8471L57.0507 47.2731V73.8618L56.3176 74.5948H47.5406L46.8075 73.8618V38.7636L47.5406 38.0305H67.2939C74.9713 38.0305 81.1925 44.2517 81.1925 51.9291V73.8717L80.4594 74.6047Z" fill="white"/>
+<path d="M35.8412 61.4491H0.73307L0 60.716V51.9192L0.73307 51.1861H35.8412L36.5743 51.9192V60.716L35.8412 61.4491Z" fill="#32E6E2"/>
+<path d="M127.277 61.4491H92.1687L91.4356 60.716V51.9192L92.1687 51.1861H127.277L128.01 51.9192V60.716L127.277 61.4491Z" fill="#32E6E2"/>
+<path d="M58.9428 27.0642V0.73307L59.6759 0H68.4727L69.2058 0.73307V27.0642L68.4727 27.7972H59.6759L58.9428 27.0642Z" fill="#32E6E2"/>
+<path d="M58.9428 111.902V85.5711L59.6759 84.838H68.4727L69.2058 85.5711V111.902L68.4727 112.635H59.6759L58.9428 111.902Z" fill="#32E6E2"/>
+</g>
+<defs>
+<clipPath id="clip0_236_149">
+<rect width="128" height="112.635" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/packages/assets/logos/monogram/darkmode/logo-netlify-monogram-monochrome-darkmode.svg

@@ -0,0 +1,16 @@
+<svg width="128" height="113" viewBox="0 0 128 113" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_236_199)">
+<path d="M34.593 94.2052H33.3844L27.3514 88.1722V86.9637L36.5743 77.7409H42.9639L43.8158 78.5928V84.9824L34.593 94.2052Z" fill="white"/>
+<path d="M27.3514 25.9703V24.7617L33.3844 18.7287H34.593L43.8158 27.9515V34.3411L42.9639 35.1931H36.5743L27.3514 25.9703Z" fill="white"/>
+<path d="M80.4594 74.759H71.6824L70.9493 74.026V53.4802C70.9493 49.8248 69.5129 46.9915 65.1046 46.8925C62.836 46.833 60.2405 46.8925 57.4668 47.0014L57.0507 47.4274V74.0161L56.3176 74.7491H47.5406L46.8075 74.0161V38.9179L47.5406 38.1848H67.2939C74.9713 38.1848 81.1925 44.406 81.1925 52.0834V74.026L80.4594 74.759Z" fill="white"/>
+<path d="M35.8412 61.6034H0.73307L0 60.8703V52.0735L0.73307 51.3404H35.8412L36.5743 52.0735V60.8703L35.8412 61.6034Z" fill="white"/>
+<path d="M127.277 61.6034H92.1687L91.4356 60.8703V52.0735L92.1687 51.3404H127.277L128.01 52.0735V60.8703L127.277 61.6034Z" fill="white"/>
+<path d="M58.9428 27.2185V0.887367L59.6759 0.154297H68.4727L69.2058 0.887367V27.2185L68.4727 27.9515H59.6759L58.9428 27.2185Z" fill="white"/>
+<path d="M58.9428 112.056V85.7254L59.6759 84.9923H68.4727L69.2058 85.7254V112.056L68.4727 112.79H59.6759L58.9428 112.056Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_236_199">
+<rect width="128" height="112.635" fill="white" transform="translate(0 0.154297)"/>
+</clipPath>
+</defs>
+</svg>

package/packages/assets/logos/monogram/darkmode/logo-netlify-monogram-monochrome-darkmodealt.svg

@@ -0,0 +1,16 @@
+<svg width="128" height="113" viewBox="0 0 128 113" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_236_159)">
+<path d="M34.593 94.2052H33.3844L27.3514 88.1722V86.9637L36.5743 77.7409H42.9639L43.8158 78.5928V84.9824L34.593 94.2052Z" fill="#32E6E2"/>
+<path d="M27.3514 25.9703V24.7617L33.3844 18.7287H34.593L43.8158 27.9515V34.3411L42.9639 35.1931H36.5743L27.3514 25.9703Z" fill="#32E6E2"/>
+<path d="M80.4594 74.759H71.6824L70.9493 74.026V53.4802C70.9493 49.8248 69.5129 46.9915 65.1046 46.8925C62.836 46.833 60.2405 46.8925 57.4668 47.0014L57.0507 47.4274V74.0161L56.3176 74.7491H47.5406L46.8075 74.0161V38.9179L47.5406 38.1848H67.2939C74.9713 38.1848 81.1925 44.406 81.1925 52.0834V74.026L80.4594 74.759Z" fill="#32E6E2"/>
+<path d="M35.8412 61.6034H0.73307L0 60.8703V52.0735L0.73307 51.3404H35.8412L36.5743 52.0735V60.8703L35.8412 61.6034Z" fill="#32E6E2"/>
+<path d="M127.277 61.6034H92.1687L91.4356 60.8703V52.0735L92.1687 51.3404H127.277L128.01 52.0735V60.8703L127.277 61.6034Z" fill="#32E6E2"/>
+<path d="M58.9428 27.2185V0.887367L59.6759 0.154297H68.4727L69.2058 0.887367V27.2185L68.4727 27.9515H59.6759L58.9428 27.2185Z" fill="#32E6E2"/>
+<path d="M58.9428 112.056V85.7254L59.6759 84.9923H68.4727L69.2058 85.7254V112.056L68.4727 112.79H59.6759L58.9428 112.056Z" fill="#32E6E2"/>
+</g>
+<defs>
+<clipPath id="clip0_236_159">
+<rect width="128" height="112.635" fill="white" transform="translate(0 0.154297)"/>
+</clipPath>
+</defs>
+</svg>

package/packages/assets/logos/monogram/lightmode/logo-netlify-monogram-fullcolor-lightmode.svg

@@ -0,0 +1,16 @@
+<svg width="128" height="113" viewBox="0 0 128 113" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_236_138)">
+<path d="M34.593 94.0509H33.3844L27.3514 88.0179V86.8094L36.5743 77.5866H42.9639L43.8158 78.4385V84.8281L34.593 94.0509Z" fill="#05BDBA"/>
+<path d="M27.3514 25.816V24.6074L33.3844 18.5744H34.593L43.8158 27.7972V34.1868L42.9639 35.0388H36.5743L27.3514 25.816Z" fill="#05BDBA"/>
+<path d="M80.4594 74.6047H71.6824L70.9493 73.8717V53.3259C70.9493 49.6705 69.5129 46.8372 65.1046 46.7382C62.836 46.6787 60.2405 46.7382 57.4668 46.8471L57.0507 47.2731V73.8618L56.3176 74.5948H47.5406L46.8075 73.8618V38.7636L47.5406 38.0305H67.2939C74.9713 38.0305 81.1925 44.2517 81.1925 51.9291V73.8717L80.4594 74.6047Z" fill="#014847"/>
+<path d="M35.8412 61.4491H0.73307L0 60.716V51.9192L0.73307 51.1861H35.8412L36.5743 51.9192V60.716L35.8412 61.4491Z" fill="#05BDBA"/>
+<path d="M127.277 61.4491H92.1687L91.4356 60.716V51.9192L92.1687 51.1861H127.277L128.01 51.9192V60.716L127.277 61.4491Z" fill="#05BDBA"/>
+<path d="M58.9428 27.0642V0.73307L59.6759 0H68.4727L69.2058 0.73307V27.0642L68.4727 27.7972H59.6759L58.9428 27.0642Z" fill="#05BDBA"/>
+<path d="M58.9428 111.902V85.5711L59.6759 84.838H68.4727L69.2058 85.5711V111.902L68.4727 112.635H59.6759L58.9428 111.902Z" fill="#05BDBA"/>
+</g>
+<defs>
+<clipPath id="clip0_236_138">
+<rect width="128" height="112.635" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/packages/assets/logos/monogram/lightmode/logo-netlify-monogram-monochrome-lightmode.svg

@@ -0,0 +1,16 @@
+<svg width="128" height="113" viewBox="0 0 128 113" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_236_179)">
+<path d="M34.593 94.2052H33.3844L27.3514 88.1722V86.9637L36.5743 77.7409H42.9639L43.8158 78.5928V84.9824L34.593 94.2052Z" fill="#181A1C"/>
+<path d="M27.3514 25.9703V24.7617L33.3844 18.7287H34.593L43.8158 27.9515V34.3411L42.9639 35.1931H36.5743L27.3514 25.9703Z" fill="#181A1C"/>
+<path d="M80.4594 74.759H71.6824L70.9493 74.026V53.4802C70.9493 49.8248 69.5129 46.9915 65.1046 46.8925C62.836 46.833 60.2405 46.8925 57.4668 47.0014L57.0507 47.4274V74.0161L56.3176 74.7491H47.5406L46.8075 74.0161V38.9179L47.5406 38.1848H67.2939C74.9713 38.1848 81.1925 44.406 81.1925 52.0834V74.026L80.4594 74.759Z" fill="#181A1C"/>
+<path d="M35.8412 61.6034H0.73307L0 60.8703V52.0735L0.73307 51.3404H35.8412L36.5743 52.0735V60.8703L35.8412 61.6034Z" fill="#181A1C"/>
+<path d="M127.277 61.6034H92.1687L91.4356 60.8703V52.0735L92.1687 51.3404H127.277L128.01 52.0735V60.8703L127.277 61.6034Z" fill="#181A1C"/>
+<path d="M58.9428 27.2185V0.887367L59.6759 0.154297H68.4727L69.2058 0.887367V27.2185L68.4727 27.9515H59.6759L58.9428 27.2185Z" fill="#181A1C"/>
+<path d="M58.9428 112.056V85.7254L59.6759 84.9923H68.4727L69.2058 85.7254V112.056L68.4727 112.79H59.6759L58.9428 112.056Z" fill="#181A1C"/>
+</g>
+<defs>
+<clipPath id="clip0_236_179">
+<rect width="128" height="112.635" fill="white" transform="translate(0 0.154297)"/>
+</clipPath>
+</defs>
+</svg>

package/packages/components/Tabs.astro

@@ -0,0 +1,106 @@
+---
+interface Props {
+  id?: string;
+  class?: string;
+}
+
+const { id, class: className, ...rest } = Astro.props;
+---
+
+<x-tabs id={id} class={className} {...rest}>
+  <slot />
+</x-tabs>
+
+<script>
+  /**
+   * Slightly altered version of another tabs component
+   * Adds "tabs-change" event that includes selected tab info
+   * {@link https://www.mayank.co/blog/tabs}
+   */
+  class Tabs extends HTMLElement {
+    get tabs(): HTMLElement[] {
+      return [...this.querySelectorAll('[role=tab]')] as HTMLElement[];
+    }
+
+    get panels(): HTMLElement[] {
+      return [...this.querySelectorAll('[role=tabpanel]')] as HTMLElement[];
+    }
+
+    get selected(): HTMLElement | null {
+      return this.querySelector('[role=tab][aria-selected=true]') as HTMLElement | null;
+    }
+
+    set selected(element: HTMLElement | null) {
+      if (this.selected) {
+        this.selected.setAttribute('aria-selected', 'false');
+      }
+      if (element) {
+        element.setAttribute('aria-selected', 'true');
+      }
+      this.updateSelection();
+    }
+
+    connectedCallback(): void {
+      this.generateIds();
+      this.updateSelection();
+      this.setupEvents();
+    }
+
+    generateIds(): void {
+      const prefix = Math.floor(Date.now()).toString(36);
+
+      this.tabs.forEach((tab, index) => {
+        const panel = this.panels[index];
+
+        // Assign dynamic ids if not already present
+        tab.id ||= `${prefix}-tab-${index}`;
+        panel.id ||= `${prefix}-panel-${index}`;
+
+        tab.setAttribute('aria-controls', panel.id);
+        panel.setAttribute('aria-labelledby', tab.id);
+      });
+    }
+
+    updateSelection(): void {
+      const tabsChangeEvent = new CustomEvent('tab-change', {
+        detail: { selectedTab: this.selected },
+      });
+
+      this.tabs.forEach((tab, index) => {
+        const panel = this.panels[index] as HTMLElement;
+        const isSelected = tab.getAttribute('aria-selected') === 'true';
+
+        tab.setAttribute('aria-selected', isSelected ? 'true' : 'false');
+        tab.setAttribute('tabindex', isSelected ? '0' : '-1');
+        panel.hidden = !isSelected;
+      });
+
+      this.selected?.dispatchEvent(tabsChangeEvent);
+    }
+
+    setupEvents(): void {
+      this.tabs.forEach(tab => {
+        tab.addEventListener('click', () => {
+          if (this.selected === tab) return;
+
+          this.selected = tab;
+          this.selected.focus();
+        });
+
+        tab.addEventListener('keydown', e => {
+          if (e.key === 'ArrowLeft') {
+            this.selected = (tab.previousElementSibling as HTMLElement) ?? this.tabs.at(-1) ?? null;
+          } else if (e.key === 'ArrowRight') {
+            this.selected = (tab.nextElementSibling as HTMLElement) ?? this.tabs.at(0) ?? null;
+          }
+
+          if (['ArrowLeft', 'ArrowRight'].includes(e.key)) {
+            this.selected?.focus();
+          }
+        });
+      });
+    }
+  }
+
+  customElements.define('x-tabs', Tabs);
+</script>

package/packages/styles/base.css

@@ -0,0 +1,4 @@
+@import 'tokens.css';
+@import 'fonts.css';
+@import 'layout.css';
+@import 'buttons.css';

package/packages/styles/buttons.css

@@ -0,0 +1,43 @@
+button,
+.button {
+  appearance: none;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-xs);
+  padding: var(--space-s) var(--space-m);
+  font-size: var(--font-size-0);
+  font-family: var(--font-body);
+  font-weight: var(--font-semibold);
+  line-height: normal;
+  text-decoration: none;
+  color: var(--color-text);
+  background-color: var(--color-bg-1);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-m);
+
+  /* Button press */
+  &:active:not(:disabled) {
+    top: 1px;
+  }
+
+  /* Button icons */
+  svg {
+    flex: none;
+    height: var(--button-icon-size, 1.2cap);
+    width: auto;
+  }
+}
+
+:where(button, .button) {
+  &[data-button-variant='primary'] {
+    color: var(--color-text-inverse);
+    background-color: var(--color-brand);
+    border-color: var(--color-brand);
+  }
+
+  &[data-button-variant='secondary'] {
+    background-color: var(--color-brand-alt);
+    border-color: var(--color-brand-alt);
+  }
+}

package/packages/styles/fonts.css

@@ -0,0 +1,17 @@
+@font-face {
+  font-family: Pacaembu;
+  src: url('../assets/fonts/pacaembu/PacaembuNetlify-Variable.woff2') format('woff2');
+  unicode-range: U+5, U+20, U+21, U+24, U+25, U+26, U+27, U+2B-2E, U+30-3A, U+3F, U+41-5A, U+61-7A, U+D7, U+2019, U+201C,
+    U+201D;
+  font-weight: 100 1000;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: Mulish;
+  src: url('../assets/fonts/mulish/MulishVar-latin.woff2') format('woff2');
+  unicode-range: U+5, U+20, U+21, U+24, U+25, U+26, U+27, U+2B-2E, U+30-3A, U+3F, U+41-5A, U+61-7A, U+D7, U+2019, U+201C,
+    U+201D;
+  font-weight: 200 900;
+  font-display: swap;
+}

package/packages/styles/layout.css

@@ -0,0 +1,6 @@
+.cluster {
+  display: flex;
+  flex-wrap: wrap;
+  column-gap: var(--column-gap, var(--gap, var(--space-m)));
+  row-gap: var(--row-gap, var(--gap, var(--space-m)));
+}

package/packages/styles/tabs.css

@@ -0,0 +1,16 @@
+[role='tablist'] {
+  display: flex;
+  gap: 2rem;
+}
+
+[role='tab'] {
+  border-bottom: 2px solid transparent;
+
+  &[aria-selected='true'] {
+    border-color: var(--color-border);
+  }
+}
+
+[role='tabpanel'] {
+  margin-block-start: 1rem;
+}

package/packages/styles/tokens.css

@@ -0,0 +1,269 @@
+/* -------------------------------------------
+ *  Autogenerated by ⛋ Terrazzo. DO NOT EDIT!
+ * ------------------------------------------- */
+
+:root {
+  --blue-000: color(srgb 0.9294117647058824 0.9568627450980393 1);
+  --blue-100: color(srgb 0.803921568627451 0.8862745098039215 1);
+  --blue-200: color(srgb 0.7098039215686275 0.8235294117647058 0.984313725490196);
+  --blue-300: color(srgb 0.611764705882353 0.7450980392156863 0.9647058823529412);
+  --blue-400: color(srgb 0.5019607843137255 0.6705882352941176 0.9803921568627451);
+  --blue-500: color(srgb 0.36470588235294116 0.5529411764705883 0.9607843137254902);
+  --blue-600: color(srgb 0.19215686274509805 0.4196078431372549 0.9568627450980393);
+  --blue-700: color(srgb 0.1803921568627451 0.3176470588235294 0.9294117647058824);
+  --blue-800: color(srgb 0.12549019607843137 0.21176470588235294 0.6313725490196078);
+  --blue-900: color(srgb 0.10588235294117647 0.12549019607843137 0.3568627450980392);
+  --color-bg-1: var(--neutral-000);
+  --color-bg-2: var(--neutral-100);
+  --color-bg-3: var(--neutral-200);
+  --color-brand: var(--blue-700);
+  --color-disabled-bg: var(--neutral-200);
+  --color-disabled-border: var(--neutral-400);
+  --color-disabled-text: var(--neutral-400);
+  --color-invalid-bg: var(--red-100);
+  --color-invalid-border: var(--red-600);
+  --color-invalid-text: var(--red-600);
+  --color-link: var(--neutral-800);
+  --color-success-bg: var(--green-100);
+  --color-success-border: var(--green-300);
+  --color-success-text: var(--green-800);
+  --color-text-1: var(--neutral-800);
+  --color-text-2: var(--neutral-600);
+  --color-warning-bg: var(--gold-100);
+  --color-warning-border: var(--gold-300);
+  --color-warning-text: var(--gold-800);
+  --font-bold: 800;
+  --font-light: 300;
+  --font-medium: 500;
+  --font-monospace: ui-monospace, "Cascadia Code", "Source Code Pro", "Menlo", "Consolas", "DejaVu Sans Mono", monospace;
+  --font-primary: "Mulish", system-ui, "Helvetica", sans-serif;
+  --font-regular: 400;
+  --font-secondary: "Pacaembu", system-ui, "Helvetica", sans-serif;
+  --font-semibold: 680;
+  --font-semilight: 350;
+  --gold-000: color(srgb 0.9921568627450981 0.9607843137254902 0.8470588235294118);
+  --gold-100: color(srgb 0.9647058823529412 0.8784313725490196 0.6470588235294118);
+  --gold-200: color(srgb 0.9803921568627451 0.803921568627451 0.43529411764705883);
+  --gold-300: color(srgb 0.984313725490196 0.6941176470588235 0.23921568627450981);
+  --gold-400: color(srgb 0.9764705882352941 0.5568627450980392 0.12941176470588237);
+  --gold-500: color(srgb 0.8352941176470589 0.4666666666666667 0.10196078431372549);
+  --gold-600: color(srgb 0.6588235294117647 0.36470588235294116 0.07450980392156863);
+  --gold-700: color(srgb 0.5490196078431373 0.2980392156862745 0.050980392156862744);
+  --gold-800: color(srgb 0.3764705882352941 0.20392156862745098 0.03137254901960784);
+  --gold-900: color(srgb 0.2 0.13333333333333333 0.07450980392156863);
+  --green-000: color(srgb 0.9058823529411765 0.9882352941176471 0.9137254901960784);
+  --green-100: color(srgb 0.7450980392156863 0.9764705882352941 0.7764705882352941);
+  --green-200: color(srgb 0.5764705882352941 0.9607843137254902 0.6470588235294118);
+  --green-300: color(srgb 0.39215686274509803 0.8470588235294118 0.4980392156862745);
+  --green-400: color(srgb 0.22745098039215686 0.7647058823529411 0.39215686274509803);
+  --green-500: color(srgb 0.19215686274509805 0.6588235294117647 0.3333333333333333);
+  --green-600: color(srgb 0.13333333333333333 0.5098039215686274 0.25098039215686274);
+  --green-700: color(srgb 0.10196078431372549 0.4196078431372549 0.20392156862745098);
+  --green-800: color(srgb 0.058823529411764705 0.2901960784313726 0.12941176470588237);
+  --green-900: color(srgb 0.08235294117647059 0.16470588235294117 0.09803921568627451);
+  --line-height-heading: 1.2;
+  --line-height-none: 1;
+  --line-height-prose: 1.5;
+  --neutral-000: color(srgb 1 1 1);
+  --neutral-100: color(srgb 0.9647058823529412 0.9647058823529412 0.9686274509803922);
+  --neutral-200: color(srgb 0.9137254901960784 0.9215686274509803 0.9294117647058824);
+  --neutral-300: color(srgb 0.8196078431372549 0.8352941176470589 0.8549019607843137);
+  --neutral-400: color(srgb 0.615686274509804 0.6549019607843137 0.6980392156862745);
+  --neutral-500: color(srgb 0.4666666666666667 0.5019607843137255 0.5372549019607843);
+  --neutral-600: color(srgb 0.32941176470588235 0.35294117647058826 0.3803921568627451);
+  --neutral-700: color(srgb 0.20784313725490197 0.22745098039215686 0.24313725490196078);
+  --neutral-800: color(srgb 0.09411764705882353 0.10196078431372549 0.10980392156862745);
+  --neutral-900: color(srgb 0.023529411764705882 0.043137254901960784 0.06274509803921569);
+  --pink-000: color(srgb 0.9882352941176471 0.9411764705882353 0.984313725490196);
+  --pink-100: color(srgb 0.9647058823529412 0.8235294117647058 0.9490196078431372);
+  --pink-200: color(srgb 0.9686274509803922 0.7372549019607844 0.9529411764705882);
+  --pink-300: color(srgb 0.9529411764705882 0.6588235294117647 0.9333333333333333);
+  --pink-400: color(srgb 0.9372549019607843 0.4980392156862745 0.9215686274509803);
+  --pink-500: color(srgb 0.8745098039215686 0.35294117647058826 0.8627450980392157);
+  --pink-600: color(srgb 0.7254901960784313 0.2196078431372549 0.7215686274509804);
+  --pink-700: color(srgb 0.6039215686274509 0.17647058823529413 0.6);
+  --pink-800: color(srgb 0.4235294117647059 0.11372549019607843 0.4196078431372549);
+  --pink-900: color(srgb 0.2196078431372549 0.10588235294117647 0.21568627450980393);
+  --purple-000: color(srgb 0.9607843137254902 0.9490196078431372 0.9882352941176471);
+  --purple-100: color(srgb 0.8862745098039215 0.8509803921568627 0.9686274509803922);
+  --purple-200: color(srgb 0.8470588235294118 0.7803921568627451 1);
+  --purple-300: color(srgb 0.792156862745098 0.7254901960784313 0.9568627450980393);
+  --purple-400: color(srgb 0.7058823529411765 0.615686274509804 0.9450980392156862);
+  --purple-500: color(srgb 0.6078431372549019 0.5019607843137255 0.9294117647058824);
+  --purple-600: color(srgb 0.4666666666666667 0.3607843137254902 0.9058823529411765);
+  --purple-700: color(srgb 0.3803921568627451 0.2901960784313726 0.792156862745098);
+  --purple-800: color(srgb 0.2196078431372549 0.16470588235294117 0.6431372549019608);
+  --purple-900: color(srgb 0.1607843137254902 0.12941176470588237 0.25882352941176473);
+  --red-000: color(srgb 0.984313725490196 0.9333333333333333 0.9294117647058824);
+  --red-100: color(srgb 0.984313725490196 0.8274509803921568 0.8156862745098039);
+  --red-200: color(srgb 1 0.7411764705882353 0.7294117647058823);
+  --red-300: color(srgb 1 0.6784313725490196 0.6627450980392157);
+  --red-400: color(srgb 0.996078431372549 0.5137254901960784 0.5098039215686274);
+  --red-500: color(srgb 0.996078431372549 0.3058823529411765 0.3607843137254902);
+  --red-600: color(srgb 0.8392156862745098 0.15294117647058825 0.25098039215686274);
+  --red-700: color(srgb 0.6862745098039216 0.1450980392156863 0.21176470588235294);
+  --red-800: color(srgb 0.5019607843137255 0.0392156862745098 0.12549019607843137);
+  --red-900: color(srgb 0.23921568627450981 0.10980392156862745 0.10588235294117647);
+  --shadow-deep: 0 16px 24px 0 color(srgb 0 0 0 / 0.07), 0 6px 30px 0 color(srgb 0 0 0 / 0.06), 0 8px 10px 0 color(srgb 0 0 0 / 0.1);
+  --shadow-heavy: -10px 10px 80px 0 color(srgb 0 0 0 / 0.1);
+  --shadow-hover: 0 4px 12px 0 color(srgb 0 0 0 / 0.25);
+  --shadow-light: 0 2px 4px 0 color(srgb 0.2 0.21568627450980393 0.23137254901960785 / 0.08), 0 1px 10px 0 color(srgb 0.2 0.21568627450980393 0.23137254901960785 / 0.06);
+  --space-2xl: 4rem;
+  --space-2xs: 0.5rem;
+  --space-3xl: 6rem;
+  --space-3xs: 0.25rem;
+  --space-4xl: 10rem;
+  --space-l: 2rem;
+  --space-m: 1.5rem;
+  --space-s: 1rem;
+  --space-xl: 3rem;
+  --space-xs: 0.75rem;
+  --teal-000: color(srgb 0.8705882352941177 1 0.996078431372549);
+  --teal-100: color(srgb 0.5568627450980392 0.984313725490196 0.9686274509803922);
+  --teal-200: color(srgb 0.19607843137254902 0.9019607843137255 0.8862745098039215);
+  --teal-300: color(srgb 0.0784313725490196 0.8470588235294118 0.8313725490196079);
+  --teal-400: color(srgb 0.0196078431372549 0.7411764705882353 0.7294117647058823);
+  --teal-500: color(srgb 0.01568627450980392 0.6352941176470588 0.6235294117647059);
+  --teal-600: color(srgb 0.00784313725490196 0.5019607843137255 0.49019607843137253);
+  --teal-700: color(srgb 0.00392156862745098 0.4117647058823529 0.40784313725490196);
+  --teal-800: color(srgb 0.00392156862745098 0.2823529411764706 0.2784313725490196);
+  --teal-900: color(srgb 0.047058823529411764 0.16470588235294117 0.16470588235294117);
+  --text-2xl: 1.74rem;
+  --text-3xl: 2.3rem;
+  --text-4xl: 3.04rem;
+  --text-5xl: 4.01rem;
+  --text-base: 1rem;
+  --text-lg: 1.125rem;
+  --text-sm: 0.875rem;
+  --text-xl: 1.32rem;
+  --text-xs: 0.8125rem;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    --color-bg-1: var(--neutral-000);
+    --color-bg-2: var(--neutral-100);
+    --color-bg-3: var(--neutral-200);
+    --color-brand: var(--blue-700);
+    --color-disabled-bg: var(--neutral-200);
+    --color-disabled-border: var(--neutral-400);
+    --color-disabled-text: var(--neutral-400);
+    --color-invalid-bg: var(--red-100);
+    --color-invalid-border: var(--red-600);
+    --color-invalid-text: var(--red-600);
+    --color-link: var(--neutral-800);
+    --color-success-bg: var(--green-100);
+    --color-success-border: var(--green-300);
+    --color-success-text: var(--green-800);
+    --color-text-1: var(--neutral-800);
+    --color-text-2: var(--neutral-600);
+    --color-warning-bg: var(--gold-100);
+    --color-warning-border: var(--gold-300);
+    --color-warning-text: var(--gold-800);
+    --neutral-000: color(srgb 1 1 1);
+    --neutral-100: color(srgb 0.9647058823529412 0.9647058823529412 0.9686274509803922);
+    --neutral-200: color(srgb 0.9137254901960784 0.9215686274509803 0.9294117647058824);
+    --neutral-300: color(srgb 0.8196078431372549 0.8352941176470589 0.8549019607843137);
+    --neutral-400: color(srgb 0.615686274509804 0.6549019607843137 0.6980392156862745);
+    --neutral-500: color(srgb 0.4666666666666667 0.5019607843137255 0.5372549019607843);
+    --neutral-600: color(srgb 0.32941176470588235 0.35294117647058826 0.3803921568627451);
+    --neutral-700: color(srgb 0.20784313725490197 0.22745098039215686 0.24313725490196078);
+    --neutral-800: color(srgb 0.09411764705882353 0.10196078431372549 0.10980392156862745);
+  }
+}
+
+[data-mode="light"] {
+  --color-bg-1: var(--neutral-000);
+  --color-bg-2: var(--neutral-100);
+  --color-bg-3: var(--neutral-200);
+  --color-brand: var(--blue-700);
+  --color-disabled-bg: var(--neutral-200);
+  --color-disabled-border: var(--neutral-400);
+  --color-disabled-text: var(--neutral-400);
+  --color-invalid-bg: var(--red-100);
+  --color-invalid-border: var(--red-600);
+  --color-invalid-text: var(--red-600);
+  --color-link: var(--neutral-800);
+  --color-success-bg: var(--green-100);
+  --color-success-border: var(--green-300);
+  --color-success-text: var(--green-800);
+  --color-text-1: var(--neutral-800);
+  --color-text-2: var(--neutral-600);
+  --color-warning-bg: var(--gold-100);
+  --color-warning-border: var(--gold-300);
+  --color-warning-text: var(--gold-800);
+  --neutral-000: color(srgb 1 1 1);
+  --neutral-100: color(srgb 0.9647058823529412 0.9647058823529412 0.9686274509803922);
+  --neutral-200: color(srgb 0.9137254901960784 0.9215686274509803 0.9294117647058824);
+  --neutral-300: color(srgb 0.8196078431372549 0.8352941176470589 0.8549019607843137);
+  --neutral-400: color(srgb 0.615686274509804 0.6549019607843137 0.6980392156862745);
+  --neutral-500: color(srgb 0.4666666666666667 0.5019607843137255 0.5372549019607843);
+  --neutral-600: color(srgb 0.32941176470588235 0.35294117647058826 0.3803921568627451);
+  --neutral-700: color(srgb 0.20784313725490197 0.22745098039215686 0.24313725490196078);
+  --neutral-800: color(srgb 0.09411764705882353 0.10196078431372549 0.10980392156862745);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-bg-1: var(--neutral-800);
+    --color-bg-2: var(--neutral-700);
+    --color-bg-3: var(--neutral-600);
+    --color-brand: var(--teal-200);
+    --color-disabled-bg: var(--neutral-600);
+    --color-disabled-border: var(--neutral-400);
+    --color-disabled-text: var(--neutral-400);
+    --color-invalid-bg: var(--red-200);
+    --color-invalid-border: var(--red-700);
+    --color-invalid-text: var(--red-700);
+    --color-link: var(--neutral-100);
+    --color-success-bg: var(--green-200);
+    --color-success-border: var(--green-400);
+    --color-success-text: var(--green-900);
+    --color-text-1: var(--neutral-100);
+    --color-text-2: var(--neutral-300);
+    --color-warning-bg: var(--gold-200);
+    --color-warning-border: var(--gold-400);
+    --color-warning-text: var(--gold-900);
+    --neutral-100: color(srgb 0.9019607843137255 0.9254901960784314 0.9490196078431372);
+    --neutral-200: color(srgb 0.6705882352941176 0.7098039215686275 0.7490196078431373);
+    --neutral-300: color(srgb 0.49411764705882355 0.5294117647058824 0.5725490196078431);
+    --neutral-400: color(srgb 0.30196078431372547 0.33725490196078434 0.37254901960784315);
+    --neutral-500: color(srgb 0.23137254901960785 0.2627450980392157 0.2980392156862745);
+    --neutral-600: color(srgb 0.15294117647058825 0.1843137254901961 0.2196078431372549);
+    --neutral-700: color(srgb 0.11764705882352941 0.1411764705882353 0.17254901960784313);
+    --neutral-800: color(srgb 0.07058823529411765 0.09411764705882353 0.12156862745098039);
+    --neutral-900: color(srgb 0.023529411764705882 0.043137254901960784 0.06274509803921569);
+  }
+}
+
+[data-mode="dark"] {
+  --color-bg-1: var(--neutral-800);
+  --color-bg-2: var(--neutral-700);
+  --color-bg-3: var(--neutral-600);
+  --color-brand: var(--teal-200);
+  --color-disabled-bg: var(--neutral-600);
+  --color-disabled-border: var(--neutral-400);
+  --color-disabled-text: var(--neutral-400);
+  --color-invalid-bg: var(--red-200);
+  --color-invalid-border: var(--red-700);
+  --color-invalid-text: var(--red-700);
+  --color-link: var(--neutral-100);
+  --color-success-bg: var(--green-200);
+  --color-success-border: var(--green-400);
+  --color-success-text: var(--green-900);
+  --color-text-1: var(--neutral-100);
+  --color-text-2: var(--neutral-300);
+  --color-warning-bg: var(--gold-200);
+  --color-warning-border: var(--gold-400);
+  --color-warning-text: var(--gold-900);
+  --neutral-100: color(srgb 0.9019607843137255 0.9254901960784314 0.9490196078431372);
+  --neutral-200: color(srgb 0.6705882352941176 0.7098039215686275 0.7490196078431373);
+  --neutral-300: color(srgb 0.49411764705882355 0.5294117647058824 0.5725490196078431);
+  --neutral-400: color(srgb 0.30196078431372547 0.33725490196078434 0.37254901960784315);
+  --neutral-500: color(srgb 0.23137254901960785 0.2627450980392157 0.2980392156862745);
+  --neutral-600: color(srgb 0.15294117647058825 0.1843137254901961 0.2196078431372549);
+  --neutral-700: color(srgb 0.11764705882352941 0.1411764705882353 0.17254901960784313);
+  --neutral-800: color(srgb 0.07058823529411765 0.09411764705882353 0.12156862745098039);
+  --neutral-900: color(srgb 0.023529411764705882 0.043137254901960784 0.06274509803921569);
+}
+

package/packages/utils/index.ts

@@ -0,0 +1 @@
+export { pluralize } from './pluralize';

package/packages/utils/pluralize.ts

@@ -0,0 +1,24 @@
+/**
+ * Pluralize a word based on a count.
+ * @param count The count to determine the pluralization.
+ * @param singular The singular form of the word.
+ * @param plural The plural form of the word.
+ * @returns The pluralized word.
+ * @example
+ * pluralize(1, "deploy", "deploys"); // "deploy"
+ * pluralize(2, "deploy", "deploys"); // "deploys"
+ */
+const pluralRules = new Intl.PluralRules('en-US');
+
+export const pluralize = (count: number, singular: string, plural: string) => {
+  const rule = pluralRules.select(count);
+
+  switch (rule) {
+    case 'one':
+      return singular;
+    case 'other':
+      return plural;
+    default:
+      throw new Error('Unknown plural rule: ' + rule);
+  }
+};