Components
Use React components in Markdown using MDX.
var Component=(()=>{var u=Object.create;var c=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var F=(l,n)=>()=>(n||l((n={exports:{}}).exports,n),n.exports),C=(l,n)=>{for(var a in n)c(l,a,{get:n[a],enumerable:!0})},i=(l,n,a,r)=>{if(n&&typeof n=="object"||typeof n=="function")for(let o of y(n))!g.call(l,o)&&o!==a&&c(l,o,{get:()=>n[o],enumerable:!(r=E(n,o))||r.enumerable});return l};var f=(l,n,a)=>(a=l!=null?u(m(l)):{},i(n||!l||!l.__esModule?c(a,"default",{value:l,enumerable:!0}):a,l)),b=l=>i(c({},"__esModule",{value:!0}),l);var d=F((_,s)=>{s.exports=_jsx_runtime});var w={};C(w,{default:()=>p,frontmatter:()=>k});var e=f(d()),k={title:"Components",description:"Use React components in Markdown using MDX."};function t(l){let n={a:"a",code:"code",figcaption:"figcaption",figure:"figure",h2:"h2",h3:"h3",h4:"h4",hr:"hr",p:"p",pre:"pre",span:"span",strong:"strong",...l.components},{Callout:a,Card:r}=n;return a||h("Callout",!0),r||h("Card",!0),(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.p,{children:"The following components are available out of the box for use in Markdown."}), ,(0,e.jsxs)(n.p,{children:["If you'd like to build and add your own custom components, see the ",(0,e.jsx)(n.a,{href:"#custom-components",children:"Custom Components"})," section below."]}), ,(0,e.jsxs)(n.h2,{id:"built-in-components",children:[(0,e.jsx)(n.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#built-in-components",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Built-in Components"]}), ,(0,e.jsxs)(n.h3,{id:"1-callout",children:[(0,e.jsx)(n.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#1-callout",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"1. Callout"]}), ,(0,e.jsx)(n.figure,{"data-rehype-pretty-code-figure":"",children:(0,e.jsx)(n.pre,{tabIndex:"0","data-language":"jsx","data-theme":"github-dark",rawString:<Callout type="default | warning | danger | note | info | success"> This is a default callout. You can embed **Markdown** inside a \callout`.
</Callout>
,children:(0,e.jsxs)(n.code,{"data-language":"jsx","data-theme":"github-dark",style:{display:"grid"},children:[(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"<"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"Callout"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" type"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"default | warning | danger | note | info | success"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),
,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" This is a default callout. You can embed **Markdown** inside a callout."})}),
,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"</"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"Callout"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]})]})})}),
,(0,e.jsx)(a,{children:(0,e.jsxs)(n.p,{children:["This is a default callout. You can embed ",(0,e.jsx)(n.strong,{children:"Markdown"})," inside a ",(0,e.jsx)(n.code,{children:"callout"}),"."]})}),
,(0,e.jsx)(a,{type:"warning",children:(0,e.jsxs)(n.p,{children:["This is a warning callout. It uses the props ",(0,e.jsx)(n.code,{children:'type="warning"'}),"."]})}),
,(0,e.jsx)(a,{type:"danger",children:(0,e.jsxs)(n.p,{children:["This is a danger callout. It uses the props ",(0,e.jsx)(n.code,{children:'type="danger"'}),"."]})}),
,(0,e.jsx)(a,{type:"note",children:(0,e.jsxs)(n.p,{children:["This is a warning callout. It uses the props ",(0,e.jsx)(n.code,{children:'type="note"'}),"."]})}),
,(0,e.jsx)(a,{type:"info",children:(0,e.jsxs)(n.p,{children:["This is a danger callout. It uses the props ",(0,e.jsx)(n.code,{children:'type="info"'}),"."]})}),
,(0,e.jsx)(a,{type:"success",children:(0,e.jsxs)(n.p,{children:["This is a warning callout. It uses the props ",(0,e.jsx)(n.code,{children:'type="success"'}),"."]})}),
,(0,e.jsxs)(n.h3,{id:"2-card",children:[(0,e.jsx)(n.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#2-card",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"2. Card"]}),
,(0,e.jsx)(n.figure,{"data-rehype-pretty-code-figure":"",children:(0,e.jsx)(n.pre,{tabIndex:"0","data-language":"mdx","data-theme":"github-dark",__rawString__:<Card href="#">
Heading
You can use markdown inside cards.
</Card> `,children:(0,e.jsxs)(n.code,{"data-language":"mdx","data-theme":"github-dark",style:{display:"grid"},children:[(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:'<Card href="#">'})}),` `,(0,e.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#79B8FF",fontWeight:"bold"},children:"#### Heading"})}),` `,(0,e.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"You can use "}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:"**"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"markdown"}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:"**"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" inside cards."})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"</Card>"})})]})})}),` `,(0,e.jsxs)(r,{href:"#",children:[(0,e.jsxs)(n.h4,{id:"heading",children:[(0,e.jsx)(n.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#heading",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Heading"]}),(0,e.jsxs)(n.p,{children:["You can use ",(0,e.jsx)(n.strong,{children:"markdown"})," inside cards."]})]}),` `,(0,e.jsx)(n.p,{children:"You can also use HTML to embed cards in a grid."}),` `,(0,e.jsx)(n.figure,{"data-rehype-pretty-code-figure":"",children:(0,e.jsx)(n.pre,{tabIndex:"0","data-language":"mdx","data-theme":"github-dark",__rawString__:`<div className="grid grid-cols-2 gap-4"> <Card href="#"> #### Card One You can use **markdown** inside cards. </Card> <Card href="#"> #### Card Two You can also use \`inline code\` and code blocks. </Card> </div> `,children:(0,e.jsxs)(n.code,{"data-language":"mdx","data-theme":"github-dark",style:{display:"grid"},children:[(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:'<div className="grid grid-cols-2 gap-4">'})}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:' <Card href="#">'})}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" #### Card One "})}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" You can use "}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:"**"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"markdown"}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:"**"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" inside cards."})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" </Card>"})}),` `,(0,e.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:' <Card href="#">'})}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" #### Card Two "})}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" You can also use "}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:"`"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"inline code"}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:"`"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" and code blocks."})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" </Card>"})}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"</div>"})})]})})}),` `,(0,e.jsxs)("div",{className:"grid grid-cols-2 gap-4",children:[(0,e.jsxs)(r,{href:"#",children:[(0,e.jsxs)(n.h4,{id:"card-one",children:[(0,e.jsx)(n.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#card-one",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Card One"]}),(0,e.jsxs)(n.p,{children:["You can use ",(0,e.jsx)(n.strong,{children:"markdown"})," inside cards."]})]}),(0,e.jsxs)(r,{href:"#",children:[(0,e.jsxs)(n.h4,{id:"card-two",children:[(0,e.jsx)(n.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#card-two",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Card Two"]}),(0,e.jsxs)(n.p,{children:["You can also use ",(0,e.jsx)(n.code,{children:"inline code"})," and code blocks."]})]})]}),` `,(0,e.jsx)(n.hr,{}),` `,(0,e.jsxs)(n.h2,{id:"custom-components",children:[(0,e.jsx)(n.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#custom-components",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Custom Components"]}),` `,(0,e.jsxs)(n.p,{children:["You can add your own custom components using the ",(0,e.jsx)(n.code,{children:"components"})," props from ",(0,e.jsx)(n.code,{children:"useMDXComponent"}),"."]}),` `,(0,e.jsxs)(n.figure,{"data-rehype-pretty-code-figure":"",children:[(0,e.jsx)(n.figcaption,{"data-rehype-pretty-code-title":"","data-language":"ts","data-theme":"github-dark",children:"components/mdx.tsx"}),(0,e.jsx)(n.pre,{tabIndex:"0","data-language":"ts","data-theme":"github-dark",__rawString__:`import { Callout } from "@/components/callout" import { CustomComponent } from "@/components/custom"const components = { Callout, CustomComponent, }
export function Mdx({ code }) { const Component = useMDXComponent(code)
return (
<div className="mdx">
<Component components={components} />
</div>
)
}
,children:(0,e.jsxs)(n.code,{"data-language":"ts","data-theme":"github-dark",style:{display:"grid"},children:[(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { Callout } "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "@/components/callout"'})]}),
,(0,e.jsxs)(n.span,{"data-line":"","data-highlighted-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { CustomComponent } "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "@/components/custom"'})]}),
,(0,e.jsx)(n.span,{"data-line":"",children:" "}),
,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"const"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:" components"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:" ="}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {"})]}),
,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" Callout,"})}),
,(0,e.jsx)(n.span,{"data-line":"","data-highlighted-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" CustomComponent,"})}),
,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"})}),
,(0,e.jsx)(n.span,{"data-line":"",children:" "}),
,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"export"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:" function"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" Mdx"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"({ "}),(0,e.jsx)(n.span,{style:{color:"#FFAB70"},children:"code"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }) {"})]}),
,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:" const"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:" Component"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:" ="}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" useMDXComponent"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"(code)"})]}),
,(0,e.jsx)(n.span,{"data-line":"",children:" "}),
,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:" return"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ("})]}),
,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"div className"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"mdx"'}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:">"})]}),
,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"Component components"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{components} "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"/>"})]}),
,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:" </"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"div"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:">"})]}),
,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" )"})}),
,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"})})]})})]}),
,(0,e.jsx)(n.p,{children:"Once you've added your custom component, you can use it in MDX as follows:"}),
,(0,e.jsx)(n.figure,{"data-rehype-pretty-code-figure":"",children:(0,e.jsx)(n.pre,{tabIndex:"0","data-language":"js","data-theme":"github-dark",__rawString__:<CustomComponent propName="value" />
,children:(0,e.jsx)(n.code,{"data-language":"js","data-theme":"github-dark",style:{display:"grid"},children:(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"<"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"CustomComponent"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" propName"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"value"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" />"})]})})})}),
,(0,e.jsx)(n.hr,{}),
,(0,e.jsxs)(n.h2,{id:"html-elements",children:[(0,e.jsx)(n.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#html-elements",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"HTML Elements"]}),
,(0,e.jsx)(n.p,{children:"You can overwrite HTML elements using the same technique above."}),
,(0,e.jsx)(n.figure,{"data-rehype-pretty-code-figure":"",children:(0,e.jsx)(n.pre,{tabIndex:"0","data-language":"ts","data-theme":"github-dark",__rawString__:const components = {
Callout,
CustomComponent,
hr: ({ ...props }) => <hr className="my-4 border-slate-200 md:my-6" />,
}
,children:(0,e.jsxs)(n.code,{"data-language":"ts","data-theme":"github-dark",style:{display:"grid"},children:[(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"const"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:" components"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:" ="}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {"})]}),
,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" Callout,"})}),
,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" CustomComponent,"})}),
,(0,e.jsxs)(n.span,{"data-line":"","data-highlighted-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" hr"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:": ({ "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"..."}),(0,e.jsx)(n.span,{style:{color:"#FFAB70"},children:"props"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }) "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"=>"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"hr"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"my-4 border-slate-200 md:my-6"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" />,"})]}),
,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"})})]})})}),
,(0,e.jsxs)(n.p,{children:["This will overwrite the ",(0,e.jsx)(n.code,{children:"<hr />"})," tag or ",(0,e.jsx)(n.code,{children:"---"})," in Mardown with the HTML output above."]}),
,(0,e.jsx)(n.hr,{}),
,(0,e.jsxs)(n.h2,{id:"styling",children:[(0,e.jsx)(n.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#styling",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Styling"]}),
,(0,e.jsx)(n.p,{children:"Tailwind CSS classes can be used inside MDX for styling."}),
,(0,e.jsx)(n.figure,{"data-rehype-pretty-code-figure":"",children:(0,e.jsx)(n.pre,{tabIndex:"0","data-language":"jsx","data-theme":"github-dark",__rawString__:<p className="text-red-600">This text will be red.</p>
,children:(0,e.jsx)(n.code,{"data-language":"jsx","data-theme":"github-dark",style:{display:"grid"},children:(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"<"}),(0,e.jsx)(n.span,{style:{color:"#85E89D"},children:"p"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"text-red-600"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:">This text will be red.</"}),(0,e.jsx)(n.span,{style:{color:"#85E89D"},children:"p"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]})})})}),
,(0,e.jsxs)(n.p,{children:["Make sure you have configured the path to your content in your ",(0,e.jsx)(n.code,{children:"tailwind.config.js"})," file:"]})]})}function p(l={}){let{wrapper:n}=l.components||{};return n?(0,e.jsx)(n,{...l,children:(0,e.jsx)(t,{...l})}):t(l)}function h(l,n){throw new Error("Expected "+(n?"component":"object")+" "+l+"` to be defined: you likely forgot to import, pass, or provide it.")}return b(w);})();
;return Component;