{/* 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,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:'"use client"'}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"React"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:","}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"useState"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:'"react"'}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"MultiStepLoader"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"as"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"Loader"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:'"../ui/multi-step-loader"'}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"IconSquareRoundedX"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:'"@tabler/icons-react"'}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:";"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#22ECDB"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"loadingStates"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"["})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E1"},children:"text"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:'"Buying a condo"'}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"},"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E1"},children:"text"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:'"Travelling in a flight"'}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"},"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E1"},children:"text"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:'"Meeting Tyler Durden"'}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"},"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E1"},children:"text"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:'"He makes soap"'}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"},"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E1"},children:"text"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:'"We goto a bar"'}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"},"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E1"},children:"text"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:'"Start a fight"'}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"},"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E1"},children:"text"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:'"We like it"'}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"},"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E1"},children:"text"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:'"Welcome to F**** C***"'}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"},"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"];"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#22ECDB"},children:"function"}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:" MultiStepLoaderDemo"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"()"}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#22ECDB"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"["}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"loading"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:","}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"setLoading"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"]"}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:" useState"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#E35535"},children:"false"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:");"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:"div "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:'"w-full h-[60vh] flex items-center justify-center"'}),(0,n.jsx)(l.span,{style:{color:"#69C3FFAA"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#54617B",fontStyle:"italic"},children:"/* Core Loader Modal */"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#B78AFF"},children:"Loader"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"loadingStates"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"loadingStates"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"loading"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"loading"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"duration"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#FF955C"},children:"2000"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"/>"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#54617B",fontStyle:"italic"},children:"/* The buttons are for demo only, remove it in your actual code \u2B07\uFE0F */"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:"button"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"onClick"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"={()"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:"setLoading"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#E35535"},children:"true"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:")}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},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,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"style"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"={{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E1"},children:"boxShadow"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:'"0px -1px 0px 0px #ffffff40 inset, 0px 1px 0px 0px #ffffff40 inset"'}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#69C3FFAA"},children:">"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" Click to load"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#69C3FFAA"},children:""})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"loading"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"&&"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:"button"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:'"fixed top-4 right-4 text-black dark:text-white z-[120]"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"onClick"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"={()"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:"setLoading"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#E35535"},children:"false"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:")}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#69C3FFAA"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#B78AFF"},children:"IconSquareRoundedX"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:'"h-10 w-10"'}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"/>"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#69C3FFAA"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:")}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#69C3FFAA"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:");"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"})})]})})})}),` `,(0,n.jsxs)(l.h2,{id:"installation",children:[(0,n.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#installation",children:(0,n.jsx)(l.span,{className:"icon icon-link"})}),"Installation"]}),` `,(0,n.jsxs)(r,{children:[(0,n.jsx)(c,{children:"Install dependencies"}),(0,n.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(l.pre,{"data-language":"bash","data-theme":"default",__rawString__:`npm i framer-motion clsx tailwind-merge @tabler/icons-react `,children:(0,n.jsx)(l.code,{"data-language":"bash","data-theme":"default",children:(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:"npm "}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:"i"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:"framer-motion"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:"clsx"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:"tailwind-merge"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:"@tabler/icons-react"})]})})})}),(0,n.jsx)(c,{children:"Add util file"}),(0,n.jsxs)(l.div,{"data-rehype-pretty-code-fragment":"",children:[(0,n.jsx)(l.div,{"data-rehype-pretty-code-title":"","data-language":"tsx","data-theme":"default",children:"utils/cn.ts"}),(0,n.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__withMeta__:!0,__rawString__:`import { ClassValue, clsx } from "clsx"; import { twMerge } from "tailwind-merge"; export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } `,children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"ClassValue"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:","}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"clsx"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:'"clsx"'}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"twMerge"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:'"tailwind-merge"'}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:";"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#22ECDB"},children:"function"}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:" cn"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"(..."}),(0,n.jsx)(l.span,{style:{color:"#F38CEC"},children:"inputs"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B78AFF"},children:"ClassValue"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"[])"}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:" twMerge"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:"clsx"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"inputs"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"));"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"})})]})})]}),(0,n.jsxs)(c,{children:["Add the following code in ",(0,n.jsx)(l.code,{children:"tailwind.config.js"})," file"]}),(0,n.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(l.pre,{"data-language":"js","data-theme":"default",__rawString__:`const defaultTheme = require("tailwindcss/defaultTheme"); const colors = require("tailwindcss/colors"); const { default: flattenColorPalette, } = require("tailwindcss/lib/util/flattenColorPalette"); /** @type {import('tailwindcss').Config} */ module.exports = { content: ["./src/**/*.{ts,tsx}"], darkMode: "class", theme: { // rest of the code }, plugins: [ // rest of the code addVariablesForColors, ], }; // This plugin adds each Tailwind color as a global CSS variable, e.g. var(--gray-200). function addVariablesForColors({ addBase, theme }: any) { let allColors = flattenColorPalette(theme("colors")); let newVars = Object.fromEntries( Object.entries(allColors).map(([key, val]) => [\`--\${key}\`, val]) ); addBase({ ":root": newVars, }); } `,children:(0,n.jsxs)(l.code,{"data-language":"js","data-theme":"default",children:[(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#22ECDB"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"defaultTheme"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:"require"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:'"tailwindcss/defaultTheme"'}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:");"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#22ECDB"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"colors"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:"require"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:'"tailwindcss/colors"'}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:");"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#22ECDB"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E1"},children:"default"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"flattenColorPalette"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:"require"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:'"tailwindcss/lib/util/flattenColorPalette"'}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:");"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#54617B",fontStyle:"italic"},children:"/** "}),(0,n.jsx)(l.span,{style:{color:"#EACD61",fontStyle:"italic"},children:"@type"}),(0,n.jsx)(l.span,{style:{color:"#54617B",fontStyle:"italic"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160",fontStyle:"italic"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#B78AFF",fontStyle:"italic"},children:"import('tailwindcss').Config"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160",fontStyle:"italic"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#54617B",fontStyle:"italic"},children:" */"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"module"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"exports"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E1"},children:"content"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"["}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:'"./src/**/*.{ts,tsx}"'}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"],"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E1"},children:"darkMode"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:'"class"'}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E1"},children:"theme"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#54617B",fontStyle:"italic"},children:"// rest of the code"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"},"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E1"},children:"plugins"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"["})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#54617B",fontStyle:"italic"},children:"// rest of the code"})]}),` `,(0,n.jsxs)(l.span,{className:"line line--highlighted",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"addVariablesForColors"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"],"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"};"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsx)(l.span,{className:"line line--highlighted",children:(0,n.jsx)(l.span,{style:{color:"#54617B",fontStyle:"italic"},children:"// This plugin adds each Tailwind color as a global CSS variable, e.g. var(--gray-200)."})}),` `,(0,n.jsxs)(l.span,{className:"line line--highlighted",children:[(0,n.jsx)(l.span,{style:{color:"#22ECDB"},children:"function"}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:" addVariablesForColors"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"({"}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#F38CEC"},children:"addBase"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:","}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#F38CEC"},children:"theme"}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}:"}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B78AFF"},children:"any"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line line--highlighted",children:[(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#22ECDB"},children:"let"}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"allColors"}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:" flattenColorPalette"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:"theme"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:'"colors"'}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"));"})]}),` `,(0,n.jsxs)(l.span,{className:"line line--highlighted",children:[(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#22ECDB"},children:"let"}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"newVars"}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF955C"},children:"Object"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:"fromEntries"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"("})]}),` `,(0,n.jsxs)(l.span,{className:"line line--highlighted",children:[(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF955C"},children:"Object"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:"entries"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"allColors"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:")."}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:"map"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"((["}),(0,n.jsx)(l.span,{style:{color:"#F38CEC"},children:"key"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:","}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#F38CEC"},children:"val"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"])"}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"["}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:"`--"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"${"}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"key"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:"`"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:","}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"val"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"])"})]}),` `,(0,n.jsxs)(l.span,{className:"line line--highlighted",children:[(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:");"})]}),` `,(0,n.jsx)(l.span,{className:"line line--highlighted",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line line--highlighted",children:[(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:" addBase"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"({"})]}),` `,(0,n.jsxs)(l.span,{className:"line line--highlighted",children:[(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:'":root"'}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"newVars"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line line--highlighted",children:[(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"});"})]}),` `,(0,n.jsx)(l.span,{className:"line line--highlighted",children:(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"})})]})})}),(0,n.jsx)(c,{children:"Copy the source code"}),(0,n.jsx)(l.p,{children:(0,n.jsx)(l.code,{children:"components/ui/multi-step-loader.tsx"})}),(0,n.jsx)(i,{name:"multi-step-loader",children:(0,n.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`"use client"; import { cn } from "@/utils/cn"; import { AnimatePresence, motion } from "framer-motion"; 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 && (

)} ); }; `,__src__:"src/registry/default/ui/multi-step-loader.tsx",__style__:"default",children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:'"use client"'}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"cn"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:'"@/utils/cn"'}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"AnimatePresence"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:","}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"motion"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:'"framer-motion"'}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"useState"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:","}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"useEffect"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:'"react"'}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:";"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#22ECDB"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"CheckIcon"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"({"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#F38CEC"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}:"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E1"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"?:"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B78AFF"},children:"string"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"})"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:"svg"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"xmlns"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:'"http://www.w3.org/2000/svg"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"fill"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:'"none"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"viewBox"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:'"0 0 24 24"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"strokeWidth"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#FF955C"},children:"1.5"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"stroke"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:'"currentColor"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:"cn"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:'"w-6 h-6 "'}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:","}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:")}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#69C3FFAA"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:"path"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"d"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},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,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"/>"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#69C3FFAA"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:");"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"};"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#22ECDB"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"CheckFilled"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"({"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#F38CEC"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}:"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E1"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"?:"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B78AFF"},children:"string"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"})"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:"svg"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"xmlns"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:'"http://www.w3.org/2000/svg"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"viewBox"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:'"0 0 24 24"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"fill"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:'"currentColor"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:"cn"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:'"w-6 h-6 "'}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:","}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:")}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#69C3FFAA"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:"path"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"fillRule"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:'"evenodd"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"d"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},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,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"clipRule"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:'"evenodd"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"/>"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#69C3FFAA"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:");"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"};"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#22ECDB"},children:"type"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B78AFF"},children:"LoadingState"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E1"},children:"text"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B78AFF"},children:"string"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:";"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"};"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#22ECDB"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"LoaderCore"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"({"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"loadingStates"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"value"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF955C"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}:"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E1"},children:"loadingStates"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B78AFF"},children:"LoadingState"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"[];"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E1"},children:"value"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"?:"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B78AFF"},children:"number"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"})"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:'"flex relative justify-start max-w-xl mx-auto flex-col mt-40"'}),(0,n.jsx)(l.span,{style:{color:"#69C3FFAA"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#FF955C"},children:"loadingStates"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:"map"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"(("}),(0,n.jsx)(l.span,{style:{color:"#F38CEC"},children:"loadingState"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:","}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#F38CEC"},children:"index"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#22ECDB"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"distance"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF955C"},children:"Math"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:"abs"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"index"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"-"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"value"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:");"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#22ECDB"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"opacity"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF955C"},children:"Math"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:"max"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#FF955C"},children:"1"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"-"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"distance"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"*"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF955C"},children:"0.2"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:","}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF955C"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:");"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#54617B",fontStyle:"italic"},children:"// Minimum opacity is 0, keep it 0.2 if you're sane."})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#B78AFF"},children:"motion.div"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"key"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"index"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:"cn"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:'"text-left flex gap-2 mb-4"'}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:")}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"initial"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"={{"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E1"},children:"opacity"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF955C"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:","}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E1"},children:"y"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"-"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"value"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"*"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF955C"},children:"40"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"animate"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"={{"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E1"},children:"opacity"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"opacity"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:","}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E1"},children:"y"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"-"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"value"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"*"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF955C"},children:"40"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"transition"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"={{"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E1"},children:"duration"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF955C"},children:"0.5"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#69C3FFAA"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#69C3FFAA"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"index"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:">"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"value"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"&&"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#B78AFF"},children:"CheckIcon"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:'"text-black dark:text-white"'}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"/>"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:")}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"index"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"<="}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"value"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"&&"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#B78AFF"},children:"CheckFilled"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:"cn"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:'"text-black dark:text-white"'}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"value"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"==="}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"index"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"&&"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:'"text-black dark:text-lime-500 opacity-100"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:")}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"/>"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:")}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#69C3FFAA"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:"span"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:"cn"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:'"text-black dark:text-white"'}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"value"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"==="}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"index"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"&&"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:'"text-black dark:text-lime-500 opacity-100"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:")}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#69C3FFAA"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#FF955C"},children:"loadingState"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"text"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#69C3FFAA"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#69C3FFAA"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:");"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"})}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#69C3FFAA"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:");"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"};"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#22ECDB"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"MultiStepLoader"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"({"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"loadingStates"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"loading"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"duration"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF955C"},children:"2000"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"loop"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E35535"},children:"true"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}:"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E1"},children:"loadingStates"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B78AFF"},children:"LoadingState"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"[];"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E1"},children:"loading"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"?:"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B78AFF"},children:"boolean"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E1"},children:"duration"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"?:"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B78AFF"},children:"number"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E1"},children:"loop"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"?:"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B78AFF"},children:"boolean"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"})"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#22ECDB"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"["}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"currentState"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:","}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"setCurrentState"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"]"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:"useState"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#FF955C"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:");"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:"useEffect"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"(()"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"if"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"!"}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"loading"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:"setCurrentState"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#FF955C"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:");"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#22ECDB"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"timeout"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:"setTimeout"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"(()"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:"setCurrentState"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"(("}),(0,n.jsx)(l.span,{style:{color:"#F38CEC"},children:"prevState"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"=>"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"loop"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"?"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"prevState"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"==="}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF955C"},children:"loadingStates"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:"length "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"-"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF955C"},children:"1"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"?"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF955C"},children:"0"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"prevState"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"+"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF955C"},children:"1"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF955C"},children:"Math"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:"min"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"prevState"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"+"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF955C"},children:"1"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:","}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF955C"},children:"loadingStates"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:"length "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"-"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF955C"},children:"1"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:")"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:");"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"},"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"duration"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:");"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"()"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:"clearTimeout"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"timeout"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:");"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"},"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"["}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"currentState"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:","}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"loading"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:","}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"loop"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:","}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF955C"},children:"loadingStates"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:"length"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:","}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"duration"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"]);"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#B78AFF"},children:"AnimatePresence"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"mode"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:'"wait"'}),(0,n.jsx)(l.span,{style:{color:"#69C3FFAA"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"loading"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"&&"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#B78AFF"},children:"motion.div"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"initial"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"={{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E1"},children:"opacity"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF955C"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"animate"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"={{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E1"},children:"opacity"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF955C"},children:"1"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"exit"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"={{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E1"},children:"opacity"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF955C"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:'"w-full h-full fixed inset-0 z-[100] flex items-center justify-center backdrop-blur-2xl"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#69C3FFAA"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:'"h-96 relative"'}),(0,n.jsx)(l.span,{style:{color:"#69C3FFAA"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#B78AFF"},children:"LoaderCore"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"value"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"currentState"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"loadingStates"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"loadingStates"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"/>"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#69C3FFAA"},children:""})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},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,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"/>"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#69C3FFAA"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:")}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#69C3FFAA"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:");"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"};"})})]})})})})]}),` `,(0,n.jsxs)(l.h2,{id:"props",children:[(0,n.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#props",children:(0,n.jsx)(l.span,{className:"icon icon-link"})}),"Props"]}),` `,(0,n.jsxs)(l.table,{children:[(0,n.jsx)(l.thead,{children:(0,n.jsxs)(l.tr,{children:[(0,n.jsx)(l.th,{children:"Prop Name"}),(0,n.jsx)(l.th,{children:"Type"}),(0,n.jsx)(l.th,{children:"Default Value"}),(0,n.jsx)(l.th,{children:"Description"})]})}),(0,n.jsxs)(l.tbody,{children:[(0,n.jsxs)(l.tr,{children:[(0,n.jsx)(l.td,{children:"loadingStates"}),(0,n.jsx)(l.td,{children:(0,n.jsx)(l.code,{children:"LoadingState[]"})}),(0,n.jsx)(l.td,{children:"N/A"}),(0,n.jsxs)(l.td,{children:["An array of objects, each with a ",(0,n.jsx)(l.code,{children:"text"})," property to display the current loading state message."]})]}),(0,n.jsxs)(l.tr,{children:[(0,n.jsx)(l.td,{children:"loading"}),(0,n.jsx)(l.td,{children:(0,n.jsx)(l.code,{children:"boolean"})}),(0,n.jsx)(l.td,{children:"undefined"}),(0,n.jsx)(l.td,{children:"A boolean to control whether the loader is active or not."})]}),(0,n.jsxs)(l.tr,{children:[(0,n.jsx)(l.td,{children:"duration"}),(0,n.jsx)(l.td,{children:(0,n.jsx)(l.code,{children:"number"})}),(0,n.jsx)(l.td,{children:"2000"}),(0,n.jsx)(l.td,{children:"The duration (in milliseconds) before transitioning to the next loading state."})]}),(0,n.jsxs)(l.tr,{children:[(0,n.jsx)(l.td,{children:"loop"}),(0,n.jsx)(l.td,{children:(0,n.jsx)(l.code,{children:"boolean"})}),(0,n.jsx)(l.td,{children:"true"}),(0,n.jsx)(l.td,{children:"A boolean to control whether the loading states should loop back to the start."})]}),(0,n.jsxs)(l.tr,{children:[(0,n.jsx)(l.td,{children:"value"}),(0,n.jsx)(l.td,{children:(0,n.jsx)(l.code,{children:"number (optional)"})}),(0,n.jsx)(l.td,{children:"0"}),(0,n.jsx)(l.td,{children:"(Only in LoaderCore) The current index of the loading state to be displayed."})]})]})]})]})}function g(e={}){let{wrapper:l}=e.components||{};return l?(0,n.jsx)(l,Object.assign({},e,{children:(0,n.jsx)(p,e)})):p(e)}var f=g;function a(e,l){throw new Error("Expected "+(l?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}return N(x);})(); ;return Component;

Aceternity UI