"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[44027],{97408:(e,n,t)=>{t.d(n,{Z:()=>r});const r="/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport React, {useState} from 'react';\n\nexport default function MyComponent() {\n  const [bool, setBool] = useState(false);\n  return (\n    <div>\n      <p>MyComponent rendered !</p>\n      <p>bool={bool ? 'true' : 'false'}</p>\n      <p>\n        <button onClick={() => setBool((b) => !b)}>toggle bool</button>\n      </p>\n    </div>\n  );\n}\n"},41124:(e,n,t)=>{t.d(n,{Z:()=>i});var r=t(24246),o=(t(27378),t(4646));const s={tableOfContentsInline:"tableOfContentsInline_2sru"};function i({toc:e,minHeadingLevel:n,maxHeadingLevel:t}){return(0,r.jsx)("div",{className:s.tableOfContentsInline,children:(0,r.jsx)(o.Z,{toc:e,minHeadingLevel:n,maxHeadingLevel:t,className:"table-of-contents",linkClassName:null})})}},4646:(e,n,t)=>{t.d(n,{Z:()=>O});var r=t(24246),o=t(27378),s=t(73919);function i(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function c(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{},r=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),r.forEach((function(n){i(e,n,t[n])}))}return e}function a(e,n){return n=null!=n?n:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):function(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})),e}function l(e,n){if(null==e)return{};var t,r,o=function(e,n){if(null==e)return{};var t,r,o={},s=Object.keys(e);for(r=0;r<s.length;r++)t=s[r],n.indexOf(t)>=0||(o[t]=e[t]);return o}(e,n);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(e);for(r=0;r<s.length;r++)t=s[r],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}function u(e){const n=e.map((e=>a(c({},e),{parentIndex:-1,children:[]}))),t=Array(7).fill(-1);n.forEach(((e,n)=>{const r=t.slice(2,e.level);e.parentIndex=Math.max(...r),t[e.level]=n}));const r=[];return n.forEach((e=>{const{parentIndex:t}=e,o=l(e,["parentIndex"]);t>=0?n[t].children.push(o):r.push(o)})),r}function d({toc:e,minHeadingLevel:n,maxHeadingLevel:t}){return e.flatMap((e=>{const r=d({toc:e.children,minHeadingLevel:n,maxHeadingLevel:t});return function(e){return e.level>=n&&e.level<=t}(e)?[a(c({},e),{children:r})]:r}))}function p(e){const n=e.getBoundingClientRect();return n.top===n.bottom?p(e.parentNode):n}function h(e,{anchorTopOffset:n}){const t=e.find((e=>p(e).top>=n));if(t){return function(e){return e.top>0&&e.bottom<window.innerHeight/2}(p(t))?t:null!==(r=e[e.indexOf(t)-1])&&void 0!==r?r:null;var r}var o;return null!==(o=e[e.length-1])&&void 0!==o?o:null}function m(){const e=(0,o.useRef)(0),{navbar:{hideOnScroll:n}}=(0,s.L)();return(0,o.useEffect)((()=>{e.current=n?0:document.querySelector(".navbar").clientHeight}),[n]),e}function f(e){const n=(0,o.useRef)(void 0),t=m();(0,o.useEffect)((()=>{if(!e)return()=>{};const{linkClassName:r,linkActiveClassName:o,minHeadingLevel:s,maxHeadingLevel:i}=e;function c(){const e=function(e){return Array.from(document.getElementsByClassName(e))}(r),c=function({minHeadingLevel:e,maxHeadingLevel:n}){const t=[];for(let r=e;r<=n;r+=1)t.push(`h${r}.anchor`);return Array.from(document.querySelectorAll(t.join()))}({minHeadingLevel:s,maxHeadingLevel:i}),a=h(c,{anchorTopOffset:t.current}),l=e.find((e=>a&&a.id===function(e){return decodeURIComponent(e.href.substring(e.href.indexOf("#")+1))}(e)));e.forEach((e=>{!function(e,t){t?(n.current&&n.current!==e&&n.current.classList.remove(o),e.classList.add(o),n.current=e):e.classList.remove(o)}(e,e===l)}))}return document.addEventListener("scroll",c),document.addEventListener("resize",c),c(),()=>{document.removeEventListener("scroll",c),document.removeEventListener("resize",c)}}),[e,t])}var b=t(41428);function g({toc:e,className:n,linkClassName:t,isChild:o}){return e.length?(0,r.jsx)("ul",{className:o?void 0:n,children:e.map((e=>(0,r.jsxs)("li",{children:[(0,r.jsx)(b.Z,{to:`#${e.id}`,className:null!=t?t:void 0,dangerouslySetInnerHTML:{__html:e.value}}),(0,r.jsx)(g,{isChild:!0,toc:e.children,className:n,linkClassName:t})]},e.id)))}):null}const j=o.memo(g);function y(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function x(e,n){if(null==e)return{};var t,r,o=function(e,n){if(null==e)return{};var t,r,o={},s=Object.keys(e);for(r=0;r<s.length;r++)t=s[r],n.indexOf(t)>=0||(o[t]=e[t]);return o}(e,n);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(e);for(r=0;r<s.length;r++)t=s[r],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}function O(e){var{toc:n,className:t="table-of-contents table-of-contents__left-border",linkClassName:i="table-of-contents__link",linkActiveClassName:c,minHeadingLevel:a,maxHeadingLevel:l}=e,p=x(e,["toc","className","linkClassName","linkActiveClassName","minHeadingLevel","maxHeadingLevel"]);const h=(0,s.L)(),m=null!=a?a:h.tableOfContents.minHeadingLevel,b=null!=l?l:h.tableOfContents.maxHeadingLevel,g=function({toc:e,minHeadingLevel:n,maxHeadingLevel:t}){return(0,o.useMemo)((()=>d({toc:u(e),minHeadingLevel:n,maxHeadingLevel:t})),[e,n,t])}({toc:n,minHeadingLevel:m,maxHeadingLevel:b});return f((0,o.useMemo)((()=>{if(i&&c)return{linkClassName:i,linkActiveClassName:c,minHeadingLevel:m,maxHeadingLevel:b}}),[i,c,m,b])),(0,r.jsx)(j,function(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{},r=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),r.forEach((function(n){y(e,n,t[n])}))}return e}({toc:g,className:t,linkClassName:i},p))}},61132:(e,n,t)=>{t.d(n,{Z:()=>i});var r=t(24246),o=(t(27378),t(40624));const s={tabItem:"tabItem_pnkT"};function i({children:e,hidden:n,className:t}){return(0,r.jsx)("div",{role:"tabpanel",className:(0,o.Z)(s.tabItem,t),hidden:n,children:e})}},97555:(e,n,t)=>{t.d(n,{Z:()=>S});var r=t(24246),o=t(27378),s=t(40624),i=t(75527),c=t(3620),a=t(44479),l=t(62821),u=t(52196),d=t(53589);function p(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function h(e,n){return n=null!=n?n:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):function(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})),e}function m(e){var n,t;return null!==(t=null===(n=o.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,o.isValidElement)(e)&&function(e){const{props:n}=e;return!!n&&"object"==typeof n&&"value"in n}(e))return e;throw new Error(`Docusaurus error: Bad <Tabs> child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the <Tabs> component should be <TabItem>, and every <TabItem> should have a unique "value" prop.`)})))||void 0===n?void 0:n.filter(Boolean))&&void 0!==t?t:[]}function f(e){const{values:n,children:t}=e;return(0,o.useMemo)((()=>{const e=null!=n?n:function(e){return m(e).map((({props:{value:e,label:n,attributes:t,default:r}})=>({value:e,label:n,attributes:t,default:r})))}(t);return function(e){const n=(0,u.lx)(e,((e,n)=>e.value===n.value));if(n.length>0)throw new Error(`Docusaurus error: Duplicate values "${n.map((e=>e.value)).join(", ")}" found in <Tabs>. Every value needs to be unique.`)}(e),e}),[n,t])}function b({value:e,tabValues:n}){return n.some((n=>n.value===e))}function g({queryString:e=!1,groupId:n}){const t=(0,c.k6)(),r=function({queryString:e=!1,groupId:n}){if("string"==typeof e)return e;if(!1===e)return null;if(!0===e&&!n)throw new Error('Docusaurus error: The <Tabs> component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return null!=n?n:null}({queryString:e,groupId:n}),s=(0,l._X)(r),i=(0,o.useCallback)((e=>{if(!r)return;const n=new URLSearchParams(t.location.search);n.set(r,e),t.replace(h(function(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{},r=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),r.forEach((function(n){p(e,n,t[n])}))}return e}({},t.location),{search:n.toString()}))}),[r,t]);return[s,i]}function j(e){const{defaultValue:n,queryString:t=!1,groupId:r}=e,s=f(e),[i,c]=(0,o.useState)((()=>function({defaultValue:e,tabValues:n}){if(0===n.length)throw new Error("Docusaurus error: the <Tabs> component requires at least one <TabItem> children component");if(e){if(!b({value:e,tabValues:n}))throw new Error(`Docusaurus error: The <Tabs> has a defaultValue "${e}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return e}var t;const r=null!==(t=n.find((e=>e.default)))&&void 0!==t?t:n[0];if(!r)throw new Error("Unexpected error: 0 tabValues");return r.value}({defaultValue:n,tabValues:s}))),[l,u]=g({queryString:t,groupId:r}),[p,h]=function({groupId:e}){const n=function(e){return e?`docusaurus.tab.${e}`:null}(e),[t,r]=(0,d.Nk)(n);return[t,(0,o.useCallback)((e=>{n&&r.set(e)}),[n,r])]}({groupId:r}),m=(()=>{const e=null!=l?l:p;return b({value:e,tabValues:s})?e:null})();(0,a.Z)((()=>{m&&c(m)}),[m]);return{selectedValue:i,selectValue:(0,o.useCallback)((e=>{if(!b({value:e,tabValues:s}))throw new Error(`Can't select invalid tab value=${e}`);c(e),u(e),h(e)}),[u,h,s]),tabValues:s}}var y=t(29088);const x={tabList:"tabList_Qoir",tabItem:"tabItem_AQgk"};function O(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function w(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{},r=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),r.forEach((function(n){O(e,n,t[n])}))}return e}function v(e,n){return n=null!=n?n:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):function(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})),e}function k({className:e,block:n,selectedValue:t,selectValue:o,tabValues:c}){const a=[],{blockElementScrollPositionUntilNextRender:l}=(0,i.o5)(),u=e=>{const n=e.currentTarget,r=a.indexOf(n),s=c[r].value;s!==t&&(l(n),o(s))},d=e=>{let n=null;switch(e.key){case"Enter":u(e);break;case"ArrowRight":{const r=a.indexOf(e.currentTarget)+1;var t;n=null!==(t=a[r])&&void 0!==t?t:a[0];break}case"ArrowLeft":{const t=a.indexOf(e.currentTarget)-1;var r;n=null!==(r=a[t])&&void 0!==r?r:a[a.length-1];break}}null==n||n.focus()};return(0,r.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,s.Z)("tabs",{"tabs--block":n},e),children:c.map((({value:e,label:n,attributes:o})=>(0,r.jsx)("li",v(w({role:"tab",tabIndex:t===e?0:-1,"aria-selected":t===e,ref:e=>a.push(e),onKeyDown:d,onClick:u},o),{className:(0,s.Z)("tabs__item",x.tabItem,null==o?void 0:o.className,{"tabs__item--active":t===e}),children:null!=n?n:e}),e)))})}function P({lazy:e,children:n,selectedValue:t}){const i=(Array.isArray(n)?n:[n]).filter(Boolean);if(e){const e=i.find((e=>e.props.value===t));return e?(0,o.cloneElement)(e,{className:(0,s.Z)("margin-top--md",e.props.className)}):null}return(0,r.jsx)("div",{className:"margin-top--md",children:i.map(((e,n)=>(0,o.cloneElement)(e,{key:n,hidden:e.props.value!==t})))})}function D(e){const n=j(e);return(0,r.jsxs)("div",{className:(0,s.Z)("tabs-container",x.tabList),children:[(0,r.jsx)(k,w({},n,e)),(0,r.jsx)(P,w({},n,e))]})}function S(e){const n=(0,y.Z)();return(0,r.jsx)(D,v(w({},e),{children:m(e.children)}),String(n))}},94544:(e,n,t)=>{t.d(n,{Z:()=>s});var r=t(24246),o=(t(27378),t(29088));function s({children:e,fallback:n}){return(0,o.Z)()?(0,r.jsx)(r.Fragment,{children:null==e?void 0:e()}):null!=n?n:null}},6698:(e,n,t)=>{t.d(n,{Z:()=>l});var r=t(24246),o=(t(27378),t(40624));const s={browserWindow:"browserWindow_my1Q",browserWindowHeader:"browserWindowHeader_jXSR",row:"row_KZDM",buttons:"buttons_uHc7",right:"right_oyze",browserWindowAddressBar:"browserWindowAddressBar_Pd8y",dot:"dot_giz1",browserWindowMenuIcon:"browserWindowMenuIcon_Vhuh",bar:"bar_rrRL",browserWindowBody:"browserWindowBody_Idgs"};function i(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function c(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{},r=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),r.forEach((function(n){i(e,n,t[n])}))}return e}function a(e,n){return n=null!=n?n:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):function(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})),e}function l({children:e,minHeight:n,url:t="http://localhost:3000",style:i,bodyStyle:l}){return(0,r.jsxs)("div",{className:s.browserWindow,style:a(c({},i),{minHeight:n}),children:[(0,r.jsxs)("div",{className:s.browserWindowHeader,children:[(0,r.jsxs)("div",{className:s.buttons,children:[(0,r.jsx)("span",{className:s.dot,style:{background:"#f25f58"}}),(0,r.jsx)("span",{className:s.dot,style:{background:"#fbbe3c"}}),(0,r.jsx)("span",{className:s.dot,style:{background:"#58cb42"}})]}),(0,r.jsx)("div",{className:(0,o.Z)(s.browserWindowAddressBar,"text--truncate"),children:t}),(0,r.jsx)("div",{className:s.browserWindowMenuIcon,children:(0,r.jsxs)("div",{children:[(0,r.jsx)("span",{className:s.bar}),(0,r.jsx)("span",{className:s.bar}),(0,r.jsx)("span",{className:s.bar})]})})]}),(0,r.jsx)("div",{className:s.browserWindowBody,style:l,children:e})]})}},38112:(e,n,t)=>{t.d(n,{Z:()=>Te});var r={};t.r(r),t.d(r,{ButtonExample:()=>B});var o=t(24246),s=t(27378),i=t(40624),c=t(29088),a=t(32711),l=t(36712),u=t(4423),d=t(94544),p=t(30691),h=t(78844),m=t(73919);function f(){const{prism:e}=(0,m.L)(),{colorMode:n}=(0,h.I)(),t=e.theme,r=e.darkTheme||t;return"dark"===n?r:t}var b=t(88941);const g={playgroundContainer:"playgroundContainer_6Ior",playgroundHeader:"playgroundHeader_Tvsk",playgroundEditor:"playgroundEditor_TySg",playgroundPreview:"playgroundPreview_mApW"};function j(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function y(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{},r=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),r.forEach((function(n){j(e,n,t[n])}))}return e}function x(e,n){return n=null!=n?n:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):function(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})),e}function O(e,n){if(null==e)return{};var t,r,o=function(e,n){if(null==e)return{};var t,r,o={},s=Object.keys(e);for(r=0;r<s.length;r++)t=s[r],n.indexOf(t)>=0||(o[t]=e[t]);return o}(e,n);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(e);for(r=0;r<s.length;r++)t=s[r],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}function w({children:e}){return(0,o.jsx)("div",{className:(0,i.Z)(g.playgroundHeader),children:e})}function v(){return(0,o.jsx)("div",{children:"Loading..."})}function k(){return(0,o.jsx)(d.Z,{fallback:(0,o.jsx)(v,{}),children:()=>(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(b.Z,{fallback:e=>(0,o.jsx)(p.Ac,y({},e)),children:(0,o.jsx)(a.i5,{})}),(0,o.jsx)(a.IF,{})]})})}function P(){return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(w,{children:(0,o.jsx)(l.Z,{id:"theme.Playground.result",description:"The result label of the live codeblocks",children:"Result"})}),(0,o.jsx)("div",{className:g.playgroundPreview,children:(0,o.jsx)(k,{})})]})}function D(){const e=(0,c.Z)();return(0,o.jsx)(a.uz,{className:g.playgroundEditor},String(e))}function S(){return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(w,{children:(0,o.jsx)(l.Z,{id:"theme.Playground.liveEditor",description:"The live editor label of the live codeblocks",children:"Live Editor"})}),(0,o.jsx)(D,{})]})}const C=e=>`${e};`;function N(e){var n,{children:t,transformCode:r}=e,s=O(e,["children","transformCode"]);const{siteConfig:{themeConfig:i}}=(0,u.Z)(),{liveCodeBlock:{playgroundPosition:c}}=i,l=f();var d;const p=null!==(d=null===(n=s.metastring)||void 0===n?void 0:n.includes("noInline"))&&void 0!==d&&d;return(0,o.jsx)("div",{className:g.playgroundContainer,children:(0,o.jsx)(a.nu,x(y({code:null==t?void 0:t.replace(/\n$/,""),noInline:p,transformCode:null!=r?r:C,theme:l},s),{children:"top"===c?(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(P,{}),(0,o.jsx)(S,{})]}):(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(S,{}),(0,o.jsx)(P,{})]})}))})}function M(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function E(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{},r=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),r.forEach((function(n){M(e,n,t[n])}))}return e}function I(e,n){return n=null!=n?n:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):function(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})),e}function B(e){return(0,o.jsx)("button",I(E({type:"button"},e),{style:E({backgroundColor:"white",color:"black",border:"solid red",borderRadius:20,padding:10,cursor:"pointer"},e.style)}))}function L(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}const H=function(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{},r=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),r.forEach((function(n){L(e,n,t[n])}))}return e}({React:s},s,r);var T,X,_=t(89583),Z=t(6324),R=t.n(Z);function A(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}const W=RegExp("title=(?<quote>[\"'])(?<title>.*?)\\1"),V=RegExp("\\{(?<range>[\\d,-]+)\\}"),F={js:{start:"\\/\\/",end:""},jsBlock:{start:"\\/\\*",end:"\\*\\/"},jsx:{start:"\\{\\s*\\/\\*",end:"\\*\\/\\s*\\}"},bash:{start:"#",end:""},html:{start:"\x3c!--",end:"--\x3e"}},z=($=function(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{},r=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),r.forEach((function(n){A(e,n,t[n])}))}return e}({},F),q=null!=(q={lua:{start:"--",end:""},wasm:{start:"\\;\\;",end:""},tex:{start:"%",end:""},vb:{start:"['\u2018\u2019]",end:""},vbnet:{start:"(?:_\\s*)?['\u2018\u2019]",end:""},rem:{start:"[Rr][Ee][Mm]\\b",end:""},f90:{start:"!",end:""},ml:{start:"\\(\\*",end:"\\*\\)"},cobol:{start:"\\*>",end:""}})?q:{},Object.getOwnPropertyDescriptors?Object.defineProperties($,Object.getOwnPropertyDescriptors(q)):function(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}(Object(q)).forEach((function(e){Object.defineProperty($,e,Object.getOwnPropertyDescriptor(q,e))})),$);var $,q;const U=Object.keys(F);function J(e,n){const t=e.map((e=>{const{start:t,end:r}=z[e];return`(?:${t}\\s*(${n.flatMap((e=>{var n,t;return[e.line,null===(n=e.block)||void 0===n?void 0:n.start,null===(t=e.block)||void 0===t?void 0:t.end].filter(Boolean)})).join("|")})\\s*${r})`})).join("|");return new RegExp(`^\\s*(?:${t})\\s*$`)}function Q(e,n){let t=e.replace(/\n$/,"");const{language:r,magicComments:o,metastring:s}=n;if(s&&V.test(s)){const e=s.match(V).groups.range;if(0===o.length)throw new Error(`A highlight range has been given in code block's metastring (\`\`\` ${s}), but no magic comment config is available. Docusaurus applies the first magic comment entry's className for metastring ranges.`);const n=o[0].className,r=R()(e).filter((e=>e>0)).map((e=>[e-1,[n]]));return{lineClassNames:Object.fromEntries(r),code:t}}if(void 0===r)return{lineClassNames:{},code:t};const i=function(e,n){switch(e){case"js":case"javascript":case"ts":case"typescript":return J(["js","jsBlock"],n);case"jsx":case"tsx":return J(["js","jsBlock","jsx"],n);case"html":return J(["js","jsBlock","html"],n);case"python":case"py":case"bash":return J(["bash"],n);case"markdown":case"md":return J(["html","jsx","bash"],n);case"tex":case"latex":case"matlab":return J(["tex"],n);case"lua":case"haskell":case"sql":return J(["lua"],n);case"wasm":return J(["wasm"],n);case"vb":case"vba":case"visual-basic":return J(["vb","rem"],n);case"vbnet":return J(["vbnet","rem"],n);case"batch":return J(["rem"],n);case"basic":return J(["rem","f90"],n);case"fsharp":return J(["js","ml"],n);case"ocaml":case"sml":return J(["ml"],n);case"fortran":return J(["f90"],n);case"cobol":return J(["cobol"],n);default:return J(U,n)}}(r,o),c=t.split("\n"),a=Object.fromEntries(o.map((e=>[e.className,{start:0,range:""}]))),l=Object.fromEntries(o.filter((e=>e.line)).map((({className:e,line:n})=>[n,e]))),u=Object.fromEntries(o.filter((e=>e.block)).map((({className:e,block:n})=>[n.start,e]))),d=Object.fromEntries(o.filter((e=>e.block)).map((({className:e,block:n})=>[n.end,e])));for(let h=0;h<c.length;){const e=c[h].match(i);if(!e){h+=1;continue}const n=e.slice(1).find((e=>void 0!==e));l[n]?a[l[n]].range+=`${h},`:u[n]?a[u[n]].start=h:d[n]&&(a[d[n]].range+=`${a[d[n]].start}-${h-1},`),c.splice(h,1)}t=c.join("\n");const p={};return Object.entries(a).forEach((([e,{range:n}])=>{R()(n).forEach((n=>{var t;null!==(t=(T=p)[X=n])&&void 0!==t||(T[X]=[]),p[n].push(e)}))})),{lineClassNames:p,code:t}}const Y={codeBlockContainer:"codeBlockContainer_jDV4"};function G(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function K(e,n){return n=null!=n?n:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):function(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})),e}function ee(e,n){if(null==e)return{};var t,r,o=function(e,n){if(null==e)return{};var t,r,o={},s=Object.keys(e);for(r=0;r<s.length;r++)t=s[r],n.indexOf(t)>=0||(o[t]=e[t]);return o}(e,n);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(e);for(r=0;r<s.length;r++)t=s[r],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}function ne(e){var{as:n}=e,t=ee(e,["as"]);const r=function(e){const n={color:"--prism-color",backgroundColor:"--prism-background-color"},t={};return Object.entries(e.plain).forEach((([e,r])=>{const o=n[e];o&&"string"==typeof r&&(t[o]=r)})),t}(f());return(0,o.jsx)(n,K(function(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{},r=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),r.forEach((function(n){G(e,n,t[n])}))}return e}({},t),{style:r,className:(0,i.Z)(t.className,Y.codeBlockContainer,_.k.common.codeBlock)}))}const te={codeBlockContent:"codeBlockContent_vx7S",codeBlockTitle:"codeBlockTitle_bdru",codeBlock:"codeBlock_Gebt",codeBlockStandalone:"codeBlockStandalone_i_cY",codeBlockLines:"codeBlockLines_FJaf",codeBlockLinesWithNumbering:"codeBlockLinesWithNumbering_FU9Q",buttonGroup:"buttonGroup_cUGO"};function re({children:e,className:n}){return(0,o.jsx)(ne,{as:"pre",tabIndex:0,className:(0,i.Z)(te.codeBlockStandalone,"thin-scrollbar",n),children:(0,o.jsx)("code",{className:te.codeBlockLines,children:e})})}var oe=t(51114);const se={attributes:!0,characterData:!0,childList:!0,subtree:!0};function ie(e,n){const[t,r]=(0,s.useState)(),o=(0,s.useCallback)((()=>{var n;r(null===(n=e.current)||void 0===n?void 0:n.closest("[role=tabpanel][hidden]"))}),[e,r]);(0,s.useEffect)((()=>{o()}),[o]),function(e,n,t=se){const r=(0,oe.zX)(n),o=(0,oe.Ql)(t);(0,s.useEffect)((()=>{const n=new MutationObserver(r);return e&&n.observe(e,o),()=>n.disconnect()}),[e,r,o])}(t,(e=>{e.forEach((e=>{"attributes"===e.type&&"hidden"===e.attributeName&&(n(),o())}))}),{attributes:!0,characterData:!1,childList:!1,subtree:!1})}var ce=t(26101);const ae={codeLine:"codeLine_qRmp",codeLineNumber:"codeLineNumber_dS_J",codeLineContent:"codeLineContent_XF5l"};function le(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function ue(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{},r=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),r.forEach((function(n){le(e,n,t[n])}))}return e}function de(e,n){return n=null!=n?n:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):function(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})),e}function pe({line:e,classNames:n,showLineNumbers:t,getLineProps:r,getTokenProps:s}){1===e.length&&"\n"===e[0].content&&(e[0].content="");const c=r({line:e,className:(0,i.Z)(n,t&&ae.codeLine)}),a=e.map(((e,n)=>(0,o.jsx)("span",ue({},s({token:e})),n)));return(0,o.jsxs)("span",de(ue({},c),{children:[t?(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)("span",{className:ae.codeLineNumber}),(0,o.jsx)("span",{className:ae.codeLineContent,children:a})]}):a,(0,o.jsx)("br",{})]}))}var he=t(34370);function me(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function fe(e,n){return n=null!=n?n:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):function(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})),e}function be(e){return(0,o.jsx)("svg",fe(function(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{},r=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),r.forEach((function(n){me(e,n,t[n])}))}return e}({viewBox:"0 0 24 24"},e),{children:(0,o.jsx)("path",{fill:"currentColor",d:"M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"})}))}function ge(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function je(e,n){return n=null!=n?n:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):function(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})),e}function ye(e){return(0,o.jsx)("svg",je(function(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{},r=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),r.forEach((function(n){ge(e,n,t[n])}))}return e}({viewBox:"0 0 24 24"},e),{children:(0,o.jsx)("path",{fill:"currentColor",d:"M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"})}))}const xe={copyButtonCopied:"copyButtonCopied_OkN_",copyButtonIcons:"copyButtonIcons_OqsO",copyButtonIcon:"copyButtonIcon_PgCn",copyButtonSuccessIcon:"copyButtonSuccessIcon_bsQG"};function Oe({code:e,className:n}){const[t,r]=(0,s.useState)(!1),c=(0,s.useRef)(void 0),a=(0,s.useCallback)((()=>{(0,he.Z)(e),r(!0),c.current=window.setTimeout((()=>{r(!1)}),1e3)}),[e]);return(0,s.useEffect)((()=>()=>window.clearTimeout(c.current)),[]),(0,o.jsx)("button",{type:"button","aria-label":t?(0,l.I)({id:"theme.CodeBlock.copied",message:"Copied",description:"The copied button label on code blocks"}):(0,l.I)({id:"theme.CodeBlock.copyButtonAriaLabel",message:"Copy code to clipboard",description:"The ARIA label for copy code blocks button"}),title:(0,l.I)({id:"theme.CodeBlock.copy",message:"Copy",description:"The copy button label on code blocks"}),className:(0,i.Z)("clean-btn",n,xe.copyButton,t&&xe.copyButtonCopied),onClick:a,children:(0,o.jsxs)("span",{className:xe.copyButtonIcons,"aria-hidden":"true",children:[(0,o.jsx)(be,{className:xe.copyButtonIcon}),(0,o.jsx)(ye,{className:xe.copyButtonSuccessIcon})]})})}function we(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function ve(e,n){return n=null!=n?n:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):function(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})),e}function ke(e){return(0,o.jsx)("svg",ve(function(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{},r=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),r.forEach((function(n){we(e,n,t[n])}))}return e}({viewBox:"0 0 24 24"},e),{children:(0,o.jsx)("path",{fill:"currentColor",d:"M4 19h6v-2H4v2zM20 5H4v2h16V5zm-3 6H4v2h13.25c1.1 0 2 .9 2 2s-.9 2-2 2H15v-2l-3 3l3 3v-2h2c2.21 0 4-1.79 4-4s-1.79-4-4-4z"})}))}const Pe={wordWrapButtonIcon:"wordWrapButtonIcon_MQXS",wordWrapButtonEnabled:"wordWrapButtonEnabled_TBIH"};function De({className:e,onClick:n,isEnabled:t}){const r=(0,l.I)({id:"theme.CodeBlock.wordWrapToggle",message:"Toggle word wrap",description:"The title attribute for toggle word wrapping button of code block lines"});return(0,o.jsx)("button",{type:"button",onClick:n,className:(0,i.Z)("clean-btn",e,t&&Pe.wordWrapButtonEnabled),"aria-label":r,title:r,children:(0,o.jsx)(ke,{className:Pe.wordWrapButtonIcon,"aria-hidden":"true"})})}function Se({children:e,className:n="",metastring:t,title:r,showLineNumbers:c,language:a}){const{prism:{defaultLanguage:l,magicComments:u}}=(0,m.L)();var d;const p=function(e){return null==e?void 0:e.toLowerCase()}(null!==(d=null!=a?a:function(e){const n=e.split(" ").find((e=>e.startsWith("language-")));return null==n?void 0:n.replace(/language-/,"")}(n))&&void 0!==d?d:l),h=f(),b=function(){const[e,n]=(0,s.useState)(!1),[t,r]=(0,s.useState)(!1),o=(0,s.useRef)(null),i=(0,s.useCallback)((()=>{const t=o.current.querySelector("code");e?t.removeAttribute("style"):(t.style.whiteSpace="pre-wrap",t.style.overflowWrap="anywhere"),n((e=>!e))}),[o,e]),c=(0,s.useCallback)((()=>{const{scrollWidth:e,clientWidth:n}=o.current,t=e>n||o.current.querySelector("code").hasAttribute("style");r(t)}),[o]);return ie(o,c),(0,s.useEffect)((()=>{c()}),[e,c]),(0,s.useEffect)((()=>(window.addEventListener("resize",c,{passive:!0}),()=>{window.removeEventListener("resize",c)})),[c]),{codeBlockRef:o,isEnabled:e,isCodeScrollable:t,toggle:i}}(),g=function(e){var n,t;return null!==(t=null===(n=null==e?void 0:e.match(W))||void 0===n?void 0:n.groups.title)&&void 0!==t?t:""}(t)||r,{lineClassNames:j,code:y}=Q(e,{metastring:t,language:p,magicComments:u}),x=null!=c?c:function(e){return Boolean(null==e?void 0:e.includes("showLineNumbers"))}(t);return(0,o.jsxs)(ne,{as:"div",className:(0,i.Z)(n,p&&!n.includes(`language-${p}`)&&`language-${p}`),children:[g&&(0,o.jsx)("div",{className:te.codeBlockTitle,children:g}),(0,o.jsxs)("div",{className:te.codeBlockContent,children:[(0,o.jsx)(ce.y$,{theme:h,code:y,language:null!=p?p:"text",children:({className:e,style:n,tokens:t,getLineProps:r,getTokenProps:s})=>(0,o.jsx)("pre",{tabIndex:0,ref:b.codeBlockRef,className:(0,i.Z)(e,te.codeBlock,"thin-scrollbar"),style:n,children:(0,o.jsx)("code",{className:(0,i.Z)(te.codeBlockLines,x&&te.codeBlockLinesWithNumbering),children:t.map(((e,n)=>(0,o.jsx)(pe,{line:e,getLineProps:r,getTokenProps:s,classNames:j[n],showLineNumbers:x},n)))})})}),(0,o.jsxs)("div",{className:te.buttonGroup,children:[(b.isEnabled||b.isCodeScrollable)&&(0,o.jsx)(De,{className:te.codeButton,onClick:()=>b.toggle(),isEnabled:b.isEnabled}),(0,o.jsx)(Oe,{className:te.codeButton,code:y})]})]})]})}function Ce(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function Ne(e,n){return n=null!=n?n:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):function(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})),e}function Me(e,n){if(null==e)return{};var t,r,o=function(e,n){if(null==e)return{};var t,r,o={},s=Object.keys(e);for(r=0;r<s.length;r++)t=s[r],n.indexOf(t)>=0||(o[t]=e[t]);return o}(e,n);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(e);for(r=0;r<s.length;r++)t=s[r],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}function Ee(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function Ie(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{},r=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),r.forEach((function(n){Ee(e,n,t[n])}))}return e}const Be=(Le=function(e){var{children:n}=e,t=Me(e,["children"]);const r=(0,c.Z)(),i=function(e){return s.Children.toArray(e).some((e=>(0,s.isValidElement)(e)))?e:Array.isArray(e)?e.join(""):e}(n),a="string"==typeof i?Se:re;return(0,o.jsx)(a,Ne(function(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{},r=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),r.forEach((function(n){Ce(e,n,t[n])}))}return e}({},t),{children:i}),String(r))},function(e){return e.live?(0,o.jsx)(N,Ie({scope:H},e)):(0,o.jsx)(Le,Ie({},e))});var Le;function He(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function Te(e){return(0,o.jsx)(Be,function(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{},r=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),r.forEach((function(n){He(e,n,t[n])}))}return e}({},e))}},77132:(e,n,t)=>{t.r(n),t.d(n,{Highlight:()=>b,assets:()=>f,contentTitle:()=>h,default:()=>y,frontMatter:()=>p,metadata:()=>m,toc:()=>g});var r=t(24246),o=t(71670),s=t(6698),i=t(97555),c=t(61132);var a=t(38112),l=t(97408);function u(e){const n={code:"code",p:"p",...(0,o.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)("span",{children:["Hello ",e.name]}),"\n",(0,r.jsxs)(n.p,{children:["This is text some content from ",(0,r.jsx)(n.code,{children:"_markdown-partial-example.md"}),"."]})]})}function d(e={}){const{wrapper:n}={...(0,o.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(u,{...e})}):u(e)}t(41124);const p={id:"react",description:"Using the power of React in Docusaurus Markdown documents, thanks to MDX",slug:"/markdown-features/react"},h="MDX and React",m={id:"guides/markdown-features/react",title:"MDX and React",description:"Using the power of React in Docusaurus Markdown documents, thanks to MDX",source:"@site/docs/guides/markdown-features/markdown-features-react.mdx",sourceDirName:"guides/markdown-features",slug:"/markdown-features/react",permalink:"/docs/markdown-features/react",draft:!1,unlisted:!1,editUrl:"https://github.com/facebook/docusaurus/edit/main/website/docs/guides/markdown-features/markdown-features-react.mdx",tags:[],version:"current",lastUpdatedBy:"dependabot[bot]",lastUpdatedAt:1721119886e3,frontMatter:{id:"react",description:"Using the power of React in Docusaurus Markdown documents, thanks to MDX",slug:"/markdown-features/react"},sidebar:"docs",previous:{title:"Markdown Features",permalink:"/docs/markdown-features"},next:{title:"Tabs",permalink:"/docs/markdown-features/tabs"}},f={},b=({children:e,color:n})=>{const t={span:"span",...(0,o.a)()};return(0,r.jsx)(t.span,{style:{backgroundColor:n,borderRadius:"2px",color:"#fff",padding:"0.2rem"},children:e})},g=[{value:"Exporting components",id:"exporting-components",level:3},{value:"Importing components",id:"importing-components",level:3},{value:"MDX component scope",id:"mdx-component-scope",level:3},{value:"Markdown and JSX interoperability",id:"markdown-and-jsx-interoperability",level:3},{value:"Importing code snippets",id:"importing-code-snippets",level:2},{value:"Importing Markdown",id:"importing-markdown",level:2},{value:"Available exports",id:"available-exports",level:2}];function j(e){const n={a:"a",admonition:"admonition",b:"b",code:"code",em:"em",h1:"h1",h2:"h2",h3:"h3",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,o.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(n.h1,{id:"mdx-and-react",children:"MDX and React"}),"\n","\n",(0,r.jsxs)(n.p,{children:["Docusaurus has built-in support for ",(0,r.jsx)(n.a,{href:"https://mdxjs.com/",children:"MDX"}),", which allows you to write JSX within your Markdown files and render them as React components."]}),"\n",(0,r.jsxs)(n.p,{children:["Check out the ",(0,r.jsx)(n.a,{href:"https://mdxjs.com/",children:"MDX docs"})," to see what fancy stuff you can do with MDX."]}),"\n",(0,r.jsxs)(n.admonition,{title:"Debugging MDX",type:"tip",children:[(0,r.jsx)(n.p,{children:"The MDX format is quite strict, and you may get compilation errors."}),(0,r.jsxs)(n.p,{children:["Use the ",(0,r.jsx)(n.strong,{children:(0,r.jsx)(n.a,{href:"https://mdxjs.com/playground/",children:"MDX playground"})})," to debug them and make sure your syntax is valid."]})]}),"\n",(0,r.jsx)(n.admonition,{type:"info",children:(0,r.jsxs)(n.p,{children:["Prettier, the most popular formatter, ",(0,r.jsx)(n.a,{href:"https://github.com/prettier/prettier/issues/12209",children:"supports only the legacy MDX v1"}),". If you get an unintentional formatting result, you may want to add ",(0,r.jsx)(n.code,{children:"{/* prettier-ignore */}"})," before the problematic area, or add ",(0,r.jsx)(n.code,{children:"*.mdx"})," to your ",(0,r.jsx)(n.code,{children:".prettierignore"}),", until Prettier has proper support for MDX v3. ",(0,r.jsxs)(n.a,{href:"https://github.com/orgs/mdx-js/discussions/2067",children:["One of the main authors of MDX recommends ",(0,r.jsx)(n.code,{children:"remark-cli"})," with ",(0,r.jsx)(n.code,{children:"remark-mdx"})]}),"."]})}),"\n",(0,r.jsx)(n.h3,{id:"exporting-components",children:"Exporting components"}),"\n",(0,r.jsxs)(n.p,{children:["To define any custom component within an MDX file, you have to export it: only paragraphs that start with ",(0,r.jsx)(n.code,{children:"export"})," will be parsed as components instead of prose."]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-jsx",children:"export const Highlight = ({children, color}) => (\n  <span\n    style={{\n      backgroundColor: color,\n      borderRadius: '2px',\n      color: '#fff',\n      padding: '0.2rem',\n    }}>\n    {children}\n  </span>\n);\n\n<Highlight color=\"#25c2a0\">Docusaurus green</Highlight> and <Highlight color=\"#1877F2\">Facebook blue</Highlight> are my favorite colors.\n\nI can write **Markdown** alongside my _JSX_!\n"})}),"\n",(0,r.jsx)(n.p,{children:"Notice how it renders both the markup from your React component and the Markdown syntax:"}),"\n","\n",(0,r.jsxs)(s.Z,{minHeight:240,children:[(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(b,{color:"#25c2a0",children:"Docusaurus green"}),"\n"," ","and ",(0,r.jsx)(b,{color:"#1877F2",children:"Facebook blue"})," are my favorite colors."]}),(0,r.jsxs)(n.p,{children:["I can write ",(0,r.jsx)(n.strong,{children:"Markdown"})," alongside my ",(0,r.jsx)(n.em,{children:"JSX"}),"!"]})]}),"\n",(0,r.jsxs)(n.admonition,{title:"MDX is JSX",type:"warning",children:[(0,r.jsx)(n.p,{children:"Since all doc files are parsed using MDX, anything that looks like HTML is actually JSX. Therefore, if you need to inline-style a component, follow JSX flavor and provide style objects."}),(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-jsx",children:"/* Instead of this: */\n<span style=\"background-color: red\">Foo</span>\n/* Use this: */\n<span style={{backgroundColor: 'red'}}>Foo</span>\n"})})]}),"\n",(0,r.jsx)(n.h3,{id:"importing-components",children:"Importing components"}),"\n",(0,r.jsx)(n.p,{children:"You can also import your own components defined in other files or third-party components installed via npm."}),"\n","\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-md",children:"\x3c!-- Docusaurus theme component --\x3e\nimport TOCInline from '@theme/TOCInline';\n\x3c!-- External component --\x3e\nimport Button from '@mui/material/Button';\n\x3c!-- Custom component --\x3e\nimport BrowserWindow from '@site/src/components/BrowserWindow';\n"})}),"\n",(0,r.jsx)(n.admonition,{type:"tip",children:(0,r.jsxs)(n.p,{children:["The ",(0,r.jsx)(n.code,{children:"@site"})," alias points to your website's directory, usually where the ",(0,r.jsx)(n.code,{children:"docusaurus.config.js"})," file is. Using an alias instead of relative paths (",(0,r.jsx)(n.code,{children:"'../../src/components/BrowserWindow'"}),") saves you from updating import paths when moving files around, or when ",(0,r.jsx)(n.a,{href:"/docs/versioning",children:"versioning docs"})," and ",(0,r.jsx)(n.a,{href:"/docs/i18n/tutorial",children:"translating"}),"."]})}),"\n",(0,r.jsxs)(n.p,{children:["While declaring components within Markdown is very convenient for simple cases, it becomes hard to maintain because of limited editor support, risks of parsing errors, and low reusability. Use a separate ",(0,r.jsx)(n.code,{children:".js"})," file when your component involves complex JS logic:"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-jsx",metastring:'title="src/components/Highlight.js"',children:"import React from 'react';\n\nexport default function Highlight({children, color}) {\n  return (\n    <span\n      style={{\n        backgroundColor: color,\n        borderRadius: '2px',\n        color: '#fff',\n        padding: '0.2rem',\n      }}>\n      {children}\n    </span>\n  );\n}\n"})}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-md",metastring:'title="markdown-file.mdx"',children:"import Highlight from '@site/src/components/Highlight';\n\n<Highlight color=\"#25c2a0\">Docusaurus green</Highlight>\n"})}),"\n",(0,r.jsx)(n.admonition,{type:"tip",children:(0,r.jsxs)(n.p,{children:["If you use the same component across a lot of files, you don't need to import it everywhere\u2014consider adding it to the global scope. ",(0,r.jsx)(n.a,{href:"#mdx-component-scope",children:"See below"})]})}),"\n",(0,r.jsx)(n.h3,{id:"mdx-component-scope",children:"MDX component scope"}),"\n",(0,r.jsxs)(n.p,{children:["Apart from ",(0,r.jsx)(n.a,{href:"#importing-components",children:"importing a component"})," and ",(0,r.jsx)(n.a,{href:"#exporting-components",children:"exporting a component"}),", a third way to use a component in MDX is to ",(0,r.jsx)(n.strong,{children:"register it to the global scope"}),", which will make it automatically available in every MDX file, without any import statements."]}),"\n",(0,r.jsx)(n.p,{children:"For example, given this MDX file:"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-md",children:"- a\n- list!\n\nAnd some <Highlight>custom markup</Highlight>...\n"})}),"\n",(0,r.jsxs)(n.p,{children:["It will be compiled to a React component containing ",(0,r.jsx)(n.code,{children:"ul"}),", ",(0,r.jsx)(n.code,{children:"li"}),", ",(0,r.jsx)(n.code,{children:"p"}),", and ",(0,r.jsx)(n.code,{children:"Highlight"})," elements. ",(0,r.jsx)(n.code,{children:"Highlight"})," is not a native html element: you need to provide your own React component implementation for it."]}),"\n",(0,r.jsxs)(n.p,{children:["In Docusaurus, the MDX component scope is provided by the ",(0,r.jsx)(n.code,{children:"@theme/MDXComponents"})," file. It's not a React component, ",(0,r.jsx)(n.em,{children:"per se"}),", unlike most other exports under the ",(0,r.jsx)(n.code,{children:"@theme/"})," alias: it is a record from tag names like ",(0,r.jsx)(n.code,{children:"Highlight"})," to their React component implementations."]}),"\n",(0,r.jsxs)(n.p,{children:["If you ",(0,r.jsx)(n.a,{href:"/docs/swizzling",children:"swizzle"})," this component, you will find all tags that have been implemented, and you can further customize our implementation by swizzling the respective sub-component, like ",(0,r.jsx)(n.code,{children:"@theme/MDXComponents/Code"})," (which is used to render ",(0,r.jsx)(n.a,{href:"/docs/markdown-features/code-blocks",children:"Markdown code blocks"}),")."]}),"\n",(0,r.jsxs)(n.p,{children:["If you want to register extra tag names (like the ",(0,r.jsx)(n.code,{children:"<Highlight>"})," tag above), you should consider ",(0,r.jsxs)(n.a,{href:"/docs/swizzling#wrapping",children:["wrapping ",(0,r.jsx)(n.code,{children:"@theme/MDXComponents"})]}),", so you don't have to maintain all the existing mappings. Since the swizzle CLI doesn't allow wrapping non-component files yet, you should manually create the wrapper:"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",metastring:'title="src/theme/MDXComponents.js"',children:"import React from 'react';\n// Import the original mapper\nimport MDXComponents from '@theme-original/MDXComponents';\n// highlight-next-line\nimport Highlight from '@site/src/components/Highlight';\n\nexport default {\n  // Re-use the default mapping\n  ...MDXComponents,\n  // Map the \"<Highlight>\" tag to our Highlight component\n  // `Highlight` will receive all props that were passed to `<Highlight>` in MDX\n  // highlight-next-line\n  Highlight,\n};\n"})}),"\n",(0,r.jsxs)(n.p,{children:["And now, you can freely use ",(0,r.jsx)(n.code,{children:"<Highlight>"})," in every page, without writing the import statement:"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-md",children:'I can conveniently use <Highlight color="#25c2a0">Docusaurus green</Highlight> everywhere!\n'})}),"\n",(0,r.jsx)(s.Z,{children:(0,r.jsxs)(n.p,{children:["I can conveniently use ",(0,r.jsx)(b,{color:"#25c2a0",children:"Docusaurus green"})," everywhere!"]})}),"\n",(0,r.jsxs)(n.admonition,{type:"warning",children:[(0,r.jsxs)(n.p,{children:["We use ",(0,r.jsx)(n.strong,{children:"upper-case"})," tag names like ",(0,r.jsx)(n.code,{children:"Highlight"})," on purpose."]}),(0,r.jsx)(n.p,{children:"From MDX v3+ onward (Docusaurus v3+), lower-case tag names are always rendered as native html elements, and will not use any component mapping you provide."})]}),"\n",(0,r.jsxs)(n.admonition,{type:"warning",children:[(0,r.jsxs)(n.p,{children:["This feature is powered by ",(0,r.jsxs)(n.a,{href:"https://mdxjs.com/docs/using-mdx/#mdx-provider",children:["an ",(0,r.jsx)(n.code,{children:"MDXProvider"})]}),". If you are importing Markdown in a React page, you have to supply this provider yourself through the ",(0,r.jsx)(n.code,{children:"MDXContent"})," theme component."]}),(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-jsx",metastring:'title="src/pages/index.js"',children:"import React from 'react';\nimport FeatureDisplay from './_featureDisplay.mdx';\n// highlight-next-line\nimport MDXContent from '@theme/MDXContent';\n\nexport default function LandingPage() {\n  return (\n    <div>\n      {/* highlight-start */}\n      <MDXContent>\n        <FeatureDisplay />\n      </MDXContent>\n      {/* highlight-end */}\n    </div>\n  );\n}\n"})}),(0,r.jsxs)(n.p,{children:["If you don't wrap your imported MDX with ",(0,r.jsx)(n.code,{children:"MDXContent"}),", the global scope will not be available."]})]}),"\n",(0,r.jsx)(n.h3,{id:"markdown-and-jsx-interoperability",children:"Markdown and JSX interoperability"}),"\n",(0,r.jsxs)(n.p,{children:["Docusaurus v3 is using ",(0,r.jsx)(n.a,{href:"https://mdxjs.com/blog/v3/",children:"MDX v3"}),"."]}),"\n",(0,r.jsxs)(n.p,{children:["The ",(0,r.jsx)(n.a,{href:"https://mdxjs.com/docs/what-is-mdx/#mdx-syntax",children:"MDX syntax"})," is mostly compatible with ",(0,r.jsx)(n.a,{href:"https://commonmark.org/",children:"CommonMark"}),", but is much stricter because your ",(0,r.jsx)(n.code,{children:".mdx"})," files can use JSX and are compiled into real React components (check the ",(0,r.jsx)(n.a,{href:"https://mdxjs.com/playground/",children:"playground"}),")."]}),"\n",(0,r.jsxs)(n.p,{children:["Some valid CommonMark features won't work with MDX (",(0,r.jsx)(n.a,{href:"https://mdxjs.com/docs/what-is-mdx/#markdown",children:"more info"}),"), notably:"]}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsx)(n.li,{children:"Indented code blocks: use triple backticks instead"}),"\n",(0,r.jsxs)(n.li,{children:["Autolinks (",(0,r.jsx)(n.code,{children:"<http://localhost:3000>"}),"): use regular link syntax instead (",(0,r.jsx)(n.code,{children:"[http://localhost:3000](http://localhost:3000)"}),")"]}),"\n",(0,r.jsxs)(n.li,{children:["HTML syntax (",(0,r.jsx)(n.code,{children:'<p style="color: red;">'}),"): use JSX instead (",(0,r.jsx)(n.code,{children:"<p style={{color: 'red'}}>"}),")"]}),"\n",(0,r.jsxs)(n.li,{children:["Unescaped ",(0,r.jsx)(n.code,{children:"{"})," and ",(0,r.jsx)(n.code,{children:"<"}),": escape them with ",(0,r.jsx)(n.code,{children:"\\"})," instead (",(0,r.jsx)(n.code,{children:"\\{"})," and ",(0,r.jsx)(n.code,{children:"\\<"}),")"]}),"\n"]}),"\n",(0,r.jsxs)(n.admonition,{title:"Experimental CommonMark support",type:"danger",children:[(0,r.jsxs)(n.p,{children:["Docusaurus v3 makes it possible to opt-in for a less strict, standard ",(0,r.jsx)(n.a,{href:"https://commonmark.org/",children:"CommonMark"})," support with the following options:"]}),(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["The ",(0,r.jsx)(n.code,{children:"format: md"})," front matter"]}),"\n",(0,r.jsxs)(n.li,{children:["The ",(0,r.jsx)(n.code,{children:".md"})," file extension combined with the ",(0,r.jsx)(n.code,{children:'siteConfig.markdown.format: "detect"'})," configuration"]}),"\n"]}),(0,r.jsxs)(n.p,{children:["This feature is ",(0,r.jsx)(n.strong,{children:"experimental"})," and currently has a few ",(0,r.jsx)(n.a,{href:"https://github.com/facebook/docusaurus/issues/9092",children:"limitations"}),"."]})]}),"\n",(0,r.jsx)(n.h2,{id:"importing-code-snippets",children:"Importing code snippets"}),"\n",(0,r.jsxs)(n.p,{children:["You can not only import a file containing a component definition, but also import any code file as raw text, and then insert it in a code block, thanks to ",(0,r.jsx)(n.a,{href:"https://webpack.js.org/loaders/raw-loader/",children:"Webpack raw-loader"}),". In order to use ",(0,r.jsx)(n.code,{children:"raw-loader"}),", you first need to install it in your project:"]}),"\n",(0,r.jsxs)(i.Z,{groupId:"npm2yarn",children:[(0,r.jsx)(c.Z,{value:"npm",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-bash",children:"npm install --save raw-loader\n"})})}),(0,r.jsx)(c.Z,{value:"yarn",label:"Yarn",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-bash",children:"yarn add raw-loader\n"})})}),(0,r.jsx)(c.Z,{value:"pnpm",label:"pnpm",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-bash",children:"pnpm add raw-loader\n"})})})]}),"\n",(0,r.jsx)(n.p,{children:"Now you can import code snippets from another file as it is:"}),"\n","\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-jsx",metastring:'title="myMarkdownFile.mdx"',children:"import CodeBlock from '@theme/CodeBlock';\nimport MyComponentSource from '!!raw-loader!./myComponent';\n\n<CodeBlock language=\"jsx\">{MyComponentSource}</CodeBlock>\n"})}),"\n","\n",(0,r.jsx)(s.Z,{children:(0,r.jsx)(a.Z,{language:"jsx",children:l.Z})}),"\n",(0,r.jsxs)(n.p,{children:["See ",(0,r.jsx)(n.a,{href:"/docs/markdown-features/code-blocks#usage-in-jsx",children:"using code blocks in JSX"})," for more details of the ",(0,r.jsx)(n.code,{children:"<CodeBlock>"})," component."]}),"\n",(0,r.jsx)(n.admonition,{type:"note",children:(0,r.jsxs)(n.p,{children:["You have to use ",(0,r.jsx)(n.code,{children:"<CodeBlock>"})," rather than the Markdown triple-backtick ",(0,r.jsx)(n.code,{children:"```"}),", because the latter will ship out any of its content as-is, but you want to interpolate the imported text here."]})}),"\n",(0,r.jsx)(n.admonition,{type:"warning",children:(0,r.jsx)(n.p,{children:"This feature is experimental and might be subject to breaking API changes in the future."})}),"\n",(0,r.jsx)(n.h2,{id:"importing-markdown",children:"Importing Markdown"}),"\n",(0,r.jsx)(n.p,{children:"You can use Markdown files as components and import them elsewhere, either in Markdown files or in React pages."}),"\n",(0,r.jsxs)(n.p,{children:["By convention, using the ",(0,r.jsxs)(n.strong,{children:[(0,r.jsx)(n.code,{children:"_"})," filename prefix"]})," will not create any doc page and means the Markdown file is a ",(0,r.jsx)(n.strong,{children:'"partial"'}),", to be imported by other files."]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-md",metastring:'title="_markdown-partial-example.mdx"',children:"<span>Hello {props.name}</span>\n\nThis is text some content from `_markdown-partial-example.mdx`.\n"})}),"\n","\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-jsx",metastring:'title="someOtherDoc.mdx"',children:"import PartialExample from './_markdown-partial-example.mdx';\n\n<PartialExample name=\"Sebastien\" />\n"})}),"\n","\n",(0,r.jsx)(s.Z,{children:(0,r.jsx)(d,{name:"Sebastien"})}),"\n",(0,r.jsx)(n.p,{children:"This way, you can reuse content among multiple pages and avoid duplicating materials."}),"\n",(0,r.jsx)(n.admonition,{type:"warning",children:(0,r.jsxs)(n.p,{children:["Currently, the table of contents does not contain the imported Markdown headings. This is a technical limitation that we are trying to solve (",(0,r.jsx)(n.a,{href:"https://github.com/facebook/docusaurus/issues/3915",children:"issue"}),")."]})}),"\n",(0,r.jsx)(n.h2,{id:"available-exports",children:"Available exports"}),"\n",(0,r.jsx)(n.p,{children:"Within the MDX page, the following variables are available as globals:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"frontMatter"}),": the front matter as a record of string keys and values;"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"toc"}),": the table of contents, as a tree of headings. See also ",(0,r.jsx)(n.a,{href:"/docs/markdown-features/toc#inline-table-of-contents",children:"Inline TOC"})," for a more concrete use-case."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"contentTitle"}),": the Markdown title, which is the first ",(0,r.jsx)(n.code,{children:"h1"})," heading in the Markdown text. It's ",(0,r.jsx)(n.code,{children:"undefined"})," if there isn't one (e.g. title specified in the front matter)."]}),"\n"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-jsx",children:"import TOCInline from '@theme/TOCInline';\nimport CodeBlock from '@theme/CodeBlock';\n\nThe table of contents for this page, serialized:\n\n<CodeBlock className=\"language-json\">{JSON.stringify(toc, null, 2)}</CodeBlock>\n\nThe front matter of this page:\n\n<ul>\n  {Object.entries(frontMatter).map(([key, value]) => <li key={key}><b>{key}</b>: {value}</li>)}\n</ul>\n\n<p>The title of this page is: <b>{contentTitle}</b></p>\n"})}),"\n","\n",(0,r.jsxs)(s.Z,{children:[(0,r.jsx)(n.p,{children:"The table of contents for this page, serialized:"}),(0,r.jsx)(a.Z,{className:"language-json",children:JSON.stringify(g,null,2)}),(0,r.jsx)(n.p,{children:"The front matter of this page:"}),(0,r.jsx)("ul",{children:Object.entries(p).map((([e,t])=>(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.b,{children:e}),": ",t]},e)))}),(0,r.jsxs)("p",{children:["The title of this page is: ",(0,r.jsx)("b",{children:h})]})]})]})}function y(e={}){const{wrapper:n}={...(0,o.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(j,{...e})}):j(e)}}}]);