var Component=(()=>{var p=Object.create;var c=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var E=Object.getPrototypeOf,F=Object.prototype.hasOwnProperty;var m=(n,l)=>()=>(l||n((l={exports:{}}).exports,l),l.exports),C=(n,l)=>{for(var s in l)c(n,s,{get:l[s],enumerable:!0})},a=(n,l,s,o)=>{if(l&&typeof l=="object"||typeof l=="function")for(let r of y(l))!F.call(n,r)&&r!==s&&c(n,r,{get:()=>l[r],enumerable:!(o=h(l,r))||o.enumerable});return n};var B=(n,l,s)=>(s=n!=null?p(E(n)):{},a(l||!n||!n.__esModule?c(s,"default",{value:n,enumerable:!0}):s,n)),N=n=>a(c({},"__esModule",{value:!0}),n);var t=m((f,i)=>{i.exports=_jsx_runtime});var A={};C(A,{default:()=>u,frontmatter:()=>g});var e=B(t()),g={title:"Book",description:"A responsive book component.",peek:"book-default"};function d(n){let l=Object.assign({div:"div",h2:"h2",pre:"pre",code:"code",span:"span"},n.components),{Preview:s}=l;return s||k("Preview",!0),(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)(l.div,{className:"component-preview",children:[(0,e.jsx)(l.h2,{children:"Default"}),` `,(0,e.jsx)(s,{name:"book-default",children:(0,e.jsxs)(l.div,{"data-rehype-pretty-code-fragment":"",children:[(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"light",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"light",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" { Book } "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:"'geist/components'"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"type"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" { JSX } "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:"'react'"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"Component"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"()"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"JSX"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"Element"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"Book"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"title"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:'"The user experience of the Frontend Cloud"'}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" />;"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"}"})})]})}),(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"dark",__rawString__:`import { Book } from 'geist/components'; import type { JSX } from 'react'; export function Component(): JSX.Element { return ; } `,children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"dark",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { Book } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'geist/components'"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"type"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { JSX } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'react'"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"Component"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"()"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"JSX"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"Element"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"Book"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"title"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"The user experience of the Frontend Cloud"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />;"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})})]})})]})})]}),` `,(0,e.jsxs)(l.div,{className:"component-preview",children:[(0,e.jsx)(l.h2,{children:"Variants"}),` `,(0,e.jsx)(s,{name:"book-variants",children:(0,e.jsxs)(l.div,{"data-rehype-pretty-code-fragment":"",children:[(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"light",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"light",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" { Book, Stack } "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:"'geist/components'"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"type"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" { JSX } "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:"'react'"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"Component"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"()"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"JSX"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"Element"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"Stack"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"align"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:'"baseline"'}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"direction"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:'"row"'}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"gap"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"8"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"}>"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"Book"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"title"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:'"The user experience of the Frontend Cloud"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"variant"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:'"simple"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"width"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"196"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"}"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" />"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"Book"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"title"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:'"The user experience of the Frontend Cloud"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"variant"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:'"stripe"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"width"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"196"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"}"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" />"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" );"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"}"})})]})}),(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"dark",__rawString__:`import { Book, Stack } from 'geist/components'; import type { JSX } from 'react'; export function Component(): JSX.Element { return ( ); } `,children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"dark",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { Book, Stack } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'geist/components'"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"type"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { JSX } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'react'"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"Component"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"()"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"JSX"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"Element"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"Stack"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"align"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"baseline"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"direction"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"row"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"gap"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"8"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}>"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"Book"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"title"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"The user experience of the Frontend Cloud"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"variant"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"simple"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"width"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"196"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"Book"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"title"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"The user experience of the Frontend Cloud"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"variant"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"stripe"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"width"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"196"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" );"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})})]})})]})})]}),` `,(0,e.jsxs)(l.div,{className:"component-preview",children:[(0,e.jsx)(l.h2,{children:"Custom color"}),` `,(0,e.jsx)(s,{name:"book-colors",children:(0,e.jsxs)(l.div,{"data-rehype-pretty-code-fragment":"",children:[(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"light",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"light",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" { Book, Stack } "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:"'geist/components'"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"type"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" { JSX } "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:"'react'"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"Component"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"()"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"JSX"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"Element"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"Stack"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"align"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:'"baseline"'}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"direction"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:'"row"'}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"gap"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"8"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"}>"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"Book"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"color"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:'"#9D2127"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"title"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:`"How Vercel improves your website's search engine ranking"`})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" />"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"Book"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"color"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:'"#7DC1C1"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"textColor"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:'"white"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"title"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:'"Design Engineering at Vercel"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"variant"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:'"simple"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" />"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"Book"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"color"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:'"#FED954"'}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"title"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:'"The user experience of the Frontend Cloud"'}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" );"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"}"})})]})}),(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"dark",__rawString__:`import { Book, Stack } from 'geist/components'; import type { JSX } from 'react'; export function Component(): JSX.Element { return ( ); } `,children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"dark",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { Book, Stack } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'geist/components'"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"type"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { JSX } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'react'"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"Component"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"()"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"JSX"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"Element"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"Stack"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"align"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"baseline"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"direction"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"row"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"gap"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"8"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}>"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"Book"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"color"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"#9D2127"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"title"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:`"How Vercel improves your website's search engine ranking"`})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"Book"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"color"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"#7DC1C1"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"textColor"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"white"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"title"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Design Engineering at Vercel"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"variant"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"simple"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"Book"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"color"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"#FED954"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"title"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"The user experience of the Frontend Cloud"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" );"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})})]})})]})})]}),` `,(0,e.jsxs)(l.div,{className:"component-preview",children:[(0,e.jsx)(l.h2,{children:"Custom illustration"}),` `,(0,e.jsx)(s,{name:"book-illustrations",children:(0,e.jsxs)(l.div,{"data-rehype-pretty-code-fragment":"",children:[(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"light",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"light",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" { Book, Stack } "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:"'geist/components'"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"type"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" { JSX } "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:"'react'"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" Lines "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:"'./lines'"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" Icon "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:"'./icon'"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"Component"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"()"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"JSX"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"Element"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"Stack"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"direction"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:'"row"'}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"gap"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"8"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"}>"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"Book"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"illustration"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"{<"}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"Lines"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" />}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"title"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:'"The user experience of the Frontend Cloud"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" />"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"Book"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"illustration"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"{<"}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"Icon"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" />}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"title"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:'"The user experience of the Frontend Cloud"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"variant"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:'"simple"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" />"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" );"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"}"})})]})}),(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"dark",__rawString__:`import { Book, Stack } from 'geist/components'; import type { JSX } from 'react'; import Lines from './lines'; import Icon from './icon'; export function Component(): JSX.Element { return ( } title="The user experience of the Frontend Cloud" /> } title="The user experience of the Frontend Cloud" variant="simple" /> ); } `,children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"dark",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { Book, Stack } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'geist/components'"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"type"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { JSX } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'react'"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" Lines "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'./lines'"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" Icon "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'./icon'"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"Component"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"()"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"JSX"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"Element"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"Stack"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"direction"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"row"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"gap"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"8"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}>"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"Book"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"illustration"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{<"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"Lines"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"title"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"The user experience of the Frontend Cloud"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"Book"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"illustration"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{<"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"Icon"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"title"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"The user experience of the Frontend Cloud"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"variant"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"simple"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" );"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})})]})})]})})]}),` `,(0,e.jsxs)(l.div,{className:"component-preview",children:[(0,e.jsx)(l.h2,{children:"Responsive"}),` `,(0,e.jsx)(s,{name:"book-responsive",children:(0,e.jsxs)(l.div,{"data-rehype-pretty-code-fragment":"",children:[(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"light",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"light",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" { Book } "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:"'geist/components'"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"type"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" { JSX } "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:"'react'"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"Component"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"()"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"JSX"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"Element"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"Book"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"title"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:'"The user experience of the Frontend Cloud"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"width"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"{{ sm: "}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"150"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:", md: "}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"196"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" }}"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" />"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" );"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"}"})})]})}),(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"dark",__rawString__:`import { Book } from 'geist/components'; import type { JSX } from 'react'; export function Component(): JSX.Element { return ( ); } `,children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"dark",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { Book } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'geist/components'"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"type"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { JSX } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'react'"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"Component"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"()"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"JSX"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"Element"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"Book"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"title"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"The user experience of the Frontend Cloud"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"width"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{{ sm: "}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"150"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", md: "}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"196"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }}"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" );"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})})]})})]})})]}),` `,(0,e.jsxs)(l.div,{className:"component-preview",children:[(0,e.jsx)(l.h2,{children:"Width"}),` `,(0,e.jsx)(s,{name:"book-sizes",children:(0,e.jsxs)(l.div,{"data-rehype-pretty-code-fragment":"",children:[(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"light",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"light",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" { Book, Stack } "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:"'geist/components'"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"type"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" { JSX } "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:"'react'"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"Component"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"()"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"JSX"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"Element"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"Stack"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"align"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:'"baseline"'}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"direction"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:'"row"'}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"gap"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"8"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"}>"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"Book"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"title"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:'"The user experience of the Frontend Cloud"'}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"width"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"300"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"} />"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"Book"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"title"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:'"The user experience of the Frontend Cloud"'}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"width"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"200"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"} />"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"Book"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"title"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:'"The user experience of the Frontend Cloud"'}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"width"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"150"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"} />"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" );"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"}"})})]})}),(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"dark",__rawString__:`import { Book, Stack } from 'geist/components'; import type { JSX } from 'react'; export function Component(): JSX.Element { return ( ); } `,children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"dark",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { Book, Stack } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'geist/components'"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"type"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { JSX } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'react'"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"Component"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"()"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"JSX"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"Element"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"Stack"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"align"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"baseline"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"direction"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"row"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"gap"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"8"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}>"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"Book"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"title"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"The user experience of the Frontend Cloud"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"width"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"300"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"} />"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"Book"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"title"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"The user experience of the Frontend Cloud"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"width"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"200"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"} />"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"Book"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"title"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"The user experience of the Frontend Cloud"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"width"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"150"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"} />"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" );"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})})]})})]})})]}),` `,(0,e.jsxs)(l.div,{className:"component-preview",children:[(0,e.jsx)(l.h2,{children:"Textured"}),` `,(0,e.jsx)(s,{name:"book-textured",children:(0,e.jsxs)(l.div,{"data-rehype-pretty-code-fragment":"",children:[(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"light",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"light",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" { Book, Stack } "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:"'geist/components'"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"type"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" { JSX } "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:"'react'"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"Component"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"()"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"JSX"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"Element"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"Stack"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"gap"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"12"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"}>"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"Stack"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"align"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:'"baseline"'}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"direction"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:'"row"'}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"gap"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"8"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"}>"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"Book"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"color"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:'"#7DC1C1"'}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"textured"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"title"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:'"Design Engineering at Vercel"'}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"Book"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"color"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:'"#9D2127"'}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"textured"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"title"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:'"Design Engineering at Vercel"'}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"Book"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"color"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:'"#FED954"'}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"textured"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"title"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:'"Design Engineering at Vercel"'}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"Stack"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"align"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:'"baseline"'}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"direction"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:'"row"'}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"gap"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"8"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"}>"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"Book"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"color"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:'"#7DC1C1"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"textColor"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:'"white"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"textured"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"title"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:'"Design Engineering at Vercel"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"variant"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:'"simple"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" />"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"Book"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"color"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:'"#9D2127"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"textColor"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:'"#ece4db"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"textured"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"title"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:'"Design Engineering at Vercel"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"variant"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:'"simple"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" />"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"Book"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"color"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:'"#FED954"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"textColor"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:'"#9d3b05"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"textured"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"title"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:'"Design Engineering at Vercel"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"variant"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:'"simple"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" />"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" );"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"}"})})]})}),(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"dark",__rawString__:`import { Book, Stack } from 'geist/components'; import type { JSX } from 'react'; export function Component(): JSX.Element { return ( ); } `,children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"dark",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { Book, Stack } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'geist/components'"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"type"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { JSX } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'react'"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"Component"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"()"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"JSX"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"Element"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"Stack"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"gap"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"12"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}>"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"Stack"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"align"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"baseline"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"direction"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"row"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"gap"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"8"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}>"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"Book"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"color"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"#7DC1C1"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"textured"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"title"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Design Engineering at Vercel"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"Book"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"color"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"#9D2127"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"textured"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"title"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Design Engineering at Vercel"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"Book"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"color"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"#FED954"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"textured"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"title"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Design Engineering at Vercel"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"Stack"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"align"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"baseline"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"direction"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"row"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"gap"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"8"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}>"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"Book"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"color"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"#7DC1C1"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"textColor"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"white"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"textured"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"title"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Design Engineering at Vercel"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"variant"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"simple"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"Book"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"color"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"#9D2127"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"textColor"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"#ece4db"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"textured"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"title"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Design Engineering at Vercel"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"variant"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"simple"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"Book"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"color"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"#FED954"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"textColor"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"#9d3b05"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"textured"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"title"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Design Engineering at Vercel"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"variant"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"simple"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" );"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})})]})})]})})]})]})}function D(n={}){let{wrapper:l}=n.components||{};return l?(0,e.jsx)(l,Object.assign({},n,{children:(0,e.jsx)(d,n)})):d(n)}var u=D;function k(n,l){throw new Error("Expected "+(l?"component":"object")+" `"+n+"` to be defined: you likely forgot to import, pass, or provide it.")}return N(A);})(); ;return Component;