var Component=(()=>{var h=Object.create;var r=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var E=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,F=Object.prototype.hasOwnProperty;var m=(e,l)=>()=>(l||e((l={exports:{}}).exports,l),l.exports),C=(e,l)=>{for(var s in l)r(e,s,{get:l[s],enumerable:!0})},a=(e,l,s,o)=>{if(l&&typeof l=="object"||typeof l=="function")for(let c of E(l))!F.call(e,c)&&c!==s&&r(e,c,{get:()=>l[c],enumerable:!(o=p(l,c))||o.enumerable});return e};var N=(e,l,s)=>(s=e!=null?h(y(e)):{},a(l||!e||!e.__esModule?r(s,"default",{value:e,enumerable:!0}):s,e)),B=e=>a(r({},"__esModule",{value:!0}),e);var t=m((f,i)=>{i.exports=_jsx_runtime});var k={};C(k,{default:()=>D,frontmatter:()=>g});var n=N(t()),g={title:"Entity",description:"Displays up-to-two columns of content. The left column can contain arbitrary content, and the right column typically contains controls or actions related to the content in the left column.",peek:"entity-default"};function d(e){let l=Object.assign({div:"div",h2:"h2",pre:"pre",code:"code",span:"span"},e.components),{Preview:s}=l;return s||A("Preview",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(l.div,{className:"component-preview",children:[(0,n.jsx)(l.h2,{children:"Default"}),` `,(0,n.jsx)(s,{name:"entity-default",children:(0,n.jsxs)(l.div,{"data-rehype-pretty-code-fragment":"",children:[(0,n.jsx)(l.pre,{"data-language":"tsx","data-theme":"light",children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"light",children:[(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" { Avatar, Entity, Text } "}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#032F62"},children:"'geist/components'"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"type"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" { JSX } "}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#032F62"},children:"'react'"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:";"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"function"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"Component"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:"()"}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"JSX"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"Element"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#005CC5"},children:"Entity"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"left"}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:"{<"}),(0,n.jsx)(l.span,{style:{color:"#005CC5"},children:"Avatar"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"size"}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#005CC5"},children:"32"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:"} "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"username"}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#032F62"},children:'"evilrabbit"'}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" />}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"right"}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:"{<"}),(0,n.jsx)(l.span,{style:{color:"#005CC5"},children:"Text"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"color"}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#032F62"},children:'"gray-900"'}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:">Connected 1h ago}"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" >"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#005CC5"},children:"Entity.Content"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"description"}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#032F62"},children:'"Glenn Hitchcock (@gln)"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"fill"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"title"}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#032F62"},children:'"Evil Rabbit"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" />"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" );"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#24292E"},children:"}"})})]})}),(0,n.jsx)(l.pre,{"data-language":"tsx","data-theme":"dark",__rawString__:`import { Avatar, Entity, Text } from 'geist/components'; import type { JSX } from 'react'; export function Component(): JSX.Element { return ( } right={Connected 1h ago} > ); } `,children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"dark",children:[(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { Avatar, Entity, Text } "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'geist/components'"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"type"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { JSX } "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'react'"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"function"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"Component"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"()"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"JSX"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"Element"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Entity"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"left"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{<"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Avatar"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"size"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"32"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"} "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"username"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"evilrabbit"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"right"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{<"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Text"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"color"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"gray-900"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">Connected 1h ago}"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" >"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Entity.Content"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"description"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Glenn Hitchcock (@gln)"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"fill"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"title"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Evil Rabbit"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" );"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})})]})})]})})]}),` `,(0,n.jsxs)(l.div,{className:"component-preview",children:[(0,n.jsx)(l.h2,{children:"Entity with Skeleton"}),` `,(0,n.jsx)(s,{name:"entity-with-skeleton",children:(0,n.jsxs)(l.div,{"data-rehype-pretty-code-fragment":"",children:[(0,n.jsx)(l.pre,{"data-language":"tsx","data-theme":"light",children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"light",children:[(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" { Entity, Stack, Skeleton } "}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#032F62"},children:"'geist/components'"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"type"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" { JSX } "}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#032F62"},children:"'react'"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:";"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"function"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"Component"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:"()"}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"JSX"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"Element"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#005CC5"},children:"Entity"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#005CC5"},children:"Stack"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"flex"}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#032F62"},children:'"1"'}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"gap"}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#005CC5"},children:"2"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:"}>"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#005CC5"},children:"Skeleton"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"height"}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#005CC5"},children:"20"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:"} "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"width"}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#032F62"},children:'"100%"'}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#005CC5"},children:"Stack"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"align"}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#032F62"},children:'"center"'}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"direction"}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#032F62"},children:'"row"'}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"gap"}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#005CC5"},children:"2"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:"}>"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#005CC5"},children:"Skeleton"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"height"}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#005CC5"},children:"20"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:"} "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"width"}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#005CC5"},children:"70"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:"} />"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#005CC5"},children:"Skeleton"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"height"}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#005CC5"},children:"20"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:"} "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"width"}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#005CC5"},children:"60"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:"} />"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#005CC5"},children:"Skeleton"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"height"}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#005CC5"},children:"20"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:"} "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"width"}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#005CC5"},children:"68"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:"} />"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" );"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#24292E"},children:"}"})})]})}),(0,n.jsx)(l.pre,{"data-language":"tsx","data-theme":"dark",__rawString__:`import { Entity, Stack, Skeleton } from 'geist/components'; import type { JSX } from 'react'; export function Component(): JSX.Element { return ( ); } `,children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"dark",children:[(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { Entity, Stack, Skeleton } "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'geist/components'"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"type"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { JSX } "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'react'"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"function"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"Component"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"()"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"JSX"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"Element"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Entity"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Stack"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"flex"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"1"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"gap"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"2"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}>"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Skeleton"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"height"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"20"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"} "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"width"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"100%"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Stack"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"align"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"center"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"direction"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"row"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"gap"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"2"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}>"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Skeleton"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"height"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"20"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"} "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"width"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"70"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"} />"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Skeleton"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"height"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"20"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"} "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"width"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"60"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"} />"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Skeleton"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"height"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"20"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"} "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"width"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"68"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"} />"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" );"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})})]})})]})})]}),` `,(0,n.jsxs)(l.div,{className:"component-preview",children:[(0,n.jsx)(l.h2,{children:"Entity with List"}),` `,(0,n.jsx)(s,{name:"entity-with-list",children:(0,n.jsxs)(l.div,{"data-rehype-pretty-code-fragment":"",children:[(0,n.jsx)(l.pre,{"data-language":"tsx","data-theme":"light",children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"light",children:[(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" { Button, Entity } "}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#032F62"},children:"'geist/components'"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"type"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" { JSX } "}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#032F62"},children:"'react'"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:";"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"function"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"Component"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:"()"}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"JSX"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"Element"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#005CC5"},children:"Entity.List"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#005CC5"},children:"Entity"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"as"}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#032F62"},children:'"li"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"right"}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#005CC5"},children:"Button"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"size"}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#032F62"},children:'"small"'}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"type"}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#032F62"},children:'"secondary"'}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:">"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" Decline"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" }"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" >"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#005CC5"},children:"Entity.Content"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"description"}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#032F62"},children:'"Last used just now"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"title"}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#032F62"},children:'"GitHub Desktop on MacBook Pro"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" />"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#005CC5"},children:"Entity"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"as"}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#032F62"},children:'"li"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"right"}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#005CC5"},children:"Button"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"size"}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#032F62"},children:'"small"'}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"type"}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#032F62"},children:'"secondary"'}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:">"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" Decline"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" }"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" >"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#005CC5"},children:"Entity.Content"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"description"}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#032F62"},children:'"Last used 10min ago"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"title"}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#032F62"},children:'"VS Code on Windows 11"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" />"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#005CC5"},children:"Entity"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"as"}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#032F62"},children:'"li"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"right"}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#005CC5"},children:"Button"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"size"}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#032F62"},children:'"small"'}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"type"}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#032F62"},children:'"secondary"'}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:">"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" Decline"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" }"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" >"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#005CC5"},children:"Entity.Content"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"description"}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#032F62"},children:'"Last used 25min ago"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"title"}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#032F62"},children:'"Terminal on Ubuntu 24.04"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" />"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" );"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#24292E"},children:"}"})})]})}),(0,n.jsx)(l.pre,{"data-language":"tsx","data-theme":"dark",__rawString__:`import { Button, Entity } from 'geist/components'; import type { JSX } from 'react'; export function Component(): JSX.Element { return ( Decline } > Decline } > Decline } > ); } `,children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"dark",children:[(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { Button, Entity } "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'geist/components'"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"type"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { JSX } "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'react'"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"function"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"Component"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"()"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"JSX"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"Element"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Entity.List"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Entity"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"as"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"li"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"right"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Button"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"size"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"small"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"type"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"secondary"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" Decline"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" >"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Entity.Content"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"description"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Last used just now"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"title"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"GitHub Desktop on MacBook Pro"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Entity"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"as"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"li"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"right"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Button"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"size"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"small"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"type"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"secondary"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" Decline"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" >"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Entity.Content"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"description"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Last used 10min ago"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"title"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"VS Code on Windows 11"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Entity"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"as"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"li"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"right"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Button"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"size"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"small"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"type"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"secondary"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" Decline"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" >"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Entity.Content"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"description"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Last used 25min ago"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"title"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Terminal on Ubuntu 24.04"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" );"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})})]})})]})})]}),` `,(0,n.jsxs)(l.div,{className:"component-preview",children:[(0,n.jsx)(l.h2,{children:"Entity with List and Checkbox"}),` `,(0,n.jsx)(s,{name:"entity-with-list-and-checkbox",children:(0,n.jsxs)(l.div,{"data-rehype-pretty-code-fragment":"",children:[(0,n.jsx)(l.pre,{"data-language":"tsx","data-theme":"light",children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"light",children:[(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" { useState } "}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#032F62"},children:"'react'"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" { Checkbox, Entity } "}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#032F62"},children:"'geist/components'"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"type"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" { JSX } "}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#032F62"},children:"'react'"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:";"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"function"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"Component"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:"()"}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"JSX"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"Element"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#005CC5"},children:"items"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" ["})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" {"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" id: "}),(0,n.jsx)(l.span,{style:{color:"#032F62"},children:"'github'"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" title: "}),(0,n.jsx)(l.span,{style:{color:"#032F62"},children:"'GitHub Desktop on MacBook Pro'"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" description: "}),(0,n.jsx)(l.span,{style:{color:"#032F62"},children:"'Last used just now'"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:","})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" },"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" {"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" id: "}),(0,n.jsx)(l.span,{style:{color:"#032F62"},children:"'vscode'"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" title: "}),(0,n.jsx)(l.span,{style:{color:"#032F62"},children:"'VS Code on Windows 11'"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" description: "}),(0,n.jsx)(l.span,{style:{color:"#032F62"},children:"'Last used 10min ago'"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:","})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" },"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" {"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" id: "}),(0,n.jsx)(l.span,{style:{color:"#032F62"},children:"'terminal'"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" title: "}),(0,n.jsx)(l.span,{style:{color:"#032F62"},children:"'Terminal on Ubuntu 24.04'"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" description: "}),(0,n.jsx)(l.span,{style:{color:"#032F62"},children:"'Last used 25min ago'"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:","})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" },"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" ];"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" ["}),(0,n.jsx)(l.span,{style:{color:"#005CC5"},children:"checkedStates"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#005CC5"},children:"setCheckedStates"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:"] "}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"useState"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"Record"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#005CC5"},children:"string"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#005CC5"},children:"boolean"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:">>({"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" github: "}),(0,n.jsx)(l.span,{style:{color:"#005CC5"},children:"true"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" vscode: "}),(0,n.jsx)(l.span,{style:{color:"#005CC5"},children:"false"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" terminal: "}),(0,n.jsx)(l.span,{style:{color:"#005CC5"},children:"false"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:","})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" });"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"handleCheckboxChange"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#E36209"},children:"id"}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#005CC5"},children:"string"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#005CC5"},children:"void"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"setCheckedStates"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:"(("}),(0,n.jsx)(l.span,{style:{color:"#E36209"},children:"prev"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" ({"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"..."}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:"prev,"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" [id]: "}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"!"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:"prev[id],"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" }));"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" };"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#005CC5"},children:"Entity.List"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" {items."}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"map"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:"(("}),(0,n.jsx)(l.span,{style:{color:"#E36209"},children:"item"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#005CC5"},children:"Entity"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"key"}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:"{item.id}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"as"}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#032F62"},children:'"button"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"onClick"}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:"{() "}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"handleCheckboxChange"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:"(item.id)}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"left"}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#005CC5"},children:"Checkbox"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"checked"}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:"{checkedStates[item.id "}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"as"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#005CC5"},children:"string"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:"]}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"onChange"}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:"{() "}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"handleCheckboxChange"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:"(item.id)}"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" />"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" }"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" >"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#005CC5"},children:"Entity.Content"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"description"}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:"{item.description} "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"title"}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:"{item.title} />"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" ))}"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" );"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#24292E"},children:"}"})})]})}),(0,n.jsx)(l.pre,{"data-language":"tsx","data-theme":"dark",__rawString__:`import { useState } from 'react'; import { Checkbox, Entity } from 'geist/components'; import type { JSX } from 'react'; export function Component(): JSX.Element { const items = [ { id: 'github', title: 'GitHub Desktop on MacBook Pro', description: 'Last used just now', }, { id: 'vscode', title: 'VS Code on Windows 11', description: 'Last used 10min ago', }, { id: 'terminal', title: 'Terminal on Ubuntu 24.04', description: 'Last used 25min ago', }, ]; const [checkedStates, setCheckedStates] = useState>({ github: true, vscode: false, terminal: false, }); const handleCheckboxChange = (id: string): void => { setCheckedStates((prev) => ({ ...prev, [id]: !prev[id], })); }; return ( {items.map((item) => ( handleCheckboxChange(item.id)} left={ handleCheckboxChange(item.id)} /> } > ))} ); } `,children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"dark",children:[(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { useState } "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'react'"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { Checkbox, Entity } "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'geist/components'"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"type"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { JSX } "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'react'"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"function"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"Component"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"()"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"JSX"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"Element"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"items"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ["})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" id: "}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'github'"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" title: "}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'GitHub Desktop on MacBook Pro'"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" description: "}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'Last used just now'"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" id: "}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'vscode'"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" title: "}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'VS Code on Windows 11'"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" description: "}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'Last used 10min ago'"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" id: "}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'terminal'"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" title: "}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'Terminal on Ubuntu 24.04'"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" description: "}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'Last used 25min ago'"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ];"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ["}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"checkedStates"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"setCheckedStates"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"] "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"useState"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"Record"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"string"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"boolean"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">>({"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" github: "}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"true"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" vscode: "}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"false"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" terminal: "}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"false"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" });"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"handleCheckboxChange"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:"id"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"string"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"void"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"setCheckedStates"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(("}),(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:"prev"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ({"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"..."}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"prev,"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" [id]: "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"!"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"prev[id],"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }));"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" };"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Entity.List"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {items."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"map"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(("}),(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:"item"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Entity"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"key"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{item.id}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"as"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"button"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"onClick"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{() "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"handleCheckboxChange"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(item.id)}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"left"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Checkbox"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"checked"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{checkedStates[item.id "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"as"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"string"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"]}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"onChange"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{() "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"handleCheckboxChange"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(item.id)}"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" >"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Entity.Content"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"description"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{item.description} "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"title"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{item.title} />"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ))}"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" );"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})})]})})]})})]})]})}function u(e={}){let{wrapper:l}=e.components||{};return l?(0,n.jsx)(l,Object.assign({},e,{children:(0,n.jsx)(d,e)})):d(e)}var D=u;function A(e,l){throw new Error("Expected "+(l?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}return B(k);})(); ;return Component;