var Component=(()=>{var ia=Object.create;var B=Object.defineProperty;var la=Object.getOwnPropertyDescriptor;var oa=Object.getOwnPropertyNames;var sa=Object.getPrototypeOf,ua=Object.prototype.hasOwnProperty;var lr=(t,e)=>()=>(t&&(e=t(t=0)),e);var s=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),or=(t,e)=>{for(var r in e)B(t,r,{get:e[r],enumerable:!0})},sr=(t,e,r,a)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of oa(e))!ua.call(t,i)&&i!==r&&B(t,i,{get:()=>e[i],enumerable:!(a=la(e,i))||a.enumerable});return t};var Ce=(t,e,r)=>(r=t!=null?ia(sa(t)):{},sr(e||!t||!t.__esModule?B(r,"default",{value:t,enumerable:!0}):r,t)),ur=t=>sr(B({},"__esModule",{value:!0}),t);var dr=s((Du,cr)=>{cr.exports=_jsx_runtime});var d=s((Cu,pr)=>{pr.exports=React});var gr=s(I=>{function Fe(t){return Fe=typeof Symbol=="function"&&typeof Symbol.iterator=="symbol"?function(e){return typeof e}:function(e){return e&&typeof Symbol=="function"&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},Fe(t)}Object.defineProperty(I,"__esModule",{value:!0});I.GeneralObserver=void 0;var M=ca(d());function hr(t){if(typeof WeakMap!="function")return null;var e=new WeakMap,r=new WeakMap;return(hr=function(i){return i?r:e})(t)}function ca(t,e){if(!e&&t&&t.__esModule)return t;if(t===null||Fe(t)!=="object"&&typeof t!="function")return{default:t};var r=hr(e);if(r&&r.has(t))return r.get(t);var a={},i=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var l in t)if(l!=="default"&&Object.prototype.hasOwnProperty.call(t,l)){var o=i?Object.getOwnPropertyDescriptor(t,l):null;o&&(o.get||o.set)?Object.defineProperty(a,l,o):a[l]=t[l]}return a.default=t,r&&r.set(t,a),a}function mr(t,e){return fa(t)||ma(t,e)||pa(t,e)||da()}function da(){throw new TypeError(`Invalid attempt to destructure non-iterable instance. In order to be iterable, non-array objects must have a [Symbol.iterator]() method.`)}function pa(t,e){if(t){if(typeof t=="string")return fr(t,e);var r=Object.prototype.toString.call(t).slice(8,-1);if(r==="Object"&&t.constructor&&(r=t.constructor.name),r==="Map"||r==="Set")return Array.from(t);if(r==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return fr(t,e)}}function fr(t,e){(e==null||e>t.length)&&(e=t.length);for(var r=0,a=new Array(e);r0&&(h(!0),a&&a())},{root:null,rootMargin:"400px",threshold:0});o&&o.current&&v.observe(o.current)},[o]),M.default.createElement("div",{ref:o,"data-testid":"general-observer",className:"mdx-embed"},p?r:M.default.createElement("div",{style:{height:l,width:"100%"}}))};I.GeneralObserver=ha});var f=s(Re=>{Object.defineProperty(Re,"__esModule",{value:!0});Object.defineProperty(Re,"GeneralObserver",{enumerable:!0,get:function(){return ga.GeneralObserver}});var ga=gr()});var vr=s(j=>{Object.defineProperty(j,"__esModule",{value:!0});j.AirtableBase=void 0;var We=ba(d()),va=f();function ba(t){return t&&t.__esModule?t:{default:t}}var ya=function(e){var r=e.airtableBaseId,a=e.layout,i=a===void 0?"":a,l=e.viewControls,o=l===void 0?"on":l;return We.default.createElement(va.GeneralObserver,null,We.default.createElement("div",{style:{position:"relative"}},We.default.createElement("iframe",{"data-testid":"airtable-base",title:"airtable-".concat(r),src:"https://airtable.com/embed/".concat(r,"?backgroundColor=green&").concat(i?"layout=".concat(i,"&"):"","viewControls=").concat(o),width:"100%",height:"533",style:{background:"transparent",border:"1px solid #ccc"},frameBorder:"0"})))};j.AirtableBase=ya});var br=s(D=>{Object.defineProperty(D,"__esModule",{value:!0});D.AirtableForm=void 0;var Ae=wa(d()),_a=f();function wa(t){return t&&t.__esModule?t:{default:t}}var ka=function(e){var r=e.airtableFormId;return Ae.default.createElement(_a.GeneralObserver,null,Ae.default.createElement("div",{style:{position:"relative"}},Ae.default.createElement("iframe",{"data-testid":"airtable-form",title:"airtable-".concat(r),src:"https://airtable.com/embed/".concat(r,"?backgroundColor=green"),width:"100%",height:"533",style:{background:"transparent",border:"1px solid #ccc"},frameBorder:"0"})))};D.AirtableForm=ka});var $e=s(C=>{Object.defineProperty(C,"__esModule",{value:!0});Object.defineProperty(C,"AirtableBase",{enumerable:!0,get:function(){return Oa.AirtableBase}});Object.defineProperty(C,"AirtableForm",{enumerable:!0,get:function(){return Pa.AirtableForm}});var Oa=vr(),Pa=br()});var yr=s(F=>{Object.defineProperty(F,"__esModule",{value:!0});F.Buzzsprout=void 0;var Ge=qa(d()),Na=f();function qa(t){return t&&t.__esModule?t:{default:t}}var Ta=function(e){var r=e.buzzsproutId,a=e.width,i=a===void 0?"100%":a,l=e.height,o=l===void 0?"200":l,u=/^\d{7}\/\d{7}-[\w|\W]+/;return u.test(r)?Ge.default.createElement(Na.GeneralObserver,null,Ge.default.createElement("div",{style:{position:"relative"}},Ge.default.createElement("iframe",{"data-testid":"buzzsprout",className:"buzzsprout-mdx-embed",title:"buzzsprout-".concat(r),src:"https://www.buzzsprout.com/".concat(r,"?client_source=admin&iframe=true"),width:i,height:o,frameBorder:"0",scrolling:"no"}))):null};F.Buzzsprout=Ta});var Ue=s(ze=>{Object.defineProperty(ze,"__esModule",{value:!0});Object.defineProperty(ze,"Buzzsprout",{enumerable:!0,get:function(){return Sa.Buzzsprout}});var Sa=yr()});var wr=s(R=>{Object.defineProperty(R,"__esModule",{value:!0});R.CodePen=void 0;var _r=xa(d()),Ea=f();function xa(t){return t&&t.__esModule?t:{default:t}}var Ma=function(e){var r=e.codePenId,a=e.height,i=a===void 0?500:a,l=e.tabs,o=l===void 0?"result":l,u=e.clickToLoad,c=u===void 0?!1:u,p=e.editable,h=p===void 0?!1:p,v=e.theme,y=v===void 0?"default":v;return _r.default.createElement(Ea.GeneralObserver,{height:i},_r.default.createElement("iframe",{"data-testid":"codepen",title:"codepen-".concat(r),className:"codepen-mdx-embed",height:i,style:{width:"100%"},scrolling:"no",src:"https://codepen.io/team/codepen/embed".concat(c?"/preview":"","/").concat(r,"?height=265&theme-id=").concat(y,"&default-tab=").concat(o).concat(h?"&editable=true":""),frameBorder:"no",allowFullScreen:!0}))};R.CodePen=Ma});var Xe=s(He=>{Object.defineProperty(He,"__esModule",{value:!0});Object.defineProperty(He,"CodePen",{enumerable:!0,get:function(){return La.CodePen}});var La=wr()});var Or=s(W=>{Object.defineProperty(W,"__esModule",{value:!0});W.CodeSandbox=void 0;var kr=Ia(d()),Ba=f();function Ia(t){return t&&t.__esModule?t:{default:t}}var ja=function(e){var r=e.codeSandboxId;return kr.default.createElement(Ba.GeneralObserver,null,kr.default.createElement("iframe",{"data-testid":"codesandbox",title:"codeSandbox-".concat(r),className:"codesandbox-mdx-embed",src:"https://codesandbox.io/embed/".concat(r),allow:"geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb",sandbox:"allow-modals allow-forms allow-popups allow-scripts allow-same-origin",style:{width:"100%",height:"500px",border:0,borderRadius:"4px",overflow:" hidden"}}))};W.CodeSandbox=ja});var Ye=s(Ve=>{Object.defineProperty(Ve,"__esModule",{value:!0});Object.defineProperty(Ve,"CodeSandbox",{enumerable:!0,get:function(){return Da.CodeSandbox}});var Da=Or()});var g=s(b=>{Object.defineProperty(b,"__esModule",{value:!0});b.isEmptyString=b.getPadding=b.createStyleSheet=b.createScriptTag=void 0;var Ca=function(e){var r={"1:1":{paddingTop:"100%"},"16:9":{paddingTop:"56.25%"},"4:3":{paddingTop:"75%"},"3:2":{paddingTop:"66.66%"},"8.5":{paddingTop:"62.5%"}};return r[e]};b.getPadding=Ca;var Fa=function(e,r){var a=document.createElement("script");a.type="text/javascript",e&&(a.src=e),r&&(a.innerText=r),a.onerror=function(i){console.error("MDXEmbedProvider ".concat(i.type),i)},document.getElementsByTagName("head")[0].appendChild(a)};b.createScriptTag=Fa;var Ra=function(e){var r=document.createElement("link");r.type="text/css",r.rel="stylesheet",r.href=e,document.getElementsByTagName("head")[0].appendChild(r)};b.createStyleSheet=Ra;var Wa=function(e){return e==null||e.length===0};b.isEmptyString=Wa});var Nr=s(A=>{Object.defineProperty(A,"__esModule",{value:!0});A.EggheadLesson=void 0;var Ke=Ga(d()),Aa=g(),$a=f();function Ga(t){return t&&t.__esModule?t:{default:t}}function Pr(t,e){var r=Object.keys(t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(t);e&&(a=a.filter(function(i){return Object.getOwnPropertyDescriptor(t,i).enumerable})),r.push.apply(r,a)}return r}function za(t){for(var e=1;e{Object.defineProperty(Ze,"__esModule",{value:!0});Object.defineProperty(Ze,"EggheadLesson",{enumerable:!0,get:function(){return Xa.EggheadLesson}});var Xa=Nr()});var Sr=s(O=>{Object.defineProperty(O,"__esModule",{value:!0});O.handleFlickrLoad=O.flickrClassNames=void 0;var Va=g(),qr=!1,Tr=[".flickr-embed"].join(",");O.flickrClassNames=Tr;var Ya="https://embedr.flickr.com/assets/client-code.js",Ka=function(){return document.querySelector(Tr)!==null&&!qr?((0,Va.createScriptTag)(Ya,null),qr=!0,{status:"createScriptTag"}):{status:"null"}};O.handleFlickrLoad=Ka});var Er=s($=>{Object.defineProperty($,"__esModule",{value:!0});$.Flickr=void 0;var Qe=Qa(d()),Za=f(),Ja=Sr();function Qa(t){return t&&t.__esModule?t:{default:t}}var ei=function(e){var r=e.flickrLink;return Qe.default.createElement(Za.GeneralObserver,{onEnter:function(){return(0,Ja.handleFlickrLoad)()}},Qe.default.createElement("span",{"data-testid":"flickr",className:"flickr-embed-mdx","data-flickr-embed":"true","data-header":"true","data-footer":"true"},Qe.default.createElement("img",{src:"https://live.staticflickr.com/".concat(r),width:"100%",height:"auto",alt:r})))};$.Flickr=ei});var tt=s(et=>{Object.defineProperty(et,"__esModule",{value:!0});Object.defineProperty(et,"Flickr",{enumerable:!0,get:function(){return ti.Flickr}});var ti=Er()});var Mr=s(G=>{Object.defineProperty(G,"__esModule",{value:!0});G.Figma=void 0;var xr=ni(d()),ri=f();function ni(t){return t&&t.__esModule?t:{default:t}}var ai=function(e){var r=e.title,a=e.height,i=a===void 0?450:a,l=e.url,o=/(file|proto)\/([0-9a-zA-Z]{22,128})(?:\/.*)?$/;return o.test(l)?xr.default.createElement(ri.GeneralObserver,{height:i},xr.default.createElement("iframe",{"data-testid":"figma",title:"figma-".concat(r),className:"figma-mdx-embed",height:i,style:{width:"100%"},scrolling:"no",src:"https://www.figma.com/embed?embed_host=mdx-embed&url=https://www.figma.com/".concat(l),frameBorder:"no",allowFullScreen:!0})):null};G.Figma=ai});var nt=s(rt=>{Object.defineProperty(rt,"__esModule",{value:!0});Object.defineProperty(rt,"Figma",{enumerable:!0,get:function(){return ii.Figma}});var ii=Mr()});var jr=s(U=>{function at(t){return at=typeof Symbol=="function"&&typeof Symbol.iterator=="symbol"?function(e){return typeof e}:function(e){return e&&typeof Symbol=="function"&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},at(t)}Object.defineProperty(U,"__esModule",{value:!0});U.Gist=void 0;var z=oi(d()),Lr=g(),li=f();function Ir(t){if(typeof WeakMap!="function")return null;var e=new WeakMap,r=new WeakMap;return(Ir=function(i){return i?r:e})(t)}function oi(t,e){if(!e&&t&&t.__esModule)return t;if(t===null||at(t)!=="object"&&typeof t!="function")return{default:t};var r=Ir(e);if(r&&r.has(t))return r.get(t);var a={},i=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var l in t)if(l!=="default"&&Object.prototype.hasOwnProperty.call(t,l)){var o=i?Object.getOwnPropertyDescriptor(t,l):null;o&&(o.get||o.set)?Object.defineProperty(a,l,o):a[l]=t[l]}return a.default=t,r&&r.set(t,a),a}function si(t,e){return pi(t)||di(t,e)||ci(t,e)||ui()}function ui(){throw new TypeError(`Invalid attempt to destructure non-iterable instance. In order to be iterable, non-array objects must have a [Symbol.iterator]() method.`)}function ci(t,e){if(t){if(typeof t=="string")return Br(t,e);var r=Object.prototype.toString.call(t).slice(8,-1);if(r==="Object"&&t.constructor&&(r=t.constructor.name),r==="Map"||r==="Set")return Array.from(t);if(r==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return Br(t,e)}}function Br(t,e){(e==null||e>t.length)&&(e=t.length);for(var r=0,a=new Array(e);r{Object.defineProperty(it,"__esModule",{value:!0});Object.defineProperty(it,"Gist",{enumerable:!0,get:function(){return fi.Gist}});var fi=jr()});var Dr=s(X=>{Object.defineProperty(X,"__esModule",{value:!0});X.handleInstagrmLoad=void 0;var hi=g();function H(t){return H=typeof Symbol=="function"&&typeof Symbol.iterator=="symbol"?function(e){return typeof e}:function(e){return e&&typeof Symbol=="function"&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},H(t)}var gi="https://www.instagram.com/embed.js",vi=function(){H(window.instgrm)!=="undefined"&&window.instgrm.Embeds&&H(window.instgrm.Embeds.process)==="function"&&window.instgrm.Embeds.process()},bi=function(){return window.instgrm?(vi(),{status:"instgrmProcess"}):((0,hi.createScriptTag)(gi,null),{status:"createScriptTag"})};X.handleInstagrmLoad=bi});var Cr=s(V=>{Object.defineProperty(V,"__esModule",{value:!0});V.Instagram=void 0;var ot=wi(d()),yi=f(),_i=Dr();function wi(t){return t&&t.__esModule?t:{default:t}}var ki=function(e){var r=e.instagramId;return ot.default.createElement(yi.GeneralObserver,{onEnter:function(){return(0,_i.handleInstagrmLoad)()}},ot.default.createElement("blockquote",{"data-testid":"instagram",className:"instagram-media instagram-mdx-embed","data-instgrm-version":"12"},ot.default.createElement("a",{href:"https://instagram.com/p/".concat(r)},typeof window<"u"&&!window.instgrm?"Loading":"")))};V.Instagram=ki});var ut=s(st=>{Object.defineProperty(st,"__esModule",{value:!0});Object.defineProperty(st,"Instagram",{enumerable:!0,get:function(){return Oi.Instagram}});var Oi=Cr()});var Rr=s(Y=>{Object.defineProperty(Y,"__esModule",{value:!0});Y.Lbry=void 0;var ct=qi(d()),Pi=g(),Ni=f();function qi(t){return t&&t.__esModule?t:{default:t}}function Fr(t,e){var r=Object.keys(t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(t);e&&(a=a.filter(function(i){return Object.getOwnPropertyDescriptor(t,i).enumerable})),r.push.apply(r,a)}return r}function Ti(t){for(var e=1;e{Object.defineProperty(dt,"__esModule",{value:!0});Object.defineProperty(dt,"Lbry",{enumerable:!0,get:function(){return xi.Lbry}});var xi=Rr()});var $r=s(P=>{Object.defineProperty(P,"__esModule",{value:!0});P.linkedInClassNames=P.handleLinkedInLoad=void 0;var Mi=g();function K(t){return K=typeof Symbol=="function"&&typeof Symbol.iterator=="symbol"?function(e){return typeof e}:function(e){return e&&typeof Symbol=="function"&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},K(t)}var Wr=!1,Ar=[".LI-profile-badge",".LI-simple-link"].join(",");P.linkedInClassNames=Ar;var Li="https://platform.linkedin.com/badges/js/profile.js",Bi=function(){K(window.LI)!=="undefined"&&K(window.LIRenderAll)==="function"&&window.LIRenderAll()},Ii=function(){return document.querySelector(Ar)!==null&&!Wr?((0,Mi.createScriptTag)(Li,null),Wr=!0,{status:"createScriptTag"}):(Bi(),{status:"null"})};P.handleLinkedInLoad=Ii});var Gr=s(Z=>{Object.defineProperty(Z,"__esModule",{value:!0});Z.LinkedInBadge=void 0;var mt=Ci(d()),ji=f(),Di=$r();function Ci(t){return t&&t.__esModule?t:{default:t}}var Fi=function(e){var r=e.username,a=e.badgeType,i=a===void 0?"vertical":a,l=e.badgeSize,o=l===void 0?"medium":l,u=e.theme,c=u===void 0?"light":u,p=e.locale,h=p===void 0?"en_US":p;return mt.default.createElement(ji.GeneralObserver,{onEnter:function(){return(0,Di.handleLinkedInLoad)()}},mt.default.createElement("div",{"data-testid":"linkedin-badge",className:"LI-profile-badge linkedin-badge-embed-mdx","data-version":"v1","data-size":o,"data-locale":h,"data-type":i,"data-theme":c,"data-vanity":r},mt.default.createElement("a",{className:"LI-simple-link",href:"https://uk.linkedin.com/in/".concat(r,"?trk=profile-badge")},"Loading")))};Z.LinkedInBadge=Fi});var ht=s(ft=>{Object.defineProperty(ft,"__esModule",{value:!0});Object.defineProperty(ft,"LinkedInBadge",{enumerable:!0,get:function(){return Ri.LinkedInBadge}});var Ri=Gr()});var Q=s(N=>{Object.defineProperty(N,"__esModule",{value:!0});N.pinterestClassNames=N.handlePinterestBuild=void 0;var Wi=g();function J(t){return J=typeof Symbol=="function"&&typeof Symbol.iterator=="symbol"?function(e){return typeof e}:function(e){return e&&typeof Symbol=="function"&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},J(t)}var zr=!1,Ur=[".pinterest-pin",".pinterest-board",".pinterest-follow-button"].join(",");N.pinterestClassNames=Ur;var Ai='!function(a,b,c){var d,e,f;d="PIN_"+~~((new Date).getTime()/864e5),a[d]?a[d]+=1:(a[d]=1,a.setTimeout(function(){e=b.getElementsByTagName("SCRIPT")[0],f=b.createElement("SCRIPT"),f.type="text/javascript",f.async=!0,f.src=c.mainUrl+"?"+Math.random(),e.parentNode.insertBefore(f,e)},10))}(window,document,{mainUrl:"//assets.pinterest.com/js/pinit_main.js"});',$i=function(){J(window.PinUtils)!=="undefined"&&window.PinUtils&&J(window.PinUtils.build)==="function"&&window.PinUtils.build()},Gi=function(){return document.querySelector(Ur)!==null&&!zr?((0,Wi.createScriptTag)(null,Ai),zr=!0,{status:"createScriptTag"}):($i(),{status:"pinterestBuild"})};N.handlePinterestBuild=Gi});var Xr=s(ee=>{Object.defineProperty(ee,"__esModule",{value:!0});ee.Pin=void 0;var Hr=Hi(d()),zi=f(),Ui=Q();function Hi(t){return t&&t.__esModule?t:{default:t}}var Xi=function(e){var r=e.pinId,a=e.size,i=a===void 0?"small":a;return Hr.default.createElement(zi.GeneralObserver,{onEnter:function(){return(0,Ui.handlePinterestBuild)()}},Hr.default.createElement("a",{className:"pinterest-pin pinterest-pin-mdx-embed","data-testid":"pin","data-pin-do":"embedPin","data-pin-width":i,href:"https://www.pinterest.com/pin/".concat(r)}))};ee.Pin=Xi});var Yr=s(te=>{Object.defineProperty(te,"__esModule",{value:!0});te.PinterestBoard=void 0;var Vr=Ki(d()),Vi=f(),Yi=Q();function Ki(t){return t&&t.__esModule?t:{default:t}}var Zi=function(e){var r=e.pinterestLink,a=e.width,i=a===void 0?400:a,l=e.height,o=l===void 0?250:l,u=e.imageWidth,c=u===void 0?80:u,p=e.variant,h=p===void 0?"board":p;return Vr.default.createElement(Vi.GeneralObserver,{onEnter:function(){return(0,Yi.handlePinterestBuild)()}},Vr.default.createElement("a",{className:"pinterest-board pinterest-board-mdx-embed","data-testid":"pinterest-board","data-pin-do":"embed".concat(h.charAt(0).toUpperCase()).concat(h.slice(1)),"data-pin-board-width":i,"data-pin-scale-height":o,"data-pin-scale-width":c,href:"https://www.pinterest.com/".concat(r)}))};te.PinterestBoard=Zi});var Zr=s(re=>{Object.defineProperty(re,"__esModule",{value:!0});re.PinterestFollowButton=void 0;var Kr=el(d()),Ji=f(),Qi=Q();function el(t){return t&&t.__esModule?t:{default:t}}var tl=function(e){var r=e.username;return Kr.default.createElement(Ji.GeneralObserver,{onEnter:function(){return(0,Qi.handlePinterestBuild)()}},Kr.default.createElement("a",{className:"pinterest-follow-button pinterest-follow-button-mdx-embed","data-testid":"pinterest-follow-button","data-pin-do":"buttonFollow",href:"https://www.pinterest.com/".concat(r,"/")},"Follow @".concat(r)))};re.PinterestFollowButton=tl});var gt=s(L=>{Object.defineProperty(L,"__esModule",{value:!0});Object.defineProperty(L,"Pin",{enumerable:!0,get:function(){return rl.Pin}});Object.defineProperty(L,"PinterestBoard",{enumerable:!0,get:function(){return nl.PinterestBoard}});Object.defineProperty(L,"PinterestFollowButton",{enumerable:!0,get:function(){return al.PinterestFollowButton}});var rl=Xr(),nl=Yr(),al=Zr()});var Qr=s(ne=>{Object.defineProperty(ne,"__esModule",{value:!0});ne.Replit=void 0;var Jr=ll(d()),il=f();function ll(t){return t&&t.__esModule?t:{default:t}}var ol=function(e){var r=e.repl,a=e.height,i=a===void 0?500:a,l=e.mode,o=l===void 0?"embed":l,u=r.startsWith("http")?r:"https://repl.it/".concat(r),c=o==="embed"?"?embed=true":"?lite=true";return Jr.default.createElement(il.GeneralObserver,{height:i},Jr.default.createElement("iframe",{"data-testid":"replit-"+o,frameBorder:"0",width:"100%",height:i,src:u+c}))};ne.Replit=ol});var bt=s(vt=>{Object.defineProperty(vt,"__esModule",{value:!0});Object.defineProperty(vt,"Replit",{enumerable:!0,get:function(){return sl.Replit}});var sl=Qr()});var en=s(ae=>{Object.defineProperty(ae,"__esModule",{value:!0});ae.SimplecastEpisode=void 0;var yt=cl(d()),ul=f();function cl(t){return t&&t.__esModule?t:{default:t}}var dl=function(e){var r=e.episodeId,a=e.theme,i=a===void 0?"light":a;return yt.default.createElement(ul.GeneralObserver,null,yt.default.createElement("div",{className:"simplecast-episode-mdx-embed",style:{position:"relative",height:"200px",width:"100%"}},yt.default.createElement("iframe",{"data-testid":"simplecast-episode",title:"simplecast-".concat(r),src:"https://player.simplecast.com/".concat(r).concat(i==="dark"?"?dark=true":""),frameBorder:"no",scrolling:"no",seamless:!0,style:{position:"absolute",top:0,left:0,width:"100%",height:"100%"}})))};ae.SimplecastEpisode=dl});var wt=s(_t=>{Object.defineProperty(_t,"__esModule",{value:!0});Object.defineProperty(_t,"SimplecastEpisode",{enumerable:!0,get:function(){return pl.SimplecastEpisode}});var pl=en()});var rn=s(ie=>{Object.defineProperty(ie,"__esModule",{value:!0});ie.SoundCloud=void 0;var tn=fl(d()),ml=f();function fl(t){return t&&t.__esModule?t:{default:t}}var hl=function(e){var r=e.soundCloudLink,a=e.width,i=a===void 0?"100%":a,l=e.height,o=l===void 0?"auto":l,u=e.autoPlay,c=u===void 0?!1:u,p=e.visual,h=p===void 0?!1:p,v=e.color;return tn.default.createElement(ml.GeneralObserver,null,tn.default.createElement("iframe",{"data-testid":"soundcloud",title:"sound-cloud-".concat(r),className:"soundcloud-mdx-embed",width:i,height:o,scrolling:"no",frameBorder:"no",allow:"autoplay",src:"https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/".concat(r,"&color=%23").concat(v,"&auto_play=").concat(c,"&visual=").concat(h)}))};ie.SoundCloud=hl});var Ot=s(kt=>{Object.defineProperty(kt,"__esModule",{value:!0});Object.defineProperty(kt,"SoundCloud",{enumerable:!0,get:function(){return gl.SoundCloud}});var gl=rn()});var an=s(le=>{Object.defineProperty(le,"__esModule",{value:!0});le.Spotify=void 0;var nn=bl(d()),vl=f();function bl(t){return t&&t.__esModule?t:{default:t}}var yl=function(e){var r=e.spotifyLink,a=e.width,i=a===void 0?320:a,l=e.height,o=l===void 0?380:l;return nn.default.createElement(vl.GeneralObserver,null,nn.default.createElement("iframe",{"data-testid":"spotify",title:"spotify-".concat(r),className:"spotify-mdx-embed",src:"https://open.spotify.com/embed/".concat(r),width:i,height:o,frameBorder:"0",allow:"encrypted-media"}))};le.Spotify=yl});var Nt=s(Pt=>{Object.defineProperty(Pt,"__esModule",{value:!0});Object.defineProperty(Pt,"Spotify",{enumerable:!0,get:function(){return _l.Spotify}});var _l=an()});var ln=s(oe=>{Object.defineProperty(oe,"__esModule",{value:!0});oe.Strava=void 0;var qt=kl(d()),wl=f();function kl(t){return t&&t.__esModule?t:{default:t}}var Ol=function(e){var r=e.activityId;return qt.default.createElement(wl.GeneralObserver,null,qt.default.createElement("div",{"data-testid":"strava",className:"strava-mdx-embed",style:{position:"relative",height:"350px",maxWidth:"568px",width:"100%",overflow:"auto"}},qt.default.createElement("iframe",{title:"strava-".concat(r),className:"strava-mdx-embed",height:"100%",width:"100%",style:{minWidth:"380px"},frameBorder:"0",scrolling:"no",src:"https://www.strava.com/activities/".concat(r)})))};oe.Strava=Ol});var St=s(Tt=>{Object.defineProperty(Tt,"__esModule",{value:!0});Object.defineProperty(Tt,"Strava",{enumerable:!0,get:function(){return Pl.Strava}});var Pl=ln()});var sn=s(se=>{Object.defineProperty(se,"__esModule",{value:!0});se.Snack=void 0;var on=Tl(d()),Nl=g(),ql=f();function Tl(t){return t&&t.__esModule?t:{default:t}}var Sl="https://snack.expo.io/embed.js",El=function(e){var r=e.snackId,a=e.platform,i=a===void 0?"web":a,l=e.theme,o=l===void 0?"light":l,u=function(){(0,Nl.createScriptTag)(Sl,null)};return on.default.createElement(ql.GeneralObserver,{onEnter:u},on.default.createElement("div",{className:"snack-mdx-embed","data-testid":"snack","data-snack-id":r,"data-snack-platform":i,"data-snack-preview":"true","data-snack-theme":o,style:{overflow:"hidden",background:"#F9F9F9",border:"1px solid var(--color-border)",borderRadius:"4px",height:"505px",width:"100%"}}))};se.Snack=El});var xt=s(Et=>{Object.defineProperty(Et,"__esModule",{value:!0});Object.defineProperty(Et,"Snack",{enumerable:!0,get:function(){return xl.Snack}});var xl=sn()});var cn=s(q=>{Object.defineProperty(q,"__esModule",{value:!0});q.tikTokClassNames=q.handleTikTokLoad=void 0;var Ml=g(),un=!1,Ll=".tiktok-embed";q.tikTokClassNames=Ll;var Bl="https://www.tiktok.com/embed.js",Il=function(){return un?{status:"null"}:((0,Ml.createScriptTag)(Bl,null),un=!0,{status:"createScriptTag"})};q.handleTikTokLoad=Il});var dn=s(ce=>{Object.defineProperty(ce,"__esModule",{value:!0});ce.TikTok=void 0;var ue=Cl(d()),jl=f(),Dl=cn();function Cl(t){return t&&t.__esModule?t:{default:t}}var Fl=function(e){var r=e.tikTokId;return r?ue.default.createElement(jl.GeneralObserver,{onEnter:function(){return(0,Dl.handleTikTokLoad)()}},ue.default.createElement("blockquote",{"data-testid":"tiktok",className:"tiktok-embed",cite:"https://www.tiktok.com/".concat(r),"data-video-id":r.split("/").pop()},ue.default.createElement("section",null,ue.default.createElement("a",{href:"https://tiktok.com/".concat(r)},typeof window<"u"&&!window.tiktok?"Loading":"")))):null};ce.TikTok=Fl});var Lt=s(Mt=>{Object.defineProperty(Mt,"__esModule",{value:!0});Object.defineProperty(Mt,"TikTok",{enumerable:!0,get:function(){return Rl.TikTok}});var Rl=dn()});var mn=s(Bt=>{Object.defineProperty(Bt,"__esModule",{value:!0});Bt.constructTwitchURL=Wl;var pn=g();function Wl(t,e,r,a){var i=[a];return t!==void 0?i.push("&video=v".concat(t)):(0,pn.isEmptyString)(e)?(0,pn.isEmptyString)(r)||i.push("&collection=".concat(r)):i.push("&channel=".concat(e)),i.join("")}});var hn=s(de=>{Object.defineProperty(de,"__esModule",{value:!0});de.Twitch=void 0;var It=zl(d()),Al=g(),$l=f(),Gl=mn();function zl(t){return t&&t.__esModule?t:{default:t}}function fn(t,e){var r=Object.keys(t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(t);e&&(a=a.filter(function(i){return Object.getOwnPropertyDescriptor(t,i).enumerable})),r.push.apply(r,a)}return r}function Ul(t){for(var e=1;e{Object.defineProperty(jt,"__esModule",{value:!0});Object.defineProperty(jt,"Twitch",{enumerable:!0,get:function(){return Vl.Twitch}});var Vl=hn()});var k=s(me=>{Object.defineProperty(me,"__esModule",{value:!0});me.handleTwttrLoad=void 0;var Yl=g();function pe(t){return pe=typeof Symbol=="function"&&typeof Symbol.iterator=="symbol"?function(e){return typeof e}:function(e){return e&&typeof Symbol=="function"&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},pe(t)}var Kl=` !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs") `,Zl=function(){pe(window.twttr)!=="undefined"&&window.twttr.widgets&&pe(window.twttr.widgets.load)==="function"&&window.twttr.widgets.load(document.getElementsByClassName("mdx-embed"))},Jl=function(){return window.twttr?(Zl(),{status:"twttrLoad"}):((0,Yl.createScriptTag)(null,Kl),{status:"createScriptTag"})};me.handleTwttrLoad=Jl});var gn=s(he=>{Object.defineProperty(he,"__esModule",{value:!0});he.Tweet=void 0;var fe=to(d()),Ql=f(),eo=k();function to(t){return t&&t.__esModule?t:{default:t}}var ro=function(e){var r=e.tweetLink,a=e.theme,i=a===void 0?"light":a,l=e.align,o=l===void 0?"left":l,u=e.hideConversation,c=u===void 0?!1:u;return fe.default.createElement(Ql.GeneralObserver,{onEnter:function(){return(0,eo.handleTwttrLoad)()}},fe.default.createElement("div",{"data-testid":"twitter-tweet",className:"twitter-tweet-mdx-embed",style:{overflow:"auto"}},fe.default.createElement("blockquote",{className:"twitter-tweet","data-theme":i,"data-align":o,"data-conversation":c?"none":""},fe.default.createElement("a",{href:"https://twitter.com/".concat(r,"?ref_src=twsrc%5Etfw")},typeof window<"u"&&!window.twttr?"Loading":""))))};he.Tweet=ro});var bn=s(ge=>{Object.defineProperty(ge,"__esModule",{value:!0});ge.TwitterFollowButton=void 0;var vn=io(d()),no=f(),ao=k();function io(t){return t&&t.__esModule?t:{default:t}}var lo=function(e){var r=e.username,a=e.showFollowers,i=a===void 0?!1:a,l=e.showUsername,o=l===void 0?!0:l,u=e.size,c=u===void 0?"small":u;return vn.default.createElement(no.GeneralObserver,{onEnter:function(){return(0,ao.handleTwttrLoad)()}},vn.default.createElement("a",{"data-testid":"twitter-follow-button",href:"https://twitter.com/".concat(r,"?ref_src=twsrc%5Etfw"),className:"twitter-follow-button twitter-follow-button-mdx-embed","data-show-count":i,"data-show-screen-name":o,"data-size":c},"Follow @".concat(r)))};ge.TwitterFollowButton=lo});var _n=s(ve=>{Object.defineProperty(ve,"__esModule",{value:!0});ve.TwitterHashtagButton=void 0;var yn=uo(d()),oo=f(),so=k();function uo(t){return t&&t.__esModule?t:{default:t}}var co=function(e){var r=e.hashtag,a=e.size,i=a===void 0?"small":a;return yn.default.createElement(oo.GeneralObserver,{onEnter:function(){return(0,so.handleTwttrLoad)()}},yn.default.createElement("a",{"data-testid":"twitter-hashtag-button",href:"https://twitter.com/intent/tweet?button_hashtag=".concat(r,"&ref_src=twsrc%5Etfw"),className:"twitter-hashtag-button twitter-hashtag-button-mdx-embed","data-size":i},"Tweet #".concat(r)))};ve.TwitterHashtagButton=co});var wn=s(be=>{Object.defineProperty(be,"__esModule",{value:!0});be.TwitterList=void 0;var Ct=fo(d()),po=f(),mo=k();function fo(t){return t&&t.__esModule?t:{default:t}}var ho=function(e){var r=e.username,a=e.theme,i=a===void 0?"light":a,l=e.listName,o=e.width,u=o===void 0?"498px":o,c=e.height,p=c===void 0?null:c;return Ct.default.createElement(po.GeneralObserver,{onEnter:function(){return(0,mo.handleTwttrLoad)()}},Ct.default.createElement("div",{style:{overflow:"auto"}},Ct.default.createElement("a",{"data-testid":"twitter-list",className:"twitter-timeline twitter-timeline-mdx-embed","data-theme":i,"data-width":u,"data-height":p,href:"https://twitter.com/".concat(r,"/lists/").concat(l,"?ref_src=twsrc%5Etfw")},"A Twitter List by @".concat(r))))};be.TwitterList=ho});var On=s(ye=>{Object.defineProperty(ye,"__esModule",{value:!0});ye.TwitterMentionButton=void 0;var kn=bo(d()),go=f(),vo=k();function bo(t){return t&&t.__esModule?t:{default:t}}var yo=function(e){var r=e.username,a=e.size,i=a===void 0?"small":a;return kn.default.createElement(go.GeneralObserver,{onEnter:function(){return(0,vo.handleTwttrLoad)()}},kn.default.createElement("a",{"data-testid":"twitter-mention-button",href:"https://twitter.com/intent/tweet?screen_name=".concat(r,"&ref_src=twsrc%5Etfw"),className:"twitter-mention-button twitter-mention-button-mdx-embed","data-size":i},"Tweet to @".concat(r)))};ye.TwitterMentionButton=yo});var Pn=s(_e=>{Object.defineProperty(_e,"__esModule",{value:!0});_e.TwitterTimeline=void 0;var Ft=ko(d()),_o=f(),wo=k();function ko(t){return t&&t.__esModule?t:{default:t}}var Oo=function(e){var r=e.username,a=e.theme,i=a===void 0?"light":a,l=e.showLikes,o=l===void 0?null:l,u=e.width,c=u===void 0?"498px":u,p=e.height,h=p===void 0?null:p;return Ft.default.createElement(_o.GeneralObserver,{onEnter:function(){return(0,wo.handleTwttrLoad)()}},Ft.default.createElement("div",{style:{overflow:"auto"}},Ft.default.createElement("a",{"data-testid":"twitter-timeline",className:"twitter-timeline twitter-timeline-mdx-embed","data-theme":i,"data-width":c,"data-height":h,href:"https://twitter.com/".concat(r).concat(o?"/likes":"","?ref_src=twsrc%5Etfw")},"Tweets by @".concat(r))))};_e.TwitterTimeline=Oo});var Rt=s(w=>{Object.defineProperty(w,"__esModule",{value:!0});Object.defineProperty(w,"Tweet",{enumerable:!0,get:function(){return Po.Tweet}});Object.defineProperty(w,"TwitterFollowButton",{enumerable:!0,get:function(){return No.TwitterFollowButton}});Object.defineProperty(w,"TwitterHashtagButton",{enumerable:!0,get:function(){return qo.TwitterHashtagButton}});Object.defineProperty(w,"TwitterList",{enumerable:!0,get:function(){return To.TwitterList}});Object.defineProperty(w,"TwitterMentionButton",{enumerable:!0,get:function(){return So.TwitterMentionButton}});Object.defineProperty(w,"TwitterTimeline",{enumerable:!0,get:function(){return Eo.TwitterTimeline}});var Po=gn(),No=bn(),qo=_n(),To=wn(),So=On(),Eo=Pn()});var qn=s(we=>{Object.defineProperty(we,"__esModule",{value:!0});we.Vimeo=void 0;var Wt=Lo(d()),xo=g(),Mo=f();function Lo(t){return t&&t.__esModule?t:{default:t}}function Nn(t,e){var r=Object.keys(t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(t);e&&(a=a.filter(function(i){return Object.getOwnPropertyDescriptor(t,i).enumerable})),r.push.apply(r,a)}return r}function Bo(t){for(var e=1;e{Object.defineProperty(At,"__esModule",{value:!0});Object.defineProperty(At,"Vimeo",{enumerable:!0,get:function(){return Do.Vimeo}});var Do=qn()});var En=s(ke=>{Object.defineProperty(ke,"__esModule",{value:!0});ke.Whimsical=void 0;var Gt=Fo(d()),Co=f();function Fo(t){return t&&t.__esModule?t:{default:t}}function Tn(t,e){var r=Object.keys(t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(t);e&&(a=a.filter(function(i){return Object.getOwnPropertyDescriptor(t,i).enumerable})),r.push.apply(r,a)}return r}function Ro(t){for(var e=1;et.length)&&(e=t.length);for(var r=0,a=new Array(e);r{Object.defineProperty(zt,"__esModule",{value:!0});Object.defineProperty(zt,"Whimsical",{enumerable:!0,get:function(){return Vo.Whimsical}});var Vo=En()});var Ln=s(Pe=>{function Ht(t){return Ht=typeof Symbol=="function"&&typeof Symbol.iterator=="symbol"?function(e){return typeof e}:function(e){return e&&typeof Symbol=="function"&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},Ht(t)}Object.defineProperty(Pe,"__esModule",{value:!0});Pe.Wikipedia=void 0;var Oe=Ko(d()),Yo=f();function Mn(t){if(typeof WeakMap!="function")return null;var e=new WeakMap,r=new WeakMap;return(Mn=function(i){return i?r:e})(t)}function Ko(t,e){if(!e&&t&&t.__esModule)return t;if(t===null||Ht(t)!=="object"&&typeof t!="function")return{default:t};var r=Mn(e);if(r&&r.has(t))return r.get(t);var a={},i=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var l in t)if(l!=="default"&&Object.prototype.hasOwnProperty.call(t,l)){var o=i?Object.getOwnPropertyDescriptor(t,l):null;o&&(o.get||o.set)?Object.defineProperty(a,l,o):a[l]=t[l]}return a.default=t,r&&r.set(t,a),a}function Zo(t,e){return ts(t)||es(t,e)||Qo(t,e)||Jo()}function Jo(){throw new TypeError(`Invalid attempt to destructure non-iterable instance. In order to be iterable, non-array objects must have a [Symbol.iterator]() method.`)}function Qo(t,e){if(t){if(typeof t=="string")return xn(t,e);var r=Object.prototype.toString.call(t).slice(8,-1);if(r==="Object"&&t.constructor&&(r=t.constructor.name),r==="Map"||r==="Set")return Array.from(t);if(r==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return xn(t,e)}}function xn(t,e){(e==null||e>t.length)&&(e=t.length);for(var r=0,a=new Array(e);r{Object.defineProperty(Xt,"__esModule",{value:!0});Object.defineProperty(Xt,"Wikipedia",{enumerable:!0,get:function(){return ns.Wikipedia}});var ns=Ln()});var In=s(Ne=>{Object.defineProperty(Ne,"__esModule",{value:!0});Ne.handleWistiaLoad=void 0;var as=g(),Bn=!1,is="https://fast.wistia.net/assets/external/E-v1.js",ls=function(){Bn||((0,as.createScriptTag)(is,null),Bn=!0)};Ne.handleWistiaLoad=ls});var Cn=s(Te=>{function Yt(t){return Yt=typeof Symbol=="function"&&typeof Symbol.iterator=="symbol"?function(e){return typeof e}:function(e){return e&&typeof Symbol=="function"&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},Yt(t)}Object.defineProperty(Te,"__esModule",{value:!0});Te.Wistia=void 0;var qe=cs(d()),os=g(),ss=f(),us=In();function Dn(t){if(typeof WeakMap!="function")return null;var e=new WeakMap,r=new WeakMap;return(Dn=function(i){return i?r:e})(t)}function cs(t,e){if(!e&&t&&t.__esModule)return t;if(t===null||Yt(t)!=="object"&&typeof t!="function")return{default:t};var r=Dn(e);if(r&&r.has(t))return r.get(t);var a={},i=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var l in t)if(l!=="default"&&Object.prototype.hasOwnProperty.call(t,l)){var o=i?Object.getOwnPropertyDescriptor(t,l):null;o&&(o.get||o.set)?Object.defineProperty(a,l,o):a[l]=t[l]}return a.default=t,r&&r.set(t,a),a}function jn(t,e){var r=Object.keys(t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(t);e&&(a=a.filter(function(i){return Object.getOwnPropertyDescriptor(t,i).enumerable})),r.push.apply(r,a)}return r}function ds(t){for(var e=1;e0?"?"+_.join("&"):""),"data-testid":"wistia",allow:"autoplay; ".concat(i?"fullscreen":""),frameBorder:"0",scrolling:"no",className:"wistia-mdx-embed-iframe",allowFullScreen:i,style:{position:"absolute",top:0,left:0,width:c,height:h}})))};Te.Wistia=ms});var Zt=s(Kt=>{Object.defineProperty(Kt,"__esModule",{value:!0});Object.defineProperty(Kt,"Wistia",{enumerable:!0,get:function(){return fs.Wistia}});var fs=Cn()});var Rn=s(Se=>{Object.defineProperty(Se,"__esModule",{value:!0});Se.YouTube=void 0;var Jt=vs(d()),hs=g(),gs=f();function vs(t){return t&&t.__esModule?t:{default:t}}function Fn(t,e){var r=Object.keys(t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(t);e&&(a=a.filter(function(i){return Object.getOwnPropertyDescriptor(t,i).enumerable})),r.push.apply(r,a)}return r}function bs(t){for(var e=1;e{Object.defineProperty(Qt,"__esModule",{value:!0});Object.defineProperty(Qt,"YouTube",{enumerable:!0,get:function(){return ws.YouTube}});var ws=Rn()});function Wn(t){return e;function e(r){let a=xe(r.components);return T.default.createElement(t,{...r,allComponents:a})}}function xe(t){let e=T.default.useContext(Ee);return T.default.useMemo(()=>typeof t=="function"?t(e):{...e,...t},[e,t])}function An({components:t,children:e,disableParentContext:r}){let a;return r?a=typeof t=="function"?t({}):t||ks:a=xe(t),T.default.createElement(Ee.Provider,{value:a},e)}var T,Ee,ks,$n=lr(()=>{T=Ce(d(),1),Ee=T.default.createContext({});ks={}});var Gn={};or(Gn,{MDXContext:()=>Ee,MDXProvider:()=>An,useMDXComponents:()=>xe,withMDXComponents:()=>Wn});var zn=lr(()=>{$n()});var Hn=s(Me=>{Object.defineProperty(Me,"__esModule",{value:!0});Me.Cinnamon=void 0;var tr=Ns(d()),Os=g(),Ps=f();function Ns(t){return t&&t.__esModule?t:{default:t}}function Un(t,e){var r=Object.keys(t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(t);e&&(a=a.filter(function(i){return Object.getOwnPropertyDescriptor(t,i).enumerable})),r.push.apply(r,a)}return r}function qs(t){for(var e=1;e{Object.defineProperty(rr,"__esModule",{value:!0});Object.defineProperty(rr,"Cinnamon",{enumerable:!0,get:function(){return Es.Cinnamon}});var Es=Hn()});var Yn=s(Le=>{Object.defineProperty(Le,"__esModule",{value:!0});Le.components=void 0;var Vn=$e(),xs=Ue(),Ms=Xn(),Ls=Xe(),Bs=Ye(),Is=Je(),js=nt(),Ds=tt(),Cs=lt(),Fs=ut(),Rs=pt(),Ws=ht(),nr=gt(),As=bt(),$s=wt(),Gs=Ot(),zs=Nt(),Us=St(),Hs=xt(),Xs=Lt(),Vs=Dt(),S=Rt(),Ys=$t(),Ks=Ut(),Zs=Vt(),Js=Zt(),Qs=er(),eu={AirtableBase:Vn.AirtableBase,AirtableForm:Vn.AirtableForm,Buzzsprout:xs.Buzzsprout,Cinnamon:Ms.Cinnamon,CodePen:Ls.CodePen,CodeSandbox:Bs.CodeSandbox,EggheadLesson:Is.EggheadLesson,Figma:js.Figma,Flickr:Ds.Flickr,Gist:Cs.Gist,Instagram:Fs.Instagram,Lbry:Rs.Lbry,LinkedInBadge:Ws.LinkedInBadge,Pin:nr.Pin,PinterestBoard:nr.PinterestBoard,PinterestFollowButton:nr.PinterestFollowButton,Replit:As.Replit,SimplecastEpisode:$s.SimplecastEpisode,SoundCloud:Gs.SoundCloud,Spotify:zs.Spotify,Strava:Us.Strava,Snack:Hs.Snack,TikTok:Xs.TikTok,Twitch:Vs.Twitch,Tweet:S.Tweet,TwitterFollowButton:S.TwitterFollowButton,TwitterHashtagButton:S.TwitterHashtagButton,TwitterList:S.TwitterList,TwitterMentionButton:S.TwitterMentionButton,TwitterTimeline:S.TwitterTimeline,Vimeo:Ys.Vimeo,Whimsical:Ks.Whimsical,Wikipedia:Zs.Wikipedia,Wistia:Js.Wistia,YouTube:Qs.YouTube};Le.components=eu});var Kn=s(Be=>{Object.defineProperty(Be,"__esModule",{value:!0});Be.MDXEmbedProvider=void 0;var tu=au(d()),ru=(zn(),ur(Gn)),nu=Yn();function au(t){return t&&t.__esModule?t:{default:t}}var iu=function(e){var r=e.children;return tu.default.createElement(ru.MDXProvider,{components:nu.components},r)};Be.MDXEmbedProvider=iu});var Zn=s(ar=>{Object.defineProperty(ar,"__esModule",{value:!0});Object.defineProperty(ar,"MDXEmbedProvider",{enumerable:!0,get:function(){return lu.MDXEmbedProvider}});var lu=Kn()});var Qn=s(m=>{Object.defineProperty(m,"__esModule",{value:!0});Object.defineProperty(m,"AirtableBase",{enumerable:!0,get:function(){return Jn.AirtableBase}});Object.defineProperty(m,"AirtableForm",{enumerable:!0,get:function(){return Jn.AirtableForm}});Object.defineProperty(m,"Buzzsprout",{enumerable:!0,get:function(){return ou.Buzzsprout}});Object.defineProperty(m,"CodePen",{enumerable:!0,get:function(){return su.CodePen}});Object.defineProperty(m,"CodeSandbox",{enumerable:!0,get:function(){return uu.CodeSandbox}});Object.defineProperty(m,"EggheadLesson",{enumerable:!0,get:function(){return cu.EggheadLesson}});Object.defineProperty(m,"Figma",{enumerable:!0,get:function(){return pu.Figma}});Object.defineProperty(m,"Flickr",{enumerable:!0,get:function(){return du.Flickr}});Object.defineProperty(m,"Gist",{enumerable:!0,get:function(){return mu.Gist}});Object.defineProperty(m,"Instagram",{enumerable:!0,get:function(){return fu.Instagram}});Object.defineProperty(m,"Lbry",{enumerable:!0,get:function(){return hu.Lbry}});Object.defineProperty(m,"LinkedInBadge",{enumerable:!0,get:function(){return gu.LinkedInBadge}});Object.defineProperty(m,"MDXEmbedProvider",{enumerable:!0,get:function(){return xu.MDXEmbedProvider}});Object.defineProperty(m,"Pin",{enumerable:!0,get:function(){return ir.Pin}});Object.defineProperty(m,"PinterestBoard",{enumerable:!0,get:function(){return ir.PinterestBoard}});Object.defineProperty(m,"PinterestFollowButton",{enumerable:!0,get:function(){return ir.PinterestFollowButton}});Object.defineProperty(m,"Replit",{enumerable:!0,get:function(){return vu.Replit}});Object.defineProperty(m,"SimplecastEpisode",{enumerable:!0,get:function(){return bu.SimplecastEpisode}});Object.defineProperty(m,"Snack",{enumerable:!0,get:function(){return ku.Snack}});Object.defineProperty(m,"SoundCloud",{enumerable:!0,get:function(){return yu.SoundCloud}});Object.defineProperty(m,"Spotify",{enumerable:!0,get:function(){return _u.Spotify}});Object.defineProperty(m,"Strava",{enumerable:!0,get:function(){return wu.Strava}});Object.defineProperty(m,"TikTok",{enumerable:!0,get:function(){return Ou.TikTok}});Object.defineProperty(m,"Tweet",{enumerable:!0,get:function(){return E.Tweet}});Object.defineProperty(m,"Twitch",{enumerable:!0,get:function(){return Pu.Twitch}});Object.defineProperty(m,"TwitterFollowButton",{enumerable:!0,get:function(){return E.TwitterFollowButton}});Object.defineProperty(m,"TwitterHashtagButton",{enumerable:!0,get:function(){return E.TwitterHashtagButton}});Object.defineProperty(m,"TwitterList",{enumerable:!0,get:function(){return E.TwitterList}});Object.defineProperty(m,"TwitterMentionButton",{enumerable:!0,get:function(){return E.TwitterMentionButton}});Object.defineProperty(m,"TwitterTimeline",{enumerable:!0,get:function(){return E.TwitterTimeline}});Object.defineProperty(m,"Vimeo",{enumerable:!0,get:function(){return Nu.Vimeo}});Object.defineProperty(m,"Whimsical",{enumerable:!0,get:function(){return qu.Whimsical}});Object.defineProperty(m,"Wikipedia",{enumerable:!0,get:function(){return Tu.Wikipedia}});Object.defineProperty(m,"Wistia",{enumerable:!0,get:function(){return Su.Wistia}});Object.defineProperty(m,"YouTube",{enumerable:!0,get:function(){return Eu.YouTube}});var Jn=$e(),ou=Ue(),su=Xe(),uu=Ye(),cu=Je(),du=tt(),pu=nt(),mu=lt(),fu=ut(),hu=pt(),gu=ht(),ir=gt(),vu=bt(),bu=wt(),yu=Ot(),_u=Nt(),wu=St(),ku=xt(),Ou=Lt(),Pu=Dt(),E=Rt(),Nu=$t(),qu=Ut(),Tu=Vt(),Su=Zt(),Eu=er(),xu=Zn()});var Iu={};or(Iu,{default:()=>Bu,frontmatter:()=>Mu});var n=Ce(dr()),ta=Ce(Qn()),Mu={title:"My Favorite Layout Components in React",date:new Date(15682464e5),draft:!1,slug:"react-layout-components",category:"dev",tags:["React","CSS","layout"],lastmod:new Date(1676706091994),excerpt:"React components for rapid layout and ease of use. These components are designed to be used as building blocks for your own layouts. They are not meant to be used as the only way to build a layout.",cover:"https://res.cloudinary.com/joelmturner/image/upload/v1655157939/Posts/layout-components"};function ea(t){let e=Object.assign({h2:"h2",ul:"ul",li:"li",a:"a",p:"p",code:"code",pre:"pre",div:"div",span:"span"},t.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{id:"table-of-contents",children:"Table of Contents"}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:"#what-were-using-tldr",children:"What We're Using TL;DR"})}),` `,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:"#flexbox",children:"Flexbox"})}),` `,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:"#grid",children:"Grid"})}),` `]}),` `,(0,n.jsx)(e.h2,{id:"what-were-using-tldr",children:"What We're Using TL;DR"}),` `,(0,n.jsx)(ta.CodeSandbox,{codeSandboxId:"react-layout-components-flexbox-grid-d9e1u"}),` `,(0,n.jsxs)(e.p,{children:["I had used a column component that accepted different span amounts, but I ended up not using it as much. I tend to add ",(0,n.jsx)(e.code,{children:"span"})," to the children through the ",(0,n.jsx)(e.code,{children:"sx"})," prop or extending with styled components."]}),` `,(0,n.jsx)(e.h2,{id:"flexbox",children:"Flexbox"}),` `,(0,n.jsxs)(e.p,{children:["This one is by far my favorite. 90% of the time it works perfectly with the props given. It can easily be extended through styled components, emotion's ",(0,n.jsx)(e.code,{children:"css"})," prop, or Theme UI's ",(0,n.jsx)(e.code,{children:"sx"})," prop for those few cases where I need something extra."]}),` `,(0,n.jsx)(e.p,{children:"This is definitely an opinionated way to build a Flexbox component. The idea is to have booleans for certain aspects of the spec to help speed up composition."}),` `,(0,n.jsx)(e.p,{children:"Here's a list of the current props for it:"}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsxs)(e.code,{className:"hljs language-typescript",children:[(0,n.jsxs)(e.div,{"data-line":"1",className:"highlight-line","data-highlighted":"false",children:[(0,n.jsx)(e.span,{className:"token keyword",children:"type"})," ",(0,n.jsx)(e.span,{className:"token class-name",children:"FlexboxProps"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.div,{"data-line":"2",className:"highlight-line","data-highlighted":"false",children:[" className",(0,n.jsx)(e.span,{className:"token operator",children:"?"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token builtin",children:"string"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.div,{"data-line":"3",className:"highlight-line","data-highlighted":"false",children:[" children",(0,n.jsx)(e.span,{className:"token operator",children:"?"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," React",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),"ReactNode",(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsx)(e.div,{"data-line":"4",className:"highlight-line","data-highlighted":"false",children:` `}),(0,n.jsxs)(e.div,{"data-line":"5",className:"highlight-line","data-highlighted":"false",children:[" inline",(0,n.jsx)(e.span,{className:"token operator",children:"?"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token builtin",children:"boolean"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.div,{"data-line":"6",className:"highlight-line","data-highlighted":"false",children:[" vertical",(0,n.jsx)(e.span,{className:"token operator",children:"?"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token builtin",children:"boolean"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"})," ",(0,n.jsx)(e.span,{className:"token comment",children:"// column"}),` `]}),(0,n.jsxs)(e.div,{"data-line":"7",className:"highlight-line","data-highlighted":"false",children:[" wrap",(0,n.jsx)(e.span,{className:"token operator",children:"?"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token builtin",children:"boolean"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.div,{"data-line":"8",className:"highlight-line","data-highlighted":"false",children:[" noGrow",(0,n.jsx)(e.span,{className:"token operator",children:"?"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token builtin",children:"boolean"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"})," ",(0,n.jsx)(e.span,{className:"token comment",children:"// acts as no-grow and no-shrink"}),` `]}),(0,n.jsxs)(e.div,{"data-line":"9",className:"highlight-line","data-highlighted":"false",children:[" grow",(0,n.jsx)(e.span,{className:"token operator",children:"?"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token builtin",children:"number"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.div,{"data-line":"10",className:"highlight-line","data-highlighted":"false",children:[" shrink",(0,n.jsx)(e.span,{className:"token operator",children:"?"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token builtin",children:"number"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.div,{"data-line":"11",className:"highlight-line","data-highlighted":"false",children:[" basis",(0,n.jsx)(e.span,{className:"token operator",children:"?"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token builtin",children:"number"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"|"})," ",(0,n.jsx)(e.span,{className:"token string",children:"'auto'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsx)(e.div,{"data-line":"12",className:"highlight-line","data-highlighted":"false",children:` `}),(0,n.jsxs)(e.div,{"data-line":"13",className:"highlight-line","data-highlighted":"false",children:[" top",(0,n.jsx)(e.span,{className:"token operator",children:"?"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token builtin",children:"boolean"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.div,{"data-line":"14",className:"highlight-line","data-highlighted":"false",children:[" middle",(0,n.jsx)(e.span,{className:"token operator",children:"?"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token builtin",children:"boolean"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.div,{"data-line":"15",className:"highlight-line","data-highlighted":"false",children:[" bottom",(0,n.jsx)(e.span,{className:"token operator",children:"?"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token builtin",children:"boolean"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.div,{"data-line":"16",className:"highlight-line","data-highlighted":"false",children:[" left",(0,n.jsx)(e.span,{className:"token operator",children:"?"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token builtin",children:"boolean"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.div,{"data-line":"17",className:"highlight-line","data-highlighted":"false",children:[" center",(0,n.jsx)(e.span,{className:"token operator",children:"?"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token builtin",children:"boolean"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.div,{"data-line":"18",className:"highlight-line","data-highlighted":"false",children:[" right",(0,n.jsx)(e.span,{className:"token operator",children:"?"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token builtin",children:"boolean"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.div,{"data-line":"19",className:"highlight-line","data-highlighted":"false",children:[" between",(0,n.jsx)(e.span,{className:"token operator",children:"?"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token builtin",children:"boolean"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.div,{"data-line":"20",className:"highlight-line","data-highlighted":"false",children:[" around",(0,n.jsx)(e.span,{className:"token operator",children:"?"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token builtin",children:"boolean"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.div,{"data-line":"21",className:"highlight-line","data-highlighted":"false",children:[" gap",(0,n.jsx)(e.span,{className:"token operator",children:"?"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token builtin",children:"boolean"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"|"})," ",(0,n.jsx)(e.span,{className:"token builtin",children:"number"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"})," ",(0,n.jsx)(e.span,{className:"token comment",children:"// add margin between children similar to grid-gap on grid"}),` `]}),(0,n.jsxs)(e.div,{"data-line":"22",className:"highlight-line","data-highlighted":"false",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]})]})}),` `,(0,n.jsxs)(e.p,{children:["Here is some example usage. See the ",(0,n.jsx)(e.a,{href:"#example",children:"CodeSandbox"})," down below for more."]}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsxs)(e.code,{className:"hljs language-jsx",children:[(0,n.jsxs)(e.div,{"data-line":"1",className:"highlight-line","data-highlighted":"false",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),(0,n.jsx)(e.span,{className:"token class-name",children:"Flexbox"})]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"vertical"})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"gap"}),(0,n.jsxs)(e.span,{className:"token script language-javascript",children:[(0,n.jsx)(e.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),(0,n.jsx)(e.span,{className:"token number",children:"3"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(e.span,{className:"token plain-text"}),` `]}),(0,n.jsxs)(e.div,{"data-line":"2",className:"highlight-line","data-highlighted":"false",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),(0,n.jsx)(e.span,{className:"token class-name",children:"Flexbox"})]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"noGrow"}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(e.span,{className:"token plain-text"}),` `]}),(0,n.jsxs)(e.div,{"data-line":"3",className:"highlight-line","data-highlighted":"false",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"h1"]}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:"A Title for You"}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),(0,n.jsx)(e.span,{className:"token plain-text"}),` `]}),(0,n.jsxs)(e.div,{"data-line":"4",className:"highlight-line","data-highlighted":"false",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),(0,n.jsx)(e.span,{className:"token plain-text"}),` `]}),(0,n.jsxs)(e.div,{"data-line":"5",className:"highlight-line","data-highlighted":"false",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),(0,n.jsx)(e.span,{className:"token class-name",children:"Flexbox"})]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"bottom"}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(e.span,{className:"token plain-text"}),` `]}),(0,n.jsxs)(e.div,{"data-line":"6",className:"highlight-line","data-highlighted":"false",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"p"]}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(e.span,{className:"token plain-text"}),` `]}),(0,n.jsxs)(e.div,{"data-line":"7",className:"highlight-line","data-highlighted":"false",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" This is some copy to show how the box will fill the whole area but the text will be aligned"}),` `]}),(0,n.jsxs)(e.div,{"data-line":"8",className:"highlight-line","data-highlighted":"false",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" bottom."}),` `]}),(0,n.jsxs)(e.div,{"data-line":"9",className:"highlight-line","data-highlighted":"false",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),(0,n.jsx)(e.span,{className:"token plain-text"}),` `]}),(0,n.jsxs)(e.div,{"data-line":"10",className:"highlight-line","data-highlighted":"false",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),(0,n.jsx)(e.span,{className:"token plain-text"}),` `]}),(0,n.jsxs)(e.div,{"data-line":"11",className:"highlight-line","data-highlighted":"false",children:[(0,n.jsx)(e.span,{className:"token plain-text"}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),` `]})]})}),` `,(0,n.jsx)(e.h2,{id:"grid",children:"Grid"}),` `,(0,n.jsx)(e.p,{children:"Grid is another one of my favorites and it's also very opinionated to suit my needs. The idea is to use CSS grid to create layouts. Depending on the project it can align with a design grid."}),` `,(0,n.jsxs)(e.p,{children:["This can be paired with Flexbox for some powerful layouts. Add the ",(0,n.jsx)(e.code,{children:"sx"})," prop from Theme UI for some wonderful ",(0,n.jsx)(e.a,{href:"https://theme-ui.com/theme-spec#breakpoints",rel:"nofollow",children:"breakpoint awesomeness"}),"."]}),` `,(0,n.jsx)(e.p,{children:"Let's take a look at the props."}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsxs)(e.code,{className:"hljs language-typescript",children:[(0,n.jsxs)(e.div,{"data-line":"1",className:"highlight-line","data-highlighted":"false",children:[(0,n.jsx)(e.span,{className:"token keyword",children:"type"})," ",(0,n.jsx)(e.span,{className:"token class-name",children:"GridProps"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.div,{"data-line":"2",className:"highlight-line","data-highlighted":"false",children:[" className",(0,n.jsx)(e.span,{className:"token operator",children:"?"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token builtin",children:"string"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.div,{"data-line":"3",className:"highlight-line","data-highlighted":"false",children:[" children",(0,n.jsx)(e.span,{className:"token operator",children:":"})," React",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),"ReactNode",(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.div,{"data-line":"4",className:"highlight-line","data-highlighted":"false",children:[" gap",(0,n.jsx)(e.span,{className:"token operator",children:"?"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token builtin",children:"string"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"|"})," ",(0,n.jsx)(e.span,{className:"token builtin",children:"number"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"})," ",(0,n.jsx)(e.span,{className:"token comment",children:"// grid-gap"}),` `]}),(0,n.jsxs)(e.div,{"data-line":"5",className:"highlight-line","data-highlighted":"false",children:[" columns",(0,n.jsx)(e.span,{className:"token operator",children:"?"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token builtin",children:"string"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"|"})," ",(0,n.jsx)(e.span,{className:"token builtin",children:"string"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"["}),(0,n.jsx)(e.span,{className:"token punctuation",children:"]"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"})," ",(0,n.jsx)(e.span,{className:"token comment",children:"// grid-template-columns"}),` `]}),(0,n.jsxs)(e.div,{"data-line":"6",className:"highlight-line","data-highlighted":"false",children:[" rows",(0,n.jsx)(e.span,{className:"token operator",children:"?"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token builtin",children:"string"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"|"})," ",(0,n.jsx)(e.span,{className:"token builtin",children:"string"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"["}),(0,n.jsx)(e.span,{className:"token punctuation",children:"]"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"})," ",(0,n.jsx)(e.span,{className:"token comment",children:"// grid-template-rows"}),` `]}),(0,n.jsxs)(e.div,{"data-line":"7",className:"highlight-line","data-highlighted":"false",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]})]})}),` `,(0,n.jsxs)(e.p,{children:["Here's an example of using it. See more examples in the ",(0,n.jsx)(e.a,{href:"#example",children:"CodeSandbox"}),"."]}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsxs)(e.code,{className:"hljs language-jsx",children:[(0,n.jsxs)(e.div,{"data-line":"1",className:"highlight-line","data-highlighted":"false",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),(0,n.jsx)(e.span,{className:"token class-name",children:"Grid"})]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"columns"}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"1fr 1fr",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"gap"}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"2",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(e.span,{className:"token plain-text"}),` `]}),(0,n.jsxs)(e.div,{"data-line":"2",className:"highlight-line","data-highlighted":"false",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"img"]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"src"}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"myImage.png",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"/>"})]}),(0,n.jsx)(e.span,{className:"token plain-text"}),` `]}),(0,n.jsxs)(e.div,{"data-line":"3",className:"highlight-line","data-highlighted":"false",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"img"]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"src"}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"catsSinging.png",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"/>"})]}),(0,n.jsx)(e.span,{className:"token plain-text"}),` `]}),(0,n.jsxs)(e.div,{"data-line":"4",className:"highlight-line","data-highlighted":"false",children:[(0,n.jsx)(e.span,{className:"token plain-text"}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),` `]})]})})]})}function Lu(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(ea,t)})):ea(t)}var Bu=Lu;return ur(Iu);})(); ;return Component;

Tag: layout

My Favorite Layout Components in React