{"version":3,"file":"TableOfContents.CTMLe9Is.mjs","names":["useState"],"sources":["https:/framerusercontent.com/modules/Ioq9mkYUb3qFeeDmhFfn/YuyD2rlSBscGdyjxvejD/TableOfContents.js"],"sourcesContent":["// Table of contents component that extracts all H2 elements from the page\nimport{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{useEffect,useState,startTransition}from\"react\";import{addPropertyControls,ControlType}from\"framer\";/**\n * @framerSupportedLayoutWidth auto\n * @framerSupportedLayoutHeight auto\n */export default function TableOfContents(props){const{title,titleFont,linkFont,titleColor,linkColor,hoverColor,backgroundColor,borderRadius,padding,gap,showBorder,borderColor,lineColor,lineThickness,lineStyle}=props;const[headings,setHeadings]=useState([]);useEffect(()=>{if(typeof window===\"undefined\")return;const extractHeadings=()=>{const h2Elements=document.querySelectorAll(\"h2\");const headingData=Array.from(h2Elements).map((h2,index)=>{let id=h2.id;if(!id){id=`heading-${index}`;h2.id=id;}return{text:h2.textContent||\"\",id:id};});startTransition(()=>setHeadings(headingData));};// Extract headings on mount\nextractHeadings();// Set up observer for dynamic content\nconst observer=new MutationObserver(()=>{extractHeadings();});observer.observe(document.body,{childList:true,subtree:true});return()=>observer.disconnect();},[]);const handleLinkClick=id=>{if(typeof window===\"undefined\")return;const element=document.getElementById(id);if(element){element.scrollIntoView({behavior:\"smooth\"});}};const handleKeyDown=(event,id)=>{if(event.key===\"Enter\"||event.key===\" \"){event.preventDefault();handleLinkClick(id);}};if(headings.length===0){return null;}return /*#__PURE__*/_jsxs(\"div\",{style:{...props.style,backgroundColor,borderRadius,padding,border:showBorder?`1px solid ${borderColor}`:\"none\",display:\"flex\",flexDirection:\"column\",gap,width:\"100%\",height:\"100%\",overflow:\"hidden\"},children:[/*#__PURE__*/_jsx(\"h3\",{style:{margin:0,color:titleColor,...titleFont},children:title}),/*#__PURE__*/_jsx(\"nav\",{children:/*#__PURE__*/_jsx(\"ul\",{style:{margin:0,padding:0,listStyle:\"none\",display:\"flex\",flexDirection:\"column\",gap:gap*.5,borderLeft:`${lineThickness}px ${lineStyle} ${lineColor}`,paddingLeft:12},children:headings.map((heading,index)=>/*#__PURE__*/_jsx(\"li\",{children:/*#__PURE__*/_jsx(\"button\",{onClick:()=>handleLinkClick(heading.id),onKeyDown:e=>handleKeyDown(e,heading.id),style:{background:\"none\",border:\"none\",padding:0,color:linkColor,cursor:\"pointer\",textAlign:\"left\",textDecoration:\"none\",transition:\"color 0.2s ease\",width:\"100%\",wordWrap:\"break-word\",overflowWrap:\"break-word\",whiteSpace:\"normal\",...linkFont},onMouseEnter:e=>{e.currentTarget.style.color=hoverColor;},onMouseLeave:e=>{e.currentTarget.style.color=linkColor;},\"aria-label\":`Navigate to ${heading.text}`,children:heading.text})},index))})})]});}addPropertyControls(TableOfContents,{title:{type:ControlType.String,title:\"Title\",defaultValue:\"In this article\"},titleFont:{type:ControlType.Font,title:\"Title Font\",defaultValue:{fontSize:\"18px\",variant:\"Semibold\",letterSpacing:\"-0.01em\",lineHeight:\"1.2em\"},controls:\"extended\",defaultFontType:\"sans-serif\"},linkFont:{type:ControlType.Font,title:\"Link Font\",defaultValue:{fontSize:\"14px\",variant:\"Medium\",letterSpacing:\"-0.01em\",lineHeight:\"1.3em\"},controls:\"extended\",defaultFontType:\"sans-serif\"},titleColor:{type:ControlType.Color,title:\"Title Color\",defaultValue:\"#000000\"},linkColor:{type:ControlType.Color,title:\"Link Color\",defaultValue:\"#666666\"},hoverColor:{type:ControlType.Color,title:\"Hover Color\",defaultValue:\"#000000\"},lineColor:{type:ControlType.Color,title:\"Line Color\",defaultValue:\"#666666\"},lineThickness:{type:ControlType.Number,title:\"Line Thickness\",defaultValue:2,min:1,max:10,unit:\"px\"},lineStyle:{type:ControlType.Enum,title:\"Line Style\",options:[\"solid\",\"dashed\",\"dotted\"],optionTitles:[\"Solid\",\"Dashed\",\"Dotted\"],defaultValue:\"solid\",displaySegmentedControl:true},backgroundColor:{type:ControlType.Color,title:\"Background\",defaultValue:\"#F5F5F5\"},borderRadius:{type:ControlType.Number,title:\"Border Radius\",defaultValue:8,min:0,max:32,unit:\"px\"},padding:{type:ControlType.Number,title:\"Padding\",defaultValue:16,min:0,max:48,unit:\"px\"},gap:{type:ControlType.Number,title:\"Gap\",defaultValue:12,min:0,max:32,unit:\"px\"},showBorder:{type:ControlType.Boolean,title:\"Show Border\",defaultValue:false,enabledTitle:\"Show\",disabledTitle:\"Hide\"},borderColor:{type:ControlType.Color,title:\"Border Color\",defaultValue:\"#EEEEEE\",hidden:({showBorder})=>!showBorder}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"TableOfContents\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\",\"framerSupportedLayoutHeight\":\"auto\",\"framerSupportedLayoutWidth\":\"auto\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./TableOfContents.map"],"mappings":"gUAIG,SAAwB,EAAgB,EAAM,CAAC,GAAK,CAAC,QAAM,YAAU,WAAS,aAAW,YAAU,aAAW,kBAAgB,eAAa,UAAQ,MAAI,aAAW,cAAY,YAAU,gBAAc,aAAW,EAAW,CAAC,EAAS,GAAaA,EAAS,EAAE,CAAC,CAAC,MAAc,CAAC,GAAU,IAAS,OAAY,OAAO,IAAM,MAAoB,CAAC,IAAM,EAAW,SAAS,iBAAiB,KAAK,CAAO,EAAY,MAAM,KAAK,EAAW,CAAC,KAAK,EAAG,IAAQ,CAAC,IAAI,EAAG,EAAG,GAA2C,OAApC,IAAI,EAAG,WAAW,IAAQ,EAAG,GAAG,GAAU,CAAC,KAAK,EAAG,aAAa,GAAM,KAAG,EAAG,CAAC,MAAoB,EAAY,EAAY,CAAC,EACzkB,GAAiB,CACjB,IAAM,EAAS,IAAI,qBAAqB,CAAC,GAAiB,EAAG,CAA+D,OAA9D,EAAS,QAAQ,SAAS,KAAK,CAAC,UAAU,GAAK,QAAQ,GAAK,CAAC,KAAW,EAAS,YAAY,EAAG,EAAE,CAAC,CAAC,IAAM,EAAgB,GAAI,CAAC,GAAU,IAAS,OAAY,OAAO,IAAM,EAAQ,SAAS,eAAe,EAAG,CAAI,GAAS,EAAQ,eAAe,CAAC,SAAS,SAAS,CAAC,EAAU,GAAe,EAAM,IAAK,EAAI,EAAM,MAAM,SAAS,EAAM,MAAM,OAAK,EAAM,gBAAgB,CAAC,EAAgB,EAAG,GAAyC,OAAlC,EAAS,SAAS,EAAU,KAA0B,EAAM,MAAM,CAAC,MAAM,CAAC,GAAG,EAAM,MAAM,kBAAgB,eAAa,UAAQ,OAAO,EAAW,aAAa,IAAc,OAAO,QAAQ,OAAO,cAAc,SAAS,MAAI,MAAM,OAAO,OAAO,OAAO,SAAS,SAAS,CAAC,SAAS,CAAc,EAAK,KAAK,CAAC,MAAM,CAAC,OAAO,EAAE,MAAM,EAAW,GAAG,EAAU,CAAC,SAAS,EAAM,CAAC,CAAc,EAAK,MAAM,CAAC,SAAsB,EAAK,KAAK,CAAC,MAAM,CAAC,OAAO,EAAE,QAAQ,EAAE,UAAU,OAAO,QAAQ,OAAO,cAAc,SAAS,IAAI,EAAI,GAAG,WAAW,GAAG,EAAc,KAAK,EAAU,GAAG,IAAY,YAAY,GAAG,CAAC,SAAS,EAAS,KAAK,EAAQ,IAAqB,EAAK,KAAK,CAAC,SAAsB,EAAK,SAAS,CAAC,YAAY,EAAgB,EAAQ,GAAG,CAAC,UAAU,GAAG,EAAc,EAAE,EAAQ,GAAG,CAAC,MAAM,CAAC,WAAW,OAAO,OAAO,OAAO,QAAQ,EAAE,MAAM,EAAU,OAAO,UAAU,UAAU,OAAO,eAAe,OAAO,WAAW,kBAAkB,MAAM,OAAO,SAAS,aAAa,aAAa,aAAa,WAAW,SAAS,GAAG,EAAS,CAAC,aAAa,GAAG,CAAC,EAAE,cAAc,MAAM,MAAM,GAAa,aAAa,GAAG,CAAC,EAAE,cAAc,MAAM,MAAM,GAAY,aAAa,eAAe,EAAQ,OAAO,SAAS,EAAQ,KAAK,CAAC,CAAC,CAAC,EAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,sBALpkD,IAAsD,IAAoD,CAK49C,EAAoB,EAAgB,CAAC,MAAM,CAAC,KAAK,EAAY,OAAO,MAAM,QAAQ,aAAa,kBAAkB,CAAC,UAAU,CAAC,KAAK,EAAY,KAAK,MAAM,aAAa,aAAa,CAAC,SAAS,OAAO,QAAQ,WAAW,cAAc,UAAU,WAAW,QAAQ,CAAC,SAAS,WAAW,gBAAgB,aAAa,CAAC,SAAS,CAAC,KAAK,EAAY,KAAK,MAAM,YAAY,aAAa,CAAC,SAAS,OAAO,QAAQ,SAAS,cAAc,UAAU,WAAW,QAAQ,CAAC,SAAS,WAAW,gBAAgB,aAAa,CAAC,WAAW,CAAC,KAAK,EAAY,MAAM,MAAM,cAAc,aAAa,UAAU,CAAC,UAAU,CAAC,KAAK,EAAY,MAAM,MAAM,aAAa,aAAa,UAAU,CAAC,WAAW,CAAC,KAAK,EAAY,MAAM,MAAM,cAAc,aAAa,UAAU,CAAC,UAAU,CAAC,KAAK,EAAY,MAAM,MAAM,aAAa,aAAa,UAAU,CAAC,cAAc,CAAC,KAAK,EAAY,OAAO,MAAM,iBAAiB,aAAa,EAAE,IAAI,EAAE,IAAI,GAAG,KAAK,KAAK,CAAC,UAAU,CAAC,KAAK,EAAY,KAAK,MAAM,aAAa,QAAQ,CAAC,QAAQ,SAAS,SAAS,CAAC,aAAa,CAAC,QAAQ,SAAS,SAAS,CAAC,aAAa,QAAQ,wBAAwB,GAAK,CAAC,gBAAgB,CAAC,KAAK,EAAY,MAAM,MAAM,aAAa,aAAa,UAAU,CAAC,aAAa,CAAC,KAAK,EAAY,OAAO,MAAM,gBAAgB,aAAa,EAAE,IAAI,EAAE,IAAI,GAAG,KAAK,KAAK,CAAC,QAAQ,CAAC,KAAK,EAAY,OAAO,MAAM,UAAU,aAAa,GAAG,IAAI,EAAE,IAAI,GAAG,KAAK,KAAK,CAAC,IAAI,CAAC,KAAK,EAAY,OAAO,MAAM,MAAM,aAAa,GAAG,IAAI,EAAE,IAAI,GAAG,KAAK,KAAK,CAAC,WAAW,CAAC,KAAK,EAAY,QAAQ,MAAM,cAAc,aAAa,GAAM,aAAa,OAAO,cAAc,OAAO,CAAC,YAAY,CAAC,KAAK,EAAY,MAAM,MAAM,eAAe,aAAa,UAAU,QAAQ,CAAC,gBAAc,CAAC,EAAW,CAAC,CAAC"}