{/* Core Loader Modal */} {/* The buttons are for demo only, remove it in your actual code \u2B07\uFE0F */} {loading && ( )}

); } `,__rawStringJsx__:`"use client"; import React, { useState } from "react"; import { MultiStepLoader as Loader } from "../ui/multi-step-loader"; import { IconSquareRoundedX } from "@tabler/icons-react"; const loadingStates = [ { text: "Buying a condo", }, { text: "Travelling in a flight", }, { text: "Meeting Tyler Durden", }, { text: "He makes soap", }, { text: "We goto a bar", }, { text: "Start a fight", }, { text: "We like it", }, { text: "Welcome to F**** C***", }, ]; export function MultiStepLoaderDemo() { const [loading, setLoading] = useState(false); return (

{/* Core Loader Modal */} {/* The buttons are for demo only, remove it in your actual code \u2B07\uFE0F */} {loading && ( )}

); } `,__src__:"/src/registry/default/example/multi-step-loader-demo.tsx",children:(0,i.jsxs)(e.code,{"data-language":"tsx","data-theme":"BeardedTheme Arc",style:{display:"grid"},children:[(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"use client"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"import"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" React"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" useState"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" from"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "react"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"import"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" MultiStepLoader"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" as"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" Loader"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" from"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "../ui/multi-step-loader"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"import"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" IconSquareRoundedX"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" from"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "@tabler/icons-react"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:"const"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" loadingStates"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ["})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" text"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "Buying a condo"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" },"})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" text"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "Travelling in a flight"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" },"})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" text"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "Meeting Tyler Durden"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" },"})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" text"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "He makes soap"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" },"})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" text"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "We goto a bar"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" },"})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" text"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "Start a fight"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" },"})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" text"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "We like it"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" },"})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" text"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "Welcome to F**** C***"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" },"})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"];"})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"export"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" function"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:" MultiStepLoaderDemo"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"()"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" const"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ["}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"loading"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" setLoading"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"]"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:" useState"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#E35535",color:"var(--shiki-bearded)"},children:"false"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:");"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" return"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ("})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"div "}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"className"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"w-full h-[60vh] flex items-center justify-center"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:">"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#54617B","--shiki-bearded-font-style":"italic",color:"var(--shiki-bearded)"},children:"/* Core Loader Modal */"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:"Loader"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" loadingStates"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"loadingStates"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" loading"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"loading"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" duration"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:"2000"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" />"})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#54617B","--shiki-bearded-font-style":"italic",color:"var(--shiki-bearded)"},children:"/* The buttons are for demo only, remove it in your actual code \u2B07\uFE0F */"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"button"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" onClick"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={()"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" =>"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:" setLoading"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#E35535",color:"var(--shiki-bearded)"},children:"true"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:")}"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" className"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"bg-[#39C3EF] hover:bg-[#39C3EF]/90 text-black mx-auto text-sm md:text-base transition font-medium duration-200 h-10 rounded-lg px-8 flex items-center justify-center"'})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" style"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={{"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" boxShadow"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "0px -1px 0px 0px #ffffff40 inset, 0px 1px 0px 0px #ffffff40 inset"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }}"})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" >"})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B5BDCC",color:"var(--shiki-bearded)"},children:" Click to load"})}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" "})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"loading"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" &&"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ("})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"button"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" className"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"fixed top-4 right-4 text-black dark:text-white z-[120]"'})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" onClick"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={()"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" =>"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:" setLoading"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#E35535",color:"var(--shiki-bearded)"},children:"false"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:")}"})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" >"})}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:"IconSquareRoundedX"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" className"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"h-10 w-10"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" />"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" "})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" )}"})}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" "})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" );"})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"})})]})})})}),` `,(0,i.jsxs)(e.h2,{id:"installation",children:[(0,i.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#installation",children:(0,i.jsx)(e.span,{className:"icon icon-link"})}),"Installation"]}),` `,(0,i.jsxs)(o,{defaultValue:"manual",children:[(0,i.jsxs)(b,{children:[(0,i.jsx)(c,{value:"cli",children:"CLI"}),(0,i.jsx)(c,{value:"manual",children:"Manual"})]}),(0,i.jsx)(t,{value:"cli",children:(0,i.jsxs)(h,{children:[(0,i.jsx)(a,{children:"Run the following command"}),(0,i.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,i.jsx)(e.pre,{className:"BeardedTheme Arc",style:{"--shiki-bearded":"#d3d8e1","--shiki-bearded-bg":"#1c2433"},tabIndex:"0","data-language":"bash","data-theme":"BeardedTheme Arc",__rawString__:`npx shadcn@latest add https://ui.aceternity.com/registry/multi-step-loader.json `,__npmCommand__:`npx shadcn@latest add https://ui.aceternity.com/registry/multi-step-loader.json `,__yarnCommand__:`npx shadcn@latest add https://ui.aceternity.com/registry/multi-step-loader.json `,__pnpmCommand__:`pnpm dlx shadcn@latest add https://ui.aceternity.com/registry/multi-step-loader.json `,__bunCommand__:`bun x --bun shadcn@latest add https://ui.aceternity.com/registry/multi-step-loader.json `,children:(0,i.jsx)(e.code,{"data-language":"bash","data-theme":"BeardedTheme Arc",style:{display:"grid"},children:(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"npx"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:" shadcn@latest"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:" add"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:" https://ui.aceternity.com/registry/multi-step-loader.json"})]})})})})]})}),(0,i.jsx)(t,{value:"manual",children:(0,i.jsxs)(h,{children:[(0,i.jsx)(a,{children:"Install dependencies"}),(0,i.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,i.jsx)(e.pre,{className:"BeardedTheme Arc",style:{"--shiki-bearded":"#d3d8e1","--shiki-bearded-bg":"#1c2433"},tabIndex:"0","data-language":"bash","data-theme":"BeardedTheme Arc",__rawString__:`npm i motion clsx tailwind-merge @tabler/icons-react `,children:(0,i.jsx)(e.code,{"data-language":"bash","data-theme":"BeardedTheme Arc",style:{display:"grid"},children:(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"npm"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:" i"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:" motion"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:" clsx"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:" tailwind-merge"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:" @tabler/icons-react"})]})})})}),(0,i.jsx)(a,{children:"Add util file"}),(0,i.jsxs)(e.figure,{"data-rehype-pretty-code-figure":"",children:[(0,i.jsx)(e.figcaption,{"data-rehype-pretty-code-title":"","data-language":"tsx","data-theme":"BeardedTheme Arc",children:"lib/utils.ts"}),(0,i.jsx)(e.pre,{className:"BeardedTheme Arc",style:{"--shiki-bearded":"#d3d8e1","--shiki-bearded-bg":"#1c2433"},tabIndex:"0","data-language":"tsx","data-theme":"BeardedTheme Arc",__rawString__:`import { ClassValue, clsx } from "clsx"; import { twMerge } from "tailwind-merge"; export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } `,__rawStringJsx__:`import { clsx } from "clsx"; import { twMerge } from "tailwind-merge"; export function cn(...inputs) { return twMerge(clsx(inputs)); } `,children:(0,i.jsxs)(e.code,{"data-language":"tsx","data-theme":"BeardedTheme Arc",style:{display:"grid"},children:[(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"import"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" ClassValue"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" clsx"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" from"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "clsx"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"import"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" twMerge"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" from"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "tailwind-merge"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"export"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" function"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:" cn"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"(..."}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#F38CEC",color:"var(--shiki-bearded)"},children:"inputs"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" ClassValue"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"[])"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" return"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:" twMerge"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"clsx"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"inputs"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"));"})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"})})]})})]}),(0,i.jsx)(a,{children:"Copy the source code"}),(0,i.jsx)(e.p,{children:(0,i.jsx)(e.code,{children:"components/ui/multi-step-loader.tsx"})}),(0,i.jsx)(n,{name:"multi-step-loader",children:(0,i.jsx)(e.figure,{__src__:"/src/registry/default/ui/multi-step-loader.tsx",__style__:"default","data-rehype-pretty-code-figure":"",children:(0,i.jsx)(e.pre,{className:"BeardedTheme Arc",style:{"--shiki-bearded":"#d3d8e1","--shiki-bearded-bg":"#1c2433"},tabIndex:"0","data-language":"tsx","data-theme":"BeardedTheme Arc",__rawString__:`"use client"; import { cn } from "@/lib/utils"; import { AnimatePresence, motion } from "motion/react"; import { useState, useEffect } from "react"; const CheckIcon = ({ className }: { className?: string }) => { return ( ); }; const CheckFilled = ({ className }: { className?: string }) => { return ( ); }; type LoadingState = { text: string; }; const LoaderCore = ({ loadingStates, value = 0, }: { loadingStates: LoadingState[]; value?: number; }) => { return (

{loadingStates.map((loadingState, index) => { const distance = Math.abs(index - value); const opacity = Math.max(1 - distance * 0.2, 0); // Minimum opacity is 0, keep it 0.2 if you're sane. return (

{index > value && ( )} {index <= value && ( )}

{loadingState.text} ); })}

); }; export const MultiStepLoader = ({ loadingStates, loading, duration = 2000, loop = true, }: { loadingStates: LoadingState[]; loading?: boolean; duration?: number; loop?: boolean; }) => { const [currentState, setCurrentState] = useState(0); useEffect(() => { if (!loading) { setCurrentState(0); return; } const timeout = setTimeout(() => { setCurrentState((prevState) => loop ? prevState === loadingStates.length - 1 ? 0 : prevState + 1 : Math.min(prevState + 1, loadingStates.length - 1) ); }, duration); return () => clearTimeout(timeout); }, [currentState, loading, loop, loadingStates.length, duration]); return ( {loading && (

)} ); }; `,__rawStringJsx__:`"use client";; import { cn } from "@/lib/utils"; import { AnimatePresence, motion } from "motion/react"; import { useState, useEffect } from "react"; const CheckIcon = ({ className }) => { return ( ); }; const CheckFilled = ({ className }) => { return ( ); }; const LoaderCore = ({ loadingStates, value = 0 }) => { return (

{loadingStates.map((loadingState, index) => { const distance = Math.abs(index - value); const opacity = Math.max(1 - distance * 0.2, 0); // Minimum opacity is 0, keep it 0.2 if you're sane. return (

{index > value && ( )} {index <= value && ( )}

{loadingState.text} ); })}

); }; export const MultiStepLoader = ({ loadingStates, loading, duration = 2000, loop = true }) => { const [currentState, setCurrentState] = useState(0); useEffect(() => { if (!loading) { setCurrentState(0); return; } const timeout = setTimeout(() => { setCurrentState((prevState) => loop ? prevState === loadingStates.length - 1 ? 0 : prevState + 1 : Math.min(prevState + 1, loadingStates.length - 1)); }, duration); return () => clearTimeout(timeout); }, [currentState, loading, loop, loadingStates.length, duration]); return ( {loading && (

)} ); }; `,__src__:"/src/registry/default/ui/multi-step-loader.tsx",__style__:"default",children:(0,i.jsxs)(e.code,{"data-language":"tsx","data-theme":"BeardedTheme Arc",style:{display:"grid"},children:[(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"use client"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"import"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" cn"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" from"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "@/lib/utils"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"import"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" AnimatePresence"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" motion"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" from"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "motion/react"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"import"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" useState"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" useEffect"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" from"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "react"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:"const"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" CheckIcon"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ({"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#F38CEC",color:"var(--shiki-bearded)"},children:" className"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }:"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" className"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"?:"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" string"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" })"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" =>"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" return"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ("})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"svg"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" xmlns"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"http://www.w3.org/2000/svg"'})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" fill"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"none"'})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" viewBox"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"0 0 24 24"'})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" strokeWidth"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:"1.5"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" stroke"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"currentColor"'})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" className"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"cn"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"w-6 h-6 "'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" className"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:")}"})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" >"})}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"path"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" d"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" />"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" "})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" );"})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"};"})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:"const"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" CheckFilled"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ({"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#F38CEC",color:"var(--shiki-bearded)"},children:" className"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }:"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" className"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"?:"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" string"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" })"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" =>"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" return"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ("})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"svg"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" xmlns"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"http://www.w3.org/2000/svg"'})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" viewBox"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"0 0 24 24"'})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" fill"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"currentColor"'})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" className"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"cn"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"w-6 h-6 "'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" className"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:")}"})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" >"})}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"path"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" fillRule"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"evenodd"'})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" d"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z"'})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" clipRule"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"evenodd"'})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" />"})}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" "})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" );"})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"};"})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:"type"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" LoadingState"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" text"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" string"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"};"})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:"const"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" LoaderCore"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ({"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" loadingStates"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" value"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 0"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}:"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" loadingStates"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" LoadingState"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"[];"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" value"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"?:"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" number"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"})"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" =>"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" return"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ("})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"div"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" className"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"flex relative justify-start max-w-xl mx-auto flex-col mt-40"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:">"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:"loadingStates"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"map"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"(("}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#F38CEC",color:"var(--shiki-bearded)"},children:"loadingState"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#F38CEC",color:"var(--shiki-bearded)"},children:" index"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:")"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" =>"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" const"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" distance"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" Math"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"abs"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"index"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" -"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" value"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:");"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" const"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" opacity"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" Math"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"max"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:"1"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" -"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" distance"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" *"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 0.2"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 0"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:");"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#54617B","--shiki-bearded-font-style":"italic",color:"var(--shiki-bearded)"},children:" // Minimum opacity is 0, keep it 0.2 if you're sane."})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" return"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ("})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:"motion.div"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" key"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"index"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" className"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"cn"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"text-left flex gap-2 mb-4"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:")}"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" initial"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={{"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" opacity"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 0"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" y"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" -"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"value"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" *"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 40"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:")"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }}"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" animate"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={{"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" opacity"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" opacity"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" y"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" -"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"value"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" *"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 40"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:")"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }}"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" transition"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={{"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" duration"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 0.5"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }}"})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" >"})}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"div"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:">"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"index"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" >"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" value"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" &&"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ("})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:"CheckIcon"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" className"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"text-black dark:text-white"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" />"})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" )}"})}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"index"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" <="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" value"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" &&"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ("})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:"CheckFilled"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" className"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"cn"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "text-black dark:text-white"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" value"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" ==="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" index"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" &&"})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "text-black dark:text-lime-500 opacity-100"'})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" )}"})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" />"})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" )}"})}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" "})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"span"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" className"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"cn"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "text-black dark:text-white"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" value"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" ==="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" index"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" &&"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "text-black dark:text-lime-500 opacity-100"'})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" )}"})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" >"})}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:"loadingState"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"text"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" "})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" "})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" );"})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" })}"})}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" "})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" );"})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"};"})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"export"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" const"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" MultiStepLoader"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ({"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" loadingStates"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" loading"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" duration"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 2000"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" loop"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#E35535",color:"var(--shiki-bearded)"},children:" true"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}:"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" loadingStates"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" LoadingState"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"[];"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" loading"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"?:"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" boolean"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" duration"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"?:"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" number"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" loop"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"?:"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" boolean"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"})"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" =>"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" const"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ["}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"currentState"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" setCurrentState"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"]"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:" useState"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:"0"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:");"})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:" useEffect"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"(()"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" =>"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" if"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ("}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"!"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"loading"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:")"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:" setCurrentState"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:"0"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:");"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" return"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }"})}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" const"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" timeout"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:" setTimeout"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"(()"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" =>"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:" setCurrentState"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"(("}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#F38CEC",color:"var(--shiki-bearded)"},children:"prevState"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:")"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" =>"})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" loop"})}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ?"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" prevState"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" ==="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" loadingStates"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B5BDCC",color:"var(--shiki-bearded)"},children:"length "}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"-"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 1"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ?"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 0"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" :"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" prevState"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" +"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 1"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" :"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" Math"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"min"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"prevState"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" +"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 1"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" loadingStates"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B5BDCC",color:"var(--shiki-bearded)"},children:"length "}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"-"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 1"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:")"})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" );"})}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" },"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" duration"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:");"})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" return"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ()"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" =>"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:" clearTimeout"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"timeout"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:");"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" },"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ["}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"currentState"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" loading"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" loop"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" loadingStates"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B5BDCC",color:"var(--shiki-bearded)"},children:"length"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" duration"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"]);"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" return"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ("})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:"AnimatePresence"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" mode"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"wait"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:">"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"loading"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" &&"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ("})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:"motion.div"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" initial"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={{"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" opacity"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 0"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }}"})}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" animate"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={{"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" opacity"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 1"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }}"})}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" exit"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={{"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" opacity"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 0"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }}"})}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" className"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"w-full h-full fixed inset-0 z-[100] flex items-center justify-center backdrop-blur-2xl"'})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" >"})}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"div"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" className"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"h-96 relative"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:">"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:"LoaderCore"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" value"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"currentState"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" loadingStates"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"loadingStates"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" />"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" "})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"div"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" className"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"bg-gradient-to-t inset-x-0 z-20 bottom-0 bg-white dark:bg-black h-full absolute [mask-image:radial-gradient(900px_at_center,transparent_30%,white)]"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" />"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" "})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" )}"})}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" "})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" );"})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"};"})})]})})})})]})})]}),` `,(0,i.jsxs)(e.h2,{id:"props",children:[(0,i.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#props",children:(0,i.jsx)(e.span,{className:"icon icon-link"})}),"Props"]}),` `,(0,i.jsxs)(e.table,{children:[(0,i.jsx)(e.thead,{children:(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.th,{children:"Prop Name"}),(0,i.jsx)(e.th,{children:"Type"}),(0,i.jsx)(e.th,{children:"Default Value"}),(0,i.jsx)(e.th,{children:"Description"})]})}),(0,i.jsxs)(e.tbody,{children:[(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:"loadingStates"}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"LoadingState[]"})}),(0,i.jsx)(e.td,{children:"N/A"}),(0,i.jsxs)(e.td,{children:["An array of objects, each with a ",(0,i.jsx)(e.code,{children:"text"})," property to display the current loading state message."]})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:"loading"}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"boolean"})}),(0,i.jsx)(e.td,{children:"undefined"}),(0,i.jsx)(e.td,{children:"A boolean to control whether the loader is active or not."})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:"duration"}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"number"})}),(0,i.jsx)(e.td,{children:"2000"}),(0,i.jsx)(e.td,{children:"The duration (in milliseconds) before transitioning to the next loading state."})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:"loop"}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"boolean"})}),(0,i.jsx)(e.td,{children:"true"}),(0,i.jsx)(e.td,{children:"A boolean to control whether the loading states should loop back to the start."})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:"value"}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"number (optional)"})}),(0,i.jsx)(e.td,{children:"0"}),(0,i.jsx)(e.td,{children:"(Only in LoaderCore) The current index of the loading state to be displayed."})]})]})]})]})}function D(d={}){let{wrapper:e}=d.components||{};return e?(0,i.jsx)(e,{...d,children:(0,i.jsx)(y,{...d})}):y(d)}function s(d,e){throw new Error("Expected "+(e?"component":"object")+" `"+d+"` to be defined: you likely forgot to import, pass, or provide it.")}return f(S);})(); ;return Component;

Best Free Loader Components for your Tailwind CSS and React project

Aceternity UI