Radix Primitives

An open-source UI component library.

Blog

Docs

Source

) } `,__src__:"registry/default/example/separator-demo.tsx",children:(0,n.jsxs)(e.code,{"data-language":"tsx","data-theme":"default",children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" {"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" Separator "}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"}"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" from"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:' "@/components/ui/separator"'})]}),` `,(0,n.jsx)(e.span,{className:"line",children:" "}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" function"}),(0,n.jsx)(e.span,{style:{color:"#FFF",fontWeight:"bold"},children:" SeparatorDemo"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"()"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" ("})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"div className"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:'"space-y-1"'}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"h4 className"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:'"text-sm font-medium leading-none"'}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:">"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"Radix Primitives"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"p className"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:'"text-sm text-primary"'}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" An open-source UI component library."})}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"Separator className"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:'"my-4"'}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" />"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"div className"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:'"flex h-5 items-center space-x-4 text-sm"'}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:">"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"Blog"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"Separator orientation"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:'"vertical"'}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" />"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:">"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"Docs"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"Separator orientation"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:'"vertical"'}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" />"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:">"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"Source"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" )"})}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"}"})})]})})})}),` `,(0,n.jsxs)(e.h2,{id:"installation",children:[(0,n.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#installation",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"Installation"]}),` `,(0,n.jsxs)(d,{defaultValue:"cli",children:[(0,n.jsxs)(p,{className:"w-min justify-start rounded-full border-2 bg-popover p-1",children:[(0,n.jsx)(F,{className:"relative rounded-full bg-transparent px-4 py-1 font-semibold text-primary shadow-none transition-none data-[state=active]:text-background data-[state=active]:shadow-none !h-min",value:"cli",children:"CLI"}),(0,n.jsx)(F,{className:"relative rounded-full bg-transparent px-4 py-1 font-semibold text-primary shadow-none transition-none data-[state=active]:text-background data-[state=active]:shadow-none !h-min",value:"manual",children:"Manual"})]}),(0,n.jsx)(t,{value:"cli",children:(0,n.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(e.pre,{"data-language":"bash","data-theme":"default",__rawString__:`npx @pujan-modha/pm-ui add separator `,__npmCommand__:`npx @pujan-modha/pm-ui add separator `,__yarnCommand__:`npx @pujan-modha/pm-ui add separator `,__pnpmCommand__:`pnpm dlx @pujan-modha/pm-ui add separator `,__bunCommand__:`bunx --bun @pujan-modha/pm-ui add separator `,children:(0,n.jsx)(e.code,{"data-language":"bash","data-theme":"default",children:(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF",fontWeight:"bold"},children:"npx"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" @pujan-modha/pm-ui"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" add"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" separator"})]})})})})}),(0,n.jsx)(t,{value:"manual",children:(0,n.jsxs)(i,{children:[(0,n.jsx)(a,{children:"Install the following dependencies:"}),(0,n.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(e.pre,{"data-language":"bash","data-theme":"default",__rawString__:`npm install @radix-ui/react-separator `,__npmCommand__:`npm install @radix-ui/react-separator `,__yarnCommand__:`yarn add @radix-ui/react-separator `,__pnpmCommand__:`pnpm add @radix-ui/react-separator `,__bunCommand__:`bun add @radix-ui/react-separator `,children:(0,n.jsx)(e.code,{"data-language":"bash","data-theme":"default",children:(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF",fontWeight:"bold"},children:"npm"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" install"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" @radix-ui/react-separator"})]})})})}),(0,n.jsx)(a,{children:"Copy and paste the following code into your project."}),(0,n.jsx)(o,{name:"separator",children:(0,n.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(e.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`"use client" import * as React from "react" import * as SeparatorPrimitive from "@radix-ui/react-separator" import { cn } from "@/lib/utils" const Separator = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >( ( { className, orientation = "horizontal", decorative = true, ...props }, ref ) => ( ) ) Separator.displayName = SeparatorPrimitive.Root.displayName export { Separator } `,__src__:"registry/default/ui/separator.tsx",__style__:"default",children:(0,n.jsxs)(e.code,{"data-language":"tsx","data-theme":"default",children:[(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:'"use client"'})}),` `,(0,n.jsx)(e.span,{className:"line",children:" "}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" *"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" as"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" React "}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:' "react"'})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" *"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" as"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" SeparatorPrimitive "}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:' "@radix-ui/react-separator"'})]}),` `,(0,n.jsx)(e.span,{className:"line",children:" "}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" {"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" cn "}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"}"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" from"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:' "@/lib/utils"'})]}),` `,(0,n.jsx)(e.span,{className:"line",children:" "}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"const"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" Separator "}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" React"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"forwardRef"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"<"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" React"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"ElementRef"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" React"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"ComponentPropsWithoutRef"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:">("})}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" ("})}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" {"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:","}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" orientation "}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:' "horizontal"'}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:","}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" decorative "}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" true,"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" ..."}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"props "}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"},"})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" ref"})}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" )"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" =>"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" ("})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"SeparatorPrimitive.Root"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" ref"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"={"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"ref"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" decorative"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"={"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"decorative"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" orientation"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"={"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"orientation"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"={"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"cn"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"("})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:' "shrink-0 bg-primary"'}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" orientation "}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"==="}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:' "horizontal"'}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" ?"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:' "h-[1px] w-full"'}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" :"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:' "h-full w-[1px]"'}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" className"})}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" )}"})}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" {..."}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"props"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" />"})}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" )"})}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:")"})}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"Separator"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"displayName "}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" SeparatorPrimitive"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"Root"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"displayName"})]}),` `,(0,n.jsx)(e.span,{className:"line",children:" "}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" {"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" Separator "}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"}"})]})]})})})}),(0,n.jsx)(a,{children:"Update the import paths to match your project setup."})]})})]}),` `,(0,n.jsxs)(e.h2,{id:"usage",children:[(0,n.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#usage",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"Usage"]}),` `,(0,n.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(e.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { Separator } from "@/components/ui/separator" `,children:(0,n.jsx)(e.code,{"data-language":"tsx","data-theme":"default",children:(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" {"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" Separator "}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"}"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" from"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:' "@/components/ui/separator"'})]})})})}),` `,(0,n.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(e.pre,{"data-language":"tsx","data-theme":"default",__rawString__:` `,children:(0,n.jsx)(e.code,{"data-language":"tsx","data-theme":"default",children:(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"Separator "}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"/>"})]})})})})]})}function f(l={}){let{wrapper:e}=l.components||{};return e?(0,n.jsx)(e,{...l,children:(0,n.jsx)(u,{...l})}):u(l)}function s(l,e){throw new Error("Expected "+(e?"component":"object")+" `"+l+"` to be defined: you likely forgot to import, pass, or provide it.")}return R(P);})(); ;return Component;