) } export function WizardDemo() { return (

}> Step 1 Step 2 Step 3 Step 4 Step 5

) } `,__src__:"registry/ax-base/example/wizard-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:"#3E8FB0"},children:"import "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"Button"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" from "}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:"'@brudi/react-button'"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"import "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"Wizard"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:","}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"useWizard"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" from "}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:"'@/registry/ax-app/ui/wizard'"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"function"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EA9A97"},children:"WithStepper"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"({"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"children"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"React"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"PropsWithChildren"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"nextStep"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:","}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"previousStep"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:","}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"isLastStep"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:","}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"isFirstStep"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:","}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"goToStep"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EA9A97"},children:"useWizard"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:"()"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<>"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"children"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:'"mt-4 grid grid-cols-2 gap-2 border-t pt-4"'}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Button"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"onClick"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"previousStep"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"disabled"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"isFirstStep"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" Previous"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Button"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"onClick"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"nextStep"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"disabled"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"isLastStep"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" Next"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Button"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"onClick"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{()"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EA9A97"},children:"goToStep"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#EA9A97"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"disabled"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"isFirstStep"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:'"col-span-2"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"variant"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:'"outline"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" Back to Step 1"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" )"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"function"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EA9A97"},children:"WizardDemo"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"()"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Wizard"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"wrapper"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"WithStepper"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"/>"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Wizard.Step"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:"Step 1"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Wizard.Step"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:"Step 2"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Wizard.Step"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:"Step 3"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Wizard.Step"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:"Step 4"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Wizard.Step"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:"Step 5"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" )"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"})})]})})}),(0,n.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { Button } from '@brudi/react-button' import { Wizard, useWizard } from '@/registry/ax-app/ui/wizard' function WithStepper({ children }: React.PropsWithChildren) { const { nextStep, previousStep, isLastStep, isFirstStep, goToStep } = useWizard() return ( <> {children}

) } export function WizardDemo() { return (

}> Step 1 Step 2 Step 3 Step 4 Step 5

) } `,__src__:"registry/ax-site/example/wizard-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:"#3E8FB0"},children:"import "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"Button"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" from "}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:"'@brudi/react-button'"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"import "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"Wizard"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:","}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"useWizard"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" from "}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:"'@/registry/ax-app/ui/wizard'"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"function"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EA9A97"},children:"WithStepper"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"({"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"children"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"React"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"PropsWithChildren"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"nextStep"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:","}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"previousStep"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:","}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"isLastStep"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:","}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"isFirstStep"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:","}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"goToStep"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EA9A97"},children:"useWizard"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:"()"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<>"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"children"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:'"mt-4 grid grid-cols-2 gap-2 border-t pt-4"'}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Button"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"onClick"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"previousStep"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"disabled"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"isFirstStep"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" Previous"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Button"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"onClick"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"nextStep"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"disabled"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"isLastStep"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" Next"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Button"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"onClick"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{()"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EA9A97"},children:"goToStep"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#EA9A97"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"disabled"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"isFirstStep"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:'"col-span-2"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"variant"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:'"outline"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" Back to Step 1"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" )"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"function"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EA9A97"},children:"WizardDemo"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"()"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Wizard"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"wrapper"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"WithStepper"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"/>"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Wizard.Step"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:"Step 1"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Wizard.Step"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:"Step 2"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Wizard.Step"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:"Step 3"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Wizard.Step"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:"Step 4"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Wizard.Step"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:"Step 5"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" )"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"})})]})})}),(0,n.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { Button } from '@brudi/react-button' import { Wizard, useWizard } from '@brudi/react-wizard' function WithStepper({ children }: React.PropsWithChildren) { const { nextStep, previousStep, isLastStep, isFirstStep, goToStep } = useWizard() return ( <> {children}

) } export function WizardDemo() { return (

}> Step 1 Step 2 Step 3 Step 4 Step 5

) } `,__src__:"registry/ax-app/example/wizard-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:"#3E8FB0"},children:"import "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"Button"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" from "}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:"'@brudi/react-button'"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"import "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"Wizard"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:","}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"useWizard"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" from "}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:"'@brudi/react-wizard'"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"function"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EA9A97"},children:"WithStepper"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"({"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"children"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"React"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"PropsWithChildren"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"nextStep"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:","}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"previousStep"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:","}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"isLastStep"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:","}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"isFirstStep"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:","}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"goToStep"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EA9A97"},children:"useWizard"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:"()"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<>"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"children"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:'"mt-4 grid grid-cols-2 gap-2 border-t pt-4"'}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Button"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"onClick"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"previousStep"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"disabled"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"isFirstStep"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" Previous"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Button"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"onClick"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"nextStep"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"disabled"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"isLastStep"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" Next"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Button"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"onClick"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{()"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EA9A97"},children:"goToStep"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#EA9A97"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"disabled"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"isFirstStep"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:'"col-span-2"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"variant"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:'"outline"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" Back to Step 1"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" )"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"function"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EA9A97"},children:"WizardDemo"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"()"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Wizard"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"wrapper"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"WithStepper"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"/>"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Wizard.Step"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:"Step 1"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Wizard.Step"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:"Step 2"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Wizard.Step"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:"Step 3"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Wizard.Step"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:"Step 4"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Wizard.Step"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:"Step 5"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" )"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#908CAA"},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.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(l.pre,{"data-language":"bash","data-theme":"default",__rawString__:`npm install @brudi/react-wizard `,__npmCommand__:`npm install @brudi/react-wizard `,__yarnCommand__:`yarn add @brudi/react-wizard `,__pnpmCommand__:`pnpm add @brudi/react-wizard `,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:"#EA9A97"},children:"npm"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:"install"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:"@brudi/react-wizard"})]})})})}),` `,(0,n.jsxs)(l.h2,{id:"usage",children:[(0,n.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#usage",children:(0,n.jsx)(l.span,{className:"icon icon-link"})}),"Usage"]}),` `,(0,n.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { Wizard } from "@brudi/react-wizard" `,children:(0,n.jsx)(l.code,{"data-language":"tsx","data-theme":"default",children:(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"import "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"Wizard"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" from "}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:'"@brudi/react-wizard"'})]})})})}),` `,(0,n.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:` Step 1 Step 1 `,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:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Wizard"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Wizard.Step"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:"Step 1"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Wizard.Step"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:"Step 1"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]})]})})}),` `,(0,n.jsxs)(l.h2,{id:"examples",children:[(0,n.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#examples",children:(0,n.jsx)(l.span,{className:"icon icon-link"})}),"Examples"]}),` `,(0,n.jsxs)(l.h3,{id:"with-form",children:[(0,n.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#with-form",children:(0,n.jsx)(l.span,{className:"icon icon-link"})}),"With Form"]}),` `,(0,n.jsxs)(s,{name:"wizard-with-form",children:[(0,n.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import * as React from 'react' import { Button } from '@brudi/react-button' import { Form, FormField, useForm } from '@brudi/react-form' import { toast } from '@brudi/react-toast' import { Wizard, useWizard } from '@brudi/react-wizard' import { z } from 'zod' const schema = z.object({ username: z .string() .min(2, { message: 'Username must be at least 2 characters.' }) .max(14, { message: 'Username must not be longer than 14 characters.' }), email: z.string().email() }) type FormSchemaValues = z.infer const defaultValues: Partial = { username: 'john_brudi', email: 'hello@brudi.com' } function FormWrapper({ children }: React.PropsWithChildren) { const { nextStep, previousStep, isLastStep, isFirstStep, goToStep } = useWizard() const form = useForm({ schema, defaultValues }) const onSubmit = (values: FormSchemaValues) => { if (!isLastStep) { // nextStep().then(() => form.setFocus(isFirstStep ? 'email' : 'username')) // return } toast(

Submitted {Object.keys(values).map((k) => (

{k} {JSON.stringify(values[k])}

))}

) } return ( ) } export function WizardWithForm() { return (

Step 1

Step 2

Step 3

Click submit button!

) } `,__src__:"registry/ax-base/example/wizard-with-form.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:"#3E8FB0"},children:"import "}),(0,n.jsx)(l.span,{style:{color:"#EA9A97"},children:"*"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" as "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"React"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" from "}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:"'react'"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"import "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"Button"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" from "}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:"'@brudi/react-button'"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"import "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"Form"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:","}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"FormField"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:","}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"useForm"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" from "}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:"'@brudi/react-form'"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"import "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"toast"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" from "}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:"'@brudi/react-toast'"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"import "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"Wizard"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:","}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"useWizard"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" from "}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:"'@brudi/react-wizard'"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"import "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"z"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" from "}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:"'zod'"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"schema"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"z"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#EA9A97"},children:"object"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" username"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"z"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#EA9A97"},children:"string"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:"()"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#EA9A97"},children:"min"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#EA9A97"},children:"2"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:","}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" message"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:"'Username must be at least 2 characters.'"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:")"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#EA9A97"},children:"max"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#EA9A97"},children:"14"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:","}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" message"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:"'Username must not be longer than 14 characters.'"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" email"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"z"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#EA9A97"},children:"string"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:"()"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#EA9A97"},children:"email"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:"()"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:")"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"type"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"FormSchemaValues"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"z"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"infer"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"typeof"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"schema"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:">"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"defaultValues"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Partial"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"FormSchemaValues"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:">"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" username"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:"'john_brudi'"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" email"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:"'hello@brudi.com'"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"function"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EA9A97"},children:"FormWrapper"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"({"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"children"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"React"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"PropsWithChildren"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"nextStep"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:","}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"previousStep"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:","}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"isLastStep"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:","}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"isFirstStep"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:","}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"goToStep"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EA9A97"},children:"useWizard"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:"()"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"form"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EA9A97"},children:"useForm"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"schema"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"defaultValues"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:")"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EA9A97",fontStyle:"italic"},children:"onSubmit"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"values"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"FormSchemaValues"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"if"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"!"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"isLastStep"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA",fontStyle:"italic"},children:"//"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86",fontStyle:"italic"},children:" nextStep().then(() => form.setFocus(isFirstStep ? 'email' : 'username'))"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA",fontStyle:"italic"},children:"//"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86",fontStyle:"italic"},children:" return"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EA9A97"},children:"toast"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:"("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"span"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:'"font-semibold"'}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:"Submitted"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"Object"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#EA9A97"},children:"keys"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"values"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#EA9A97"},children:"map"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"k"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"key"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"k"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:'"flex w-full gap-4"'}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"span"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:'"text-muted-foreground w-20 truncate"'}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"k"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"code"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:'"flex-1 truncate"'}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"JSON"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#EA9A97"},children:"stringify"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"values"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:"["}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"k"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:"])"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" ))"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" )"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Form"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"..."}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"form"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"form"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"onSubmit"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"form"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#EA9A97"},children:"handleSubmit"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"onSubmit"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"children"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:'"mt-4 grid grid-cols-2 gap-2 border-t pt-4"'}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Button"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"onClick"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"previousStep"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"disabled"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"isFirstStep"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"type"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:'"button"'}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" Previous"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"!"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"isLastStep"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"&&"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Button"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"onClick"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"nextStep"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"type"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:'"button"'}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" Next"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" )"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"isLastStep"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"&&"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Button"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"variant"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:'"brand"'}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"type"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:'"submit"'}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" Submit"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" )"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" )"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"function"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EA9A97"},children:"WizardWithForm"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"()"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Wizard"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"wrapper"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"FormWrapper"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"/>"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Wizard.Step"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"h2"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:"Step 1"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"FormField.Input"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"name"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:'"username"'}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"label"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:'"Username"'}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"/>"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Wizard.Step"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"h2"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:"Step 2"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"FormField.Input"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"name"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:'"email"'}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"type"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:'"email"'}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"label"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:'"Username"'}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"/>"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Wizard.Step"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"h2"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:"Step 3"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"span"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:'"text-muted-foreground"'}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:"Click submit button!"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" )"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"})})]})})}),(0,n.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import * as React from 'react' import { Button } from '@brudi/react-button' import { Form, FormField, useForm } from '@brudi/react-form' import { toast } from '@brudi/react-toast' import { Wizard, useWizard } from '@brudi/react-wizard' import { z } from 'zod' const schema = z.object({ username: z .string() .min(2, { message: 'Username must be at least 2 characters.' }) .max(14, { message: 'Username must not be longer than 14 characters.' }), email: z.string().email() }) type FormSchemaValues = z.infer const defaultValues: Partial = { username: 'john_brudi', email: 'hello@brudi.com' } function FormWrapper({ children, }: React.PropsWithChildren) { const { nextStep, previousStep, isLastStep, isFirstStep } = useWizard() const form = useForm({ schema, defaultValues }) const onSubmit = (values: FormSchemaValues) => { if (!isLastStep) { nextStep().then(() => form.setFocus(isFirstStep ? 'email' : 'username')) return } toast(

Submitted {Object.keys(values).map((k) => (

{k} {JSON.stringify(values[k])}

))}

) } return ( ) } export function WizardWithForm() { return (

Step 1

Step 2

Step 3

Click submit button!

) } `,__src__:"registry/ax-site/example/wizard-with-form.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:"#3E8FB0"},children:"import "}),(0,n.jsx)(l.span,{style:{color:"#EA9A97"},children:"*"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" as "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"React"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" from "}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:"'react'"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"import "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"Button"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" from "}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:"'@brudi/react-button'"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"import "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"Form"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:","}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"FormField"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:","}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"useForm"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" from "}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:"'@brudi/react-form'"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"import "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"toast"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" from "}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:"'@brudi/react-toast'"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"import "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"Wizard"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:","}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"useWizard"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" from "}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:"'@brudi/react-wizard'"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"import "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"z"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" from "}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:"'zod'"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"schema"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"z"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#EA9A97"},children:"object"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" username"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"z"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#EA9A97"},children:"string"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:"()"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#EA9A97"},children:"min"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#EA9A97"},children:"2"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:","}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" message"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:"'Username must be at least 2 characters.'"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:")"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#EA9A97"},children:"max"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#EA9A97"},children:"14"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:","}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" message"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:"'Username must not be longer than 14 characters.'"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" email"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"z"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#EA9A97"},children:"string"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:"()"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#EA9A97"},children:"email"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:"()"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:")"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"type"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"FormSchemaValues"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"z"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"infer"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"typeof"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"schema"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:">"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"defaultValues"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Partial"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"FormSchemaValues"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:">"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" username"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:"'john_brudi'"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" email"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:"'hello@brudi.com'"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"function"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EA9A97"},children:"FormWrapper"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"({"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"children"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"React"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"PropsWithChildren"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"nextStep"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:","}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"previousStep"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:","}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"isLastStep"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:","}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"isFirstStep"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EA9A97"},children:"useWizard"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:"()"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"form"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EA9A97"},children:"useForm"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"schema"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"defaultValues"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:")"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EA9A97",fontStyle:"italic"},children:"onSubmit"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"values"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"FormSchemaValues"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"if"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"!"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"isLastStep"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EA9A97"},children:"nextStep"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:"()"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#EA9A97"},children:"then"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"()"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"form"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#EA9A97"},children:"setFocus"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"isFirstStep"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"?"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:"'email'"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:"'username'"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:"))"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"return"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EA9A97"},children:"toast"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:"("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"span"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:'"font-semibold"'}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:"Submitted"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"Object"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#EA9A97"},children:"keys"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"values"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#EA9A97"},children:"map"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"k"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"key"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"k"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:'"flex w-full gap-4"'}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"span"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:'"text-muted-foreground w-20 truncate"'}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"k"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"code"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:'"flex-1 truncate"'}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"JSON"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#EA9A97"},children:"stringify"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"values"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:"["}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"k"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:"])"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" ))"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" )"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Form"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"..."}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"form"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"form"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"onSubmit"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"form"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#EA9A97"},children:"handleSubmit"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"onSubmit"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"children"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:'"mt-4 grid grid-cols-2 gap-2 border-t pt-4"'}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Button"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"onClick"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"previousStep"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"disabled"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"isFirstStep"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"type"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:'"button"'}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" Previous"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"!"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"isLastStep"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"&&"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Button"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"onClick"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"nextStep"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"type"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:'"button"'}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" Next"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" )"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"isLastStep"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"&&"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Button"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"variant"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:'"brand"'}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"type"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:'"submit"'}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" Submit"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" )"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" )"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"function"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EA9A97"},children:"WizardWithForm"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"()"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Wizard"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"wrapper"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"FormWrapper"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"/>"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Wizard.Step"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"h2"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:"Step 1"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"FormField.Input"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"name"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:'"username"'}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"label"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:'"Username"'}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"/>"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Wizard.Step"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"h2"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:"Step 2"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"FormField.Input"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"name"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:'"email"'}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"type"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:'"email"'}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"label"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:'"Username"'}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"/>"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Wizard.Step"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"h2"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:"Step 3"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"span"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:'"text-muted-foreground"'}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:"Click submit button!"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" )"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"})})]})})}),(0,n.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import * as React from 'react' import { Button } from '@brudi/react-button' import { Form, FormField, useForm } from '@brudi/react-form' import { toast } from '@brudi/react-toast' import { Wizard, useWizard } from '@brudi/react-wizard' import { z } from 'zod' const schema = z.object({ username: z .string() .min(2, { message: 'Username must be at least 2 characters.' }) .max(14, { message: 'Username must not be longer than 14 characters.' }), email: z.string().email() }) type FormSchemaValues = z.infer const defaultValues: Partial = { username: 'john_brudi', email: 'hello@brudi.com' } function FormWrapper({ children }: React.PropsWithChildren) { const { nextStep, previousStep, isLastStep, isFirstStep } = useWizard() const form = useForm({ schema, defaultValues }) const onSubmit = (values: FormSchemaValues) => { if (!isLastStep) { nextStep().then(() => form.setFocus(isFirstStep ? 'email' : 'username')) return } toast(

Submitted {Object.keys(values).map((k) => (

{k} {JSON.stringify(values[k])}

))}

) } return ( ) } export function WizardWithForm() { return (

Step 1

Step 2

Step 3

Click submit button!

) } `,__src__:"registry/ax-app/example/wizard-with-form.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:"#3E8FB0"},children:"import "}),(0,n.jsx)(l.span,{style:{color:"#EA9A97"},children:"*"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" as "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"React"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" from "}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:"'react'"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"import "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"Button"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" from "}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:"'@brudi/react-button'"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"import "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"Form"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:","}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"FormField"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:","}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"useForm"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" from "}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:"'@brudi/react-form'"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"import "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"toast"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" from "}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:"'@brudi/react-toast'"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"import "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"Wizard"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:","}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"useWizard"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" from "}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:"'@brudi/react-wizard'"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"import "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"z"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" from "}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:"'zod'"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"schema"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"z"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#EA9A97"},children:"object"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" username"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"z"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#EA9A97"},children:"string"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:"()"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#EA9A97"},children:"min"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#EA9A97"},children:"2"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:","}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" message"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:"'Username must be at least 2 characters.'"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:")"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#EA9A97"},children:"max"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#EA9A97"},children:"14"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:","}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" message"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:"'Username must not be longer than 14 characters.'"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" email"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"z"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#EA9A97"},children:"string"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:"()"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#EA9A97"},children:"email"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:"()"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:")"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"type"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"FormSchemaValues"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"z"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"infer"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"typeof"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"schema"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:">"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"defaultValues"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Partial"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"FormSchemaValues"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:">"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" username"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:"'john_brudi'"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" email"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:"'hello@brudi.com'"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"function"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EA9A97"},children:"FormWrapper"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"({"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"children"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"React"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"PropsWithChildren"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"nextStep"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:","}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"previousStep"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:","}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"isLastStep"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:","}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"isFirstStep"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EA9A97"},children:"useWizard"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:"()"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"form"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EA9A97"},children:"useForm"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"schema"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"defaultValues"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:")"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EA9A97",fontStyle:"italic"},children:"onSubmit"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"values"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"FormSchemaValues"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"if"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"!"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"isLastStep"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EA9A97"},children:"nextStep"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:"()"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#EA9A97"},children:"then"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"()"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"form"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#EA9A97"},children:"setFocus"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"isFirstStep"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"?"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:"'email'"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:"'username'"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:"))"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"return"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EA9A97"},children:"toast"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:"("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"span"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:'"font-semibold"'}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:"Submitted"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"Object"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#EA9A97"},children:"keys"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"values"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#EA9A97"},children:"map"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"k"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"key"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"k"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:'"flex w-full gap-4"'}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"span"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:'"text-muted-foreground w-20 truncate"'}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"k"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"code"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:'"flex-1 truncate"'}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"JSON"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#EA9A97"},children:"stringify"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"values"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:"["}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"k"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:"])"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" ))"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" )"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Form"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"..."}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"form"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"form"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"onSubmit"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"form"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#EA9A97"},children:"handleSubmit"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"onSubmit"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"children"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:'"mt-4 grid grid-cols-2 gap-2 border-t pt-4"'}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Button"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"onClick"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"previousStep"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"disabled"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"isFirstStep"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"type"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:'"button"'}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" Previous"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"!"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"isLastStep"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"&&"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Button"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"onClick"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"nextStep"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"type"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:'"button"'}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" Next"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" )"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"isLastStep"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"&&"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Button"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"variant"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:'"brand"'}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"type"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:'"submit"'}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" Submit"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" )"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" )"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"function"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EA9A97"},children:"WizardWithForm"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"()"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Wizard"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"wrapper"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"FormWrapper"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"/>"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Wizard.Step"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"h2"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:"Step 1"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"FormField.Input"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"name"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:'"username"'}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"label"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:'"Username"'}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"/>"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Wizard.Step"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"h2"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:"Step 2"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"FormField.Input"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"name"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:'"email"'}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"type"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:'"email"'}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"label"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:'"Username"'}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"/>"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Wizard.Step"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"h2"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:"Step 3"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"span"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:'"text-muted-foreground"'}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:"Click submit button!"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" )"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"})})]})})})]}),` `,(0,n.jsxs)(l.h2,{id:"customization",children:[(0,n.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#customization",children:(0,n.jsx)(l.span,{className:"icon icon-link"})}),"Customization"]}),` `,(0,n.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(l.pre,{"data-language":"bash","data-theme":"default",__rawString__:`npx @brudi/ui extend wizard `,__npmCommand__:`npx @brudi/ui extend wizard `,__yarnCommand__:`npx @brudi/ui extend wizard `,__pnpmCommand__:`pnpx @brudi/ui extend wizard `,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:"#EA9A97"},children:"npx"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:"@brudi/ui"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:"extend"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:"wizard"})]})})})}),` `,(0,n.jsx)(o,{type:"single",collapsible:!0,children:(0,n.jsxs)(r,{value:"manual-installation",children:[(0,n.jsx)(t,{children:"Manual Customization"}),(0,n.jsx)(d,{children:(0,n.jsxs)(p,{children:[(0,n.jsx)(a,{children:"Install the following 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 install @brudi/react-wizard `,__npmCommand__:`npm install @brudi/react-wizard `,__yarnCommand__:`yarn add @brudi/react-wizard `,__pnpmCommand__:`pnpm add @brudi/react-wizard `,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:"#EA9A97"},children:"npm"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:"install"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:"@brudi/react-wizard"})]})})})}),(0,n.jsx)(a,{children:"Copy and paste the following code into your project."}),(0,n.jsxs)(h,{name:"wizard",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 * as React from 'react' import * as VirtualListPrimitive from '@brudi/react-wizard' const Wizard = VirtualListPrimitive.Wizard const useWizard = VirtualListPrimitive.useWizard export { Wizard, useWizard } `,__src__:"registry/ax-base/ui/wizard.tsx",__style__:"ax-base",children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:"'use client'"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"import "}),(0,n.jsx)(l.span,{style:{color:"#EA9A97"},children:"*"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" as "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"React"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" from "}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:"'react'"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"import "}),(0,n.jsx)(l.span,{style:{color:"#EA9A97"},children:"*"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" as "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"VirtualListPrimitive"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" from "}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:"'@brudi/react-wizard'"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"Wizard"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"VirtualListPrimitive"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"Wizard"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"useWizard"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"VirtualListPrimitive"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"useWizard"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"export "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"Wizard"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:","}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"useWizard"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},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 * as React from 'react' import * as VirtualListPrimitive from '@brudi/react-wizard' const Wizard = VirtualListPrimitive.Wizard const useWizard = VirtualListPrimitive.useWizard export { Wizard, useWizard } `,__src__:"registry/ax-site/ui/wizard.tsx",__style__:"ax-site",children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:"'use client'"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"import "}),(0,n.jsx)(l.span,{style:{color:"#EA9A97"},children:"*"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" as "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"React"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" from "}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:"'react'"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"import "}),(0,n.jsx)(l.span,{style:{color:"#EA9A97"},children:"*"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" as "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"VirtualListPrimitive"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" from "}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:"'@brudi/react-wizard'"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"Wizard"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"VirtualListPrimitive"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"Wizard"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"useWizard"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"VirtualListPrimitive"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"useWizard"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"export "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"Wizard"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:","}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"useWizard"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},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 * as React from 'react' import * as VirtualListPrimitive from '@brudi/react-wizard' const Wizard = VirtualListPrimitive.Wizard const useWizard = VirtualListPrimitive.useWizard export { Wizard, useWizard } `,__src__:"registry/ax-app/ui/wizard.tsx",__style__:"ax-app",children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:"'use client'"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"import "}),(0,n.jsx)(l.span,{style:{color:"#EA9A97"},children:"*"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" as "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"React"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" from "}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:"'react'"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"import "}),(0,n.jsx)(l.span,{style:{color:"#EA9A97"},children:"*"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" as "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"VirtualListPrimitive"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" from "}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:"'@brudi/react-wizard'"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"Wizard"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"VirtualListPrimitive"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"Wizard"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"useWizard"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"VirtualListPrimitive"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"useWizard"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"export "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"Wizard"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:","}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"useWizard"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"})]})]})})})]}),(0,n.jsx)(a,{children:"Update the import paths to match your project setup."})]})})]})})]})}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 g=b;function c(e,l){throw new Error("Expected "+(l?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}return z(v);})(); ;return Component;