var Component=(()=>{var p=Object.create;var c=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var E=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var F=(e,l)=>()=>(l||e((l={exports:{}}).exports,l),l.exports),g=(e,l)=>{for(var s in l)c(e,s,{get:l[s],enumerable:!0})},a=(e,l,s,o)=>{if(l&&typeof l=="object"||typeof l=="function")for(let r of E(l))!m.call(e,r)&&r!==s&&c(e,r,{get:()=>l[r],enumerable:!(o=h(l,r))||o.enumerable});return e};var C=(e,l,s)=>(s=e!=null?p(y(e)):{},a(l||!e||!e.__esModule?c(s,"default",{value:e,enumerable:!0}):s,e)),D=e=>a(c({},"__esModule",{value:!0}),e);var i=F((L,t)=>{t.exports=_jsx_runtime});var B={};g(B,{default:()=>f,frontmatter:()=>N});var n=C(i()),N={title:"Loading Dots",description:"Indicate an action running in the background.",peek:"pagination-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||x("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:"loading-dots-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:" { LoadingDots, 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:"align"}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#032F62"},children:'"start"'}),(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:"6"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:"} "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"justify"}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#032F62"},children:'"space-between"'}),(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:"LoadingDots"}),(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:"LoadingDots"}),(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:"4"}),(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 { LoadingDots, 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:" { LoadingDots, 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:"align"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"start"'}),(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:"6"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"} "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"justify"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"space-between"'}),(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:"LoadingDots"}),(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:"LoadingDots"}),(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:"4"}),(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:"With text"}),` `,(0,n.jsx)(s,{name:"loading-dots-text",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:" { LoadingDots, 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:"LoadingDots"}),(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:"4"}),(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:"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:">Loading"})]}),` `,(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 { LoadingDots, Text } from 'geist/components'; import type { JSX } from 'react'; export function Component(): JSX.Element { return ( Loading ); } `,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:" { LoadingDots, 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:"LoadingDots"}),(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:"4"}),(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:"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:">Loading"})]}),` `,(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 f=u;function x(e,l){throw new Error("Expected "+(l?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}return D(B);})(); ;return Component;