@format.dev/cli 0.0.0 → 0.1.1

package/templates/html/documents/welcome/styles.css

@@ -0,0 +1,214 @@
+:host {
+	--color-text: #333333;
+	--color-accent: #2b7fff;
+	--color-hairline: #ebebeb;
+	--color-text-muted: rgb(from currentColor r g b / 0.6);
+	--color-bg-muted: #fcfcfc;
+	--color-code-bg: #f1f4ff;
+	--color-code-text: #615fff;
+	--color-code-border: #a3b3ff;
+
+	--hairline: 1px solid var(--color-hairline);
+	--grid-svg: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20793.71%201122.52'%20preserveAspectRatio='none'%20shape-rendering='crispEdges'%3E%3ClinearGradient%20id='g'%20gradientUnits='userSpaceOnUse'%20x1='0'%20y1='0'%20x2='793.71'%20y2='1122.52'%3E%3Cstop%20offset='0'%20stop-color='%23ffffff'/%3E%3Cstop%20offset='0.25'%20stop-color='%23ffffff'/%3E%3Cstop%20offset='0.8'%20stop-color='%23f0f0f0'/%3E%3C/linearGradient%3E%3Cpath%20d='M0%200V1122.52M40%200V1122.52M80%200V1122.52M120%200V1122.52M160%200V1122.52M200%200V1122.52M240%200V1122.52M280%200V1122.52M320%200V1122.52M360%200V1122.52M400%200V1122.52M440%200V1122.52M480%200V1122.52M520%200V1122.52M560%200V1122.52M600%200V1122.52M640%200V1122.52M680%200V1122.52M720%200V1122.52M760%200V1122.52M0%200H793.71M0%2040H793.71M0%2080H793.71M0%20120H793.71M0%20160H793.71M0%20200H793.71M0%20240H793.71M0%20280H793.71M0%20320H793.71M0%20360H793.71M0%20400H793.71M0%20440H793.71M0%20480H793.71M0%20520H793.71M0%20560H793.71M0%20600H793.71M0%20640H793.71M0%20680H793.71M0%20720H793.71M0%20760H793.71M0%20800H793.71M0%20840H793.71M0%20880H793.71M0%20920H793.71M0%20960H793.71M0%201000H793.71M0%201040H793.71M0%201080H793.71M0%201120H793.71'%20fill='none'%20stroke='url(%23g)'%20stroke-width='1'/%3E%3C/svg%3E");
+
+	display: flex;
+	flex-direction: column;
+	background-color: white;
+	background-image: var(--grid-svg);
+}
+
+:host([data-first-page]) {
+	--grid-svg: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20793.71%201122.52'%20preserveAspectRatio='none'%20shape-rendering='crispEdges'%3E%3CradialGradient%20id='g'%20gradientUnits='userSpaceOnUse'%20cx='396.855'%20cy='561.26'%20r='687.39'%3E%3Cstop%20offset='0'%20stop-color='%23ffffff'/%3E%3Cstop%20offset='0.3'%20stop-color='%23ffffff'/%3E%3Cstop%20offset='0.72'%20stop-color='%23f0f0f0'/%3E%3C/radialGradient%3E%3Cpath%20d='M0%200V1122.52M40%200V1122.52M80%200V1122.52M120%200V1122.52M160%200V1122.52M200%200V1122.52M240%200V1122.52M280%200V1122.52M320%200V1122.52M360%200V1122.52M400%200V1122.52M440%200V1122.52M480%200V1122.52M520%200V1122.52M560%200V1122.52M600%200V1122.52M640%200V1122.52M680%200V1122.52M720%200V1122.52M760%200V1122.52M0%200H793.71M0%2040H793.71M0%2080H793.71M0%20120H793.71M0%20160H793.71M0%20200H793.71M0%20240H793.71M0%20280H793.71M0%20320H793.71M0%20360H793.71M0%20400H793.71M0%20440H793.71M0%20480H793.71M0%20520H793.71M0%20560H793.71M0%20600H793.71M0%20640H793.71M0%20680H793.71M0%20720H793.71M0%20760H793.71M0%20800H793.71M0%20840H793.71M0%20880H793.71M0%20920H793.71M0%20960H793.71M0%201000H793.71M0%201040H793.71M0%201080H793.71M0%201120H793.71'%20fill='none'%20stroke='url(%23g)'%20stroke-width='1'/%3E%3C/svg%3E");
+}
+
+.header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding: 24px;
+	border-bottom: var(--hairline);
+	background: var(--color-bg-muted);
+}
+
+.header-title {
+	color: var(--color-text-muted);
+}
+
+.content {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	padding: 90px 120px;
+
+	&:has(.showcase-intro, .showcase-feature, .feature-table, .feature-prose) {
+		justify-content: flex-start;
+		padding-block: 70px;
+	}
+}
+
+.hero-page {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	max-width: 95%;
+	margin-inline: auto;
+}
+
+.hero-title {
+	margin: 0 0 24px;
+	font-size: 68px;
+	letter-spacing: -3.5px;
+	line-height: 1;
+	font-weight: 800;
+
+	span {
+		color: var(--color-accent);
+	}
+}
+
+.lead {
+	font-size: 24px;
+	line-height: 1.3;
+	color: var(--color-text-muted);
+}
+
+.kicker {
+	margin: 0 0 16px;
+	font-family: monospace;
+	font-size: 12px;
+	letter-spacing: 0.1em;
+	text-transform: uppercase;
+	color: var(--color-text-muted);
+}
+
+code {
+	display: inline-block;
+	padding: 0.2em 0.4em;
+	background-color: var(--color-code-bg);
+	border: 1px solid var(--color-code-border);
+	color: var(--color-code-text);
+	font-size: 0.75em;
+	font-weight: 550;
+	line-height: 1;
+	border-radius: 0.55em;
+	letter-spacing: -0.5px;
+	transform: translateY(-1px);
+}
+
+p {
+	margin: 0 0 24px;
+	font-size: 18px;
+	line-height: 1.4;
+}
+
+a {
+	color: var(--color-accent);
+	text-decoration: none;
+}
+
+h2 {
+	margin: 0 0 24px;
+	font-size: 48px;
+	letter-spacing: -2px;
+	line-height: 1;
+	font-weight: 800;
+}
+
+.footer {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	margin-top: auto;
+	padding: 24px;
+	border-top: var(--hairline);
+	background: var(--color-bg-muted);
+}
+
+.footer-stamp {
+	display: inline-flex;
+	align-items: center;
+	gap: 6px;
+	font-size: 12px;
+}
+
+.footer-logo {
+	display: block;
+	width: 50px;
+	height: auto;
+}
+
+.page-numbers {
+	display: flex;
+	align-items: center;
+	gap: 4px;
+	color: var(--color-text-muted);
+	font-size: 12px;
+}
+
+.button {
+	display: inline-flex;
+	align-items: center;
+	gap: 6px;
+	width: fit-content;
+	padding: 7px 10px;
+	color: var(--color-accent);
+	border: 1px solid var(--color-accent);
+	background: white;
+	border-radius: 9px;
+	font-size: 14px;
+	font-weight: 500;
+	line-height: 1;
+
+	.svg {
+		flex-shrink: 0;
+		opacity: 0.7;
+	}
+
+	&.button-inline {
+		padding: 4px 7px;
+		gap: 4px;
+		border-radius: 7px;
+		font-size: 12px;
+	}
+}
+
+.button-row {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 10px;
+}
+
+.footer .page-numbers {
+	font-variant-numeric: tabular-nums;
+}
+
+:host([data-first-page]) .page-numbers {
+	visibility: hidden;
+}
+
+[data-type='footnotes'] {
+	font-size: 12px;
+	line-height: 1.5;
+	padding-block: 12px;
+	margin-inline: 120px;
+	color: var(--color-text-muted);
+	border-top: var(--hairline);
+
+	dl {
+		margin: 0;
+		display: grid;
+		grid-template-columns: auto 1fr;
+		column-gap: 10px;
+		row-gap: 4px;
+	}
+
+	dt {
+		font-variant-numeric: tabular-nums;
+	}
+
+	dd {
+		margin: 0;
+	}
+}

package/templates/html/format.config.json

@@ -0,0 +1,4 @@
+{
+	"$schema": "https://format.dev/schema/format-config.json",
+	"framework": "html"
+}

package/templates/html/package.json

@@ -0,0 +1,15 @@
+{
+	"name": "{{ name }}",
+	"private": true,
+	"type": "module",
+	"scripts": {
+		"dev": "format dev",
+		"compile": "format compile"
+	},
+	"devDependencies": {
+		"@format.dev/cli": "workspace:*"
+	},
+	"dependencies": {
+		"@format.dev/client": "workspace:*"
+	}
+}

package/templates/html/tsconfig.json

@@ -0,0 +1,3 @@
+{
+	"extends": "@format.dev/cli/tsconfig.recommended"
+}

package/templates/react/documents/welcome/components/ButtonLink.tsx

@@ -0,0 +1,29 @@
+import type { ReactNode } from 'react'
+
+interface ButtonLinkProps {
+	href: string
+	inline?: boolean
+	children: ReactNode
+}
+
+export function ButtonLink({ href, inline, children }: ButtonLinkProps) {
+	return (
+		<a className={inline ? 'button button-inline' : 'button'} href={href} target='_blank' rel='noopener noreferrer'>
+			{children}
+			<svg
+				className='button-icon'
+				width='11'
+				height='11'
+				viewBox='0 0 24 24'
+				fill='none'
+				stroke='currentColor'
+				strokeWidth='2.5'
+				strokeLinecap='round'
+				strokeLinejoin='round'
+				aria-hidden='true'>
+				<path d='M7 17 17 7' />
+				<path d='M8 7h9v9' />
+			</svg>
+		</a>
+	)
+}

package/templates/react/documents/welcome/data/alternative.json

@@ -0,0 +1,3 @@
+{
+	"name": "trailblazer"
+}

package/templates/react/documents/welcome/data/default.json

@@ -0,0 +1,3 @@
+{
+	"name": "builder"
+}

package/templates/react/documents/welcome/data/schema.ts

@@ -0,0 +1,7 @@
+import * as v from 'valibot'
+
+const schema = v.object({
+	name: v.pipe(v.string(), v.minLength(1, 'Name is required'))
+})
+
+export default schema

package/templates/react/documents/welcome/icons/propeller-asterisk.svg

@@ -0,0 +1 @@
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 766 766' fill='currentColor'><path d='M157 675Q133 675 112 654Q91 633 91 609Q91 583 114 560Q131 543 152.5 530.0Q174 517 200 504Q223 492 248.0 477.0Q273 462 302 440Q289 422 285 400Q250 405 221.5 412.0Q193 419 168 427Q140 436 115.5 442.0Q91 448 68 448Q36 448 18.0 430.5Q0 413 0 383Q0 353 18.0 335.5Q36 318 68 318Q91 318 115.5 324.0Q140 330 168 339Q193 347 221.5 354.0Q250 361 286 367Q290 344 303 326Q274 304 248.5 289.0Q223 274 200 262Q174 248 152.5 235.0Q131 222 114 206Q91 183 91 157Q91 133 112 112Q133 91 157 91Q183 91 206 114Q223 130 236.0 152.0Q249 174 262 200Q274 223 289.0 248.5Q304 274 326 303Q344 289 367 286Q361 250 354.0 221.5Q347 193 339 168Q330 139 324.0 115.0Q318 91 318 68Q318 36 335.5 18.0Q353 0 383 0Q413 0 430.5 18.0Q448 36 448 68Q448 91 442.0 115.0Q436 139 427 168Q419 193 412.0 221.5Q405 250 400 285Q422 289 440 302Q462 273 477.0 248.0Q492 223 504 200Q518 174 531.0 152.0Q544 130 560 114Q583 91 609 91Q633 91 654 112Q675 133 675 157Q675 183 652 206Q636 222 614.0 235.0Q592 248 566 262Q543 274 518.0 289.0Q493 304 464 326Q477 344 481 367Q516 361 544.5 354.0Q573 347 598 339Q627 330 651.0 324.0Q675 318 698 318Q730 318 748.0 335.5Q766 353 766 383Q766 413 748.0 430.5Q730 448 698 448Q675 448 651.0 442.0Q627 436 598 427Q573 419 544.5 412.0Q516 405 481 400Q477 422 464 441Q493 462 518.0 477.0Q543 492 566 504Q592 517 614.0 530.0Q636 543 652 560Q675 583 675 609Q675 633 654 654Q633 675 609 675Q583 675 560 652Q544 635 531.0 613.5Q518 592 504 566Q492 543 477.0 518.0Q462 493 441 464Q422 477 400 481Q405 516 412.0 544.5Q419 573 427 598Q436 626 442.0 650.5Q448 675 448 698Q448 730 430.5 748.0Q413 766 383 766Q353 766 335.5 748.0Q318 730 318 698Q318 675 324.0 650.5Q330 626 339 598Q347 573 354.0 544.5Q361 516 367 481Q344 477 326 464Q304 493 289.0 518.0Q274 543 262 566Q249 592 236.0 613.5Q223 635 206 652Q183 675 157 675Z'/></svg>

package/templates/react/documents/welcome/index.tsx

@@ -0,0 +1,59 @@
+import type { Data } from './types'
+
+import { Document, Layout, Flow, PageBreak, PageNumber, PageCount, Footnotes } from '@format.dev/react'
+
+import { CoverPage } from './pages/Cover/CoverPage'
+import { NextStepsPage } from './pages/NextSteps/NextStepsPage'
+import { FeatureShowcasePage } from './pages/FeatureShowcase/FeatureShowcasePage'
+import { ClosePage } from './pages/Close/ClosePage'
+import './styles.css'
+
+const a4 = {
+	width: 793.71,
+	height: 1122.52
+}
+
+export default function Welcome({ data }: { data: Data }) {
+	return (
+		<Document title='Welcome to Format'>
+			<Layout id='page' {...a4}>
+				<Header />
+				<main className='content'>
+					<Flow splitGranularity='word'>
+						<CoverPage name={data.name} />
+						<PageBreak />
+						<NextStepsPage />
+						<PageBreak />
+						<FeatureShowcasePage />
+						<PageBreak />
+						<ClosePage />
+					</Flow>
+				</main>
+				<Footnotes />
+				<Footer />
+			</Layout>
+		</Document>
+	)
+}
+
+const Header = () => (
+	<header className='header'>
+		<small className='header-title'>Format Studio &ndash; Welcome document</small>
+	</header>
+)
+
+const Footer = () => (
+	<footer className='footer'>
+		<div className='footer-stamp'>
+			Created with
+			<a href='https://format.dev'>
+				<img src='./logo.svg' alt='Format logo' className='footer-logo' />
+			</a>
+		</div>
+		<div className='page-numbers'>
+			<PageNumber />
+			of
+			<PageCount />
+		</div>
+	</footer>
+)

package/templates/react/documents/welcome/logos/_logo-base.tsx

@@ -0,0 +1,9 @@
+import type { ComponentProps } from 'react'
+
+export function LogoSvg({ style, ...props }: ComponentProps<'svg'>) {
+	return <svg {...props} style={{ display: 'block', transform: 'scale(var(--logo-scale, 1))', ...style }} />
+}
+
+export function LogoSvgInverted({ style, ...props }: ComponentProps<'svg'>) {
+	return <svg {...props} style={{ display: 'block', transform: 'scale(var(--logo-scale, 1))', ...style }} />
+}

package/templates/react/documents/welcome/logos/aws-lambda.tsx

@@ -0,0 +1,22 @@
+import type { ComponentProps } from 'react'
+import { LogoSvg } from './_logo-base'
+
+export function AwsLambdaIcon(props: ComponentProps<'svg'>) {
+	return (
+		<LogoSvg viewBox='0 0 30 30' width='30' height='30' fill='none' xmlns='http://www.w3.org/2000/svg' aria-hidden='true' {...props}>
+			<g clipPath="url(#clip0_45_15323)">
+			<path d="M30 0H0V30H30V0Z" fill="url(#paint0_linear_45_15323)"/>
+			<path fillRule="evenodd" clipRule="evenodd" d="M10.5028 24.75H5.84652L10.9963 13.986L13.3298 18.7897L10.5028 24.75ZM11.3324 12.9574C11.2692 12.828 11.1377 12.7459 10.9941 12.7459H10.993C10.8483 12.7462 10.7167 12.8291 10.6547 12.9592L4.91173 24.9634C4.8561 25.0796 4.86399 25.2161 4.93315 25.3252C5.00156 25.434 5.12184 25.5 5.25077 25.5H10.7408C10.8862 25.5 11.0181 25.4164 11.0805 25.2855L14.0864 18.948C14.1349 18.8453 14.1345 18.7264 14.0845 18.6244L11.3324 12.9574ZM24.3733 24.75H19.747L12.3251 9.21375C12.263 9.08325 12.1307 9 11.9856 9H8.95874L8.96213 5.25H14.8949L22.2827 20.7859C22.3447 20.9164 22.477 21 22.6221 21H24.3733V24.75ZM24.7491 20.25H22.86L15.4722 4.71413C15.4102 4.58363 15.2779 4.5 15.1324 4.5H8.58663C8.37952 4.5 8.21113 4.66762 8.21076 4.87462L8.20662 9.37463C8.20662 9.47438 8.24571 9.56963 8.31675 9.64013C8.38704 9.71063 8.48251 9.75 8.5825 9.75H11.7485L19.1708 25.2863C19.2332 25.4167 19.3648 25.5 19.5098 25.5H24.7491C24.957 25.5 25.125 25.332 25.125 25.125V20.625C25.125 20.418 24.957 20.25 24.7491 20.25Z" fill="white"/>
+			</g>
+			<defs>
+			<linearGradient id="paint0_linear_45_15323" x1="0" y1="30" x2="30" y2="0" gradientUnits="userSpaceOnUse">
+			<stop stopColor="#C8511B"/>
+			<stop offset="1" stopColor="#FF9900"/>
+			</linearGradient>
+			<clipPath id="clip0_45_15323">
+			<rect width="30" height="30" fill="white"/>
+			</clipPath>
+			</defs>
+		</LogoSvg>
+	)
+}

package/templates/react/documents/welcome/logos/bun.tsx

@@ -0,0 +1,30 @@
+import type { ComponentProps } from 'react'
+import { LogoSvg } from './_logo-base'
+
+export function BunIcon(props: ComponentProps<'svg'>) {
+	return (
+		<LogoSvg viewBox='0 0 35 30' width='35' height='30' fill='none' xmlns='http://www.w3.org/2000/svg' aria-hidden='true' {...props}>
+			<g clipPath="url(#clip0_1_1034)">
+			<path d="M30.4668 8.88867C30.3983 8.81581 30.3254 8.74296 30.2525 8.67439C30.1797 8.60581 30.1111 8.52867 30.0383 8.4601C29.9654 8.39153 29.8968 8.31439 29.824 8.24581C29.7511 8.17724 29.6825 8.1001 29.6097 8.03153C29.5368 7.96296 29.4683 7.88581 29.3954 7.81724C29.3225 7.74867 29.254 7.67153 29.1811 7.60296C29.1083 7.53439 29.0397 7.45724 28.9668 7.38867C31.0926 9.47784 32.3104 12.3199 32.3568 15.3001C32.3568 22.4015 25.1483 28.1787 16.2854 28.1787C11.3225 28.1787 6.88254 26.3658 3.92969 23.5244L4.14397 23.7387L4.35826 23.953L4.57254 24.1672L4.78683 24.3815L5.00112 24.5958L5.2154 24.8101L5.42969 25.0244C8.37826 27.9858 12.9168 29.893 17.9997 29.893C26.8625 29.893 34.0711 24.1158 34.0711 17.0358C34.0711 14.0101 32.7683 11.143 30.4668 8.88867Z" fill="black"/>
+			<path d="M31.2845 15.3004C31.2845 21.819 24.5688 27.1033 16.2845 27.1033C8.00026 27.1033 1.28455 21.819 1.28455 15.3004C1.28455 11.259 3.85597 7.68899 7.8074 5.57185C11.7588 3.4547 14.2188 1.28613 16.2845 1.28613C18.3503 1.28613 20.116 3.05613 24.7617 5.57185C28.7131 7.68899 31.2845 11.259 31.2845 15.3004Z" fill="#FBF0DF"/>
+			<path d="M31.285 15.3004C31.2829 14.463 31.1676 13.6297 30.9421 12.8232C29.7721 27.0947 12.3636 27.7804 5.51929 23.5118C8.59601 25.8965 12.3928 27.1631 16.285 27.1032C24.5564 27.1032 31.285 21.8104 31.285 15.3004Z" fill="#F6DECE"/>
+			<path d="M10.5117 4.78756C12.4274 3.63899 14.9731 1.48328 17.476 1.47899C17.0909 1.35453 16.6892 1.2895 16.2845 1.28613C15.2474 1.28613 14.1417 1.82185 12.7488 2.62756C12.2645 2.91042 11.7631 3.22328 11.2317 3.54899C10.2331 4.16613 9.08883 4.8647 7.80312 5.56328C3.72312 7.77042 1.28455 11.409 1.28455 15.3004C1.28455 15.4718 1.28455 15.6433 1.28455 15.8104C3.88169 6.6347 8.60026 5.93613 10.5117 4.78756Z" fill="#FFFEFC"/>
+			<path fillRule="evenodd" clipRule="evenodd" d="M15.0505 2.37064C15.0565 3.3826 14.844 4.38392 14.4276 5.30625C14.0112 6.22857 13.4006 7.05017 12.6376 7.71493C12.5176 7.82207 12.6119 8.02779 12.7662 7.96779C14.2105 7.40636 16.1605 5.72636 15.3376 2.33636C15.3033 2.1435 15.0505 2.19493 15.0505 2.37064ZM16.0233 2.37064C16.5477 3.22626 16.8809 4.18515 17 5.18158C17.1191 6.178 17.0213 7.1884 16.7133 8.1435C16.6619 8.2935 16.8462 8.42207 16.949 8.29779C17.8876 7.09779 18.7062 4.71493 16.2548 2.1435C16.1305 2.03207 15.9376 2.2035 16.0233 2.3535V2.37064ZM17.2062 2.29779C18.0274 2.87917 18.7144 3.62989 19.2208 4.49932C19.7272 5.36874 20.0413 6.33666 20.1419 7.33779C20.1376 7.37386 20.1473 7.41023 20.169 7.43933C20.1908 7.46844 20.2229 7.48806 20.2587 7.49412C20.2946 7.50019 20.3313 7.49223 20.3615 7.4719C20.3916 7.45157 20.4127 7.42043 20.4205 7.38493C20.8148 5.88922 20.5919 3.33922 17.3476 2.01493C17.1762 1.94636 17.0648 2.17779 17.2062 2.28064V2.29779ZM9.29476 6.75493C10.2716 6.4631 11.176 5.96881 11.9491 5.30424C12.7222 4.63967 13.3467 3.81973 13.7819 2.89779C13.859 2.7435 14.1033 2.8035 14.0648 2.97493C13.3233 6.4035 10.8419 7.11922 9.29905 7.02493C9.13619 7.02922 9.14048 6.80207 9.29476 6.75493Z" fill="#CCBEA7"/>
+			<path d="M16.2846 28.1791C7.42171 28.1791 0.213135 22.402 0.213135 15.3006C0.213135 11.0148 2.86171 7.01627 7.29742 4.62056C8.58314 3.93484 9.68456 3.24484 10.666 2.64056C11.206 2.30627 11.716 1.99342 12.2088 1.70199C13.7131 0.810558 14.9988 0.214844 16.2846 0.214844C17.5703 0.214844 18.6931 0.729129 20.0989 1.56056C20.5274 1.80484 20.956 2.07056 21.4146 2.36199C22.4817 3.02199 23.686 3.7677 25.2717 4.62056C29.7074 7.01627 32.356 11.0106 32.356 15.3006C32.356 22.402 25.1474 28.1791 16.2846 28.1791ZM16.2846 1.28627C15.2474 1.28627 14.1417 1.82199 12.7488 2.6277C12.2646 2.91056 11.7631 3.22341 11.2317 3.54913C10.2331 4.16627 9.08885 4.86484 7.80313 5.56341C3.72313 7.77056 1.28456 11.4091 1.28456 15.3006C1.28456 21.8106 8.01313 27.1077 16.2846 27.1077C24.556 27.1077 31.2846 21.8106 31.2846 15.3006C31.2846 11.4091 28.846 7.77056 24.7617 5.57199C23.1417 4.71484 21.8774 3.90913 20.8531 3.27484C20.386 2.9877 19.9574 2.72199 19.5674 2.48627C18.2688 1.71484 17.3217 1.28627 16.2846 1.28627Z" fill="black"/>
+			<path d="M19.3069 18.4285C19.1144 19.217 18.6762 19.9239 18.0555 20.447C17.5895 20.8987 16.9863 21.1822 16.3412 21.2528C15.6767 21.1934 15.0524 20.9092 14.5712 20.447C13.9569 19.9214 13.5248 19.2148 13.3369 18.4285C13.3307 18.3818 13.3353 18.3343 13.3502 18.2896C13.3652 18.245 13.3902 18.2043 13.4233 18.1708C13.4563 18.1373 13.4967 18.1118 13.5411 18.0963C13.5856 18.0808 13.633 18.0757 13.6798 18.0813H18.9684C19.0148 18.0764 19.0617 18.082 19.1056 18.0979C19.1496 18.1137 19.1893 18.1393 19.2219 18.1727C19.2545 18.2061 19.2791 18.2465 19.2938 18.2908C19.3086 18.3351 19.313 18.3822 19.3069 18.4285Z" fill="#B71422"/>
+			<path d="M14.5723 20.4813C15.0524 20.9437 15.6746 21.2306 16.338 21.2956C16.9999 21.2297 17.6204 20.9428 18.0994 20.4813C18.2527 20.3385 18.3959 20.1852 18.528 20.0227C18.264 19.7232 17.9415 19.4809 17.5804 19.3106C17.2192 19.1404 16.8271 19.0458 16.428 19.0327C16.001 19.0428 15.5829 19.1566 15.2096 19.3641C14.8363 19.5716 14.5191 19.8668 14.2852 20.2241C14.3837 20.3141 14.4694 20.3999 14.5723 20.4813Z" fill="#FF6164"/>
+			<path d="M14.6409 20.1426C14.8534 19.868 15.1253 19.6451 15.4364 19.4907C15.7474 19.3363 16.0894 19.2544 16.4366 19.2512C17.0784 19.2701 17.6899 19.5285 18.1509 19.9755C18.2495 19.8684 18.3437 19.7569 18.4337 19.6455C17.8885 19.1263 17.168 18.831 16.4152 18.8184C16.0129 18.8218 15.6163 18.9143 15.254 19.0892C14.8916 19.2641 14.5725 19.517 14.3195 19.8298C14.4208 19.9399 14.5281 20.0443 14.6409 20.1426Z" fill="black"/>
+			<path d="M16.324 21.5097C15.6099 21.4471 14.9378 21.1451 14.4169 20.6525C13.7535 20.0914 13.2865 19.3332 13.084 18.4883C13.0695 18.413 13.072 18.3355 13.0913 18.2614C13.1105 18.1872 13.1461 18.1183 13.1955 18.0597C13.2542 17.9888 13.3284 17.9322 13.4123 17.8943C13.4962 17.8564 13.5877 17.8382 13.6797 17.8411H18.9683C19.0602 17.8392 19.1514 17.8578 19.2352 17.8956C19.319 17.9334 19.3933 17.9895 19.4526 18.0597C19.5014 18.1185 19.5364 18.1876 19.555 18.2618C19.5735 18.336 19.5752 18.4134 19.5597 18.4883C19.3572 19.3332 18.8903 20.0914 18.2269 20.6525C17.7071 21.1442 17.0367 21.4462 16.324 21.5097ZM13.6797 18.3383C13.6112 18.3383 13.594 18.3683 13.5897 18.3768C13.7709 19.1095 14.1807 19.7655 14.7597 20.2497C15.1832 20.6668 15.7337 20.9308 16.324 20.9997C16.9129 20.9316 17.4628 20.6709 17.8883 20.2583C18.4655 19.7733 18.8737 19.1174 19.054 18.3854C19.0447 18.3717 19.0317 18.3608 19.0166 18.354C19.0015 18.3472 18.9848 18.3447 18.9683 18.3468L13.6797 18.3383Z" fill="black"/>
+			<path d="M22.8079 18.6937C24.1926 18.6937 25.3151 18.0336 25.3151 17.2194C25.3151 16.4052 24.1926 15.7451 22.8079 15.7451C21.4233 15.7451 20.3008 16.4052 20.3008 17.2194C20.3008 18.0336 21.4233 18.6937 22.8079 18.6937Z" fill="#FEBBD0"/>
+			<path d="M9.83527 18.6937C11.2199 18.6937 12.3424 18.0336 12.3424 17.2194C12.3424 16.4052 11.2199 15.7451 9.83527 15.7451C8.45061 15.7451 7.32812 16.4052 7.32812 17.2194C7.32812 18.0336 8.45061 18.6937 9.83527 18.6937Z" fill="#FEBBD0"/>
+			<path fillRule="evenodd" clipRule="evenodd" d="M11.0136 16.6281C11.4809 16.629 11.9378 16.4912 12.3267 16.2322C12.7156 15.9733 13.019 15.6048 13.1984 15.1734C13.3778 14.7419 13.4251 14.267 13.3345 13.8086C13.2439 13.3503 13.0193 12.9291 12.6892 12.5984C12.3591 12.2678 11.9384 12.0424 11.4802 11.951C11.022 11.8595 10.547 11.906 10.1152 12.0846C9.68349 12.2632 9.31443 12.5659 9.05477 12.9543C8.7951 13.3427 8.65649 13.7995 8.65649 14.2667C8.65649 14.8922 8.9047 15.4922 9.34662 15.935C9.78855 16.3777 10.3881 16.627 11.0136 16.6281ZM21.6294 16.6281C22.0971 16.6315 22.5553 16.4959 22.9459 16.2385C23.3365 15.9811 23.6418 15.6135 23.8232 15.1823C24.0046 14.7511 24.0538 14.2758 23.9646 13.8166C23.8754 13.3574 23.6519 12.935 23.3223 12.6031C22.9928 12.2711 22.5721 12.0445 22.1135 11.952C21.655 11.8595 21.1793 11.9052 20.7468 12.0834C20.3143 12.2616 19.9445 12.5643 19.6843 12.953C19.424 13.3417 19.2851 13.7989 19.2851 14.2667C19.2839 14.8904 19.53 15.4891 19.9694 15.9317C20.4088 16.3743 21.0057 16.6247 21.6294 16.6281Z" fill="black"/>
+			<path fillRule="evenodd" clipRule="evenodd" d="M10.2852 14.4169C10.4608 14.4177 10.6328 14.3664 10.7792 14.2694C10.9257 14.1725 11.0401 14.0342 11.1079 13.8722C11.1757 13.7102 11.1938 13.5316 11.1601 13.3593C11.1264 13.1869 11.0422 13.0284 10.9183 12.9039C10.7944 12.7794 10.6363 12.6945 10.4641 12.6599C10.2919 12.6254 10.1133 12.6427 9.95099 12.7097C9.78864 12.7767 9.64983 12.8904 9.55216 13.0364C9.45449 13.1824 9.40235 13.3541 9.40234 13.5297C9.40234 13.7643 9.49522 13.9893 9.66066 14.1555C9.82611 14.3218 10.0507 14.4157 10.2852 14.4169ZM20.9009 14.4169C21.0766 14.4177 21.2485 14.3664 21.3949 14.2694C21.5414 14.1725 21.6558 14.0342 21.7236 13.8722C21.7914 13.7102 21.8096 13.5316 21.7758 13.3593C21.7421 13.1869 21.6579 13.0284 21.534 12.9039C21.4101 12.7794 21.2521 12.6945 21.0799 12.6599C20.9077 12.6254 20.7291 12.6427 20.5667 12.7097C20.4043 12.7767 20.2655 12.8904 20.1679 13.0364C20.0702 13.1824 20.0181 13.3541 20.0181 13.5297C20.018 13.7628 20.1097 13.9865 20.2733 14.1525C20.4369 14.3185 20.6593 14.4135 20.8923 14.4169H20.9009Z" fill="white"/>
+			</g>
+			<defs>
+			<clipPath id="clip0_1_1034">
+			<rect width="34.2857" height="30" fill="white"/>
+			</clipPath>
+			</defs>
+		</LogoSvg>
+	)
+}

package/templates/react/documents/welcome/logos/cloudflare-workers.tsx

@@ -0,0 +1,52 @@
+import type { ComponentProps } from 'react'
+import { LogoSvg } from './_logo-base'
+
+export function CloudflareWorkersIcon(props: ComponentProps<'svg'>) {
+	return (
+		<LogoSvg viewBox='0 0 34 30' width='34' height='30' fill='none' xmlns='http://www.w3.org/2000/svg' aria-hidden='true' {...props}>
+			<path d="M8.54742 0.431641L12.4643 7.49809L8.86717 13.973C8.51706 14.6017 8.51706 15.3667 8.86717 15.9954L12.4643 22.4863L8.54742 29.5528C7.8104 29.1874 7.19836 28.6115 6.78881 27.8981L0.553703 17.0666C-0.185544 15.7796 -0.185544 14.1968 0.553703 12.9098L6.78881 2.07835C7.1996 1.36787 7.81151 0.794901 8.54742 0.431641Z" fill="url(#paint0_linear_1_1095)"/>
+			<path opacity="0.7" d="M8.86726 13.981C8.52011 14.6076 8.52011 15.3688 8.86726 15.9954L12.4644 22.4863L8.54751 29.5527C7.81048 29.1873 7.19845 28.6115 6.78889 27.898L0.553787 17.0665C0.0581762 16.2112 2.832 15.188 8.86726 13.989V13.981Z" fill="url(#paint1_linear_1_1095)"/>
+			<path opacity="0.5" d="M8.94702 1.14308L12.4643 7.49809L11.8807 8.51329L8.77915 3.26142C7.88386 1.79857 6.51693 2.55797 4.80627 5.51565L5.06207 5.07599L6.78872 2.07835C7.19525 1.3702 7.80134 0.797469 8.53135 0.431641L8.93903 1.14308H8.94702Z" fill="url(#paint2_linear_1_1095)"/>
+			<path d="M26.4535 2.07837L32.6886 12.9099C33.432 14.1889 33.432 15.7876 32.6886 17.0666L26.4535 27.8981C25.7114 29.1834 24.3404 29.9755 22.8563 29.9765H16.6212L24.3751 15.9954C24.7223 15.3688 24.7223 14.6076 24.3751 13.981L16.6212 0H22.8563C24.3404 0.000951174 25.7114 0.793093 26.4535 2.07837Z" fill="url(#paint3_linear_1_1095)"/>
+			<path d="M22.5364 29.9285L16.3812 29.9844L23.8314 15.9315C24.1696 15.2969 24.1696 14.5356 23.8314 13.9011L16.3812 0H17.7881L25.606 13.8371C25.9829 14.5023 25.9799 15.3172 25.598 15.9794C23.9154 18.9037 22.2447 21.8348 20.5859 24.7725C19.0671 27.4424 19.7226 29.1611 22.5364 29.9285Z" fill="url(#paint4_linear_1_1095)"/>
+			<path d="M10.3859 29.9765C9.74642 29.9765 9.10692 29.8246 8.54736 29.5528L16.2373 15.6837C16.4771 15.252 16.4771 14.7244 16.2373 14.2928L8.54736 0.431661C9.11898 0.148616 9.74806 0.000917161 10.3859 0H16.621L24.3749 13.981C24.7221 14.6076 24.7221 15.3688 24.3749 15.9954L16.621 29.9765H10.3859Z" fill="url(#paint5_linear_1_1095)"/>
+			<path opacity="0.6" d="M23.8316 14.2928L15.9019 0H16.6213L24.3752 13.981C24.7223 14.6076 24.7223 15.3688 24.3752 15.9954L16.6213 29.9765H15.9019L23.8316 15.6837C24.0714 15.252 24.0714 14.7244 23.8316 14.2928Z" fill="url(#paint6_linear_1_1095)"/>
+			<path opacity="0.6" d="M16.2373 14.2928L8.54736 0.431691C8.78717 0.303792 9.07495 0.207867 9.34674 0.12793C11.0414 3.17354 13.5434 7.79391 16.8608 13.981C17.208 14.6077 17.208 15.3689 16.8608 15.9955L9.22683 29.8166C8.95504 29.7367 8.81116 29.6807 8.55536 29.5608L16.2293 15.6917C16.4691 15.26 16.4691 14.7325 16.2293 14.3008L16.2373 14.2928Z" fill="url(#paint7_linear_1_1095)"/>
+			<defs>
+			<linearGradient id="paint0_linear_1_1095" x1="6.23181" y1="29.5528" x2="-6.53524" y2="9.02026" gradientUnits="userSpaceOnUse">
+			<stop stopColor="#EB6F07"/>
+			<stop offset="1" stopColor="#FAB743"/>
+			</linearGradient>
+			<linearGradient id="paint1_linear_1_1095" x1="10.1907" y1="27.0145" x2="3.61711" y2="20.2538" gradientUnits="userSpaceOnUse">
+			<stop stopColor="#D96504"/>
+			<stop offset="1" stopColor="#D96504" stopOpacity="0"/>
+			</linearGradient>
+			<linearGradient id="paint2_linear_1_1095" x1="8.02263" y1="1.13474" x2="11.5026" y2="6.7248" gradientUnits="userSpaceOnUse">
+			<stop stopColor="#EB6F07"/>
+			<stop offset="1" stopColor="#EB720A" stopOpacity="0"/>
+			</linearGradient>
+			<linearGradient id="paint3_linear_1_1095" x1="24.9337" y1="29.9765" x2="13.5018" y2="6.15541" gradientUnits="userSpaceOnUse">
+			<stop stopColor="#EE6F05"/>
+			<stop offset="1" stopColor="#FAB743"/>
+			</linearGradient>
+			<linearGradient id="paint4_linear_1_1095" x1="13.2255" y1="29.9844" x2="31.5289" y2="25.3388" gradientUnits="userSpaceOnUse">
+			<stop stopColor="#D96504" stopOpacity="0.8"/>
+			<stop offset="0.498" stopColor="#D96504" stopOpacity="0.2"/>
+			<stop offset="1" stopColor="#D96504" stopOpacity="0"/>
+			</linearGradient>
+			<linearGradient id="paint5_linear_1_1095" x1="16.5913" y1="29.9765" x2="4.9261" y2="6.45427" gradientUnits="userSpaceOnUse">
+			<stop stopColor="#FFA95F"/>
+			<stop offset="1" stopColor="#FFEBC8"/>
+			</linearGradient>
+			<linearGradient id="paint6_linear_1_1095" x1="16.6093" y1="0.329741" x2="26.3374" y2="1.85911" gradientUnits="userSpaceOnUse">
+			<stop stopColor="white" stopOpacity="0.5"/>
+			<stop offset="1" stopColor="white" stopOpacity="0.1"/>
+			</linearGradient>
+			<linearGradient id="paint7_linear_1_1095" x1="7.37275" y1="31.0635" x2="19.397" y2="29.2922" gradientUnits="userSpaceOnUse">
+			<stop stopColor="white" stopOpacity="0.5"/>
+			<stop offset="1" stopColor="white" stopOpacity="0.1"/>
+			</linearGradient>
+			</defs>
+		</LogoSvg>
+	)
+}

package/templates/react/documents/welcome/logos/css-modules.tsx

@@ -0,0 +1,54 @@
+import type { ComponentProps } from 'react'
+import { LogoSvg } from './_logo-base'
+
+export function CssModulesIcon(props: ComponentProps<'svg'>) {
+	return (
+		<LogoSvg
+			viewBox='0 0 36 30'
+			width='36'
+			height='30'
+			fill='none'
+			xmlns='http://www.w3.org/2000/svg'
+			aria-hidden='true'
+			{...props}>
+			<path d='M27.8425 1.68164H1.59253V27.9316H27.8425V1.68164Z' fill='white' stroke='black' strokeWidth='0.1875' />
+			<path
+				d='M5.14558 13.748C5.71878 13.748 6.16356 13.899 6.47992 14.2011C6.7963 14.5031 6.97195 14.8462 7.00688 15.2303H6.40903C6.34124 14.9386 6.20564 14.7075 6.00225 14.537C5.80092 14.3665 5.5174 14.2812 5.15171 14.2812C4.70589 14.2812 4.34533 14.4384 4.07003 14.7527C3.79679 15.065 3.66017 15.5447 3.66017 16.1918C3.66017 16.7218 3.78343 17.1522 4.02997 17.483C4.27855 17.8117 4.64835 17.9761 5.13934 17.9761C5.59132 17.9761 5.93545 17.8025 6.17172 17.4553C6.29705 17.2724 6.39052 17.0321 6.45215 16.7342H7.05C6.99658 17.2108 6.8199 17.6104 6.51995 17.933C6.16042 18.3212 5.67558 18.5154 5.06542 18.5154C4.53948 18.5154 4.09779 18.3562 3.74034 18.0377C3.26989 17.6166 3.03467 16.9663 3.03467 16.0871C3.03467 15.4194 3.21135 14.8719 3.56471 14.4445C3.94684 13.9802 4.47377 13.748 5.14558 13.748Z'
+				fill='black'
+			/>
+			<path
+				d='M8.20047 16.9371C8.21485 17.1939 8.27546 17.4024 8.38229 17.5627C8.58568 17.8626 8.94418 18.0126 9.4578 18.0126C9.6879 18.0126 9.89745 17.9797 10.0865 17.914C10.4521 17.7866 10.635 17.5586 10.635 17.2299C10.635 16.9833 10.558 16.8077 10.4039 16.7029C10.2477 16.6002 10.0033 16.5108 9.67043 16.4348L9.05718 16.2961C8.65657 16.2057 8.37305 16.1061 8.20664 15.9972C7.91901 15.8082 7.7752 15.5257 7.7752 15.1497C7.7752 14.743 7.91593 14.4091 8.19739 14.1482C8.47884 13.8873 8.87741 13.7568 9.39309 13.7568C9.86765 13.7568 10.2703 13.8719 10.6011 14.102C10.934 14.33 11.1004 14.6957 11.1004 15.1991H10.5241C10.4933 14.9567 10.4275 14.7707 10.3269 14.6413C10.1399 14.405 9.8225 14.2869 9.37464 14.2869C9.01305 14.2869 8.75317 14.3629 8.59499 14.515C8.43679 14.667 8.3577 14.8437 8.3577 15.045C8.3577 15.2669 8.45015 15.4292 8.63505 15.5319C8.75626 15.5977 9.03052 15.6798 9.45783 15.7784L10.0926 15.9233C10.3988 15.9931 10.635 16.0887 10.8014 16.2099C11.089 16.4215 11.2328 16.7286 11.2328 17.1313C11.2328 17.6326 11.05 17.9911 10.6843 18.2068C10.3207 18.4225 9.89745 18.5304 9.41468 18.5304C8.85176 18.5304 8.41107 18.3866 8.09261 18.099C7.77418 17.8134 7.61804 17.4262 7.6242 16.9372H8.20047V16.9371Z'
+				fill='black'
+			/>
+			<path
+				d='M12.4029 16.9371C12.4172 17.1939 12.4779 17.4024 12.5847 17.5627C12.7881 17.8626 13.1466 18.0126 13.6602 18.0126C13.8903 18.0126 14.0998 17.9797 14.2888 17.914C14.6545 17.7866 14.8374 17.5586 14.8374 17.2299C14.8374 16.9833 14.7603 16.8077 14.6063 16.7029C14.4501 16.6002 14.2056 16.5108 13.8728 16.4348L13.2596 16.2961C12.859 16.2057 12.5754 16.1061 12.409 15.9972C12.1214 15.8082 11.9776 15.5257 11.9776 15.1497C11.9776 14.743 12.1183 14.4091 12.3998 14.1482C12.6812 13.8873 13.0798 13.7568 13.5955 13.7568C14.07 13.7568 14.4727 13.8719 14.8035 14.102C15.1363 14.33 15.3028 14.6957 15.3028 15.1991H14.7265C14.6957 14.9567 14.6299 14.7707 14.5293 14.6413C14.3423 14.405 14.0249 14.2869 13.577 14.2869C13.2154 14.2869 12.9556 14.3629 12.7974 14.515C12.6392 14.667 12.5601 14.8437 12.5601 15.045C12.5601 15.2669 12.6525 15.4292 12.8374 15.5319C12.9587 15.5977 13.2329 15.6798 13.6602 15.7784L14.295 15.9233C14.6012 15.9931 14.8374 16.0887 15.0038 16.2099C15.2914 16.4215 15.4352 16.7286 15.4352 17.1313C15.4352 17.6326 15.2524 17.9911 14.8867 18.2068C14.523 18.4225 14.0998 18.5304 13.6171 18.5304C13.0542 18.5304 12.6135 18.3866 12.295 18.099C11.9766 17.8134 11.8204 17.4262 11.8266 16.9372H12.4029V16.9371Z'
+				fill='black'
+			/>
+			<path
+				d='M3.22192 21.7598H4.10017L5.40064 25.5872L6.69185 21.7598H7.56091V26.2868H6.97847V23.6149C6.97847 23.5225 6.98053 23.3694 6.98463 23.1558C6.98874 22.9421 6.9908 22.713 6.9908 22.4685L5.69959 26.2867H5.0925L3.79203 22.4685V22.6072C3.79203 22.7182 3.79409 22.8876 3.7982 23.1157C3.80436 23.3417 3.80744 23.5081 3.80744 23.6149V26.2868H3.22193L3.22192 21.7598Z'
+				fill='black'
+			/>
+			<path
+				d='M10.4551 21.6367C11.2543 21.6367 11.8459 21.8935 12.2301 22.4071C12.53 22.8077 12.68 23.3203 12.68 23.9449C12.68 24.6208 12.5085 25.1827 12.1654 25.6305C11.7627 26.1565 11.1885 26.4195 10.4428 26.4195C9.74632 26.4195 9.19881 26.1894 8.80022 25.7292C8.4448 25.2854 8.26709 24.7245 8.26709 24.0466C8.26709 23.4343 8.41912 22.9105 8.72318 22.4749C9.11352 21.9161 9.69085 21.6367 10.4551 21.6367ZM10.5167 25.8709C11.0571 25.8709 11.4474 25.6778 11.6877 25.2916C11.9302 24.9033 12.0514 24.4575 12.0514 23.9542C12.0514 23.4221 11.9117 22.9937 11.6323 22.6691C11.3549 22.3445 10.9748 22.1822 10.492 22.1822C10.0236 22.1822 9.64147 22.3435 9.34563 22.666C9.0498 22.9865 8.90188 23.4601 8.90188 24.0867C8.90188 24.588 9.02823 25.0112 9.28092 25.3563C9.53567 25.6994 9.94764 25.8709 10.5167 25.8709Z'
+				fill='black'
+			/>
+			<path
+				d='M15.1453 25.7638C15.3528 25.7638 15.5233 25.7423 15.6568 25.6991C15.8951 25.619 16.0903 25.4649 16.2423 25.2369C16.3635 25.054 16.4509 24.8198 16.5043 24.5342C16.5351 24.3637 16.5505 24.2055 16.5505 24.0596C16.5505 23.4988 16.4385 23.0632 16.2146 22.753C15.9925 22.443 15.634 22.2881 15.1389 22.2881H14.051V25.7642H15.1451L15.1453 25.7638ZM13.4349 21.7607H15.2685C15.8909 21.7607 16.3737 21.9816 16.7168 22.4233C17.0229 22.8219 17.176 23.3324 17.176 23.9549C17.176 24.4356 17.0856 24.8701 16.9048 25.2585C16.5864 25.9446 16.0389 26.2877 15.2623 26.2877H13.4348V21.7608L13.4349 21.7607Z'
+				fill='black'
+			/>
+			<path
+				d='M18.6341 21.7598V24.5579C18.6341 24.8866 18.6958 25.1599 18.819 25.3776C19.0019 25.7063 19.3101 25.8707 19.7436 25.8707C20.2633 25.8707 20.6167 25.693 20.8037 25.3375C20.9043 25.1444 20.9547 24.8845 20.9547 24.5579V21.7598H21.5772V24.3021C21.5772 24.8589 21.5022 25.2872 21.3522 25.5872C21.0769 26.1336 20.5571 26.4069 19.7929 26.4069C19.0286 26.4069 18.5099 26.1336 18.2367 25.5872C18.0867 25.2872 18.0117 24.8589 18.0117 24.3021V21.7598H18.6342L18.6341 21.7598Z'
+				fill='black'
+			/>
+			<path d='M22.5171 21.7598H23.1303V25.7475H25.4231V26.2868H22.5171L22.5171 21.7598Z' fill='black' />
+			<path
+				d='M26.0889 21.7598H29.3894V22.3145H26.6868V23.6889H29.186V24.2128H26.6868V25.7475H29.4356V26.2868H26.0889V21.7598L26.0889 21.7598Z'
+				fill='black'
+			/>
+			<path
+				d='M30.6463 24.8267C30.6607 25.0836 30.7213 25.2921 30.8281 25.4523C31.0315 25.7523 31.39 25.9022 31.9036 25.9022C32.1337 25.9022 32.3433 25.8694 32.5323 25.8036C32.8979 25.6763 33.0808 25.4482 33.0808 25.1195C33.0808 24.873 33.0038 24.6973 32.8497 24.5925C32.6935 24.4898 32.4491 24.4004 32.1162 24.3244L31.503 24.1858C31.1024 24.0954 30.8189 23.9957 30.6524 23.8868C30.3648 23.6978 30.221 23.4153 30.221 23.0394C30.221 22.6326 30.3617 22.2988 30.6432 22.0379C30.9247 21.7769 31.3232 21.6465 31.8389 21.6465C32.3135 21.6465 32.7161 21.7615 33.0469 21.9916C33.3798 22.2197 33.5462 22.5854 33.5462 23.0887H32.9699C32.9391 22.8463 32.8733 22.6604 32.7727 22.531C32.5857 22.2947 32.2683 22.1766 31.8204 22.1766C31.4589 22.1766 31.199 22.2526 31.0408 22.4046C30.8826 22.5566 30.8035 22.7333 30.8035 22.9347C30.8035 23.1565 30.896 23.3188 31.0809 23.4216C31.2021 23.4873 31.4763 23.5695 31.9036 23.6681L32.5384 23.8129C32.8446 23.8828 33.0808 23.9783 33.2472 24.0995C33.5348 24.3111 33.6786 24.6183 33.6786 25.021C33.6786 25.5223 33.4958 25.8808 33.1301 26.0965C32.7665 26.3122 32.3433 26.4201 31.8605 26.4201C31.2976 26.4201 30.8569 26.2762 30.5384 25.9886C30.22 25.7031 30.0638 25.3158 30.07 24.8269H30.6463V24.8267Z'
+				fill='black'
+			/>
+		</LogoSvg>
+	)
+}

package/templates/react/documents/welcome/logos/css-official.tsx

@@ -0,0 +1,18 @@
+import type { ComponentProps } from 'react'
+import { LogoSvg } from './_logo-base'
+
+export function CssOfficialIcon(props: ComponentProps<'svg'>) {
+	return (
+		<LogoSvg viewBox='0 0 30 30' width='30' height='30' fill='none' xmlns='http://www.w3.org/2000/svg' aria-hidden='true' {...props}>
+			<g clipPath="url(#clip0_28_8188)">
+			<path d="M0 0H25.2C26.473 0 27.6939 0.505713 28.5941 1.40589C29.4943 2.30606 30 3.52696 30 4.8V25.2C30 26.473 29.4943 27.6939 28.5941 28.5941C27.6939 29.4943 26.473 30 25.2 30H4.8C3.52696 30 2.30606 29.4943 1.40589 28.5941C0.505713 27.6939 0 26.473 0 25.2L0 0Z" fill="#663399"/>
+			<path d="M10.744 27.5996C8.81706 27.5978 7.62816 26.5127 7.65096 24.5159V19.4642C7.65096 18.452 7.94736 17.6822 8.54016 17.1554C9.60486 16.1297 12.0751 16.0673 13.1179 17.171C13.7605 17.7377 14.0029 18.8954 13.9453 19.9757H11.7337C11.7505 19.5512 11.728 18.9083 11.4784 18.6662C11.1541 18.2273 10.2976 18.2789 10.0711 18.7358C9.93186 18.9836 9.86226 19.3505 9.86226 19.8359V24.2213C9.86226 25.1408 10.1818 25.6058 10.8211 25.616C11.1199 25.616 11.347 25.5074 11.5015 25.2905C11.7172 25.0331 11.7508 24.4631 11.7334 24.0509H13.945C14.0962 26.153 12.8554 27.6257 10.7437 27.5996H10.744ZM17.7652 27.5996C15.6301 27.629 14.6749 26.1098 14.734 24.0509H16.8217C16.7638 24.9485 17.0722 25.766 17.8114 25.709C18.1411 25.709 18.3733 25.6058 18.5074 25.3991C18.7624 25.0214 18.8101 23.9306 18.4456 23.5085C18.1909 23.102 17.2747 22.7432 16.7908 22.5014C16.0999 22.1708 15.6025 21.7784 15.2983 21.3236C14.6122 20.3144 14.6758 18.0992 15.6385 17.2016C16.5739 16.094 19.0168 16.043 19.9531 17.1785C20.5306 17.7638 20.7829 18.9155 20.734 19.9754H18.7234C18.7405 19.5398 18.6994 18.8369 18.5302 18.5807C18.4117 18.3638 18.1873 18.2552 17.8576 18.2552C17.2699 18.2552 16.9762 18.6065 16.9762 19.3088C16.9825 20.0546 17.2732 20.3606 17.9506 20.6723C18.8278 21.0131 19.9432 21.5951 20.3476 22.2995C21.5536 24.4457 20.7262 27.7241 17.7649 27.599L17.7652 27.5996ZM24.508 27.5996C22.3729 27.629 21.4177 26.1098 21.4768 24.0509H23.5645C23.5066 24.9485 23.815 25.766 24.5542 25.709C24.8839 25.709 25.1161 25.6058 25.2502 25.3991C25.5052 25.0214 25.5529 23.9306 25.1884 23.5085C24.9337 23.102 24.0175 22.7432 23.5336 22.5014C22.8427 22.1708 22.3453 21.7784 22.0411 21.3236C21.355 20.3144 21.4186 18.0992 22.3813 17.2016C23.3167 16.094 25.7596 16.043 26.6959 17.1785C27.2734 17.7638 27.5257 18.9155 27.4768 19.9754H25.4662C25.4833 19.5398 25.4422 18.8369 25.273 18.5807C25.1545 18.3638 24.9301 18.2552 24.6004 18.2552C24.0127 18.2552 23.719 18.6065 23.719 19.3088C23.7253 20.0546 24.016 20.3606 24.6934 20.6723C25.5706 21.0131 26.686 21.5951 27.0904 22.2995C28.2964 24.4457 27.469 27.7241 24.5077 27.599L24.508 27.5996Z" fill="white"/>
+			</g>
+			<defs>
+			<clipPath id="clip0_28_8188">
+			<rect width="30" height="30" fill="white"/>
+			</clipPath>
+			</defs>
+		</LogoSvg>
+	)
+}

package/templates/react/documents/welcome/logos/deno.tsx

@@ -0,0 +1,17 @@
+import type { ComponentProps } from 'react'
+import { LogoSvgInverted } from './_logo-base'
+
+export function DenoIcon(props: ComponentProps<'svg'>) {
+	return (
+		<LogoSvgInverted viewBox='0 0 32 30' width='32' height='30' fill='none' xmlns='http://www.w3.org/2000/svg' aria-hidden='true' {...props}>
+			<g clipPath="url(#clip0_1_1056)">
+			<path fillRule="evenodd" clipRule="evenodd" d="M20.451 19.4352C22.9843 19.5595 25.6299 18.4226 26.4512 16.1602C27.2725 13.8978 26.954 11.6604 24.0077 10.3184C21.0615 8.97589 19.7008 7.38032 17.3206 6.41763C15.7654 5.78862 14.0352 6.16194 12.2584 7.14381C7.4732 9.78854 3.1856 18.1442 5.16186 25.8858C5.1902 25.992 5.14259 26.103 5.04633 26.1563C4.95065 26.209 4.83052 26.1891 4.75628 26.1084C2.09172 23.1692 0.592427 19.1838 0.918034 14.9197C1.54679 6.68553 8.74229 0.510954 16.9764 1.13971C25.21 1.76842 31.3846 8.96392 30.7558 17.1981C30.4918 20.6559 29.0699 23.7504 26.8985 26.1306C25.238 27.8364 23.1224 28.5946 21.3571 28.5632C20.0773 28.5405 18.8256 28.0312 17.96 27.2865C16.7243 26.222 16.2249 25.0058 16.0542 23.6479C16.0113 23.3107 16.0365 22.3913 16.2122 21.7545C16.3427 21.28 16.6748 20.3631 17.1605 19.9622C16.5923 19.7179 15.8617 19.185 15.6309 18.9294C15.5746 18.8667 15.5821 18.7681 15.6328 18.7007C15.683 18.6327 15.7724 18.6063 15.8517 18.6349C16.34 18.8024 16.9347 18.9674 17.5618 19.0726C18.3864 19.2106 19.4119 19.3838 20.451 19.4352ZM15.2958 7.46043C16.103 7.39718 16.8072 8.0861 16.9286 9.00227C17.0906 10.2228 16.6427 11.4835 15.1697 11.5125C13.9114 11.5376 13.5302 10.2687 13.6136 9.50006C13.6964 8.73134 14.3301 7.53622 15.2958 7.46043Z" fill="black"/>
+			</g>
+			<defs>
+			<clipPath id="clip0_1_1056">
+			<rect width="31.895" height="29.2191" fill="white"/>
+			</clipPath>
+			</defs>
+		</LogoSvgInverted>
+	)
+}

package/templates/react/documents/welcome/logos/linaria.tsx

@@ -0,0 +1,18 @@
+import type { ComponentProps } from 'react'
+import { LogoSvg } from './_logo-base'
+
+export function LinariaIcon(props: ComponentProps<'svg'>) {
+	return (
+		<LogoSvg viewBox='0 0 33 30' width='33' height='30' fill='none' xmlns='http://www.w3.org/2000/svg' aria-hidden='true' {...props}>
+			<g clipPath="url(#clip0_28_8222)">
+			<path d="M0.020752 15.6126C0.475556 13.4695 1.41789 11.6941 3.29574 10.4678C4.35581 9.7755 6.17093 9.06381 7.44075 9.33255C7.79351 9.4072 8.12394 9.5979 8.32068 9.90709C8.50357 10.1945 8.51355 10.5634 8.43551 10.8867C8.37755 11.1265 8.20015 11.3018 7.99263 11.424C7.43756 11.7511 6.74293 11.7273 6.12848 11.861C4.39907 12.2375 2.99464 13.6592 2.543 15.3561C2.21549 16.5867 2.43298 17.9604 3.07155 19.0576C3.72293 20.1767 4.76963 20.9509 6.01999 21.2764C7.53508 21.6709 9.18289 21.4293 10.7304 21.4864C13.1375 21.575 15.3897 23.0144 16.6006 25.0732C17.3138 26.2858 17.6201 27.6627 17.5897 29.0605C17.374 29.456 17.1586 29.7834 16.7017 29.9205C16.4046 30.0096 16.0653 29.9396 15.7998 29.7865C15.5845 29.6622 15.4199 29.4765 15.2575 29.2922C14.9484 27.3648 14.9216 26.0837 13.1625 24.8055C11.213 23.389 8.81751 24.026 6.59744 23.8311C2.96908 23.5124 0.78453 20.9816 0.020752 17.6061V15.6126Z" fill="#DE2D68"/>
+			<path d="M16.262 0.0234375C16.5374 0.0545872 16.821 0.0370784 17.0985 0.0570305C19.0377 0.196356 20.8204 1.20577 22.0752 2.66458C23.1347 3.89631 23.9398 5.83865 23.8059 7.48748C23.7781 7.82945 23.6744 8.17311 23.3984 8.39761C23.1392 8.60833 22.78 8.67789 22.4534 8.63758C21.2065 8.48386 21.4891 7.21141 21.276 6.32924C21.1028 5.61233 20.8005 4.95873 20.3465 4.37604C19.4787 3.26219 18.1722 2.6033 16.7811 2.43479C15.5879 2.29031 14.1707 2.78022 13.2419 3.52089C12.1853 4.36349 11.4997 5.65372 11.3492 6.99241C11.2069 8.25883 11.6531 9.61489 12.4494 10.5984C15.7509 14.6756 19.8909 10.6496 23.4949 9.5836C24.4046 9.31452 25.3195 9.24557 26.2611 9.34574C28.2031 9.5492 29.9819 10.5247 31.1974 12.0528C32.4107 13.5814 32.9618 15.5319 32.7283 17.4694C32.5061 19.4196 31.5009 21.1405 29.9747 22.3537C28.0298 23.8608 25.8709 23.9584 23.5134 23.9413C22.9536 23.9372 22.3598 23.8641 21.8055 23.9297C21.0228 24.0223 20.3743 24.5171 19.6115 24.6478C19.3061 24.7001 19.0075 24.6924 18.7482 24.5011C18.5582 24.361 18.2513 23.9726 18.2283 23.7296C18.1947 23.3753 18.329 22.919 18.5624 22.6555C18.8477 22.3334 19.2868 22.1497 19.681 22.0038C21.685 21.2617 23.6715 21.5753 25.7484 21.4761C26.9555 21.4184 28.2413 20.8136 29.0514 19.9209C29.9378 18.9443 30.4344 17.6857 30.3637 16.3609C30.299 15.061 29.72 13.8403 28.7545 12.9677C28.1782 12.4566 27.4905 12.0872 26.7461 11.8892C24.6939 11.3433 23.2396 12.3113 21.4763 13.1453C19.9447 13.8698 17.995 14.7429 16.2814 14.8383C14.4623 14.9396 12.7124 14.1812 11.3763 12.9744C9.92514 11.6497 9.0577 9.80403 8.96371 7.84133C8.85316 5.8622 9.53913 3.92115 10.8687 2.45101C12.2977 0.887553 14.1684 0.117429 16.262 0.0234375Z" fill="#DE2D68"/>
+			</g>
+			<defs>
+			<clipPath id="clip0_28_8222">
+			<rect width="32.8079" height="30" fill="white"/>
+			</clipPath>
+			</defs>
+		</LogoSvg>
+	)
+}