(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[900],{48680:function(e,n,t){"use strict";t.r(n),t.d(n,{_frontmatter:function(){return s},default:function(){return f}});var r=t(19756),a=(t(67294),t(64983)),i=t(36835),l=t(22179),o=t(30758),s={},c=function(e){return function(n){return console.warn("Component "+e+" was not imported, exported, or provided by MDXProvider as global scope"),(0,a.kt)("div",n)}},u=c("ComponentProps"),d=c("ComponentChecklist"),m={_frontmatter:s},p=i.Z;function f(e){var n=e.components,t=(0,r.Z)(e,["components"]);return(0,a.kt)(p,Object.assign({},m,t,{components:n,mdxType:"MDXLayout"}),(0,a.kt)(o.Z,{replacementUrl:"/components/tree-view/react/latest",mdxType:"DeprecationBanner"}),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},"import {TreeView} from '@primer/react'\n")),(0,a.kt)("h2",null,"Examples"),(0,a.kt)("h3",null,"File tree navigation without directory links"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-jsx",metastring:"live drafts",live:!0,drafts:!0},'<Box sx={{maxWidth: 400}}>\n  <nav aria-label="Files">\n    <TreeView aria-label="Files">\n      <TreeView.Item id="src">\n        <TreeView.LeadingVisual>\n          <TreeView.DirectoryIcon />\n        </TreeView.LeadingVisual>\n        src\n        <TreeView.SubTree>\n          <TreeView.Item id="src/Avatar.tsx" onSelect={() => console.log(\'src/Avatar.tsx\')}>\n            <TreeView.LeadingVisual>\n              <FileIcon />\n            </TreeView.LeadingVisual>\n            Avatar.tsx\n            <TreeView.TrailingVisual>\n              <Octicon icon={DiffAddedIcon} color="success.fg" aria-label="Added" />\n            </TreeView.TrailingVisual>\n          </TreeView.Item>\n          <TreeView.Item id="src/Button.tsx" current>\n            <TreeView.LeadingVisual>\n              <FileIcon />\n            </TreeView.LeadingVisual>\n            Button.tsx\n            <TreeView.TrailingVisual>\n              <Octicon icon={DiffModifiedIcon} color="attention.fg" aria-label="Modified" />\n            </TreeView.TrailingVisual>\n          </TreeView.Item>\n        </TreeView.SubTree>\n      </TreeView.Item>\n      <TreeView.Item id="package.json">\n        <TreeView.LeadingVisual>\n          <FileIcon />\n        </TreeView.LeadingVisual>\n        package.json\n        <TreeView.TrailingVisual>\n          <Octicon icon={DiffModifiedIcon} color="attention.fg" aria-label="Modified" />\n        </TreeView.TrailingVisual>\n      </TreeView.Item>\n    </TreeView>\n  </nav>\n</Box>\n')),(0,a.kt)("h3",null,"File tree navigation with directory links"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-jsx",metastring:"live drafts",live:!0,drafts:!0},'<Box sx={{maxWidth: 400}}>\n  <nav aria-label="Files">\n    <TreeView aria-label="Files">\n      <TreeView.Item id="src">\n        <TreeView.LeadingVisual>\n          <TreeView.DirectoryIcon />\n        </TreeView.LeadingVisual>\n        src\n        <TreeView.SubTree>\n          <TreeView.Item id="src/Avatar.tsx">\n            <TreeView.LeadingVisual>\n              <FileIcon />\n            </TreeView.LeadingVisual>\n            Avatar.tsx\n          </TreeView.Item>\n          <TreeView.Item id="src/Button" current>\n            <TreeView.LeadingVisual>\n              <TreeView.DirectoryIcon />\n            </TreeView.LeadingVisual>\n            Button\n            <TreeView.SubTree>\n              <TreeView.Item id="src/Button/Button.tsx">\n                <TreeView.LeadingVisual>\n                  <FileIcon />\n                </TreeView.LeadingVisual>\n                Button.tsx\n              </TreeView.Item>\n              <TreeView.Item id="src/Button/Button.test.tsx">\n                <TreeView.LeadingVisual>\n                  <FileIcon />\n                </TreeView.LeadingVisual>\n                Button.test.tsx\n              </TreeView.Item>\n            </TreeView.SubTree>\n          </TreeView.Item>\n        </TreeView.SubTree>\n      </TreeView.Item>\n      <TreeView.Item id="package.json">\n        <TreeView.LeadingVisual>\n          <FileIcon />\n        </TreeView.LeadingVisual>\n        package.json\n      </TreeView.Item>\n    </TreeView>\n  </nav>\n</Box>\n')),(0,a.kt)("h3",null,"With React Router"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-jsx"},'import {Link, useMatch, useResolvedPath, navigate} from \'react-router-dom\'\nimport {TreeView} from \'@primer/react\'\n\nfunction TreeLinkItem({id, to, children}) {\n  const resolved = useResolvedPath(to)\n  const isCurrent = useMatch({path: resolved.pathname, end: true})\n  return (\n    <TreeList.Item\n      id={id}\n      aria-current={isCurrent ? \'page\' : undefined}\n      current={isCurrent}\n      onSelect={() => navigate(to)}\n    >\n      {children}\n    </TreeList.Item>\n  )\n}\n\nfunction App() {\n  return (\n    <nav aria-label="Files">\n      <TreeView aria-label="Files">\n        <TreeLinkItem id="src/Avatar.tsx" to="/src/Avatar.tsx">\n          Avatar.tsx\n        </TreeLinkItem>\n        <TreeLinkItem id="src/Button.tsx" to="/src/Button.tsx">\n          Button.tsx\n        </TreeLinkItem>\n      </TreeView>\n    </nav>\n  )\n}\n')),(0,a.kt)("h3",null,"With Next.js"),(0,a.kt)("p",null,"Please note that we advise against using this pattern for website navigation because it's not the expected semantic structure for a navigation component."),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-jsx"},"import {useRouter} from 'next/router'\nimport Link from 'next/link'\nimport {TreeView} from '@primer/react/drafts'\n\nfunction TreeLinkItem({id, href, children}) {\n  const router = useRouter()\n  const isCurrent = typeof href === 'string' ? router.asPath === href : router.pathname === href.pathname\n  return (\n    <Link href={href} passHref>\n      <TreeView.Item id={id} aria-current={isCurrent ? 'page' : false} current={isCurrent}>\n        {children}\n      </TreeView.Item>\n    </Link>\n  )\n}\n\nfunction App() {\n  return (\n    <nav aria-label=\"Files\">\n      <TreeView aria-label=\"Files\">\n        <TreeLinkItem id=\"src/Avatar.tsx\" href=\"/src/Avatar.tsx\">\n          Avatar.tsx\n        </TreeLinkItem>\n        <TreeLinkItem\n          id=\"src/Button.tsx\"\n          // You can also pass a URL object\n          // https://nextjs.org/docs/api-reference/next/link#with-url-object\n          href={{\n            pathname: '/src/[component].[filetype]',\n            query: {component: 'Button', filetype: 'tsx'},\n          }}\n        >\n          Button.tsx\n        </TreeLinkItem>\n      </TreeView>\n    </nav>\n  )\n}\n")),(0,a.kt)("h3",null,"With controlled expanded state"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-javascript",metastring:"live noinline drafts",live:!0,noinline:!0,drafts:!0},'function ControlledTreeView() {\n  const [expanded, setExpanded] = React.useState(false)\n\n  return (\n    <Box sx={{display: \'grid\', gap: 2, maxWidth: 400}}>\n      <Button onClick={() => setExpanded(!expanded)}>{expanded ? \'Collapse\' : \'Expand\'}</Button>\n      <nav aria-label="Files">\n        <TreeView aria-label="Files">\n          <TreeView.Item id="src" expanded={expanded} onExpandedChange={setExpanded}>\n            src\n            <TreeView.SubTree>\n              <TreeView.Item id="src/Avatar.tsx">Avatar.tsx</TreeView.Item>\n              <TreeView.Item id="src/Button.tsx" current>\n                Button.tsx\n              </TreeView.Item>\n            </TreeView.SubTree>\n          </TreeView.Item>\n        </TreeView>\n      </nav>\n    </Box>\n  )\n}\n\nrender(<ControlledTreeView />)\n')),(0,a.kt)("h3",null,"With stateful visuals"),(0,a.kt)("p",null,"To render stateful visuals, pass a render function to ",(0,a.kt)("inlineCode",{parentName:"p"},"TreeView.LeadingVisual")," or ",(0,a.kt)("inlineCode",{parentName:"p"},"TreeView.TrailingVisual"),". The function will be called with the ",(0,a.kt)("inlineCode",{parentName:"p"},"expanded")," state of the item."),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-jsx",metastring:"live drafts",live:!0,drafts:!0},'<Box sx={{maxWidth: 400}}>\n  <nav aria-label="Files">\n    <TreeView aria-label="Files">\n      <TreeView.Item id="src">\n        <TreeView.LeadingVisual>\n          {({isExpanded}) => (isExpanded ? <FileDirectoryOpenFillIcon /> : <FileDirectoryFillIcon />)}\n        </TreeView.LeadingVisual>\n        src\n        <TreeView.SubTree>\n          <TreeView.Item id="src/Avatar.tsx">Avatar.tsx</TreeView.Item>\n          <TreeView.Item id="src/Button.tsx" current>\n            Button.tsx\n          </TreeView.Item>\n        </TreeView.SubTree>\n      </TreeView.Item>\n    </TreeView>\n  </nav>\n</Box>\n')),(0,a.kt)("p",null,"Since stateful directory icons are a common use case for TreeView, we provide a ",(0,a.kt)("inlineCode",{parentName:"p"},"TreeView.DirectoryIcon")," component for convenience. The previous example can be rewritten as:"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-jsx",metastring:"live drafts",live:!0,drafts:!0},'<Box sx={{maxWidth: 400}}>\n  <nav aria-label="Files">\n    <TreeView aria-label="Files">\n      <TreeView.Item id="src">\n        <TreeView.LeadingVisual>\n          <TreeView.DirectoryIcon />\n        </TreeView.LeadingVisual>\n        src\n        <TreeView.SubTree>\n          <TreeView.Item id="src/Avatar.tsx">Avatar.tsx</TreeView.Item>\n          <TreeView.Item id="src/Button.tsx" current>\n            Button.tsx\n          </TreeView.Item>\n        </TreeView.SubTree>\n      </TreeView.Item>\n    </TreeView>\n  </nav>\n</Box>\n')),(0,a.kt)("h3",null,"With asynchronously loaded items"),(0,a.kt)("p",null,"See ",(0,a.kt)("a",{parentName:"p",href:"https://primer.style/react/storybook?path=/story/components-treeview--async-success"},"Storybook")," for examples with asynchronously loaded items."),(0,a.kt)("h2",null,"Props"),(0,a.kt)(u,{data:l,mdxType:"ComponentProps"}),(0,a.kt)("h2",null,"Status"),(0,a.kt)(d,{items:{propsDocumented:!0,noUnnecessaryDeps:!0,adaptsToThemes:!0,adaptsToScreenSizes:!0,fullTestCoverage:!0,visualRegressionCoverage:!0,noAxeViolations:!0,usedInProduction:!0,usageExamplesDocumented:!0,hasStorybookStories:!0,designReviewed:!0,a11yReviewed:!0,noPerfRegression:!0,stableApi:!1,addressedApiFeedback:!1,hasDesignGuidelines:!1,hasFigmaComponent:!1},mdxType:"ComponentChecklist"}))}f.isMDXComponent=!0},36835:function(e,n,t){"use strict";t.d(n,{Z:function(){return A}});var r=t(56794),a=t(25451),i=t(30681),l=t(21718),o=t(21720),s=t(70806),c=t(67294),u=t(14245),d=t(14321),m=t(2449),p=t(8124),f=t(5998),w=t(19446);var x=function(e){var n=e.href;return c.createElement("li",null,c.createElement(f.Z,{href:n,target:"_blank"},c.createElement(i.Z,{sx:{display:"flex",gap:2,alignItems:"center"}},c.createElement(w.MarkGithubIcon,null),c.createElement(s.Z,null,"Source"))))};var T=function(e){var n=e.href;return c.createElement("li",null,c.createElement(f.Z,{href:n,target:"_blank"},c.createElement(i.Z,{sx:{display:"flex",gap:2,alignItems:"center"}},c.createElement(w.RubyIcon,null),c.createElement(s.Z,null,"Rails"))))};function g(){return c.createElement("svg",{viewBox:"0 0 16 16","aria-hidden":"true",width:16,height:16,fill:"currentColor",xmlns:"http://www.w3.org/2000/svg"},c.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M11.129 2.533a13 13 0 0 0-1.84 1.035c.566.467 1.13.98 1.683 1.532a23.93 23.93 0 0 1 1.533 1.683 13 13 0 0 0 1.034-1.84c.335-.742.504-1.372.53-1.856.026-.485-.091-.735-.22-.864-.128-.128-.379-.246-.863-.22-.485.027-1.114.196-1.857.53Zm-.616-1.368c-.785.354-1.624.842-2.477 1.444A15.152 15.152 0 0 0 5.56 1.166C4.72.787 3.901.546 3.167.506c-.733-.04-1.47.12-2.006.657-.536.536-.696 1.273-.656 2.006.04.733.281 1.55.66 2.39.353.786.84 1.624 1.443 2.478a15.15 15.15 0 0 0-1.442 2.475c-.378.84-.62 1.657-.66 2.39-.04.734.12 1.47.657 2.007.536.536 1.273.696 2.006.656.733-.04 1.55-.281 2.39-.66a15.15 15.15 0 0 0 2.476-1.441c.853.601 1.69 1.089 2.476 1.442.84.378 1.657.62 2.39.66.734.04 1.47-.121 2.007-.657.536-.536.696-1.273.656-2.006-.04-.734-.281-1.551-.66-2.391a15.149 15.149 0 0 0-1.441-2.475 15.15 15.15 0 0 0 1.443-2.478c.378-.84.62-1.657.66-2.39.04-.734-.121-1.47-.657-2.007-.536-.536-1.273-.696-2.006-.656-.733.04-1.55.281-2.391.66Zm-7.98 3.78c.259.574.607 1.195 1.035 1.838.467-.566.98-1.131 1.533-1.684a23.915 23.915 0 0 1 1.682-1.531 12.995 12.995 0 0 0-1.84-1.035c-.742-.334-1.372-.503-1.856-.53-.485-.026-.735.092-.864.22-.128.129-.246.38-.22.864.027.484.196 1.114.53 1.857ZM6.161 6.16a22.144 22.144 0 0 0-1.678 1.877A22.14 22.14 0 0 0 6.16 9.91a22.155 22.155 0 0 0 1.876 1.678 22.137 22.137 0 0 0 1.877-1.678c.62-.62 1.181-1.251 1.676-1.874A22.137 22.137 0 0 0 9.911 6.16a22.142 22.142 0 0 0-1.875-1.677A22.144 22.144 0 0 0 6.161 6.16Zm-3.626 4.967c.258-.574.605-1.194 1.033-1.837.467.566.98 1.13 1.531 1.682a23.922 23.922 0 0 0 1.684 1.532c-.643.428-1.263.775-1.838 1.034-.743.334-1.373.503-1.857.53-.484.026-.735-.091-.864-.22-.128-.128-.245-.38-.22-.864.027-.484.196-1.114.53-1.857Zm8.592 2.411a13 13 0 0 1-1.837-1.034c.566-.467 1.13-.98 1.683-1.532a23.903 23.903 0 0 0 1.531-1.682c.428.643.775 1.263 1.034 1.837.334.743.503 1.373.53 1.857.026.485-.091.736-.22.864-.128.129-.38.246-.864.22-.484-.027-1.114-.195-1.857-.53ZM8.034 8.782a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z"}))}var h=function(e){var n=e.href;return c.createElement("li",null,c.createElement(f.Z,{href:n,target:"_blank"},c.createElement(i.Z,{sx:{display:"flex",gap:2,alignItems:"center"}},c.createElement(g,null),c.createElement(s.Z,null,"React"))))},V=t(60439),v=t(39750);var b=function(e){var n=e.href;return c.createElement("li",null,c.createElement(f.Z,{href:n,target:"_blank"},c.createElement(i.Z,{sx:{display:"flex",gap:2,alignItems:"center"}},c.createElement(w.BookIcon,null),c.createElement(s.Z,null,"Lookbook"))))};var k=function(e){var n=e.href;return c.createElement("li",null,c.createElement(f.Z,{href:n,target:"_blank"},c.createElement(i.Z,{sx:{display:"flex",gap:2,alignItems:"center"}},c.createElement(w.BookIcon,null),c.createElement(s.Z,null,"Storybook"))))};function I(){return c.createElement("svg",{viewBox:"0 0 16 16","aria-hidden":"true",width:16,height:16,fill:"currentColor",xmlns:"http://www.w3.org/2000/svg"},c.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M5.417 0A3.167 3.167 0 0 0 3.37 5.583 3.16 3.16 0 0 0 2.25 8a3.16 3.16 0 0 0 1.12 2.417 3.167 3.167 0 1 0 5.213 2.417V10.687a3.165 3.165 0 0 0 3.87-4.964A3.167 3.167 0 0 0 10.582 0H5.417Zm4.727 6.333h.21a1.665 1.665 0 1 1-.21 0Zm.25-1.5h.19a1.667 1.667 0 1 0 0-3.333H5.416a1.667 1.667 0 1 0 0 3.333h4.687a3.226 3.226 0 0 1 .29 0ZM3.75 8c0-.92.746-1.667 1.667-1.667h1.666v3.334H5.417C4.497 9.667 3.75 8.92 3.75 8Zm1.667 3.167a1.667 1.667 0 1 0 1.666 1.667v-1.667H5.417Z"}))}var y=function(e){var n=e.href;return c.createElement("li",null,c.createElement(f.Z,{href:n,target:"_blank"},c.createElement(i.Z,{sx:{display:"flex",gap:2,alignItems:"center"}},c.createElement(I,null),c.createElement(s.Z,null,"Figma"))))},E=t(25102);var Z=function(e){var n=e["aria-labelledby"],t=e.items;return c.createElement(E.$,{"aria-labelledby":n},t.map((function(e){return c.createElement(E.$.Item,{key:e.title,href:e.url},e.title)})))},C=t(1496),L=t(25444);function B(e,n){var t="undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(t)return(t=t.call(e)).next.bind(t);if(Array.isArray(e)||(t=function(e,n){if(!e)return;if("string"==typeof e)return S(e,n);var t=Object.prototype.toString.call(e).slice(8,-1);"Object"===t&&e.constructor&&(t=e.constructor.name);if("Map"===t||"Set"===t)return Array.from(e);if("Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t))return S(e,n)}(e))||n&&e&&"number"==typeof e.length){t&&(e=t);var r=0;return function(){return r>=e.length?{done:!0}:{done:!1,value:e[r++]}}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function S(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,r=new Array(n);t<n;t++)r[t]=e[t];return r}var A=function(e){var n=e.children,t=e.pageContext,r=e.path,f=t.frontmatter,w=f.title,g=f.description,I=f.figma,E=f.react,S=f.status,A=f.a11yReviewed,j=f.source,D=f.rails,R=f.storybook,M=f.lookbook,W=f.additionalContributors,_=f.componentId;W||(W=[]);var O=a.w[_];O&&(w||(w=O.displayName),g||(g=O.description));var P=function(e,n){for(var t,r=[],a=function e(n,t){if(n.url===t)r.push({title:n.title,url:n.url});else if(n.children)for(var a,i=B(n.children);!(a=i()).done;)if(e(a.value,t),r.length>0){r.unshift({title:n.title,url:n.url});break}},i=B(n);!(t=i()).done&&(a(t.value,e),!(r.length>0)););return r}(r,C).filter((function(e){return e.url}));return c.createElement(i.Z,{sx:{flexDirection:"column",minHeight:"100vh",display:"flex"}},c.createElement(u.Z,{title:w,description:g}),c.createElement(d.Z,{path:r}),c.createElement(F,{sx:{flex:"1 1 auto",flexDirection:"row",display:"flex"}},c.createElement(i.Z,{sx:{display:["none",null,null,"block"]}},c.createElement(p.Z,null)),c.createElement(i.Z,{sx:{justifyContent:"center",flexDirection:"row-reverse",display:"flex",maxWidth:"1200px",mx:"auto",width:"100%",p:[4,5,6,7]}},t.tableOfContents.items?c.createElement(N,{sx:{width:220,flex:"0 0 auto",marginLeft:[null,7,8,9],display:["none",null,"block"],position:"sticky",top:d.M+48,maxHeight:"calc(100vh - "+d.M+"px - 48px)"}},c.createElement(l.Z,{as:"h3",sx:{fontSize:1,display:"inline-block",fontWeight:"bold",pl:3},id:"toc-heading"},"On this page"),c.createElement(Z,{"aria-labelledby":"toc-heading",items:t.tableOfContents.items})):null,c.createElement(i.Z,{sx:{width:"100%",maxWidth:"960px"}},c.createElement(i.Z,{as:"main",id:"skip-nav",sx:{mb:4}},P.length>1?c.createElement(o.Z,{sx:{mb:4}},P.map((function(e){return c.createElement(o.Z.Item,{key:e.url,href:(0,L.withPrefix)(e.url),selected:r===e.url},e.title)}))):null,c.createElement(l.Z,{as:"h1",sx:{fontSize:7}},w),g?c.createElement(i.Z,{sx:{fontSize:3,mb:3}},g):null,S||j||R||M||I||D||E?c.createElement(i.Z,{sx:{display:"flex",flexWrap:"wrap",columnGap:3,mb:7,mt:2,rowGap:3,alignItems:"center",fontSize:1}},S?c.createElement(i.Z,{as:"ul",sx:{display:"flex",gap:1,alignItems:"center",m:0,p:0,paddingInline:0,listStyle:"none"}},c.createElement("li",null,c.createElement(V.Z,{status:S})),c.createElement("li",null,c.createElement(v.Z,{a11yReviewed:A}))):null,j||R||M||I||D||E?c.createElement(i.Z,{as:"ul",sx:{display:"flex",flexWrap:"wrap",gap:4,alignItems:"center",m:0,p:0,paddingInline:0,listStyle:"none"}},j?c.createElement(x,{href:j}):null,M?c.createElement(b,{href:M}):null,R?c.createElement(k,{href:R}):null,E?c.createElement(h,{href:E}):null,D?c.createElement(T,{href:D}):null,I?c.createElement(y,{href:I}):null):null):null),t.tableOfContents.items?c.createElement(i.Z,{sx:{display:["block",null,"none"],mb:5,borderColor:"border.muted",bg:"canvas.subtle",borderWidth:"1px",borderStyle:"solid",borderRadius:2}},c.createElement(i.Z,{sx:{px:3,py:2}},c.createElement(i.Z,{sx:{flexDirection:"row",justifyContent:"space-between",alignItems:"center",display:"flex"}},c.createElement(s.Z,{sx:{fontWeight:"bold"}},"On this page"))),c.createElement(i.Z,{sx:{borderTop:"1px solid",borderColor:"border.muted"}},c.createElement(Z,{items:t.tableOfContents.items}))):null,n,c.createElement(m.Z,{editUrl:t.editUrl,contributors:t.contributors.concat(W.map((function(e){return{login:e}})))})))))},F=(0,r.default)(i.Z).withConfig({displayName:"layout___StyledBox",componentId:"sc-o2kgno-0"})({zIndex:0}),N=(0,r.default)(i.Z).withConfig({displayName:"layout___StyledBox2",componentId:"sc-o2kgno-1"})({gridArea:"table-of-contents",overflow:"auto"})}}]);
//# sourceMappingURL=component---content-tree-view-mdx-0ef5326991b821b31849.js.map