(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[36369],{33747:(e,t,n)=>{"use strict";n.d(t,{Z:()=>s});/**
 * @license lucide-react v0.460.0 - ISC
 *
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */let s=(0,n(43349).Z)("OctagonAlert",[["path",{d:"M12 16h.01",key:"1drbdi"}],["path",{d:"M12 8v4",key:"1got3b"}],["path",{d:"M15.312 2a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586l-4.688-4.688A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2z",key:"1fd625"}]])},66596:(e,t,n)=>{"use strict";n.d(t,{Z:()=>s});/**
 * @license lucide-react v0.460.0 - ISC
 *
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */let s=(0,n(43349).Z)("RefreshCw",[["path",{d:"M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8",key:"v9h5vc"}],["path",{d:"M21 3v5h-5",key:"1q7to0"}],["path",{d:"M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16",key:"3uifl3"}],["path",{d:"M8 16H3v5",key:"1cv678"}]])},64049:(e,t,n)=>{"use strict";n.d(t,{Z:()=>p});var s=n(67841);n(79477);var r=n(64833),o=n(97718),l=n(82059),a=n(69448),i=n(89390);let c={tension:2*l.xh.springy.tension,friction:3*l.xh.springy.friction},d=(0,r.z)(o.q.line)({name:"Line",class:"l1etwsvd",propsAsIs:!0}),p=function(e){let t,{size:n=16,isEnabled:r,accentColor:p,status:u="idle",style:f={},...h}=e,m=(0,a.Z)(),x=function(e){switch(e){case"idle":case"hovering":return[{x1:2,y1:8,x2:22,y2:8},{x1:2,y1:16,x2:22,y2:16},{x1:10,y1:2,x2:6,y2:22},{x1:18,y1:2,x2:14,y2:22}];case"booped":return[{x1:2,y1:9,x2:22,y2:9},{x1:2,y1:15,x2:22,y2:15},{x1:11,y1:2,x2:7,y2:22},{x1:17,y1:2,x2:13,y2:22}];case"pressed":return[{x1:2,y1:12,x2:22,y2:12},{x1:2,y1:12,x2:22,y2:12},{x1:12,y1:2,x2:12,y2:22},{x1:12,y1:2,x2:12,y2:22}]}}(u),[v]=(0,o.bY)(x.length,e=>({to:x[e],config:"pressed"===u?c:l.xh.springy,immediate:m}),[u]);return t=r||"idle"!==u?1:.7,(0,s.jsx)(i.Z,{viewBox:"0 0 24 24",fill:"none",style:{width:n,height:n,opacity:t,...f},...h,children:v.map((e,t)=>(0,s.jsx)(d,{...e,stroke:r?p:"currentColor"},t))})};n(90572)},10496:(e,t,n)=>{"use strict";n.r(t),n.d(t,{default:()=>eq});var s=n(67841),r=n(79477),o=n(64833),l=n(77292),a=n(25967);let i={colors:{hover:"#FFFFFF",clickable:"hsl(207deg 23% 52%)",surface2:"hsl(227deg 11% 34%)",activeBackground:"hsl(210deg 15% 50% / 0.165)",surface1:"hsl(210deg 15% 6%)",inputBackground:"hsl(207deg 75% 15%)",accent:"hsl(50deg 100% 50%)",errorSurface:"hsl(3deg 100% 90%)",error:"hsl(3deg 69% 30%)"},syntax:{plain:"hsl(0deg 0% 100%)",comment:{color:"hsl(200deg 18% 51%)"},keyword:"hsl(266deg 80% 75%)",tag:"hsl(326deg 100% 61%)",punctuation:"var(--color-gray-800)",definition:"hsl(326deg 100% 61%)",property:{color:"hsl(326deg 100% 61%)"},static:"hsl(0deg 0% 100%)",string:"hsl(50deg 100% 50%)"},font:{body:"var(--font-family)",mono:"var(--font-family-mono)",size:"0.875rem",lineHeight:"1.4"}};var c=n(81618);function d(e){var t;let{data:n,...s}=e;if(!Array.isArray(n))return null;let[r,...o]=n;if("string"!=typeof r)return e;let l=(null===(t=n[0].match(/%s/g))||void 0===t?void 0:t.length)||0,a=0;for(;a<l;){let e=o.shift();r=r.replace("%s",e),a++}return{data:[r,...o],...s}}let p=()=>{},u=r.createContext({logs:[],clearLogs:p,showLineNumbers:!1,setShowLineNumbers:p,formatCodeWithOffset:p,editorWrapperRef:{current:null},codeMirrorGrabberRef:{current:null},codeMirrorInstance:null});function f(e){let{showLineNumbers:t,children:o}=e,[a,i]=r.useState(t),[p,f]=function(){let{listen:e}=(0,l.useSandpack)(),[t,n]=r.useState([]),s=r.useCallback(()=>{n([])},[]);return r.useEffect(()=>e(e=>{("start"===e.type&&e.firstLoad||"refresh"===e.type)&&n([]),"console"===e.type&&e.codesandbox&&n(t=>{let n=[...t,...e.log.slice(0,1).map(d).filter(e=>null!==e)];return n.slice(Math.max(0,n.length-20))})}),[e]),[t,s]}(),h=r.useRef(null),m=function(e){let{showLineNumbers:t,editorWrapperRef:s}=e,{sandpack:o}=(0,l.useSandpack)(),a=(0,l.useActiveCode)(),{activeFile:i}=o,c=r.useRef(null),d=r.useRef(null),p=r.useRef(null),u=r.useRef(null),f=r.useRef(null),h=r.useRef(a);return r.useEffect(()=>{h.current=a},[a]),r.useEffect(()=>{Promise.all([n.e(70316).then(n.bind(n,70316)),n.e(23947).then(n.t.bind(n,23947,23)),n.e(93905).then(n.t.bind(n,93905,23)),n.e(52487).then(n.t.bind(n,70449,23)),n.e(54341).then(n.bind(n,26294))]).then(e=>{let[t,n,s,r,o]=e;c.current=t,d.current=n,p.current=s,u.current=r,f.current=o}).catch(e=>{console.error("Could not load Prettier and its parsers:",e)})},[]),r.useCallback(async e=>{let n;let r=c.current,o=d.current,l=p.current,a=u.current,m=f.current;if(!r||!o||!l||!a||!m)return;let x={trailingComma:"es5",singleQuote:!0,printWidth:function(e){let{showLineNumbers:t,editorWrapperRef:n}=e;if(!n.current)return 40;try{let{width:e}=n.current.getBoundingClientRect(),s=Math.round((e-(t?70:40))/9);return s=Math.min(s,80)}catch(e){return 40}}({showLineNumbers:t,editorWrapperRef:s})},v=i.match(/\.jsx*/i)?"javascript":i.match(/\.css/i)?"css":i.match(/\.html*/i)?"html":"unknown";try{if("javascript"===v)n=await r.formatWithCursor(h.current.code,{parser:"babel",plugins:[a,m],cursorOffset:e,...x});else if("css"===v)n=await r.formatWithCursor(h.current.code,{parser:"css",plugins:[l],cursorOffset:e,...x});else{if("html"!==v)return;n=await r.formatWithCursor(h.current.code,{parser:"html",plugins:[o],cursorOffset:e,...x})}}catch(e){console.error("Could not format code. Error:"),console.error(e);return}let{formatted:w,cursorOffset:y}=n;return w=w.trim(),h.current.updateCode(w),y},[s,t,i])}({showLineNumbers:a,editorWrapperRef:h}),{codeMirrorGrabberRef:x,codeMirrorInstance:v}=function(){let{sandpack:e}=(0,l.useSandpack)(),t=r.useRef(),[n,s]=r.useState(null);return(0,c.Z)(()=>{if(t.current)try{let e=t.current.getCodemirror();e&&s(e)}catch(e){}},n?null:200),r.useEffect(()=>{s(void 0)},[e.activeFile]),{codeMirrorGrabberRef:t,codeMirrorInstance:n}}(),w=r.useCallback(async function(){if(!v){console.error("CodeMirror not instantiated yet; cannot format");return}try{var e,t,n,s;let r=null===(s=v.state)||void 0===s?void 0:null===(n=s.selection)||void 0===n?void 0:null===(t=n.ranges)||void 0===t?void 0:null===(e=t[0])||void 0===e?void 0:e.from,o=await m(r);null==v||v.dispatch({selection:{anchor:o}})}catch(e){console.error("Error formatting code:",e)}},[m,v]);r.useEffect(()=>{if(!v)return;let e=e=>{e.metaKey&&"s"===e.key&&(e.preventDefault(),e.stopPropagation(),w())};return v.dom.addEventListener("keydown",e),()=>{v.dom.removeEventListener("keydown",e)}},[w,v]);let y=r.useMemo(()=>({logs:p,clearLogs:f,showLineNumbers:a,setShowLineNumbers:i,formatCodeWithOffset:w,editorWrapperRef:h,codeMirrorGrabberRef:x,codeMirrorInstance:v}),[p,f,a,w,x,v]);return(0,s.jsx)(u.Provider,{value:y,children:o})}let h=function(){let{formatCodeWithOffset:e}=r.useContext(u);return r.useCallback(t=>{let n=t.metaKey&&"s"===t.key,s=t.ctrlKey&&"s"===t.key;(n||s)&&(t.preventDefault(),t.stopPropagation(),e())},[e])},m=(0,o.z)("div")({name:"InlineOuterWrapper",class:"io76lfy",propsAsIs:!1}),x=(0,o.z)(a.Z)({name:"Wrapper",class:"w5hp34c",propsAsIs:!0});(0,o.z)(x)({name:"FullscreenWrapper",class:"f1iq4mh",propsAsIs:!0}),(0,o.z)(x)({name:"InlineWrapper",class:"i1mpjo2u",propsAsIs:!0});let v=function(e){let{id:t,stacked:n,className:r,isFullscreened:o,children:a,ref:c}=e,d=h();return(0,s.jsx)(m,{ref:c,"data-id":t,"data-can-be-annotated":!1,"data-stacked":String(!!n),onKeyDown:d,children:(0,s.jsx)(x,{className:r,"data-is-fullscreened":o,children:(0,s.jsx)(l.SandpackThemeProvider,{theme:i,children:a})})})};n(98526);var w=n(74631),y=n(91952);let b={vanilla:{template:"vanilla",files:{}},react:{template:"react",files:{"/App.js":{code:"export default function App() {\n  return <h1>Hello World</h1>\n}\n"},"/index.js":{hidden:!0,code:'import React from "react";\nimport { createRoot } from \'react-dom/client\';\nimport "./reset.css";\nimport "./styles.css";\nimport App from "./App";\n\nconst container = document.getElementById(\'root\');\nconst root = createRoot(container);\n\nroot.render(<App />);'},"/reset.css":{hidden:!0,code:"\n/*\n  Jerica's Custom CSS Reset\n  https://designselement.com/css/custom-css-reset/\n*/\n*, *::before, *::after {\n  box-sizing: border-box;\n}\n* {\n  margin: 0;\n}\nhtml, body {\n  height: 100%;\n}\nbody {\n  line-height: 1.5;\n  -webkit-font-smoothing: antialiased;\n}\nimg, picture, video, canvas, svg {\n  display: block;\n  max-width: 100%;\n}\ninput, button, textarea, select {\n  font: inherit;\n}\np, h1, h2, h3, h4, h5, h6 {\n  overflow-wrap: break-word;\n}\n#root, #__next {\n  isolation: isolate;\n}\n\n/* Basic theme styles */\nbody {\n  padding: 16px;\n  font-family: 'Wotfard', sans-serif;\n}\n\ntable {\n  width: 100%;\n  border-collapse: collapse;\n}\nth {\n  text-align: left;\n  border-bottom: 3px solid hsl(0deg 0% 25%);\n}\ntr:not(:last-of-type) td {\n  border-bottom: 1px solid hsl(0deg 0% 50%);\n}\n\n/* Custom fonts */\n@font-face {\n  font-family: 'Wotfard';\n  src: url('/fonts/wotfard/wotfard-semibold-webfont.woff2')\n    format('woff2');\n  font-weight: 600;\n  font-style: normal;\n  font-display: fallback;\n}\n\n@font-face {\n  font-family: 'Wotfard';\n  src: url('/fonts/wotfard/wotfard-medium-webfont.woff2')\n    format('woff2');\n  font-weight: 500;\n  font-style: normal;\n  font-display: fallback;\n}\n\n@font-face {\n  font-family: 'Wotfard';\n  src: url('/fonts/wotfard/wotfard-regular-webfont.woff2')\n    format('woff2');\n  font-weight: 400;\n  font-style: normal;\n  font-display: fallback;\n}\n      "},"/styles.css":{hidden:!0,code:""},"/public/index.html":{hidden:!0,code:'<!DOCTYPE html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>Document</title>\n  </head>\n  <body>\n    <div id="root"></div>\n  </body>\n</html>'}},dependencies:{react:"^17.0.0","react-dom":"^17.0.0","react-scripts":"^4.0.0"},entry:"/index.js",main:"/App.js",environment:"create-react-app"},"basic-react":{template:"react",files:{}},"strict-react":{template:"react",files:{"/App.js":{code:"export default function App() {\n  return <h1>Hello World</h1>\n}\n"},"/index.js":{hidden:!0,code:'import React from "react";\nimport { createRoot } from \'react-dom/client\';\nimport "./reset.css";\nimport "./styles.css";\nimport App from "./App";\n\nconst container = document.getElementById(\'root\');\nconst root = createRoot(container);\n\nroot.render(\n  <React.StrictMode>\n    <App />\n  </React.StrictMode>\n);'},"/reset.css":{hidden:!0,code:"\n/*\n  Jerica's Custom CSS Reset\n  https://designselement.com/css/custom-css-reset/\n*/\n*, *::before, *::after {\n  box-sizing: border-box;\n}\n* {\n  margin: 0;\n}\nhtml, body {\n  height: 100%;\n}\nbody {\n  line-height: 1.5;\n  -webkit-font-smoothing: antialiased;\n}\nimg, picture, video, canvas, svg {\n  display: block;\n  max-width: 100%;\n}\ninput, button, textarea, select {\n  font: inherit;\n}\np, h1, h2, h3, h4, h5, h6 {\n  overflow-wrap: break-word;\n}\n#root, #__next {\n  isolation: isolate;\n}\n\n/* Basic theme styles */\nbody {\n  padding: 16px;\n  font-family: 'Wotfard', sans-serif;\n}\n\ntable {\n  width: 100%;\n  border-collapse: collapse;\n}\nth {\n  text-align: left;\n  border-bottom: 3px solid hsl(0deg 0% 25%);\n}\ntr:not(:last-of-type) td {\n  border-bottom: 1px solid hsl(0deg 0% 50%);\n}\n\n/* Custom fonts */\n@font-face {\n  font-family: 'Wotfard';\n  src: url('/fonts/wotfard/wotfard-semibold-webfont.woff2')\n    format('woff2');\n  font-weight: 600;\n  font-style: normal;\n  font-display: fallback;\n}\n\n@font-face {\n  font-family: 'Wotfard';\n  src: url('/fonts/wotfard/wotfard-medium-webfont.woff2')\n    format('woff2');\n  font-weight: 500;\n  font-style: normal;\n  font-display: fallback;\n}\n\n@font-face {\n  font-family: 'Wotfard';\n  src: url('/fonts/wotfard/wotfard-regular-webfont.woff2')\n    format('woff2');\n  font-weight: 400;\n  font-style: normal;\n  font-display: fallback;\n}\n      "},"/styles.css":{hidden:!0,code:""},"/public/index.html":{hidden:!0,code:'<!DOCTYPE html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>Document</title>\n  </head>\n  <body>\n    <div id="root"></div>\n  </body>\n</html>'}},dependencies:{react:"^17.0.0","react-dom":"^17.0.0","react-scripts":"^4.0.0"},entry:"/index.js",main:"/App.js",environment:"create-react-app"}},g=r.createContext(()=>{});function j(e,t){let{files:n}=b[e],s={...n,...t};return(0,w.Lk)(s,(e,t)=>"string"==typeof t?t.trim():{...t,code:t.code.trim()})}let k=e=>{let{id:t,size:n,preset:o="react",files:a,activePath:i,dependencies:c={},showLineNumbers:d,children:p}=e,[u,h]=r.useState(()=>j(o,a)),{template:m}=b[o],x=r.useMemo(()=>{let{template:e,files:t,...n}=b[o];return{...n,dependencies:c}},[o,c]),v=r.useCallback(()=>{h(j(o,a))},[o,a]);r.useEffect(()=>{},[t]);let w="wide"===n?y.Z:"div";return(0,s.jsx)(g.Provider,{value:v,children:(0,s.jsx)(w,{children:(0,s.jsx)(l.SandpackProvider,{template:m,files:u,options:{id:t,activeFile:i,bundlerURL:"https://sandpack-bundler.vercel.app/",recompileMode:"delayed",recompileDelay:500},customSetup:x,children:(0,s.jsx)(f,{showLineNumbers:d,children:p})})})})};var C=n(64049),z=n(34308),A=n(18503);let I=(0,o.z)(A.Z)({name:"Wrapper",class:"w1nr0b8d",propsAsIs:!0}),R=e=>{let{accentColor:t}=e,{showLineNumbers:n,setShowLineNumbers:o}=r.useContext(u),[l,a]=r.useState("idle");return r.useEffect(()=>{if("booped"!==l)return;let e=window.setTimeout(()=>{a("hovering")},150);return()=>{window.clearTimeout(e)}}),(0,s.jsxs)(I,{title:"Toggle line numbers",onClick:()=>o(!n),onMouseEnter:()=>a("booped"),onMouseLeave:()=>a("idle"),onMouseDown:()=>a("pressed"),onMouseUp:()=>a("hovering"),children:[(0,s.jsx)(C.Z,{size:16,isEnabled:n,status:l,accentColor:t}),(0,s.jsxs)(z.Z,{children:[n?"Hide":"Show"," line numbers"]})]})};n(61231);var S=n(73060),E=n(60637);let W=function(e){let{accentColor:t}=e,{formatCodeWithOffset:n}=r.useContext(u);return(0,s.jsx)(E.Z,{accentColor:t,handleFormat:n})};var L=n(46336);let M=(0,o.z)(A.Z)({name:"Wrapper",class:"w1jngkvq",propsAsIs:!0}),Z=e=>{let{accentColor:t}=e,[n,o]=r.useState(!1);return(0,s.jsxs)(M,{as:l.UnstyledOpenInCodeSandboxButton,onMouseEnter:()=>o(!0),onMouseLeave:()=>o(!1),children:[(0,s.jsx)(L.Z,{size:16,accentColor:t,isHovering:n}),(0,s.jsx)(z.Z,{children:"Open in CodeSandbox"})]})};n(21948);let P="hsl(50deg 100% 50%)",T=(0,o.z)("header")({name:"Wrapper",class:"wqhni94",propsAsIs:!1}),q=(0,o.z)("p")({name:"Title",class:"takdomy",propsAsIs:!1}),B=(0,o.z)("div")({name:"Actions",class:"a1bczmae",propsAsIs:!1}),F=function(e){let{title:t}=e,n=function(){let e=r.useContext(g);if(void 0===e)throw Error("useResetFiles must be used within a Provider");return e}();return(0,s.jsxs)(T,{children:[(0,s.jsxs)(q,{children:[t||"Code Playground"," "]}),(0,s.jsxs)(B,{children:[(0,s.jsx)(S.Z,{accentColor:P,handleReset:n}),(0,s.jsx)(R,{accentColor:P}),(0,s.jsx)(W,{accentColor:P}),(0,s.jsx)(Z,{accentColor:P})]})]})};n(59150);let N=(0,o.z)("div")({name:"Wrapper",class:"wz6vz5e",propsAsIs:!1}),O=function(){let{codeMirrorGrabberRef:e,editorWrapperRef:t,showLineNumbers:n}=r.useContext(u);return(0,s.jsx)(N,{ref:t,translate:"no",children:(0,s.jsx)(l.SandpackCodeEditor,{ref:e,wrapContent:!0,showLineNumbers:n})})};n(19907);var H=n(66596);let D=(0,o.z)(A.Z)({name:"Wrapper",class:"whty8xo",propsAsIs:!0}),_=()=>{let{refresh:e}=(0,l.useSandpackNavigation)(),[t,n]=r.useState(0),[o,a]=r.useState(!1);return(0,s.jsx)("abbr",{title:"Refresh pane",children:(0,s.jsxs)(D,{onClick:()=>{e(),n(e=>e+180)},onMouseEnter:()=>a(!0),onMouseLeave:()=>a(!1),style:{transform:"rotate(".concat(t,"deg)"),opacity:o?1:.7},children:[(0,s.jsx)(H.Z,{size:16}),(0,s.jsx)(z.Z,{children:"Refresh results pane"})]})})};n(14032);var U=n(43349);/**
 * @license lucide-react v0.460.0 - ISC
 *
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */let K=(0,U.Z)("Slash",[["path",{d:"M22 2 2 22",key:"y4kqgn"}]]),J=(0,o.z)(A.Z)({name:"Wrapper",class:"w11fipa1",propsAsIs:!0}),Y=()=>{let[e,t]=r.useState(0),[n,o]=r.useState(!1),{clearLogs:l}=r.useContext(u);return(0,s.jsx)("abbr",{title:"Refresh pane",children:(0,s.jsxs)(J,{onClick:()=>{l(),t(e=>e+180)},onMouseEnter:()=>o(!0),onMouseLeave:()=>o(!1),style:{transform:"rotate(".concat(e,"deg)"),opacity:n?1:.7},children:[(0,s.jsx)(K,{size:16}),(0,s.jsx)(z.Z,{children:"Clear Console"})]})})};n(92829);let V=(0,o.z)("div")({name:"Wrapper",class:"w1n7upnl",propsAsIs:!1}),G=(0,o.z)("div")({name:"Tab",class:"tv02bcs",propsAsIs:!1}),Q=(0,o.z)(G)({name:"ActiveTab",class:"a5rk396",propsAsIs:!0}),X=(0,o.z)("div")({name:"Actions",class:"a1puyu63",propsAsIs:!1}),$=function(e){let{tabs:t,activeTab:n,handleSelectTab:r}=e,o="function"==typeof r&&t.length>1;return n||o||(n=t[0]),(0,s.jsxs)(V,{children:[t.map(e=>{if(!o)return(0,s.jsx)(Q,{style:{cursor:"default"},children:e},e);let t=e===n?Q:G;return(0,s.jsx)(t,{as:"button",onClick:()=>r(e),children:e},e)}),(0,s.jsx)(X,{children:"console"===n?(0,s.jsx)(Y,{}):(0,s.jsx)(_,{})})]})};n(4189);/**
 * @license lucide-react v0.460.0 - ISC
 *
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */let ee=(0,U.Z)("CircleAlert",[["circle",{cx:"12",cy:"12",r:"10",key:"1mglay"}],["line",{x1:"12",x2:"12",y1:"8",y2:"12",key:"1pkeuh"}],["line",{x1:"12",x2:"12.01",y1:"16",y2:"16",key:"4dfq90"}]]);var et=n(33747);let en=e=>{switch(e){case"warn":return{Icon:ee,color:"hsl(50deg 100% 85%)"};case"error":return{Icon:et.Z,color:"hsl(350deg 80% 82%)"};default:return{Icon:null,color:"white"}}},es=(0,o.z)("li")({name:"Wrapper",class:"wodakp4",propsAsIs:!1}),er=(0,o.z)("div")({name:"IconWrapper",class:"i1r571h9",propsAsIs:!1}),eo=(0,o.z)("div")({name:"ItemsWrapper",class:"ikoec29",propsAsIs:!1}),el=(0,o.z)("span")({name:"Item",class:"i1ywvga7",propsAsIs:!1}),ea=function(e){let{data:t,method:n}=e,{Icon:r,color:o}=en(n);return(0,s.jsxs)(es,{style:{"--color":o},children:[r&&(0,s.jsx)(er,{children:(0,s.jsx)(r,{size:16})}),(0,s.jsx)(eo,{children:t.map((e,t)=>{let n,r;try{n="".concat(t,"|").concat(e)}catch(e){n=t}return"string"==typeof e?(0,s.jsx)(el,{children:e},n):(r=null!=e&&"string"==typeof e["@t"]?e["@t"]:function(e){let t;try{t=JSON.stringify(e,null,2)}catch(n){try{t=Object.prototype.toString.call(e)}catch(n){t="["+typeof e+"]"}}return t}(e),(0,s.jsx)(el,{children:(0,s.jsx)(l.SandpackCodeViewer,{showTabs:!1,initMode:"user-visible",code:r})},n))})})]})};n(80449);let ei=(0,o.z)("ol")({name:"Wrapper",class:"w9st8ae",propsAsIs:!1}),ec=function(){let{logs:e}=r.useContext(u),t=r.useRef(null);return(r.useEffect(()=>{t.current&&(t.current.scrollTop=t.current.scrollHeight)},[e]),0===e.length)?null:(0,s.jsx)(ei,{ref:t,children:e.map(e=>(0,s.jsx)(ea,{...e},e.id))})};n(30639);let ed=(0,o.z)("div")({name:"InnerWrapper",class:"i13sqsb4",propsAsIs:!1}),ep=(0,o.z)("div")({name:"CodeEditorWrapper",class:"cwadq0p",propsAsIs:!1}),eu=(0,o.z)("div")({name:"ResultOuterWrapper",class:"r15tdzfk",propsAsIs:!1}),ef=(0,o.z)("div")({name:"ResultWrapper",class:"r29zulw",propsAsIs:!1}),eh=(0,o.z)("div")({name:"RoundedCorners",class:"r1fige5",propsAsIs:!1}),em=(0,o.z)("div")({name:"ConsoleWrapper",class:"c1xyggd",propsAsIs:!1}),ex=(0,o.z)("div")({name:"PreviewRow",class:"prqec4b",propsAsIs:!1}),ev=(0,o.z)("div")({name:"ConsoleRow",class:"c19l1n8l",propsAsIs:!1}),ew=function(e){let t,{title:n,resultTabs:r,activeResultTab:o,handleSelectResultTab:a,splitConsole:i,minPreviewHeight:c,minEditorHeight:d=90,maxEditorHeight:p=625,transparentBackground:u,isRenderingPreview:f}=e,h=function(e,t){var n;let{code:s}=(0,l.useActiveCode)(),r=(null===(n=s.match(/\n/g))||void 0===n?void 0:n.length)||1;return(0,w.uZ)(21*r+40+60,e,t)/16+"rem"}(d,p);return t=i?(0,s.jsxs)(eu,{children:[(0,s.jsxs)(ex,{children:[(0,s.jsx)($,{tabs:["result"]}),(0,s.jsx)(ef,{style:{"--height":"number"==typeof c?c+"px":c},children:(0,s.jsx)(eh,{children:f&&(0,s.jsx)(l.SandpackPreview,{showNavigator:!1,showOpenInCodeSandbox:!1,showRefreshButton:!1})})})]}),(0,s.jsxs)(ev,{children:[(0,s.jsx)($,{tabs:["console"]}),(0,s.jsx)(ef,{style:{paddingTop:16,paddingBottom:16},children:(0,s.jsx)(eh,{children:(0,s.jsx)(em,{children:(0,s.jsx)(ec,{})})})})]})]}):(0,s.jsxs)(eu,{children:[(0,s.jsx)($,{tabs:r,activeTab:o,handleSelectTab:a}),(0,s.jsx)(ef,{style:{"--height":"number"==typeof c?c+"px":c},children:(0,s.jsxs)(eh,{style:{"--iframe-background-color":u?"hsl(210deg 15% 6%)":"transparent"},children:[f&&(0,s.jsx)(l.SandpackPreview,{showNavigator:!1,showOpenInCodeSandbox:!1,showRefreshButton:!1}),(0,s.jsx)(em,{style:{"--pointer-events":"console"===o?"auto":"none","--opacity":"console"===o?1:0,"--transition-delay":"console"===o?"0ms":"100ms","--child-delay":"console"===o?"200ms":"0ms"},children:(0,s.jsx)(ec,{})})]})})]}),(0,s.jsxs)(ed,{children:[(0,s.jsx)(F,{title:n}),(0,s.jsx)(ep,{style:{height:h},children:(0,s.jsx)(O,{})}),t]})};n(39185);let ey=function(e){let{rulerRef:t,containerRef:n,dividerRef:s,dividerWidth:o,defaultRatio:l,isFullscreened:a}=e,[i,c]=(0,r.useState)(782*l),[d,p]=(0,r.useState)(null);(0,r.useEffect)(()=>{let e=t.current,n=()=>{if(e){let t=e.clientWidth;p(e.getBoundingClientRect()),c(t*l-o)}};n();let s=(0,w.P2)(n,100);return window.addEventListener("resize",s),()=>window.removeEventListener("resize",s)},[a,l,o,t]);let u=(0,r.useCallback)(e=>{let{clientX:t}=e;d&&c(t-d.left)},[d]),f=(0,r.useCallback)(()=>{document.removeEventListener("mousemove",u),document.removeEventListener("mouseup",f),n.current&&(n.current.style.pointerEvents="")},[n,u]),h=(0,r.useCallback)(()=>{document.addEventListener("mousemove",u),document.addEventListener("mouseup",f),n.current&&(n.current.style.pointerEvents="none")},[n,u,f]);(0,r.useEffect)(()=>{let e=s.current;function t(){d&&c(d.width*l-o)}function n(e){"ArrowLeft"===e.key?c(e=>e-20):"ArrowRight"===e.key&&c(e=>e+20)}return e&&(e.addEventListener("mousedown",h),e.addEventListener("dblclick",t),e.addEventListener("keydown",n)),()=>{e&&(e.removeEventListener("mousedown",h),e.removeEventListener("dblclick",t),e.removeEventListener("keydown",n))}},[h,d,l,s,o]);let m=d?d.width-o:782,x=Math.min(i,m);return{leftWidth:x,rightWidth:m-x}},eb=(0,o.z)("div")({name:"Wrapper",class:"wpmelzo",propsAsIs:!1}),eg=(0,o.z)("div")({name:"Container",class:"c57y05s",propsAsIs:!1}),ej=(0,o.z)("div")({name:"Pane",class:"p1po48jq",propsAsIs:!1}),ek=(0,o.z)(ej)({name:"FirstPane",class:"fi4glkm",propsAsIs:!0}),eC=(0,o.z)(ej)({name:"SecondPane",class:"sm0fezx",propsAsIs:!0}),ez=(0,o.z)("button")({name:"Divider",class:"d5w3fkw",propsAsIs:!1}),eA=function(e){let{className:t="",splitRatio:n=.5,isFullscreened:o=!1,maxHeight:l,children:a}=e,i=r.useRef(null),c=r.useRef(null),d=r.useRef(null),{leftWidth:p,rightWidth:u}=ey({defaultRatio:n,rulerRef:i,containerRef:c,dividerRef:d,dividerWidth:16,isFullscreened:o}),[f,h]=r.Children.toArray(a);return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)("div",{ref:i}),(0,s.jsx)(eb,{style:{flex:o?1:void 0},children:(0,s.jsxs)(eg,{className:t,ref:c,style:{"--max-height":"number"==typeof l?"".concat(l,"px"):l},children:[(0,s.jsx)(ek,{style:{"--desktop-flex":p},children:f}),(0,s.jsx)(ez,{ref:d,children:(0,s.jsx)(z.Z,{children:"Resize editor. Use left/right arrows."})}),(0,s.jsx)(eC,{style:{"--desktop-flex":u},children:h})]})})]})};n(30702);let eI=(0,o.z)("div")({name:"InnerWrapper",class:"ibsvt7h",propsAsIs:!1}),eR=(0,o.z)("div")({name:"ResultOuterWrapper",class:"r1w674po",propsAsIs:!1}),eS=(0,o.z)("div")({name:"ResultWrapper",class:"r14pemjt",propsAsIs:!1}),eE=(0,o.z)("div")({name:"RoundedCorners",class:"r1lwkt8c",propsAsIs:!1}),eW=(0,o.z)("div")({name:"ConsoleWrapper",class:"cvykehj",propsAsIs:!1}),eL=(0,o.z)("div")({name:"PreviewRow",class:"ps80g1r",propsAsIs:!1}),eM=(0,o.z)("div")({name:"ConsoleRow",class:"cgb9yb1",propsAsIs:!1}),eZ=function(e){let t,{title:n,resultTabs:r,activeResultTab:o,handleSelectResultTab:a,splitConsole:i,splitRatio:c,minPreviewHeight:d,transparentBackground:p,isRenderingPreview:u}=e;return t=i?(0,s.jsxs)(eR,{children:[(0,s.jsxs)(eL,{children:[(0,s.jsx)($,{tabs:["result"]}),(0,s.jsx)(eS,{style:{minHeight:"number"==typeof d?d+"px":d},children:(0,s.jsx)(eE,{children:u&&(0,s.jsx)(l.SandpackPreview,{showNavigator:!1,showOpenInCodeSandbox:!1,showRefreshButton:!1})})})]}),(0,s.jsxs)(eM,{children:[(0,s.jsx)($,{tabs:["console"]}),(0,s.jsx)(eS,{style:{paddingTop:16,paddingBottom:16},children:(0,s.jsx)(eE,{children:(0,s.jsx)(eW,{children:(0,s.jsx)(ec,{})})})})]})]}):(0,s.jsxs)(eR,{children:[(0,s.jsx)($,{tabs:r,activeTab:o,handleSelectTab:a}),(0,s.jsx)(eS,{children:(0,s.jsxs)(eE,{style:{"--iframe-background-color":p?"hsl(210deg 15% 6%)":"transparent"},children:[u&&(0,s.jsx)(l.SandpackPreview,{showNavigator:!1,showOpenInCodeSandbox:!1,showRefreshButton:!1,style:{minHeight:"number"==typeof d?d+"px":d}}),(0,s.jsx)(eW,{style:{"--pointer-events":"console"===o?"auto":"none","--opacity":"console"===o?1:0,"--transition-delay":"console"===o?"0ms":"100ms","--child-delay":"console"===o?"200ms":"0ms"},children:(0,s.jsx)(ec,{})})]})})]}),(0,s.jsxs)(eI,{children:[(0,s.jsx)(F,{title:n}),(0,s.jsxs)(eA,{splitRatio:c,children:[(0,s.jsx)(O,{}),t]})]})};n(30484);var eP=n(52574);let eT=function(e){let[t,n]=r.useState(!e),s=r.useRef(null),o=(0,eP.Z)(s);return r.useEffect(()=>{e&&!t&&o&&n(!0)},[t,e,o]),[t,s]},eq=function(e){let{id:t,title:n,preset:o,files:l,layout:a="stacked",size:i="normal",dependencies:c={},activePath:d,showLineNumbers:p=!1,minPreviewHeight:u=360,splitRatio:f=.5,startFullscreened:h=!1,resultTabs:m=["result","console"],initialTabIndex:x=0,splitConsole:w=!1,transparentBackground:y=!1,isLazy:b=!1,...g}=e,j=r.useId().replace(/:/g,""),C=t||j,[z,A]=r.useState(m[x]),[I,R]=eT(b);return(0,s.jsx)(k,{id:C,size:i,preset:o,files:l,activePath:d,dependencies:c,showLineNumbers:p,children:(0,s.jsxs)(v,{id:C,ref:R,isFullscreened:!1,children:["split"===a&&(0,s.jsx)(eZ,{title:n,resultTabs:m,activeResultTab:z,handleSelectResultTab:A,splitRatio:f,splitConsole:w,minPreviewHeight:u,transparentBackground:y,isRenderingPreview:I,...g}),"stacked"===a&&(0,s.jsx)(ew,{title:n,resultTabs:m,activeResultTab:z,handleSelectResultTab:A,splitConsole:w,minPreviewHeight:u,transparentBackground:y,isRenderingPreview:I,...g})]})})}},52574:(e,t,n)=>{"use strict";n.d(t,{Z:()=>r});var s=n(79477);function r(e){let t=arguments.length>1&&void 0!==arguments[1]&&arguments[1],n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{threshold:[0],ignoreSubsequentEntries:!1},[r,o]=s.useState(t),l=s.useRef(n.threshold);return l.current=n.threshold,s.useEffect(()=>{if(!e.current||r&&n.ignoreSubsequentEntries)return;let t=new window.IntersectionObserver(e=>{let[t]=e;o(t.intersectionRatio>0)},{threshold:l.current});return t.observe(e.current),()=>{t.disconnect()}},[r,e,n.ignoreSubsequentEntries]),r}},90572:e=>{e.exports={l1etwsvd:"l1etwsvd"}},70881:e=>{e.exports={fegvmv9:"fegvmv9",t1e31uhj:"t1e31uhj",a1perbvc:"a1perbvc"}},19907:e=>{e.exports={wz6vz5e:"wz6vz5e"}},98526:e=>{e.exports={io76lfy:"io76lfy",w5hp34c:"w5hp34c","sp-wrapper":"sp-wrapper","sp-cm":"sp-cm",fadeIn:"fadeIn","sp-code-editor":"sp-code-editor","sp-tabs":"sp-tabs","sp-stack":"sp-stack","cm-editor":"cm-editor","cm-content":"cm-content","cm-scroller":"cm-scroller","cm-line":"cm-line","cm-activeLine":"cm-activeLine","cm-gutters":"cm-gutters","cm-lineNumbers":"cm-lineNumbers","sp-pre-placeholder":"sp-pre-placeholder","sp-tab-button":"sp-tab-button"}},30639:e=>{e.exports={w9st8ae:"w9st8ae"}},80449:e=>{e.exports={wodakp4:"wodakp4",i1r571h9:"i1r571h9",ikoec29:"ikoec29",i1ywvga7:"i1ywvga7",fadeFromTransparent:"fadeFromTransparent","sp-cm":"sp-cm","cm-content":"cm-content","cm-line":"cm-line","sp-pre-placeholder":"sp-pre-placeholder"}},4189:e=>{e.exports={w1n7upnl:"w1n7upnl",tv02bcs:"tv02bcs",a5rk396:"a5rk396",a1puyu63:"a1puyu63"}},30702:e=>{e.exports={wpmelzo:"wpmelzo",c57y05s:"c57y05s",p1po48jq:"p1po48jq",fi4glkm:"fi4glkm",sm0fezx:"sm0fezx",d5w3fkw:"d5w3fkw"}},92829:e=>{e.exports={w11fipa1:"w11fipa1"}},21948:e=>{e.exports={w1jngkvq:"w1jngkvq"}},61231:e=>{e.exports={w1nr0b8d:"w1nr0b8d"}},14032:e=>{e.exports={whty8xo:"whty8xo"}},59150:e=>{e.exports={wqhni94:"wqhni94",takdomy:"takdomy",a1bczmae:"a1bczmae"}},30484:e=>{e.exports={ibsvt7h:"ibsvt7h","sp-code-editor":"sp-code-editor",r1w674po:"r1w674po",r14pemjt:"r14pemjt",r1lwkt8c:"r1lwkt8c",cvykehj:"cvykehj",ps80g1r:"ps80g1r",cgb9yb1:"cgb9yb1"}},39185:e=>{e.exports={i13sqsb4:"i13sqsb4",cwadq0p:"cwadq0p",r15tdzfk:"r15tdzfk",r29zulw:"r29zulw",r1fige5:"r1fige5",c1xyggd:"c1xyggd",prqec4b:"prqec4b",c19l1n8l:"c19l1n8l"}}}]);
//# sourceMappingURL=36369.9c78bab1bd5132ab.js.map