var Component=(()=>{var C=Object.create;var t=Object.defineProperty;var F=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var E=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var N=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),b=(r,e)=>{for(var n in e)t(r,n,{get:e[n],enumerable:!0})},h=(r,e,n,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let s of m(e))!u.call(r,s)&&s!==n&&t(r,s,{get:()=>e[s],enumerable:!(i=F(e,s))||i.enumerable});return r};var T=(r,e,n)=>(n=r!=null?C(E(r)):{},h(e||!r||!r.__esModule?t(n,"default",{value:r,enumerable:!0}):n,r)),B=r=>h(t({},"__esModule",{value:!0}),r);var D=N((x,p)=>{p.exports=_jsx_runtime});var f={};b(f,{default:()=>A,frontmatter:()=>g});var l=T(D()),g={title:"Tabs",description:"A collection of stacked content sections, called tab panels, shown one at a time.",libraryImport:'import { Tabs } from "@xbeshui/core"',sourceGitLink:"View source code",sourceEditGitLink:"Edit this page",npmPackage:"@xbeshui/core",npmLink:"https://www.npmjs.com/package/xbeshui",gitLink:"https://github.com/madhavdutta/xbeshUI",docGitLink:"https://github.com/madhavdutta/xbesh-ui-kit-docs"};function y(r){let e=Object.assign({h3:"h3",a:"a",span:"span",div:"div",pre:"pre",code:"code",h2:"h2",p:"p",table:"table",thead:"thead",tr:"tr",th:"th",tbody:"tbody",td:"td"},r.components),{Tabs:n,XbTabs:i,Card:s,Label:a,TextInput:o,Button:d}=e;return d||c("Button",!0),s||c("Card",!0),s.Content||c("Card.Content",!0),s.Description||c("Card.Description",!0),s.Footer||c("Card.Footer",!0),s.Header||c("Card.Header",!0),s.Title||c("Card.Title",!0),a||c("Label",!0),n||c("Tabs",!0),n.TabsContent||c("Tabs.TabsContent",!0),n.TabsList||c("Tabs.TabsList",!0),n.TabsTrigger||c("Tabs.TabsTrigger",!0),o||c("TextInput",!0),i||c("XbTabs",!0),(0,l.jsxs)(n,{defaultValue:"compTab",className:"w-full mt-6",children:[(0,l.jsxs)(n.TabsList,{variant:"underline",className:"border-b w-full justify-start",children:[(0,l.jsx)(n.TabsTrigger,{variant:"underline",value:"compTab",children:"Component"}),(0,l.jsx)(n.TabsTrigger,{variant:"underline",value:"props",children:"Props"})]}),(0,l.jsxs)(n.TabsContent,{value:"compTab",children:[(0,l.jsxs)(e.h3,{id:"usage",children:[(0,l.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#usage",children:(0,l.jsx)(e.span,{className:"icon icon-link"})}),"Usage"]}),(0,l.jsxs)(n,{defaultValue:"preview1",className:"w-full mt-6 border",children:[(0,l.jsxs)(n.TabsList,{className:"border-b w-full bg-muted dark:bg-black justify-start",children:[(0,l.jsx)(n.TabsTrigger,{value:"preview1",children:"Preview"}),(0,l.jsx)(n.TabsTrigger,{value:"code1",children:"Code"})]}),(0,l.jsx)(n.TabsContent,{value:"code1",className:"p-5",children:(0,l.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(e.pre,{"data-language":"jsx","data-theme":"default",children:(0,l.jsxs)(e.code,{"data-language":"jsx","data-theme":"default",children:[(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" { Tabs, Card, Title, TextInput, Text, Button } "}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"@xbeshui/core"'})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"function"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#D2A8FF"},children:"TabsDemo"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:"() {"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"return"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" ("})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"Tabs"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"defaultValue"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"account"'}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"className"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"w-[400px]"'}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"Tabs.TabsList"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"variant"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"={"}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"underline"'}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"}"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"className"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"grid w-full grid-cols-2"'}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"Tabs.TabsTrigger"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"variant"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"={"}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"underline"'}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"}"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"value"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"account"'}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" Account"})}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"Tabs.TabsTrigger"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"variant"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"={"}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"underline"'}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"}"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"value"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"password"'}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" Password"})}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"Tabs.TabsContent"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"value"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"account"'}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"Card"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"className"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"p-4"'}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"Card.Header"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"Card.Title"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:">Account"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"Card.Description"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" Make changes to your account here. Click save when you're"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" done."})}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"Card.Content"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"className"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"space-y-2"'}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"div"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"className"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"space-y-1"'}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"Label"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"htmlFor"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"name"'}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:">Name"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"TextInput"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"id"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"name"'}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"defaultValue"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"Pedro Duarte"'}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" />"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"div"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"className"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"space-y-1"'}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"Label"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"htmlFor"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"username"'}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:">Username"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"TextInput"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"id"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"username"'}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"defaultValue"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"@peduarte"'}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" />"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"Card.Footer"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"Button"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:">Save changes"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"Tabs.TabsContent"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"value"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"password"'}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"Card"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"className"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"p-4"'}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"Card.Header"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"Card.Title"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:">Password"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"Card.Description"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" Change your password here. After saving, you'll be logged out."})}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"Card.Content"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"className"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"space-y-2"'}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"div"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"className"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"space-y-1"'}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"Label"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"htmlFor"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"current"'}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:">Current password"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"TextInput"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"id"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"current"'}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"type"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"password"'}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" />"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"div"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"className"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"space-y-1"'}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"Label"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"htmlFor"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"new"'}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:">New password"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"TextInput"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"id"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"new"'}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"type"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"password"'}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" />"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"Card.Footer"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"Button"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:">Save password"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" )"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" }"})})]})})})}),(0,l.jsx)(n.TabsContent,{value:"preview1",children:(0,l.jsx)("div",{className:"flex justify-center p-10",children:(0,l.jsx)(i,{})})})]}),(0,l.jsxs)(e.h2,{id:"examples",children:[(0,l.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#examples",children:(0,l.jsx)(e.span,{className:"icon icon-link"})}),"Examples"]}),(0,l.jsxs)(e.h3,{id:"outline",children:[(0,l.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#outline",children:(0,l.jsx)(e.span,{className:"icon icon-link"})}),"Outline"]}),(0,l.jsxs)(n,{defaultValue:"preview1",className:"w-full mt-6 border",children:[(0,l.jsxs)(n.TabsList,{className:"border-b w-full bg-muted dark:bg-black justify-start",children:[(0,l.jsx)(n.TabsTrigger,{value:"preview1",children:"Preview"}),(0,l.jsx)(n.TabsTrigger,{value:"code1",children:"Code"})]}),(0,l.jsx)(n.TabsContent,{value:"code1",className:"p-5",children:(0,l.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(e.pre,{"data-language":"jsx","data-theme":"default",children:(0,l.jsxs)(e.code,{"data-language":"jsx","data-theme":"default",children:[(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"*"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"as"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" React "}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"react"'})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" { Button, Card, TextInput, Label, Sheet, Tabs } "}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"@xbeshui/core"'})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"function"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#D2A8FF"},children:"XbTabs"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:"() { "})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"return"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:"("})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"Tabs"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"defaultValue"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"account"'}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"className"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"w-[400px]"'}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"Tabs.TabsList"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"variant"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"={"}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"outline"'}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"}"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"className"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"grid w-full grid-cols-2"'}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"Tabs.TabsTrigger"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"variant"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"={"}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"outline"'}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"}"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"value"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"account"'}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" Account"})}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"Tabs.TabsTrigger"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"variant"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"={"}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"outline"'}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"}"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"value"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"password"'}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" Password"})}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"Tabs.TabsContent"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"value"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"account"'}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"Card"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"className"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"p-4"'}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"Card.Header"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"Card.Title"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"className"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"text-2xl"'}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:">Account"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"Card.Description"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" Make changes to your account here. Click save when you're"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" done."})}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"Card.Content"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"className"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"space-y-2"'}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"div"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"className"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"space-y-1"'}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"Label"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"htmlFor"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"name"'}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:">Name"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"TextInput"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"id"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"name"'}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"defaultValue"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"Pedro Duarte"'}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" />"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"div"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"className"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"space-y-1"'}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"Label"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"htmlFor"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"username"'}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:">Username"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"TextInput"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"id"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"username"'}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"defaultValue"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"@peduarte"'}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" />"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"Card.Footer"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"className"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"mt-3"'}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"Button"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:">Save changes"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"Tabs.TabsContent"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"value"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"password"'}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"Card"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"className"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"p-4"'}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"Card.Header"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"Card.Title"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"className"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"text-2xl"'}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:">Password"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"Card.Description"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" Change your password here. After saving, you'll be logged out."})}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"Card.Content"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"className"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"space-y-2"'}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"div"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"className"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"space-y-1"'}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"Label"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"htmlFor"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"current"'}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:">Current password"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"TextInput"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"id"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"current"'}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"type"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"password"'}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" />"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"div"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"className"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"space-y-1"'}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"Label"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"htmlFor"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"new"'}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:">New password"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"TextInput"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"id"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"new"'}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"type"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"password"'}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" />"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"Card.Footer"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"className"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"mt-3"'}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"Button"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:">Save password"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" ); "})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" }"})})]})})})}),(0,l.jsx)(n.TabsContent,{value:"preview1",children:(0,l.jsx)("div",{className:"flex justify-center p-10",children:(0,l.jsxs)(n,{defaultValue:"account",className:"w-[400px]",children:[(0,l.jsxs)(n.TabsList,{variant:"outline",className:"grid w-full grid-cols-2",children:[(0,l.jsx)(n.TabsTrigger,{variant:"outline",value:"account",children:(0,l.jsx)(e.p,{children:"Account"})}),(0,l.jsx)(n.TabsTrigger,{variant:"outline",value:"password",children:(0,l.jsx)(e.p,{children:"Password"})})]}),(0,l.jsx)(n.TabsContent,{value:"account",children:(0,l.jsxs)(s,{className:"p-4",children:[(0,l.jsxs)(s.Header,{children:[(0,l.jsx)(s.Title,{className:"text-2xl",children:"Account"}),(0,l.jsx)(s.Description,{children:(0,l.jsx)(e.p,{children:`Make changes to your account here. Click save when you're done.`})})]}),(0,l.jsxs)(s.Content,{className:"space-y-2",children:[(0,l.jsxs)("div",{className:"space-y-1",children:[(0,l.jsx)(a,{htmlFor:"name",children:"Name"}),(0,l.jsx)(o,{id:"name",defaultValue:"Pedro Duarte"})]}),(0,l.jsxs)("div",{className:"space-y-1",children:[(0,l.jsx)(a,{htmlFor:"username",children:"Username"}),(0,l.jsx)(o,{id:"username",defaultValue:"@peduarte"})]})]}),(0,l.jsx)(s.Footer,{className:"mt-3",children:(0,l.jsx)(d,{children:"Save changes"})})]})}),(0,l.jsx)(n.TabsContent,{value:"password",children:(0,l.jsxs)(s,{className:"p-4",children:[(0,l.jsxs)(s.Header,{children:[(0,l.jsx)(s.Title,{className:"text-2xl",children:"Password"}),(0,l.jsx)(s.Description,{children:(0,l.jsx)(e.p,{children:"Change your password here. After saving, you'll be logged out."})})]}),(0,l.jsxs)(s.Content,{className:"space-y-2",children:[(0,l.jsxs)("div",{className:"space-y-1",children:[(0,l.jsx)(a,{htmlFor:"current",children:"Current password"}),(0,l.jsx)(o,{id:"current",type:"password"})]}),(0,l.jsxs)("div",{className:"space-y-1",children:[(0,l.jsx)(a,{htmlFor:"new",children:"New password"}),(0,l.jsx)(o,{id:"new",type:"password"})]})]}),(0,l.jsx)(s.Footer,{className:"mt-3",children:(0,l.jsx)(d,{children:"Save password"})})]})})]})})})]}),(0,l.jsxs)(e.h3,{id:"pill",children:[(0,l.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#pill",children:(0,l.jsx)(e.span,{className:"icon icon-link"})}),"Pill"]}),(0,l.jsxs)(n,{defaultValue:"preview1",className:"w-full mt-6 border",children:[(0,l.jsxs)(n.TabsList,{className:"border-b w-full bg-muted dark:bg-black justify-start",children:[(0,l.jsx)(n.TabsTrigger,{value:"preview1",children:"Preview"}),(0,l.jsx)(n.TabsTrigger,{value:"code1",children:"Code"})]}),(0,l.jsx)(n.TabsContent,{value:"code1",className:"p-5",children:(0,l.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(e.pre,{"data-language":"jsx","data-theme":"default",children:(0,l.jsxs)(e.code,{"data-language":"jsx","data-theme":"default",children:[(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"*"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"as"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" React "}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"react"'})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" { Button, Card, TextInput, Label, Sheet, Tabs } "}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"@xbeshui/core"'})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"function"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#D2A8FF"},children:"XbTabs"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:"() {"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"return"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:"("})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"Tabs"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"defaultValue"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"account"'}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"className"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"w-[400px]"'}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"Tabs.TabsList"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"variant"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"={"}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"pill"'}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"}"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"className"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"grid w-full grid-cols-2"'}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"Tabs.TabsTrigger"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"variant"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"={"}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"pill"'}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"}"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"value"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"account"'}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" Account"})}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"Tabs.TabsTrigger"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"variant"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"={"}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"pill"'}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"}"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"value"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"password"'}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" Password"})}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"Tabs.TabsContent"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"value"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"account"'}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"Card"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"className"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"p-4"'}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"Card.Header"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"Card.Title"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"className"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"text-2xl"'}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:">Account"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"Card.Description"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" Make changes to your account here. Click save when you're"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" done."})}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"Card.Content"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"className"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"space-y-2"'}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"div"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"className"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"space-y-1"'}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"Label"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"htmlFor"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"name"'}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:">Name"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"TextInput"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"id"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"name"'}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"defaultValue"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"Pedro Duarte"'}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" />"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"div"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"className"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"space-y-1"'}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"Label"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"htmlFor"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"username"'}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:">Username"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"TextInput"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"id"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"username"'}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"defaultValue"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"@peduarte"'}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" />"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"Card.Footer"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"className"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"mt-3"'}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"Button"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:">Save changes"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"Tabs.TabsContent"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"value"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"password"'}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"Card"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"className"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"p-4"'}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"Card.Header"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"Card.Title"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"className"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"text-2xl"'}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:">Password"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"Card.Description"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" Change your password here. After saving, you'll be logged out."})}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"Card.Content"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"className"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"space-y-2"'}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"div"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"className"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"space-y-1"'}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"Label"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"htmlFor"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"current"'}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:">Current password"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"TextInput"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"id"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"current"'}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"type"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"password"'}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" />"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"div"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"className"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"space-y-1"'}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"Label"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"htmlFor"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"new"'}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:">New password"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"TextInput"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"id"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"new"'}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"type"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"password"'}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" />"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"Card.Footer"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"className"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"mt-3"'}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"Button"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:">Save password"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" );"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" }"})})]})})})}),(0,l.jsx)(n.TabsContent,{value:"preview1",children:(0,l.jsx)("div",{className:"flex justify-center p-10",children:(0,l.jsxs)(n,{defaultValue:"account",className:"w-[400px]",children:[(0,l.jsxs)(n.TabsList,{variant:"pill",className:"grid w-full grid-cols-2",children:[(0,l.jsx)(n.TabsTrigger,{variant:"pill",value:"account",children:(0,l.jsx)(e.p,{children:"Account"})}),(0,l.jsx)(n.TabsTrigger,{variant:"pill",value:"password",children:(0,l.jsx)(e.p,{children:"Password"})})]}),(0,l.jsx)(n.TabsContent,{value:"account",children:(0,l.jsxs)(s,{className:"p-4",children:[(0,l.jsxs)(s.Header,{children:[(0,l.jsx)(s.Title,{className:"text-2xl",children:"Account"}),(0,l.jsx)(s.Description,{children:(0,l.jsx)(e.p,{children:`Make changes to your account here. Click save when you're done.`})})]}),(0,l.jsxs)(s.Content,{className:"space-y-2",children:[(0,l.jsxs)("div",{className:"space-y-1",children:[(0,l.jsx)(a,{htmlFor:"name",children:"Name"}),(0,l.jsx)(o,{id:"name",defaultValue:"Pedro Duarte"})]}),(0,l.jsxs)("div",{className:"space-y-1",children:[(0,l.jsx)(a,{htmlFor:"username",children:"Username"}),(0,l.jsx)(o,{id:"username",defaultValue:"@peduarte"})]})]}),(0,l.jsx)(s.Footer,{className:"mt-3",children:(0,l.jsx)(d,{children:"Save changes"})})]})}),(0,l.jsx)(n.TabsContent,{value:"password",children:(0,l.jsxs)(s,{className:"p-4",children:[(0,l.jsxs)(s.Header,{children:[(0,l.jsx)(s.Title,{className:"text-2xl",children:"Password"}),(0,l.jsx)(s.Description,{children:(0,l.jsx)(e.p,{children:"Change your password here. After saving, you'll be logged out."})})]}),(0,l.jsxs)(s.Content,{className:"space-y-2",children:[(0,l.jsxs)("div",{className:"space-y-1",children:[(0,l.jsx)(a,{htmlFor:"current",children:"Current password"}),(0,l.jsx)(o,{id:"current",type:"password"})]}),(0,l.jsxs)("div",{className:"space-y-1",children:[(0,l.jsx)(a,{htmlFor:"new",children:"New password"}),(0,l.jsx)(o,{id:"new",type:"password"})]})]}),(0,l.jsx)(s.Footer,{className:"mt-3",children:(0,l.jsx)(d,{children:"Save password"})})]})})]})})})]})]}),(0,l.jsxs)(n.TabsContent,{value:"props",children:[(0,l.jsxs)(e.h3,{id:"tabs-component-props",children:[(0,l.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#tabs-component-props",children:(0,l.jsx)(e.span,{className:"icon icon-link"})}),"Tabs Component Props"]}),(0,l.jsxs)(e.table,{children:[(0,l.jsx)(e.thead,{children:(0,l.jsxs)(e.tr,{children:[(0,l.jsx)(e.th,{children:"Name"}),(0,l.jsx)(e.th,{children:"Type"}),(0,l.jsx)(e.th,{children:"Description"})]})}),(0,l.jsxs)(e.tbody,{children:[(0,l.jsxs)(e.tr,{children:[(0,l.jsx)(e.td,{children:"variant"}),(0,l.jsx)(e.td,{children:"default, outline, pill, underline"}),(0,l.jsx)(e.td,{children:"Different visual styles or appearances of the component."})]}),(0,l.jsxs)(e.tr,{children:[(0,l.jsx)(e.td,{children:"radius"}),(0,l.jsx)(e.td,{children:"default, xs, sm, md, lg, xl"}),(0,l.jsx)(e.td,{children:"The radius prop specifies the border radius of the component, determining the roundness of its corners. Accepts values such as 'default', 'sm', 'md', 'lg', 'xl', 'xxl', 'full'."})]}),(0,l.jsxs)(e.tr,{children:[(0,l.jsx)(e.td,{children:"orientation"}),(0,l.jsx)(e.td,{children:"default, horizontal, vertical"}),(0,l.jsx)(e.td,{children:"Orientation of the tabs, defaulted to 'horizontal'."})]}),(0,l.jsxs)(e.tr,{children:[(0,l.jsx)(e.td,{children:"size"}),(0,l.jsx)(e.td,{children:"default, xs, sm, md, lg, xl"}),(0,l.jsx)(e.td,{children:"Adjusts the dimensions of the component, converting numerical values to relative units of measurement. Defaults to 'md' size."})]}),(0,l.jsxs)(e.tr,{children:[(0,l.jsx)(e.td,{children:"defaultVariants"}),(0,l.jsx)(e.td,{children:"variant, radius, orientation, size"}),(0,l.jsx)(e.td,{children:"The DefaultVariants component allows for the definition of default styles and variants for UI elements, ensuring consistent design patterns and ease of customization."})]})]})]})]})]})}function v(r={}){let{wrapper:e}=r.components||{};return e?(0,l.jsx)(e,Object.assign({},r,{children:(0,l.jsx)(y,r)})):y(r)}var A=v;function c(r,e){throw new Error("Expected "+(e?"component":"object")+" `"+r+"` to be defined: you likely forgot to import, pass, or provide it.")}return B(f);})(); ;return Component;