); } `,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:" { Gauge } "}),(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:"#85E89D"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"flex justify-start"'}),(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:"Gauge"})]}),` `,(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:"colors"}),(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:" primary: "}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'var(--ds-blue-700)'"}),(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:" secondary: "}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'var(--ds-blue-300)'"}),(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:"#B392F0"},children:"size"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"medium"'})]}),` `,(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:"value"}),(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:"50"}),(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:"}"})})]})})]})})]}),` `,(0,n.jsxs)(l.div,{className:"component-preview",children:[(0,n.jsx)(l.h2,{children:"Arc priority"}),` `,(0,n.jsxs)(l.p,{children:["When using the gauge to display a ratio, use the ",(0,n.jsx)(l.code,{children:"equal"})," arc priority to make both arcs are equally sized."]}),` `,(0,n.jsx)(s,{name:"gauge-arc-priority",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:" { Gauge, Stack } "}),(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:"Stack"}),(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:"Gauge"})]}),` `,(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:"arcPriority"}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#032F62"},children:'"equal"'})]}),` `,(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:"colors"}),(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:" primary: "}),(0,n.jsx)(l.span,{style:{color:"#032F62"},children:"'var(--ds-blue-700)'"}),(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:" secondary: "}),(0,n.jsx)(l.span,{style:{color:"#032F62"},children:"'var(--ds-red-700)'"}),(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:"#6F42C1"},children:"showValue"})]}),` `,(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:"size"}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#032F62"},children:'"medium"'})]}),` `,(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:"value"}),(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:"50"}),(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 { Gauge, Stack } 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:" { Gauge, Stack } "}),(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:"Stack"}),(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:"Gauge"})]}),` `,(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:"arcPriority"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"equal"'})]}),` `,(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:"colors"}),(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:" primary: "}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'var(--ds-blue-700)'"}),(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:" secondary: "}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'var(--ds-red-700)'"}),(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:"#B392F0"},children:"showValue"})]}),` `,(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:"size"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"medium"'})]}),` `,(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:"value"}),(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:"50"}),(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:"}"})})]})})]})})]}),` `,(0,n.jsxs)(l.div,{className:"component-preview",children:[(0,n.jsx)(l.h2,{children:"Indeterminate"}),` `,(0,n.jsx)(s,{name:"gauge-indeterminate",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:" { Gauge, Stack } "}),(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:"Stack"}),(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:"Gauge"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"indeterminate"}),(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:'"tiny"'}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"value"}),(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:"25"}),(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:"Gauge"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"indeterminate"}),(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:"value"}),(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:"25"}),(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:"Gauge"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"indeterminate"}),(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:'"medium"'}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"value"}),(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:"25"}),(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:"Gauge"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"indeterminate"}),(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:'"large"'}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"value"}),(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:"25"}),(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 { Gauge, Stack } 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:" { Gauge, Stack } "}),(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:"Stack"}),(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:"Gauge"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"indeterminate"}),(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:'"tiny"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"value"}),(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:"25"}),(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:"Gauge"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"indeterminate"}),(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:"value"}),(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:"25"}),(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:"Gauge"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"indeterminate"}),(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:'"medium"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"value"}),(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:"25"}),(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:"Gauge"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"indeterminate"}),(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:'"large"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"value"}),(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:"25"}),(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 k(e={}){let{wrapper:l}=e.components||{};return l?(0,n.jsx)(l,Object.assign({},e,{children:(0,n.jsx)(p,e)})):p(e)}var u=k;function g(e,l){throw new Error("Expected "+(l?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}return B(D);})(); ;return Component;

Gauge

Default

Label

Default color scale

Custom color range

Custom secondary color

Arc priority

Indeterminate