(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[15036],{15036:(e,t,n)=>{"use strict";n.r(t),n.d(t,{default:()=>ed});var a=n(67841),s=n(79477),r=n(64833),l=n(82059),o=n(53725),i=n(25967),c=n(91952);let d=(0,r.z)("div")({name:"InlineOuterWrapper",class:"il1gxx9",propsAsIs:!1}),u=(0,r.z)(i.Z)({name:"InlineWrapper",class:"i1j6zvew",propsAsIs:!0}),p=(0,r.z)(i.Z)({name:"FullscreenWrapper",class:"f1xbttis",propsAsIs:!0}),h=function(e){let{stacked:t,size:n,className:r,children:i,isFullscreened:h}=e,m=s.useRef(null),[f,g]=s.useState(h),[y,v]=s.useState(0);return(s.useEffect(()=>{g(h),m.current&&(h?v(m.current.getBoundingClientRect().height):v(0))},[h]),f)?(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(d,{children:(0,a.jsx)(u,{style:{...l.Ro,height:y}})}),(0,a.jsx)(o.Z,{children:(0,a.jsx)(p,{style:l.Ro,children:i})})]}):(0,a.jsx)(d,{"data-stacked":String(!!t),as:"wide"===n?c.Z:"div",children:(0,a.jsx)(u,{style:l.Ro,className:r,ref:m,children:i})})};n(62544);var m=n(73060),f=n(60637);let g=(0,r.z)("header")({name:"Wrapper",class:"w14j10eb",propsAsIs:!1}),y=(0,r.z)("p")({name:"Title",class:"tkoi9ui",propsAsIs:!1}),v=(0,r.z)("div")({name:"Actions",class:"au0cxa1",propsAsIs:!1}),x=function(e){let{title:t,isFullscreened:n,handleToggleFullscreen:s,handleReset:r,handleFormat:l}=e;return(0,a.jsxs)(g,{children:[(0,a.jsx)(y,{children:t||"Code Playground"}),(0,a.jsxs)(v,{children:[(0,a.jsx)(f.Z,{handleFormat:l}),(0,a.jsx)(m.Z,{handleReset:r})]})]})};n(41739);var w=n(66596),b=n(34308);let j=(0,r.z)("button")({name:"ActionButton",class:"ah084m5",propsAsIs:!1});n(9520);let k=(0,r.z)(j)({name:"Wrapper",class:"w11udlg3",propsAsIs:!0}),z=e=>{let{handleRefresh:t}=e,[n,r]=s.useState(0),[l,o]=s.useState(!1);return(0,a.jsx)("abbr",{title:"Refresh pane",children:(0,a.jsxs)(k,{onClick:()=>{t(),r(e=>e+180)},onMouseEnter:()=>o(!0),onMouseLeave:()=>o(!1),style:{transform:"rotate(".concat(n,"deg)"),opacity:l?1:.7},children:[(0,a.jsx)(w.Z,{size:16}),(0,a.jsx)(b.Z,{children:"Refresh results pane"})]})})};n(22587);var E=n(74631);let S=function(e){let{rulerRef:t,containerRef:n,dividerRef:a,dividerWidth:r,defaultRatio:l}=e,[o,i]=(0,s.useState)(782*l),[c,d]=(0,s.useState)(null),u=s.useRef(c);u.current=c,(0,s.useEffect)(()=>{let e=t.current,n=()=>{if(e){let t=e.clientWidth;d(e.getBoundingClientRect()),i(t*l-r)}};n();let a=(0,E.P2)(n,100);return window.addEventListener("resize",a),()=>window.removeEventListener("resize",a)},[l,r,t]);let p=(0,s.useCallback)(e=>{let t=u.current,{clientX:n}=e;t&&i(n-t.left)},[]),h=(0,s.useCallback)(()=>{document.removeEventListener("mousemove",p),document.removeEventListener("mouseup",h),n.current&&(n.current.style.pointerEvents="")},[p,n]),m=(0,s.useCallback)(()=>{document.addEventListener("mousemove",p),document.addEventListener("mouseup",h),n.current&&(n.current.style.pointerEvents="none")},[p,h,n]);(0,s.useEffect)(()=>{let e=a.current,t=u.current;function n(){t&&i(t.width*l-r)}function s(e){"ArrowLeft"===e.key?i(e=>e-20):"ArrowRight"===e.key&&i(e=>e+20)}return e&&(e.addEventListener("mousedown",m),e.addEventListener("dblclick",n),e.addEventListener("keydown",s)),()=>{e&&(e.removeEventListener("mousedown",m),e.removeEventListener("dblclick",n),e.removeEventListener("keydown",s))}},[m,l,a,r]);let f=c?c.width-r:782,g=Math.min(o,f);return{leftWidth:g,rightWidth:f-g}},A=(0,r.z)("div")({name:"Wrapper",class:"w198elmk",propsAsIs:!1}),R=(0,r.z)("div")({name:"Container",class:"c1jztmaw",propsAsIs:!1}),I=(0,r.z)("div")({name:"FirstPane",class:"f15xiyga",propsAsIs:!1}),C=(0,r.z)("div")({name:"SecondPane",class:"s1c0ceq0",propsAsIs:!1}),F=(0,r.z)("button")({name:"Divider",class:"dijulrw",propsAsIs:!1}),L=function(e){let{className:t="",splitRatio:n,isFullscreened:r,leftTitle:l,leftChild:o,rightTitle:i,rightChild:c}=e,d=s.useRef(null),u=s.useRef(null),p=s.useRef(null),{leftWidth:h,rightWidth:m,reset:f}=S({defaultRatio:n,rulerRef:d,containerRef:u,dividerRef:p,dividerWidth:16});return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)("div",{ref:d}),(0,a.jsx)(A,{style:{flex:r?1:void 0},children:(0,a.jsxs)(R,{className:t,ref:u,children:[(0,a.jsx)(I,{style:{flex:h},children:o}),(0,a.jsx)(F,{ref:p,children:(0,a.jsx)(b.Z,{children:"Resize editor. Use left/right arrows."})}),(0,a.jsx)(C,{style:{flex:m},children:c})]})})]})};n(13024);let U=(0,r.z)("div")({name:"Wrapper",class:"whrzwqb",propsAsIs:!1}),W=(0,r.z)("div")({name:"Header",class:"h1nlnw7n",propsAsIs:!1}),q=(0,r.z)("p")({name:"Title",class:"tbdao9h",propsAsIs:!1}),N=function(e){let{title:t,children:n,actions:s,...r}=e;return(0,a.jsxs)(U,{...r,children:[(0,a.jsxs)(W,{children:[(0,a.jsx)(q,{children:t}),s]}),n]})};n(46391);var D=n(29273),T=n(521),P=n.n(T),M=n(45052);let H={plain:{color:"var(--syntax-txt)",backgroundColor:"transparent",padding:0,fontFamily:"var(--font-family-mono)"},styles:[{types:["prolog","comment","doctype","cdata"],style:{color:"var(--syntax-comment)"}},{types:["property","tag","deleted","constant","symbol"],style:{color:"var(--syntax-prop)"}},{types:["boolean","number"],style:{color:"var(--syntax-bool)"}},{types:["attr-name","tag"],style:{fontWeight:"var(--font-weight-medium)"}},{types:["string","attr-value"],style:{color:"var(--syntax-val)"}},{types:["operator","entity","url","string","variable","language-css","keyword"],style:{color:"var(--syntax-str)"}},{types:["selector","attr-name","char","builtin","insert","script-punctuation"],style:{color:"var(--syntax-name)"}},{types:["deleted"],style:{color:"var(--syntax-del)"}},{types:["italic"],style:{fontStyle:"italic"}},{types:["important","bold"],style:{fontWeight:"var(--font-weight-bold)"}},{types:["regex","important"],style:{color:"var(--syntax-regex)"}},{types:["atrule","function"],style:{color:"var(--syntax-fn)"}},{types:["symbol"],style:{opacity:"0.7"}},{types:["string"],style:{fontWeight:"var(--font-weight-medium)"}}]},O=(0,r.z)("div")({name:"Wrapper",class:"w1bgwmtf",propsAsIs:!1}),Z=(0,r.z)("button")({name:"FocusTrapper",class:"f9ibg9h",propsAsIs:!1}),B=(0,r.z)(P())({name:"CodeEditor",class:"c18okpq0",propsAsIs:!0}),_=function(e){let{code:t,language:n,maxHeight:r,handleUpdate:l,handleFormat:o}=e,i=s.useRef(null),c=s.useRef(null),[d,u]=s.useState(!1),[p,h]=s.useState(!1);return(0,a.jsxs)(O,{in:String(d),style:{"--max-height":r},children:[(0,a.jsx)(Z,{ref:c,onFocus:()=>h(!0),onBlur:()=>h(!1),onKeyDown:e=>{"Enter"===e.key&&(e.stopPropagation(),e.preventDefault(),(0,D.flushSync)(()=>{h(!1)}),i.current._input.focus())},children:(0,a.jsx)(b.Z,{children:"Focus the editor. This will trap focus until you press Escape."})}),(0,a.jsxs)("label",{inert:p,children:[(0,a.jsx)(b.Z,{children:"Code editor:"}),(0,a.jsx)(B,{ref:i,value:t,onValueChange:l,onKeyDown:function(e){if(e.metaKey&&"s"===e.key){let t=i.current._input,n=t.selectionStart;e.preventDefault(),o(),window.requestAnimationFrame(()=>{(0,E.tO)(t,n)})}"Escape"===e.key&&(c.current.focus(),u(!0)),e.shiftKey&&"Tab"===e.key&&0===i.current._input.selectionStart&&(e.preventDefault(),c.current.focus())},translate:"no",highlight:e=>(0,a.jsx)(M.y$,{theme:H,code:e,language:n,children:e=>{let{className:t,style:n,tokens:s,getLineProps:r,getTokenProps:l}=e;return(0,a.jsx)(a.Fragment,{children:s.map((e,t)=>(0,a.jsx)("div",{...r({line:e}),children:e.map((e,t)=>(0,a.jsx)("span",{...l({token:e})},t))},t))})}})})]})]})};n(8652);let K=(0,r.z)("div")({name:"Wrapper",class:"w16o0eiw",propsAsIs:!1}),J=(0,r.z)("div")({name:"Triggers",class:"tt2ystl",propsAsIs:!1}),V=(0,r.z)("button")({name:"TabTrigger",class:"ts2dciv",propsAsIs:!1}),$=function(e){let{paneData:t,splitRatio:n,maxHeight:r,handleFormat:l,...o}=e,[i,c]=t,[d,u]=s.useState(i.language),p=d===i.language?i:c;return(0,a.jsxs)(K,{...o,children:[(0,a.jsx)(J,{children:t.map((e,t)=>(0,a.jsx)(V,{style:{"--weight":e===p?"var(--font-weight-bold)":"var(--font-weight-normal)","--color":e===p?"var(--color-text)":"var(--color-gray-500)"},onClick:()=>u(e.language),children:e.label},e.language))}),(0,a.jsx)(_,{code:p.code,language:p.language,handleUpdate:p.handleUpdate,handleFormat:l,maxHeight:r})]})};n(58103);let G=function(e,t){let[n,a]=s.useState(t),r=s.useRef(t);return r.current=t,s.useEffect(()=>{let t=window.setTimeout(()=>{a(r.current)},e);return()=>{window.clearTimeout(t)}},[e,...Object.values(t)]),n};var X=n(38339);let Y={},Q={"":"https://cdn.skypack.dev/"},ee=function(e){var t;let{id:n,codeMap:a,mode:s,boxSizing:r,centered:l}=e,o={...a};return"react"===s?o=function(e,t){let n=e.javascript,a=RegExp("render\\((.*)\\)","s");Object.keys(Q).forEach(e=>{n=n.replace(e,Q[e])});try{let[,s]=n.match(a),r=n.replace(a,""),l="\n    import React, { createElement } from 'https://cdn.skypack.dev/react@17.0.2';\n    import ReactDOM from 'https://cdn.skypack.dev/react-dom@17.0.2';\n\n    import styled, { createGlobalStyle } from 'https://cdn.skypack.dev/styled-components@5.3.5';\n\n    ".concat(r,"\n\n    // Wait a frame so that 'window' reads as the correct width,\n    // inside the React app\n    window.setTimeout(() => {\n      ReactDOM.render(").concat(s,", document.querySelector('#app'));\n    }, 0)\n    ").trim(),o="";return t&&(o="\n        display: grid;\n        place-content: center;\n        height: calc(100vh - 16px);\n      "),{...e,javascript:l,markup:'<div id="app" style="'.concat(o,'"></div>')}}catch(t){return e}}(o,l):l&&(o=function(e){let{markup:t}=e;return{...e,markup:'<div style="'.concat("\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: calc(100vh - 16px);\n  ",'">').concat(t,"</div>")}}(o)),"\n    <!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      <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\"/>\n      <title>Jerica Lancaster iFrame playground</title>\n\n      <!-- global styles -->\n      <style>\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        @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        @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\n        body {\n          margin: 0;\n          padding: 8px;\n        }\n\n        p, h1, h2, h3, h4, h5, h6 {\n          margin: 0;\n          padding: 0;\n        }\n\n        *,\n        *:before,\n        *:after {\n          box-sizing: ".concat(r,";\n          line-height: 1.5;\n          line-height: calc(1em + 0.5rem);\n          -webkit-font-smoothing: antialiased;\n          font-family: Wotfard;\n        }\n      </style>\n\n      <style>").concat(o.css||"","</style>\n    </head>\n    <body>\n      ").concat(o.markup||"","\n      <span></span>\n      <script>\n        window.onload = function() {\n          if(typeof window !== 'undefined') {\n            window.parent.postMessage({\n              source: \"frame-").concat(n,"\",\n              message: {\n                type: \"loaded\"\n              },\n            }, \"*\");\n\n            /*\n             * Disable all link-clicks, since\n             * they're meant for show.\n             */\n\n            const allLinks = [...document.querySelectorAll('a')];\n            allLinks.forEach(a => {\n              a.addEventListener('click', ev => {\n                ev.preventDefault();\n              });\n            });\n          }\n        }\n        window.onerror = function(message) {\n          if(typeof window !== 'undefined') {\n            window.parent.postMessage({\n              source: \"frame-").concat(n,'",\n              message: {\n                type: "error",\n                data: message\n              },\n            }, "*");\n          }\n        }\n      </script>\n      <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>\n      ').concat((t=o,"react"===s?'\n      <script type="module">\n        const BareIdentifierFormat = /^((?:@[^\\/]+\\/)?[^\\/]+)(\\/.*)?$/\n\n        function validUrl(url) {\n          try {\n            new URL(url);\n            return true;\n          } catch(err) {\n            return false;\n          }\n        }\n\n        const PACKAGE_VERSIONS = '.concat(JSON.stringify(Y),';\n\n        function unpkg(dependencies = {}) {\n          return {\n            visitor: {\n              "ImportDeclaration|ExportNamedDeclaration|ExportAllDeclaration"(path) {\n                if (\n                  !path.node.source || // Probably a variable declaration\n                  validUrl(path.node.source.value) || // Valid URL\n                  path.node.source.value.substr(0, 2) === "//" || // URL w/o protocol\n                  [".", "/"].indexOf(path.node.source.value.charAt(0)) >= 0 // Local path\n                )\n                  return; // Leave it alone\n\n                // A "bare" identifier\n                const match = BareIdentifierFormat.exec(path.node.source.value);\n                const packageName = match[1];\n                const file = match[2] || "";\n\n                let version = dependencies[packageName] || PACKAGE_VERSIONS[packageName];\n\n                if (!version) {\n                  console.warn(\n                    \'Missing version for package "%s" in dependencies; falling back to "latest"\',\n                    packageName\n                  );\n\n                  version = \'latest\';\n                }\n\n\n                path.node.source.value = `https://unpkg.com/${packageName}@${version}${file}?module`;\n              }\n            }\n          };\n        }\n\n        Babel.registerPlugin(\'unpkg\', unpkg);\n\n        const code = Babel.transform(decodeURI(`').concat(encodeURI(t.javascript||""),"`), {\n          plugins: ['unpkg'],\n          presets: ").concat(JSON.stringify("react"===s?["react"]:[]),'\n        }).code;\n        const script = document.createElement("script");\n        script.type = "module";\n        script.innerHTML = code;\n        document.body.appendChild(script);\n      </script>\n    '):"\n      <script>\n        ".concat(t.javascript||"","\n      </script>\n    ")),"\n    </body>\n    </html>\n  ")},et=(0,r.z)("p")({name:"ErrorDisplay",class:"ejxs6xt",propsAsIs:!1});n(75755);let en=s.memo(function(e){let{id:t,codeMap:n,mode:r,centered:l,stretched:o,boxSizing:i,layoutMode:c,isFullscreened:d,style:u={}}=e,[p,h]=s.useState(null),[m,f]=s.useState(!1),[g,y]=s.useState(null);return s.useEffect(()=>{f(!0);try{let e=ee({id:t,codeMap:n,mode:r,centered:l,boxSizing:i});y(e),h(null)}catch(e){h(e.message)}},[t,n,r,i,l]),s.useEffect(()=>{window.addEventListener("message",e=>{let n="frame-".concat(t);e.data.source===n&&("error"===e.data.message.type&&h(e.data.message.data),f(!1))})},[t]),(0,a.jsxs)(ea,{style:{"--height":o?"100%":void 0,"--resize":"codepen"===c?d?"horizontal":"both":void 0,"--flex":o?1:void 0,...u},children:[m&&(0,a.jsx)(es,{children:(0,a.jsx)(X.Z,{})}),(0,a.jsx)(er,{height:"100%",width:"100%",title:"example",frameBorder:"0",srcDoc:g,loading:"lazy"}),p&&(0,a.jsx)(et,{children:p})]})}),ea=(0,r.z)("div")({name:"Wrapper",class:"wqqdb70",propsAsIs:!1}),es=(0,r.z)("div")({name:"SpinnerWrapper",class:"sb475t4",propsAsIs:!1}),er=(0,r.z)("iframe")({name:"FrameElem",class:"fxdlgbu",propsAsIs:!1}),el=e=>{let t=G(250,e);return(0,a.jsx)(en,{...t})};n(73300);let eo=(0,r.z)("div")({name:"BottomPaneWrapper",class:"b1yqj86f",propsAsIs:!1}),ei=(0,r.z)("div")({name:"Line",class:"l7kkzg0",propsAsIs:!1}),ec=(0,r.z)("div")({name:"VerticalPaneCodeWrapper",class:"v18zw8yz",propsAsIs:!1}),ed=function(e){let t,{id:r,title:l,html:o,css:i,js:c,mode:d="default",layoutMode:u,size:p="normal",centered:m,boxSizing:f="border-box",splitRatio:g="0.5",resultStyle:y={},stacked:v,startFullscreened:w,hideTabCheckbox:b,...j}=e;j.cssCode&&(i=j.cssCode);let[k,E]=s.useState(null==o?void 0:o.trim()),[S,A]=s.useState(null==i?void 0:i.trim()),[R,I]=s.useState(null==c?void 0:c.trim()),[C,F]=s.useState("initial"),[U,W]=function(e){let[t,n]=s.useState(e);return s.useEffect(()=>{if(t)return window.addEventListener("keydown",e),window.requestAnimationFrame(()=>{let e=document.querySelector("#fs-wrapper");null==e||e.focus()}),()=>{window.removeEventListener("keydown",e)};function e(e){"Escape"===e.key&&n(!1)}},[t]),[t,()=>n(e=>!e)]}(w),q=function(e){let{htmlCode:t,setHtmlCode:a,cssCode:r,setCssCode:l,jsCode:o,setJsCode:i}=e,[c,d]=s.useState(null),[u,p]=s.useState(null),[h,m]=s.useState(null),[f,g]=s.useState(null);s.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))]).then(e=>{let[t,n,a,s]=e;d(t),g(n),m(a),p(s)}).catch(e=>{console.error("Could not load Prettier and its parsers:",e)})},[]);let y=!!c&&!!f&&!!h&&!!u;return s.useCallback(async()=>{if(!y)return;let e={printWidth:40};o&&i(await c.format(o,{parser:"babel",plugins:[u],...e})),r&&l(await c.format(r,{parser:"css",plugins:[h],...e})),t&&a(await c.format(t,{parser:"html",plugins:[f],...e}))},[y,o,r,t,u,h,f,c,l,a,i])}({htmlCode:k,setHtmlCode:E,cssCode:S,setCssCode:A,jsCode:R,setJsCode:I});s.useEffect(()=>{},[r]);let D=function(e){let{mode:t,htmlCode:n,setHtmlCode:a,cssCode:r,setCssCode:l,jsCode:o,setJsCode:i}=e,c=s.useMemo(()=>{let e=[{language:"markup",label:"HTML",code:n,handleUpdate:a},{language:"css",label:"CSS",code:r,handleUpdate:l}];return"react"===t?e.unshift({language:"jsx",label:"JSX",code:o,handleUpdate:i}):e.push({language:"javascript",label:"JS",code:o,handleUpdate:i}),e.filter(e=>{let{code:t}=e;return"string"==typeof t})},[t,n,r,o,a,l,i]);return(0===c.length||3===c.length)&&console.error("Passed the wrong number of code snippets! I only understand 1 or 2 code snippets at once"),c}({mode:d,htmlCode:k,setHtmlCode:E,cssCode:S,setCssCode:A,jsCode:R,setJsCode:I}),T=s.useMemo(()=>({markup:k,css:S,javascript:R}),[k,S,R]);u=u||(1===D.length?"side-by-side":"codepen");let P=U||"codepen"!==u,M=(0,a.jsx)(N,{title:"Result",style:{height:P?"100%":void 0},actions:(0,a.jsx)(z,{handleRefresh:()=>{F(Math.random().toString())}}),children:(0,a.jsx)(el,{id:r,codeMap:T,mode:d,centered:m,stretched:P,layoutMode:u,isFullscreened:U,boxSizing:f,style:y},C)});if(0===D.length)throw Error("Couldn't create any panes for the Playground. Be sure to pass at least one of 'html', 'cssCode', or 'js'.");switch(u){case"codepen":{let[e,n]=D;t=(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(L,{splitRatio:Number(g),isFullscreened:U,leftChild:(0,a.jsx)(N,{title:e.label,children:(0,a.jsx)(_,{code:e.code,language:e.language,handleUpdate:e.handleUpdate,handleFormat:q,maxHeight:U?void 0:"50vh"})}),rightChild:(0,a.jsx)(N,{title:n.label,children:(0,a.jsx)(_,{code:n.code,language:n.language,handleUpdate:n.handleUpdate,handleFormat:q,maxHeight:U?void 0:"50vh"})})}),(0,a.jsx)(eo,{children:M})]});break}case"side-by-side":{let[e]=D,{label:n,...s}=e;t=(0,a.jsx)(L,{splitRatio:Number(g),isFullscreened:U,leftChild:(0,a.jsx)(N,{title:n,style:{minHeight:"100%"},children:(0,a.jsx)(_,{...s,handleFormat:q,maxHeight:U?"100%":"50vh"})}),rightChild:M});break}case"tabbed":t=(0,a.jsx)(L,{splitRatio:Number(g),isFullscreened:U,leftChild:(0,a.jsx)($,{paneData:D,splitRatio:Number(g),maxHeight:U?"100%":"50vh",handleFormat:q}),rightChild:M});break;case"vertical-stack":{let[e,n]=D;t=(0,a.jsx)(L,{splitRatio:Number(g),isFullscreened:U,leftChild:(0,a.jsxs)(ec,{style:{maxHeight:U?"100vh":"80vh"},children:[(0,a.jsx)(N,{title:n.label,style:{flex:1,minHeight:0},children:(0,a.jsx)(_,{code:n.code,language:n.language,handleUpdate:n.handleUpdate,handleFormat:q})}),(0,a.jsx)(ei,{}),(0,a.jsx)(N,{title:e.label,style:{flex:1,minHeight:0},children:(0,a.jsx)(_,{code:e.code,language:e.language,handleUpdate:e.handleUpdate,handleFormat:q})})]}),rightChild:M});break}default:throw Error("Unrecognized layout mode: "+u)}return(0,a.jsxs)(h,{"data-id":r,className:"full-bleed",size:p,stacked:!!v,isFullscreened:U,hideTabCheckbox:b,children:[(0,a.jsx)(x,{title:l,isFullscreened:U,handleToggleFullscreen:W,handleReset:function(){E(null==o?void 0:o.trim()),A(null==i?void 0:i.trim()),I(null==c?void 0:c.trim())},handleFormat:q}),t]})};n(10277)},62544:e=>{e.exports={il1gxx9:"il1gxx9",i1j6zvew:"i1j6zvew",b1btlj5u:"b1btlj5u",f1xbttis:"f1xbttis"}},8652:e=>{e.exports={w1bgwmtf:"w1bgwmtf",f9ibg9h:"f9ibg9h",c18okpq0:"c18okpq0","token-line":"token-line"}},75755:e=>{e.exports={ejxs6xt:"ejxs6xt"}},46391:e=>{e.exports={whrzwqb:"whrzwqb",h1nlnw7n:"h1nlnw7n",tbdao9h:"tbdao9h"}},10277:e=>{e.exports={b1yqj86f:"b1yqj86f",l7kkzg0:"l7kkzg0",v18zw8yz:"v18zw8yz"}},73300:e=>{e.exports={wqqdb70:"wqqdb70",sb475t4:"sb475t4",fxdlgbu:"fxdlgbu"}},13024:e=>{e.exports={w198elmk:"w198elmk",c1jztmaw:"c1jztmaw",f15xiyga:"f15xiyga",s1c0ceq0:"s1c0ceq0",dijulrw:"dijulrw"}},58103:e=>{e.exports={w16o0eiw:"w16o0eiw",tt2ystl:"tt2ystl",ts2dciv:"ts2dciv"}},9520:e=>{e.exports={ah084m5:"ah084m5"}},22587:e=>{e.exports={w11udlg3:"w11udlg3",ah084m5:"ah084m5"}},41739:e=>{e.exports={w14j10eb:"w14j10eb",tkoi9ui:"tkoi9ui",au0cxa1:"au0cxa1"}}}]);
//# sourceMappingURL=15036.d39bc61325554d0f.js.map