) } `,__src__:"registry/new-york/examples/designer-marks-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:"#F97583"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { DesignerMarks } "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "@/components/prodkt/designer-marks"'})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { Button } "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/button"'})]}),` `,(0,n.jsx)(e.span,{className:"line",children:" "}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" function"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" DesignerMarksDemo"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"() {"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"relative"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"DesignerMarks"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"Button"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:">Designer Marks"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})})]})})}),(0,n.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(e.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { DesignerMarks } from "@/components/prodkt/designer-marks" import { Button } from "@/components/ui/button" export function DesignerMarksDemo() { return (

) } `,__src__:"registry/default/examples/designer-marks-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:"#F97583"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { DesignerMarks } "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "@/components/prodkt/designer-marks"'})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { Button } "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/button"'})]}),` `,(0,n.jsx)(e.span,{className:"line",children:" "}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" function"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" DesignerMarksDemo"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"() {"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"relative"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"DesignerMarks"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"Button"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:">Designer Marks"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},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)(p,{defaultValue:"cli",children:[(0,n.jsxs)(h,{children:[(0,n.jsx)(i,{value:"cli",children:"CLI"}),(0,n.jsx)(i,{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 sparkstack@latest add designer-marks `,__npmCommand__:`npx sparkstack@latest add designer-marks `,__yarnCommand__:`npx sparkstack@latest add designer-marks `,__pnpmCommand__:`pnpm dlx sparkstack@latest add designer-marks `,__bunCommand__:`bunx --bun sparkstack@latest add designer-marks `,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:"#B392F0"},children:"npx"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" sparkstack@latest"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" add"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" designer-marks"})]})})})})}),(0,n.jsx)(t,{value:"manual",children:(0,n.jsxs)(d,{children:[(0,n.jsx)(r,{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 react-use `,__npmCommand__:`npm install react-use `,__yarnCommand__:`yarn add react-use `,__pnpmCommand__:`pnpm add react-use `,__bunCommand__:`bun add react-use `,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:"#B392F0"},children:"npm"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" install"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" react-use"})]})})})}),(0,n.jsx)(r,{children:"Copy and paste the following code into your project."}),(0,n.jsxs)(o,{name:"designer-marks",children:[(0,n.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(e.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import React from "react" /** * * @param root0 * @param root0.hideRight */ const DesignerMarks = React.forwardRef< HTMLDivElement, React.HTMLAttributes & { hideRight?: boolean hideMiddle?: boolean hideLeft?: boolean children?: React.ReactNode } >(({ hideLeft, hideMiddle, hideRight, children, ...props }, ref) => ( <>

{hideMiddle ? ( "" ) : ( <>

)} {hideLeft ? ( "" ) : (

)} {hideRight ? ( "" ) : (

)}

{hideRight ? ( "" ) : ( <>

)}

{hideRight ? ( "" ) : ( <>

)}

{children} )) DesignerMarks.displayName = "DesignerMarks" export { DesignerMarks } `,__src__:"registry/new-york/prodkt/designer-marks.tsx",__style__:"new-york",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:"#F97583"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" React "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "react"'})]}),` `,(0,n.jsx)(e.span,{className:"line",children:" "}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#6A737D"},children:"/**"})}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#6A737D"},children:" *"})}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#6A737D"},children:" * "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"@param"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" root0"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#6A737D"},children:" * "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"@param"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" root0.hideRight"})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#6A737D"},children:" */"})}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"const"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:" DesignerMarks"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" React.forwardRef"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"<"})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" HTMLDivElement,"})}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" React.HTMLAttributes"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"HTMLDivElement"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:">"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" &"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" hideRight"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"?:"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" boolean"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" hideMiddle"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"?:"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" boolean"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" hideLeft"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"?:"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" boolean"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" children"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"?:"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" React.ReactNode"})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:">"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(({ "}),(0,n.jsx)(e.span,{style:{color:"#FFAB70"},children:"hideLeft"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:", "}),(0,n.jsx)(e.span,{style:{color:"#FFAB70"},children:"hideMiddle"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:", "}),(0,n.jsx)(e.span,{style:{color:"#FFAB70"},children:"hideRight"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:", "}),(0,n.jsx)(e.span,{style:{color:"#FFAB70"},children:"children"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:", "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"..."}),(0,n.jsx)(e.span,{style:{color:"#FFAB70"},children:"props"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }, "}),(0,n.jsx)(e.span,{style:{color:"#FFAB70"},children:"ref"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:") "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <>"})}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" ref"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{ref} "}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"className"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"absolute inset-0 m-0 size-full"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"..."}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"props}>"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"relative z-[0] size-full"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {hideMiddle "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"?"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:' ""'})}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ) "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <>"})}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"absolute inset-x-1/2 -top-1/2 z-[-1] mx-auto mb-auto mt-0 hidden h-[200%] w-px max-w-px rounded-none bg-gradient-to-b from-[var(--gray-a1)] via-[var(--gray-a3)] to-[var(--gray-a1)]"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"absolute -top-1/2 left-1/3 z-[-1] mx-auto mb-auto mt-0 h-[200%] w-px max-w-px rounded-none bg-gradient-to-b from-[var(--gray-a1)] via-[var(--gray-a3)] to-[var(--gray-a1)]"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"absolute -top-1/2 right-1/3 z-[-1] mx-auto mb-auto mt-0 h-[200%] w-px max-w-px rounded-none bg-gradient-to-b from-[var(--gray-a1)] via-[var(--gray-a3)] to-[var(--gray-a1)]"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" )}"})}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {hideLeft "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"?"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:' ""'})}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ) "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"absolute -left-0 -top-1/2 z-[-1] mb-auto mt-0 h-[200%] w-px max-w-px rounded-none bg-gradient-to-b from-[var(--gray-a1)] via-[var(--gray-a3)] to-[var(--gray-a1)]"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" )}"})}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {hideRight "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"?"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:' ""'})}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ) "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"absolute -right-0 -top-1/2 z-[-1] mb-auto mt-0 h-[200%] w-px max-w-px rounded-none bg-gradient-to-b from-[var(--gray-a1)] via-[var(--gray-a3)] to-[var(--gray-a1)]"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" )}"})}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"absolute -left-0 -top-10 bottom-auto z-[-1] mb-auto mt-0 h-20 w-px max-w-px rounded-none bg-gradient-to-b from-[var(--gray-a1)] via-[var(--gray-a3)] to-[var(--gray-a1)]"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"absolute -left-10 -top-0 bottom-auto z-[-1] mb-auto mt-0 h-px max-h-px w-20 rounded-none bg-gradient-to-r from-[var(--gray-a1)] via-[var(--gray-a3)] to-[var(--gray-a1)]"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {hideRight "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"?"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:' ""'})}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ) "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <>"})}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"absolute -right-0 -top-10 bottom-auto z-[-1] mb-auto mt-0 h-20 w-px max-w-px rounded-none bg-gradient-to-b from-[var(--gray-a1)] via-[var(--gray-a3)] to-[var(--gray-a1)]"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"absolute -right-10 -top-0 bottom-auto z-[-1] mb-auto mt-0 h-px max-h-px w-20 rounded-none bg-gradient-to-r from-[var(--gray-a1)] via-[var(--gray-a3)] to-[var(--gray-a1)]"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" )}"})}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"absolute -bottom-10 -left-0 top-auto z-[-1] mb-auto mt-0 h-20 w-px max-w-px rounded-none bg-gradient-to-b from-[var(--gray-a1)] via-[var(--gray-a3)] to-[var(--gray-a1)]"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"absolute -bottom-0 -left-10 top-auto z-[-1] mb-auto mt-0 h-px max-h-px w-20 rounded-none bg-gradient-to-r from-[var(--gray-a1)] via-[var(--gray-a3)] to-[var(--gray-a1)]"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,n.jsx)(e.span,{className:"line",children:" "}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"absolute -bottom-10 -right-0 top-auto z-[-1] mb-auto mt-0 h-20 w-px max-w-px rounded-none bg-gradient-to-b from-[var(--gray-a1)] via-[var(--gray-a3)] to-[var(--gray-a1)]"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"absolute -bottom-0 -right-10 top-auto z-[-1] mb-auto mt-0 h-px max-h-px w-20 rounded-none bg-gradient-to-r from-[var(--gray-a1)] via-[var(--gray-a3)] to-[var(--gray-a1)]"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,n.jsx)(e.span,{className:"line",children:" "}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"absolute -left-1 -top-1 bottom-auto z-[1] mb-auto mt-0 size-2 rounded-none border border-ghost-aa7 bg-ghost-a7"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {hideRight "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"?"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:' ""'})}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ) "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <>"})}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"absolute -right-1 -top-1 bottom-auto z-[1] mb-auto mt-0 size-2 rounded-none border border-ghost-aa7 bg-ghost-a7"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"absolute -bottom-1 -right-1 top-auto z-[1] my-0 size-2 rounded-none border border-ghost-aa7 bg-ghost-a7"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" )}"})}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"absolute -bottom-1 -left-1 top-auto z-[1] my-0 size-2 rounded-none border border-ghost-aa7 bg-ghost-a7"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {children}"})}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"))"})}),` `,(0,n.jsx)(e.span,{className:"line",children:" "}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"DesignerMarks.displayName "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "DesignerMarks"'})]}),` `,(0,n.jsx)(e.span,{className:"line",children:" "}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { DesignerMarks }"})]})]})})}),(0,n.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(e.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import React from "react" /** * * @param root0 * @param root0.hideRight */ const DesignerMarks = React.forwardRef< HTMLDivElement, React.HTMLAttributes & { hideRight?: boolean hideMiddle?: boolean hideLeft?: boolean children?: React.ReactNode } >(({ hideLeft, hideMiddle, hideRight, children, ...props }, ref) => ( <>

{hideMiddle ? ( "" ) : ( <>

)} {hideLeft ? ( "" ) : (

)} {hideRight ? ( "" ) : (

)}

{hideRight ? ( "" ) : ( <>

)}

{hideRight ? ( "" ) : ( <>

)}

{children} )) DesignerMarks.displayName = "DesignerMarks" export { DesignerMarks } `,__src__:"registry/default/prodkt/designer-marks.tsx",__style__:"default",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:"#F97583"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" React "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "react"'})]}),` `,(0,n.jsx)(e.span,{className:"line",children:" "}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#6A737D"},children:"/**"})}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#6A737D"},children:" *"})}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#6A737D"},children:" * "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"@param"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" root0"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#6A737D"},children:" * "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"@param"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" root0.hideRight"})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#6A737D"},children:" */"})}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"const"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:" DesignerMarks"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" React.forwardRef"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"<"})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" HTMLDivElement,"})}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" React.HTMLAttributes"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"HTMLDivElement"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:">"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" &"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" hideRight"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"?:"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" boolean"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" hideMiddle"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"?:"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" boolean"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" hideLeft"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"?:"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" boolean"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" children"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"?:"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" React.ReactNode"})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:">"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(({ "}),(0,n.jsx)(e.span,{style:{color:"#FFAB70"},children:"hideLeft"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:", "}),(0,n.jsx)(e.span,{style:{color:"#FFAB70"},children:"hideMiddle"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:", "}),(0,n.jsx)(e.span,{style:{color:"#FFAB70"},children:"hideRight"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:", "}),(0,n.jsx)(e.span,{style:{color:"#FFAB70"},children:"children"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:", "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"..."}),(0,n.jsx)(e.span,{style:{color:"#FFAB70"},children:"props"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }, "}),(0,n.jsx)(e.span,{style:{color:"#FFAB70"},children:"ref"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:") "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <>"})}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" ref"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{ref} "}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"className"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"absolute inset-0 m-0 size-full"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"..."}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"props}>"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"relative z-0 size-full"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {hideMiddle "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"?"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:' ""'})}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ) "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <>"})}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"absolute inset-x-1/2 -top-1/2 z-[-1] mx-auto mb-auto mt-0 hidden h-[200%] w-px max-w-px rounded-none bg-gradient-to-b from-[var(--gray-a1)] via-[var(--gray-a3)] to-[var(--gray-a1)]"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"absolute -top-1/2 left-1/3 z-[-1] mx-auto mb-auto mt-0 h-[200%] w-px max-w-px rounded-none bg-gradient-to-b from-[var(--gray-a1)] via-[var(--gray-a3)] to-[var(--gray-a1)]"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"absolute -top-1/2 right-1/3 z-[-1] mx-auto mb-auto mt-0 h-[200%] w-px max-w-px rounded-none bg-gradient-to-b from-[var(--gray-a1)] via-[var(--gray-a3)] to-[var(--gray-a1)]"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" )}"})}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {hideLeft "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"?"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:' ""'})}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ) "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"absolute -left-0 -top-1/2 z-[-1] mb-auto mt-0 h-[200%] w-px max-w-px rounded-none bg-gradient-to-b from-[var(--gray-a1)] via-[var(--gray-a3)] to-[var(--gray-a1)]"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" )}"})}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {hideRight "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"?"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:' ""'})}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ) "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"absolute -right-0 -top-1/2 z-[-1] mb-auto mt-0 h-[200%] w-px max-w-px rounded-none bg-gradient-to-b from-[var(--gray-a1)] via-[var(--gray-a3)] to-[var(--gray-a1)]"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" )}"})}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"absolute -left-0 -top-10 bottom-auto z-[-1] mb-auto mt-0 h-20 w-px max-w-px rounded-none bg-gradient-to-b from-[var(--gray-a1)] via-[var(--gray-a3)] to-[var(--gray-a1)]"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"absolute -left-10 -top-0 bottom-auto z-[-1] mb-auto mt-0 h-px max-h-px w-20 rounded-none bg-gradient-to-r from-[var(--gray-a1)] via-[var(--gray-a3)] to-[var(--gray-a1)]"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {hideRight "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"?"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:' ""'})}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ) "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <>"})}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"absolute -right-0 -top-10 bottom-auto z-[-1] mb-auto mt-0 h-20 w-px max-w-px rounded-none bg-gradient-to-b from-[var(--gray-a1)] via-[var(--gray-a3)] to-[var(--gray-a1)]"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"absolute -right-10 -top-0 bottom-auto z-[-1] mb-auto mt-0 h-px max-h-px w-20 rounded-none bg-gradient-to-r from-[var(--gray-a1)] via-[var(--gray-a3)] to-[var(--gray-a1)]"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" )}"})}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"absolute -bottom-10 -left-0 top-auto z-[-1] mb-auto mt-0 h-20 w-px max-w-px rounded-none bg-gradient-to-b from-[var(--gray-a1)] via-[var(--gray-a3)] to-[var(--gray-a1)]"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"absolute -bottom-0 -left-10 top-auto z-[-1] mb-auto mt-0 h-px max-h-px w-20 rounded-none bg-gradient-to-r from-[var(--gray-a1)] via-[var(--gray-a3)] to-[var(--gray-a1)]"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,n.jsx)(e.span,{className:"line",children:" "}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"absolute -bottom-10 -right-0 top-auto z-[-1] mb-auto mt-0 h-20 w-px max-w-px rounded-none bg-gradient-to-b from-[var(--gray-a1)] via-[var(--gray-a3)] to-[var(--gray-a1)]"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"absolute -bottom-0 -right-10 top-auto z-[-1] mb-auto mt-0 h-px max-h-px w-20 rounded-none bg-gradient-to-r from-[var(--gray-a1)] via-[var(--gray-a3)] to-[var(--gray-a1)]"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,n.jsx)(e.span,{className:"line",children:" "}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"absolute -left-1 -top-1 bottom-auto z-[1] mb-auto mt-0 size-2 rounded-none border border-ghost-a7 bg-ghost-aa7"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {hideRight "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"?"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:' ""'})}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ) "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <>"})}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"absolute -right-1 -top-1 bottom-auto z-[1] mb-auto mt-0 size-2 rounded-none border border-ghost-a7 bg-ghost-aa7"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"absolute -bottom-1 -right-1 top-auto z-[1] my-0 size-2 rounded-none border border-ghost-a7 bg-ghost-aa7"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" )}"})}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"absolute -bottom-1 -left-1 top-auto z-[1] my-0 size-2 rounded-none border border-ghost-a7 bg-ghost-aa7"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {children}"})}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"))"})}),` `,(0,n.jsx)(e.span,{className:"line",children:" "}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"DesignerMarks.displayName "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "DesignerMarks"'})]}),` `,(0,n.jsx)(e.span,{className:"line",children:" "}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { DesignerMarks }"})]})]})})})]}),(0,n.jsx)(r,{children:"Update the import paths to match your project setup."}),(0,n.jsxs)(r,{children:["Update ",(0,n.jsx)(e.code,{children:"tailwind.config.js"})]}),(0,n.jsxs)(e.p,{children:["Add the following animations to your ",(0,n.jsx)(e.code,{children:"tailwind.config.js"})," file:"]}),(0,n.jsxs)(e.div,{"data-rehype-pretty-code-fragment":"",children:[(0,n.jsx)(e.div,{"data-rehype-pretty-code-title":"","data-language":"js","data-theme":"default",children:"tailwind.config.js"}),(0,n.jsx)(e.pre,{"data-language":"js","data-theme":"default",__withMeta__:!0,__rawString__:`/** @type {import('tailwindcss').Config} */ module.exports = { theme: { extend: {}, }, } `,children:(0,n.jsxs)(e.code,{"data-language":"js","data-theme":"default",children:[(0,n.jsxs)(e.span,{className:"line line--highlighted",children:[(0,n.jsx)(e.span,{style:{color:"#6A737D"},children:"/** "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"@type"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" {import('tailwindcss').Config}"}),(0,n.jsx)(e.span,{style:{color:"#6A737D"},children:" */"})]}),` `,(0,n.jsxs)(e.span,{className:"line line--highlighted",children:[(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"module"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"."}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"exports"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" theme: {"})}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" extend: {},"})}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})})]})})]})]})})]}),` `,(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 { DesignerMarks } from "@/components/ui/designer-marks" `,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:"#F97583"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { DesignerMarks } "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/designer-marks"'})]})})})}),` `,(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:"#E1E4E8"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"DesignerMarks"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]})})})})]})}function u(l={}){let{wrapper:e}=l.components||{};return e?(0,n.jsx)(e,{...l,children:(0,n.jsx)(g,{...l})}):g(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 D(z);})(); ;return Component;