var Component=(()=>{var p=Object.create;var i=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var E=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var m=(e,n)=>()=>(n||e((n={exports:{}}).exports,n),n.exports),C=(e,n)=>{for(var c in n)i(e,c,{get:n[c],enumerable:!0})},s=(e,n,c,o)=>{if(n&&typeof n=="object"||typeof n=="function")for(let r of y(n))!f.call(e,r)&&r!==c&&i(e,r,{get:()=>n[r],enumerable:!(o=h(n,r))||o.enumerable});return e};var A=(e,n,c)=>(c=e!=null?p(E(e)):{},s(n||!e||!e.__esModule?i(c,"default",{value:e,enumerable:!0}):c,e)),u=e=>s(i({},"__esModule",{value:!0}),e);var d=m((v,a)=>{a.exports=_jsx_runtime});var I={};C(I,{default:()=>D,frontmatter:()=>S});var l=A(d()),S={title:"Accordion",description:"This collapsible component let's your users read only the content they care about. \u{1F60C}",lastUpdated:"19 Oct, 2024",links:{api_reference:"https://www.radix-ui.com/primitives/docs/components/accordion#api-reference",source:"https://github.com/Logging-Stuff/RetroUI/blob/main/components/ui/Accordions/Accordion.tsx"}};function F(e){let n=Object.assign({figure:"figure",pre:"pre",code:"code",span:"span",h2:"h2",h4:"h4",h3:"h3"},e.components),{ComponentShowcase:c,ComponentInstall:o,ComponentSource:r}=n;return o||t("ComponentInstall",!0),o.Cli||t("ComponentInstall.Cli",!0),o.Manual||t("ComponentInstall.Manual",!0),c||t("ComponentShowcase",!0),r||t("ComponentSource",!0),(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(c,{name:"accordion-style-default",children:(0,l.jsx)(n.figure,{__src__:"preview/components/accordion-style-default.tsx",__rawString__:`"use client"; import { Accordion } from "@/components/ui"; export default function AccordionStyleDefault() { return ( Accordion Item 1 This is the content of the first accordion item. Accordion Item 2 This is the content of the second accordion item. Accordion Item 3 This is the content of the third accordion item. ); } `,"data-rehype-pretty-code-figure":"",children:(0,l.jsx)(n.pre,{style:{backgroundColor:"#282A36",color:"#f6f6f4"},tabIndex:"0","data-language":"tsx","data-theme":"dracula-soft",children:(0,l.jsxs)(n.code,{"data-language":"tsx","data-theme":"dracula-soft",style:{display:"grid"},children:[(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"use client"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" { Accordion } "}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"@/components/ui"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"export"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:" default"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:" function"}),(0,l.jsx)(n.span,{style:{color:"#62E884"},children:" AccordionStyleDefault"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"() {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:" return"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Accordion"}),(0,l.jsx)(n.span,{style:{color:"#62E884",fontStyle:"italic"},children:" type"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"single"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#62E884",fontStyle:"italic"},children:" collapsible"}),(0,l.jsx)(n.span,{style:{color:"#62E884",fontStyle:"italic"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"space-y-4"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Accordion.Item"}),(0,l.jsx)(n.span,{style:{color:"#62E884",fontStyle:"italic"},children:" value"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"item-1"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Accordion.Header"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">Accordion Item 1"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Accordion.Content"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" This is the content of the first accordion item."})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Accordion.Item"}),(0,l.jsx)(n.span,{style:{color:"#62E884",fontStyle:"italic"},children:" value"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"item-2"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Accordion.Header"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">Accordion Item 2"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Accordion.Content"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" This is the content of the second accordion item."})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Accordion.Item"}),(0,l.jsx)(n.span,{style:{color:"#62E884",fontStyle:"italic"},children:" value"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"item-3"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Accordion.Header"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">Accordion Item 3"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Accordion.Content"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" This is the content of the third accordion item."})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" );"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"}"})})]})})})}),` `,(0,l.jsx)("br",{}),` `,(0,l.jsx)("br",{}),` `,(0,l.jsx)(n.h2,{id:"installation",children:"Installation"}),` `,(0,l.jsxs)(o,{children:[(0,l.jsx)(o.Cli,{children:(0,l.jsx)(n.figure,{"data-rehype-pretty-code-figure":"",children:(0,l.jsx)(n.pre,{style:{backgroundColor:"#282A36",color:"#f6f6f4"},tabIndex:"0","data-language":"sh","data-theme":"dracula-soft",children:(0,l.jsx)(n.code,{"data-language":"sh","data-theme":"dracula-soft",style:{display:"grid"},children:(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#62E884"},children:"npx"}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:" shadcn@latest"}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:" add"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"https://retroui.dev/r/accordion.json"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'})]})})})})}),(0,l.jsxs)(o.Manual,{children:[(0,l.jsx)(n.h4,{id:"1-install-dependencies",children:"1. Install dependencies:"}),(0,l.jsx)(n.figure,{"data-rehype-pretty-code-figure":"",children:(0,l.jsx)(n.pre,{style:{backgroundColor:"#282A36",color:"#f6f6f4"},tabIndex:"0","data-language":"sh","data-theme":"dracula-soft",children:(0,l.jsx)(n.code,{"data-language":"sh","data-theme":"dracula-soft",style:{display:"grid"},children:(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#62E884"},children:"npm"}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:" install"}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:" @radix-ui/react-accordion"}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:" lucide-react"})]})})})}),(0,l.jsx)("br",{}),(0,l.jsx)(n.h4,{id:"2-copy-the-code--into-your-project",children:"2. Copy the code \u{1F447} into your project:"}),(0,l.jsx)(r,{name:"accordion",children:(0,l.jsx)(n.figure,{__src__:"/retroui/components/ui/Accordion.tsx","data-rehype-pretty-code-figure":"",children:(0,l.jsx)(n.pre,{style:{backgroundColor:"#282A36",color:"#f6f6f4"},tabIndex:"0","data-language":"tsx","data-theme":"dracula-soft",children:(0,l.jsxs)(n.code,{"data-language":"tsx","data-theme":"dracula-soft",style:{display:"grid"},children:[(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"use client"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#BF9EEE"},children:" *"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:" as"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" React "}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"react"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#BF9EEE"},children:" *"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:" as"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" AccordionPrimitive "}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"@radix-ui/react-accordion"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" { ChevronDown } "}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"lucide-react"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" { cn } "}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"@/lib/utils"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"const"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" Accordion "}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" AccordionPrimitive.Root;"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"const"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" AccordionItem "}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" React.forwardRef"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"<"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" React.ElementRef"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:""}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" React.ComponentPropsWithoutRef"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:""})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:">"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"(({ "}),(0,l.jsx)(n.span,{style:{color:"#FFB86C",fontStyle:"italic"},children:"className"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"..."}),(0,l.jsx)(n.span,{style:{color:"#FFB86C",fontStyle:"italic"},children:"props"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" }, "}),(0,l.jsx)(n.span,{style:{color:"#FFB86C",fontStyle:"italic"},children:"ref"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:") "}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"AccordionPrimitive.Item"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#62E884",fontStyle:"italic"},children:" ref"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"{ref}"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#62E884",fontStyle:"italic"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"{"}),(0,l.jsx)(n.span,{style:{color:"#62E884"},children:"cn"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"("})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"border-2 border-black shadow-md hover:shadow-sm data-[state=open]:shadow-sm transition-all overflow-hidden"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" className"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" )}"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" {"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"..."}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"props}"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" />"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"));"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"AccordionItem.displayName "}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" AccordionPrimitive.Item.displayName;"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"const"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" AccordionHeader "}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" React.forwardRef"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"<"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" React.ElementRef"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:""}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" React.ComponentPropsWithoutRef"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:""})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:">"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"(({ "}),(0,l.jsx)(n.span,{style:{color:"#FFB86C",fontStyle:"italic"},children:"className"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#FFB86C",fontStyle:"italic"},children:"children"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"..."}),(0,l.jsx)(n.span,{style:{color:"#FFB86C",fontStyle:"italic"},children:"props"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" }, "}),(0,l.jsx)(n.span,{style:{color:"#FFB86C",fontStyle:"italic"},children:"ref"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:") "}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"AccordionPrimitive.Header"}),(0,l.jsx)(n.span,{style:{color:"#62E884",fontStyle:"italic"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"flex"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"AccordionPrimitive.Trigger"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#62E884",fontStyle:"italic"},children:" ref"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"{ref}"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#62E884",fontStyle:"italic"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"{"}),(0,l.jsx)(n.span,{style:{color:"#62E884"},children:"cn"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"("})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"flex flex-1 items-start justify-between px-4 py-2 font-head text-black cursor-pointer focus:outline-hidden [&[data-state=open]>svg]:rotate-180"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" className"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" )}"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" {"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"..."}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"props}"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" >"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" {children}"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"ChevronDown"}),(0,l.jsx)(n.span,{style:{color:"#62E884",fontStyle:"italic"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"h-4 w-4 shrink-0 transition-transform duration-200"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" />"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"));"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"AccordionHeader.displayName "}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" AccordionPrimitive.Header.displayName;"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"const"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" AccordionContent "}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" React.forwardRef"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"<"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" React.ElementRef"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:""}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" React.ComponentPropsWithoutRef"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:""})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:">"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"(({ "}),(0,l.jsx)(n.span,{style:{color:"#FFB86C",fontStyle:"italic"},children:"className"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#FFB86C",fontStyle:"italic"},children:"children"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"..."}),(0,l.jsx)(n.span,{style:{color:"#FFB86C",fontStyle:"italic"},children:"props"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" }, "}),(0,l.jsx)(n.span,{style:{color:"#FFB86C",fontStyle:"italic"},children:"ref"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:") "}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"AccordionPrimitive.Content"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#62E884",fontStyle:"italic"},children:" ref"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"{ref}"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#62E884",fontStyle:"italic"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"overflow-hidden px-4 py-2 font-body bg-white text-gray-700 transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" {"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"..."}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"props}"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" >"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"div"}),(0,l.jsx)(n.span,{style:{color:"#62E884",fontStyle:"italic"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"{"}),(0,l.jsx)(n.span,{style:{color:"#62E884"},children:"cn"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"pb-4 pt-0"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:", className)}>{children}"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"));"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"AccordionContent.displayName "}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" AccordionPrimitive.Content.displayName;"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"const"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" AccordionComponent "}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" Object."}),(0,l.jsx)(n.span,{style:{color:"#62E884"},children:"assign"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"(Accordion, {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" Item"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" AccordionItem,"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" Header"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" AccordionHeader,"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" Content"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" AccordionContent,"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"});"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"export"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" { AccordionComponent "}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"as"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" Accordion };"})]})]})})})})]})]}),` `,(0,l.jsx)("br",{}),` `,(0,l.jsx)("br",{}),` `,(0,l.jsx)(n.h2,{id:"examples",children:"Examples"}),` `,(0,l.jsx)(n.h3,{id:"default",children:"Default"}),` `,(0,l.jsx)(c,{name:"accordion-style-default",children:(0,l.jsx)(n.figure,{__src__:"preview/components/accordion-style-default.tsx",__rawString__:`"use client"; import { Accordion } from "@/components/ui"; export default function AccordionStyleDefault() { return ( Accordion Item 1 This is the content of the first accordion item. Accordion Item 2 This is the content of the second accordion item. Accordion Item 3 This is the content of the third accordion item. ); } `,"data-rehype-pretty-code-figure":"",children:(0,l.jsx)(n.pre,{style:{backgroundColor:"#282A36",color:"#f6f6f4"},tabIndex:"0","data-language":"tsx","data-theme":"dracula-soft",children:(0,l.jsxs)(n.code,{"data-language":"tsx","data-theme":"dracula-soft",style:{display:"grid"},children:[(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"use client"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" { Accordion } "}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"@/components/ui"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"export"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:" default"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:" function"}),(0,l.jsx)(n.span,{style:{color:"#62E884"},children:" AccordionStyleDefault"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"() {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:" return"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Accordion"}),(0,l.jsx)(n.span,{style:{color:"#62E884",fontStyle:"italic"},children:" type"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"single"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#62E884",fontStyle:"italic"},children:" collapsible"}),(0,l.jsx)(n.span,{style:{color:"#62E884",fontStyle:"italic"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"space-y-4"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Accordion.Item"}),(0,l.jsx)(n.span,{style:{color:"#62E884",fontStyle:"italic"},children:" value"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"item-1"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Accordion.Header"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">Accordion Item 1"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Accordion.Content"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" This is the content of the first accordion item."})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Accordion.Item"}),(0,l.jsx)(n.span,{style:{color:"#62E884",fontStyle:"italic"},children:" value"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"item-2"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Accordion.Header"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">Accordion Item 2"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Accordion.Content"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" This is the content of the second accordion item."})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Accordion.Item"}),(0,l.jsx)(n.span,{style:{color:"#62E884",fontStyle:"italic"},children:" value"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"item-3"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Accordion.Header"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">Accordion Item 3"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Accordion.Content"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" This is the content of the third accordion item."})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" );"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"}"})})]})})})})]})}function g(e={}){let{wrapper:n}=e.components||{};return n?(0,l.jsx)(n,Object.assign({},e,{children:(0,l.jsx)(F,e)})):F(e)}var D=g;function t(e,n){throw new Error("Expected "+(n?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}return u(I);})(); ;return Component;