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

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

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

) ); } `,__src__:"src/registry/default/example/multi-step-loader-demo.tsx",children:(0,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:"#98C379"},children:'"use client"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"React"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", { "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"useState"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" } "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"react"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" { "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"MultiStepLoader"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"as"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"Loader"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" } "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"../ui/multi-step-loader"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" { "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"IconSquareRoundedX"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" } "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"@tabler/icons-react"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"loadingStates"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ["})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"text"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"Buying a condo"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" },"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"text"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"Travelling in a flight"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" },"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"text"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"Meeting Tyler Durden"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" },"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"text"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"He makes soap"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" },"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"text"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"We goto a bar"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" },"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"text"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"Start a fight"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" },"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"text"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"We like it"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" },"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"text"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"Welcome to F**** C***"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" },"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"];"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"function"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"MultiStepLoaderDemo"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"() {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ["}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"loading"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"setLoading"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"] "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"useState"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"false"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"w-full h-[60vh] flex items-center justify-center"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#7F848E",fontStyle:"italic"},children:"/* Core Loader Modal */"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"Loader"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"loadingStates"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"loadingStates"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"loading"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"loading"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"duration"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"2000"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" />"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#7F848E",fontStyle:"italic"},children:"/* The buttons are for demo only, remove it in your actual code \u2B07\uFE0F */"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"button"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"onClick"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"() "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"setLoading"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"true"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},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:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"style"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"boxShadow"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:":"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"0px -1px 0px 0px #ffffff40 inset, 0px 1px 0px 0px #ffffff40 inset"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" >"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" Click to load"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"loading"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"&&"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"button"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},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:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"onClick"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"() "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"setLoading"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"false"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" >"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"IconSquareRoundedX"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"h-10 w-10"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" )"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" );"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},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)(a,{defaultValue:"manual",children:[(0,n.jsxs)(c,{children:[(0,n.jsx)(i,{value:"cli",children:"CLI"}),(0,n.jsx)(i,{value:"manual",children:"Manual"})]}),(0,n.jsx)(d,{value:"cli",children:(0,n.jsxs)(B,{children:[(0,n.jsx)(o,{children:"Run the following command"}),(0,n.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(l.pre,{"data-language":"bash","data-theme":"default",__rawString__:`npx aceternity-ui@latest add multi-step-loader `,__npmCommand__:`npx aceternity-ui@latest add multi-step-loader `,__yarnCommand__:`npx aceternity-ui@latest add multi-step-loader `,__pnpmCommand__:`pnpm dlx aceternity-ui@latest add multi-step-loader `,__bunCommand__:`bunx --bun aceternity-ui@latest add multi-step-loader `,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:"#ABB2BF"},children:"npx "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"aceternity-ui@latest"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"add"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"multi-step-loader"})]})})})}),(0,n.jsxs)(o,{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, }); } `,__rawStringJsx__:`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 }) { 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:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"defaultTheme"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"require"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"tailwindcss/defaultTheme"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"colors"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"require"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"tailwindcss/colors"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"default"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"flattenColorPalette"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"} "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"require"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"tailwindcss/lib/util/flattenColorPalette"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#7F848E",fontStyle:"italic"},children:"/** "}),(0,n.jsx)(l.span,{style:{color:"#C678DD",fontStyle:"italic"},children:"@type"}),(0,n.jsx)(l.span,{style:{color:"#7F848E",fontStyle:"italic"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B",fontStyle:"italic"},children:"{import('tailwindcss').Config}"}),(0,n.jsx)(l.span,{style:{color:"#7F848E",fontStyle:"italic"},children:" */"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"module"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"exports"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"content"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": ["}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"./src/**/*.{ts,tsx}"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"],"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"darkMode"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"class"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"theme"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#7F848E",fontStyle:"italic"},children:"// rest of the code"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" },"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"plugins"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": ["})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#7F848E",fontStyle:"italic"},children:"// rest of the code"})]}),` `,(0,n.jsxs)(l.span,{className:"line line--highlighted",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"addVariablesForColors"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ],"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},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:"#7F848E",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:"#C678DD"},children:"function"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"addVariablesForColors"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"({ "}),(0,n.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"addBase"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"theme"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }: "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"any"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:") {"})]}),` `,(0,n.jsxs)(l.span,{className:"line line--highlighted",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"let"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"allColors"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"flattenColorPalette"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"theme"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"colors"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"));"})]}),` `,(0,n.jsxs)(l.span,{className:"line line--highlighted",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"let"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"newVars"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"Object"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"fromEntries"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("})]}),` `,(0,n.jsxs)(l.span,{className:"line line--highlighted",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"Object"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"entries"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"allColors"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:")."}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"map"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"((["}),(0,n.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"key"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"val"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"]) "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ["}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"`--"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"${"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"key"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"`"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"val"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"])"})]}),` `,(0,n.jsx)(l.span,{className:"line line--highlighted",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},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:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"addBase"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"({"})]}),` `,(0,n.jsxs)(l.span,{className:"line line--highlighted",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'":root"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"newVars"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsx)(l.span,{className:"line line--highlighted",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" });"})}),` `,(0,n.jsx)(l.span,{className:"line line--highlighted",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"}"})})]})})})]})}),(0,n.jsx)(d,{value:"manual",children:(0,n.jsxs)(B,{children:[(0,n.jsx)(o,{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:"#ABB2BF"},children:"npm "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"i"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"framer-motion"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"clsx"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"tailwind-merge"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"@tabler/icons-react"})]})})})}),(0,n.jsx)(o,{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:"lib/utils.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)); } `,__rawStringJsx__:`import { clsx } from "clsx"; import { twMerge } from "tailwind-merge"; export function cn(...inputs) { 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:"#C678DD"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" { "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"ClassValue"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"clsx"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" } "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"clsx"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" { "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"twMerge"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" } "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"tailwind-merge"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"function"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"cn"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"(..."}),(0,n.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"inputs"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"ClassValue"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"[]) {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"twMerge"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"clsx"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"inputs"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"));"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"}"})})]})})]}),(0,n.jsxs)(o,{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, }); } `,__rawStringJsx__:`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 }) { 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:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"defaultTheme"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"require"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"tailwindcss/defaultTheme"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"colors"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"require"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"tailwindcss/colors"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"default"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"flattenColorPalette"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"} "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"require"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"tailwindcss/lib/util/flattenColorPalette"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#7F848E",fontStyle:"italic"},children:"/** "}),(0,n.jsx)(l.span,{style:{color:"#C678DD",fontStyle:"italic"},children:"@type"}),(0,n.jsx)(l.span,{style:{color:"#7F848E",fontStyle:"italic"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B",fontStyle:"italic"},children:"{import('tailwindcss').Config}"}),(0,n.jsx)(l.span,{style:{color:"#7F848E",fontStyle:"italic"},children:" */"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"module"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"exports"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"content"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": ["}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"./src/**/*.{ts,tsx}"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"],"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"darkMode"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"class"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"theme"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#7F848E",fontStyle:"italic"},children:"// rest of the code"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" },"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"plugins"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": ["})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#7F848E",fontStyle:"italic"},children:"// rest of the code"})]}),` `,(0,n.jsxs)(l.span,{className:"line line--highlighted",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"addVariablesForColors"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ],"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},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:"#7F848E",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:"#C678DD"},children:"function"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"addVariablesForColors"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"({ "}),(0,n.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"addBase"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"theme"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }: "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"any"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:") {"})]}),` `,(0,n.jsxs)(l.span,{className:"line line--highlighted",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"let"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"allColors"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"flattenColorPalette"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"theme"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"colors"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"));"})]}),` `,(0,n.jsxs)(l.span,{className:"line line--highlighted",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"let"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"newVars"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"Object"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"fromEntries"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("})]}),` `,(0,n.jsxs)(l.span,{className:"line line--highlighted",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"Object"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"entries"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"allColors"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:")."}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"map"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"((["}),(0,n.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"key"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"val"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"]) "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ["}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"`--"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"${"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"key"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"`"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"val"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"])"})]}),` `,(0,n.jsx)(l.span,{className:"line line--highlighted",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},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:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"addBase"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"({"})]}),` `,(0,n.jsxs)(l.span,{className:"line line--highlighted",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'":root"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"newVars"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsx)(l.span,{className:"line line--highlighted",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" });"})}),` `,(0,n.jsx)(l.span,{className:"line line--highlighted",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"}"})})]})})}),(0,n.jsx)(o,{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)(h,{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 "@/lib/utils"; 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 && (

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

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

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

{loadingState.text} ) ); })}

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

)} ) ); }; `,__src__:"src/registry/default/ui/multi-step-loader.tsx",__style__:"default",children:(0,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:"#98C379"},children:'"use client"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" { "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"cn"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" } "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"@/lib/utils"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" { "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"AnimatePresence"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"motion"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" } "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"framer-motion"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" { "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"useState"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"useEffect"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" } "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"react"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"CheckIcon"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ({ "}),(0,n.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }: { "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"?"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"string"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }) "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"svg"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"xmlns"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"http://www.w3.org/2000/svg"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"fill"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"none"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"viewBox"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"0 0 24 24"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"strokeWidth"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"1.5"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"stroke"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"currentColor"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"cn"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"w-6 h-6 "'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" >"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"path"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"d"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},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:"#ABB2BF"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" );"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"};"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"CheckFilled"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ({ "}),(0,n.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }: { "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"?"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"string"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }) "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"svg"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"xmlns"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"http://www.w3.org/2000/svg"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"viewBox"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"0 0 24 24"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"fill"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"currentColor"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"cn"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"w-6 h-6 "'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" >"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"path"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"fillRule"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"evenodd"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"d"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},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:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"clipRule"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"evenodd"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" />"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" );"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"};"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"type"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"LoadingState"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"text"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"string"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"};"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"LoaderCore"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ({"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"loadingStates"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"value"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"}: {"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"loadingStates"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"LoadingState"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"[];"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"value"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"?"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"number"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"}) "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"flex relative justify-start max-w-xl mx-auto flex-col mt-40"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"loadingStates"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"map"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"(("}),(0,n.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"loadingState"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"index"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"distance"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"Math"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"abs"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"index"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"-"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"value"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"opacity"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"Math"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"max"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"1"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"-"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"distance"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"*"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"0.2"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"); "}),(0,n.jsx)(l.span,{style:{color:"#7F848E",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:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"motion.div"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"key"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"index"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"cn"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"text-left flex gap-2 mb-4"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"initial"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"{ "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"opacity"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"y"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"-"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"value"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"*"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"40"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:") }"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"animate"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"{ "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"opacity"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"opacity"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"y"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"-"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"value"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"*"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"40"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:") }"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"transition"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"{ "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"duration"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"0.5"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" >"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"index"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:">"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"value"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"&&"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"CheckIcon"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"text-black dark:text-white"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" )"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"index"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"<="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"value"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"&&"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"CheckFilled"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"cn"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"text-black dark:text-white"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"value"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"==="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"index"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"&&"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"text-black dark:text-lime-500 opacity-100"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" )"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" />"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" )"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"span"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"cn"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"text-black dark:text-white"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"value"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"==="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"index"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"&&"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"text-black dark:text-lime-500 opacity-100"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" )"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" >"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"loadingState"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"text"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" );"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" })"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" );"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"};"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"MultiStepLoader"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ({"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"loadingStates"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"loading"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"duration"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"2000"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"loop"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"true"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"}: {"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"loadingStates"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"LoadingState"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"[];"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"loading"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"?"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"boolean"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"duration"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"?"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"number"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"loop"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"?"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"boolean"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"}) "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ["}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"currentState"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"setCurrentState"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"] "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"useState"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"useEffect"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"(() "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"if"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"!"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"loading"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:") {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"setCurrentState"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"timeout"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"setTimeout"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"(() "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"setCurrentState"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"(("}),(0,n.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"prevState"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"loop"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"?"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"prevState"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"==="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"loadingStates"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"length"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"-"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"1"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"?"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"0"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"prevState"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"+"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"1"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"Math"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"min"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"prevState"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"+"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"1"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"loadingStates"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"length"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"-"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"1"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:")"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" );"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }, "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"duration"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" () "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"clearTimeout"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"timeout"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }, ["}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"currentState"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"loading"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"loop"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"loadingStates"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"length"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"duration"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"]);"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"AnimatePresence"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"mode"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"wait"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"loading"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"&&"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"motion.div"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"initial"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"opacity"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"animate"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"opacity"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"1"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"exit"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"opacity"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"w-full h-full fixed inset-0 z-[100] flex items-center justify-center backdrop-blur-2xl"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" >"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"h-96 relative"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"LoaderCore"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"value"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"currentState"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"loadingStates"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"loadingStates"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},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:"#ABB2BF"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" )"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" );"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},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 b(e={}){let{wrapper:l}=e.components||{};return l?(0,n.jsx)(l,Object.assign({},e,{children:(0,n.jsx)(A,e)})):A(e)}var v=b;function r(e,l){throw new Error("Expected "+(l?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}return x(w);})(); ;return Component;

Aceternity UI