[{"_1":2,"_615":-5,"_616":-5},"loaderData",{"_3":4,"_333":334,"_467":468},"root",{"_5":6,"_11":-5,"_12":13,"_14":-5,"_15":16,"_17":18,"_134":135,"_137":138,"_139":16,"_140":141,"_195":143,"_196":145,"_146":147,"_197":198,"_219":220,"_244":-5,"_245":-5,"_246":247},"userId",{"_7":8,"_9":10},"id","wsmwtlfqw6xk3a4913gxm3r6","type","cookie.randomId","preferences","progress",[],"user","userHasAccess",false,"apps",[19,26,30,34,38,42,46,50,54,58,62,66,70,74,78,82,86,90,94,98,102,106,110,114,118,122,126,130],{"_20":21,"_22":23,"_24":25},"name","01.01.problem","fullPath","/myapp/workshop-content/exercises/01.composition/01.problem.compose","relativePath","exercises/01.composition/01.problem.compose",{"_20":27,"_22":28,"_24":29},"01.01.solution","/myapp/workshop-content/exercises/01.composition/01.solution.compose","exercises/01.composition/01.solution.compose",{"_20":31,"_22":32,"_24":33},"02.01.problem","/myapp/workshop-content/exercises/02.latest-ref/01.problem.ref","exercises/02.latest-ref/01.problem.ref",{"_20":35,"_22":36,"_24":37},"02.01.solution","/myapp/workshop-content/exercises/02.latest-ref/01.solution.ref","exercises/02.latest-ref/01.solution.ref",{"_20":39,"_22":40,"_24":41},"03.01.problem","/myapp/workshop-content/exercises/03.compound-components/01.problem.context","exercises/03.compound-components/01.problem.context",{"_20":43,"_22":44,"_24":45},"03.01.solution","/myapp/workshop-content/exercises/03.compound-components/01.solution.context","exercises/03.compound-components/01.solution.context",{"_20":47,"_22":48,"_24":49},"03.02.problem","/myapp/workshop-content/exercises/03.compound-components/02.problem.validation","exercises/03.compound-components/02.problem.validation",{"_20":51,"_22":52,"_24":53},"03.02.solution","/myapp/workshop-content/exercises/03.compound-components/02.solution.validation","exercises/03.compound-components/02.solution.validation",{"_20":55,"_22":56,"_24":57},"04.01.problem","/myapp/workshop-content/exercises/04.slots/01.problem.context","exercises/04.slots/01.problem.context",{"_20":59,"_22":60,"_24":61},"04.01.solution","/myapp/workshop-content/exercises/04.slots/01.solution.context","exercises/04.slots/01.solution.context",{"_20":63,"_22":64,"_24":65},"04.02.problem","/myapp/workshop-content/exercises/04.slots/02.problem.generic","exercises/04.slots/02.problem.generic",{"_20":67,"_22":68,"_24":69},"04.02.solution","/myapp/workshop-content/exercises/04.slots/02.solution.generic","exercises/04.slots/02.solution.generic",{"_20":71,"_22":72,"_24":73},"04.03.problem","/myapp/workshop-content/exercises/04.slots/03.problem.prop","exercises/04.slots/03.problem.prop",{"_20":75,"_22":76,"_24":77},"04.03.solution","/myapp/workshop-content/exercises/04.slots/03.solution.prop","exercises/04.slots/03.solution.prop",{"_20":79,"_22":80,"_24":81},"05.01.problem","/myapp/workshop-content/exercises/05.prop-getters/01.problem.collections","exercises/05.prop-getters/01.problem.collections",{"_20":83,"_22":84,"_24":85},"05.01.solution","/myapp/workshop-content/exercises/05.prop-getters/01.solution.collections","exercises/05.prop-getters/01.solution.collections",{"_20":87,"_22":88,"_24":89},"05.02.problem","/myapp/workshop-content/exercises/05.prop-getters/02.problem.getters","exercises/05.prop-getters/02.problem.getters",{"_20":91,"_22":92,"_24":93},"05.02.solution","/myapp/workshop-content/exercises/05.prop-getters/02.solution.getters","exercises/05.prop-getters/02.solution.getters",{"_20":95,"_22":96,"_24":97},"06.01.problem","/myapp/workshop-content/exercises/06.state-initializers/01.problem.initial","exercises/06.state-initializers/01.problem.initial",{"_20":99,"_22":100,"_24":101},"06.01.solution","/myapp/workshop-content/exercises/06.state-initializers/01.solution.initial","exercises/06.state-initializers/01.solution.initial",{"_20":103,"_22":104,"_24":105},"06.02.problem","/myapp/workshop-content/exercises/06.state-initializers/02.problem.stability","exercises/06.state-initializers/02.problem.stability",{"_20":107,"_22":108,"_24":109},"06.02.solution","/myapp/workshop-content/exercises/06.state-initializers/02.solution.stability","exercises/06.state-initializers/02.solution.stability",{"_20":111,"_22":112,"_24":113},"07.01.problem","/myapp/workshop-content/exercises/07.state-reducer/01.problem.reducer","exercises/07.state-reducer/01.problem.reducer",{"_20":115,"_22":116,"_24":117},"07.01.solution","/myapp/workshop-content/exercises/07.state-reducer/01.solution.reducer","exercises/07.state-reducer/01.solution.reducer",{"_20":119,"_22":120,"_24":121},"07.02.problem","/myapp/workshop-content/exercises/07.state-reducer/02.problem.default","exercises/07.state-reducer/02.problem.default",{"_20":123,"_22":124,"_24":125},"07.02.solution","/myapp/workshop-content/exercises/07.state-reducer/02.solution.default","exercises/07.state-reducer/02.solution.default",{"_20":127,"_22":128,"_24":129},"08.01.problem","/myapp/workshop-content/exercises/08.control-props/01.problem.control","exercises/08.control-props/01.problem.control",{"_20":131,"_22":132,"_24":133},"08.01.solution","/myapp/workshop-content/exercises/08.control-props/01.solution.control","exercises/08.control-props/01.solution.control","repoUpdates",{"_136":16},"updatesAvailable","unmutedNotifications",[],"exerciseChanges","workshopConfig",{"_142":143,"_144":145,"_146":147,"_153":154,"_171":172,"_173":174,"_175":176,"_177":178,"_181":182,"_187":188,"_191":192,"_193":194},"title","Advanced React Patterns 🤯","subtitle","Learn how to build simple and flexible React Components and Hooks using modern patterns","instructor",{"_20":148,"_149":150,"_151":152},"Kent C. Dodds","avatar","/images/instructor.png","𝕏","kentcdodds","product",{"_155":156,"_157":158,"_159":160,"_161":162,"_163":164,"_165":166,"_167":168},"host","www.epicreact.dev","displayName","EpicReact.dev","displayNameShort","Epic React","logo","/logo.svg","slug","advanced-react-patterns","discordChannelId","1285244676286189569","discordTags",[169,170],"1285246046498328627","1285245811944325193","onboardingVideo","https://www.epicweb.dev/tips/get-started-with-the-epic-workshop-app-for-react","githubRepo","https://github.com/epicweb-dev/advanced-react-patterns","githubRoot","https://github.com/epicweb-dev/advanced-react-patterns/tree/main","stackBlitzConfig",{"_179":180},"view","editor","forms",{"_183":184,"_185":186},"workshop","https://docs.google.com/forms/d/e/1FAIpQLSdRmj9p8-5zyoqRzxp3UpqSbC3aFkweXvvJIKes0a5s894gzg/viewform?hl=en&embedded=true&entry.2123647600={workshopTitle}","exercise","https://docs.google.com/forms/d/e/1FAIpQLSf3o9xyjQepTlOTH5Z7ZwkeSTdXh6YWI_RGc9KiyD3oUN0p6w/viewform?hl=en&embedded=true&entry.1836176234={workshopTitle}&entry.428900931={exerciseTitle}","testTab",{"_189":190},"enabled",true,"initialRoute","/","notifications",[],"workshopTitle","workshopSubtitle","ENV",{"_199":200,"_201":202,"_203":204,"_205":174,"_206":176,"_207":190,"_208":209,"_210":211,"_212":213,"_214":190,"_215":216,"_217":218},"MODE","production","EPICSHOP_CONTEXT_CWD","/myapp/workshop-content","EPICSHOP_WORKSHOP_INSTANCE_ID","4e1570b81d1baf3d16bd3a08ece570cb","EPICSHOP_GITHUB_REPO","EPICSHOP_GITHUB_ROOT","EPICSHOP_DEPLOYED","EPICSHOP_APP_VERSION","6.19.5","EPICSHOP_PARENT_PORT","3742","EPICSHOP_PARENT_TOKEN","d81c954a248b061a4b37ec0491338cd68e2421a1446df5307b06594d9f788795","EPICSHOP_IS_PUBLISHED","SENTRY_DSN","https://cd51fbf4ca0834f7b3529a478a8ece4c@o913766.ingest.us.sentry.io/4509630082252800","SENTRY_PROJECT_ID","4509630082252800","requestInfo",{"_221":222,"_223":224,"_225":226,"_227":228,"_229":228,"_230":231,"_238":239,"_240":241,"_242":192,"_243":190},"protocol","http:","hostname","advanced-patterns.epicreact.dev","port","","origin","http://advanced-patterns.epicreact.dev","domain","hints",{"_232":233,"_234":235,"_236":237},"theme","light","timeZone","UTC","reducedMotion","no-preference","path","/exercise/04/finished","session",{"_232":-5},"separator","online","toast","confettiId","presence",{"_248":249},"users",[250,265,272,284,292,300,307,310,314,319,322,329],{"_7":251,"_252":190,"_253":254,"_255":256,"_20":257,"_258":259},"16a4bbe7-a163-4240-933a-720e952c210e","hasAccess","imageUrlSmall","https://www.gravatar.com/avatar/9a8329ced26e545382c01e8d24fb0b7d?size=64&default=identicon","imageUrlLarge","https://www.gravatar.com/avatar/9a8329ced26e545382c01e8d24fb0b7d?size=512&default=identicon","Dimiter Radonov","location",{"_195":260,"_227":261,"_185":262},"React Fundamentals ⚛","http://localhost:5639",{"_263":264},"exerciseNumber",7,{"_7":266,"_252":190,"_253":267,"_255":268,"_20":269,"_258":270},"574648d2-baae-41df-b3ec-135a6bdade61","https://cdn.discordapp.com/avatars/979372707642769508/b47ed47aeeba60e9dc5b94f2fc48e8ca.png?size=64","https://cdn.discordapp.com/avatars/979372707642769508/b47ed47aeeba60e9dc5b94f2fc48e8ca.png?size=512","Christopher Bovard",{"_195":260,"_227":271},"http://react-fundamentals.localhost:5639",{"_7":273,"_252":190,"_253":274,"_255":275,"_20":276,"_258":277},"dc1ae175-1567-46f3-a5dd-7d740694803f","https://www.gravatar.com/avatar/380085a451c9e97c69cf1cf18311e110?size=64&default=identicon","https://www.gravatar.com/avatar/380085a451c9e97c69cf1cf18311e110?size=512&default=identicon","Gabriela Żak",{"_195":278,"_227":261,"_185":279},"Full Stack Testing 🧪",{"_9":280,"_263":281,"_282":283},"problem",1,"stepNumber",4,{"_7":285,"_252":190,"_253":286,"_255":287,"_20":288,"_258":289},"9141522c-35f4-42e6-85b8-acd4b5fc3d5e","https://www.gravatar.com/avatar/b0f77816239ccb94938439166ddfd02a?size=64&default=identicon","https://www.gravatar.com/avatar/b0f77816239ccb94938439166ddfd02a?size=512&default=identicon","Mario Grimaldi",{"_195":260,"_227":261,"_185":290},{"_9":280,"_263":264,"_282":291},3,{"_7":293,"_252":190,"_253":294,"_255":295,"_20":296,"_258":297},"20bc3944-0476-4c27-a082-0948e67b896c","https://www.gravatar.com/avatar/8c33381d72c0c1e630186ac4e27b3cb3?size=64&default=identicon","https://www.gravatar.com/avatar/8c33381d72c0c1e630186ac4e27b3cb3?size=512&default=identicon","Nicolas Mainella",{"_195":298,"_227":261,"_185":299},"Advanced React APIs 🔥",{"_9":280,"_263":281,"_282":291},{"_7":301,"_252":190,"_253":302,"_255":303,"_20":304,"_258":305},"4340f339-57a2-4db3-8c84-654769b2ddc4","https://www.gravatar.com/avatar/49360e6b15d203b743ce7a567b8fc2d0?size=64&default=identicon","https://www.gravatar.com/avatar/49360e6b15d203b743ce7a567b8fc2d0?size=512&default=identicon","Steven O'Hanlon-Rose",{"_195":260,"_227":271,"_185":306},{"_263":281},{"_7":308,"_258":309},"drqb7m80yv0foa5k4lxjontc",{"_195":278,"_227":261},{"_7":311,"_258":312},"ayptrdd6j1gjh22lbr46xamz",{"_195":278,"_227":313},"http://testing.epicweb.dev",{"_7":315,"_258":316},"ic69x9jce94ro7buf680ugcz",{"_195":317,"_227":318},"React Suspense 🔀","http://192.168.0.125:5640",{"_7":320,"_258":321},"wq8h9o0ps451kjcn2f39bi4d",{"_195":317,"_227":261},{"_7":323,"_258":324},"oo96mglaxbb483kjx4q71ltp",{"_195":325,"_227":261,"_185":326},"Professional Web Forms 📝",{"_9":280,"_263":327,"_282":328},5,2,{"_7":330,"_258":331},"sssd27aakajbcnruj21pbl9k",{"_195":143,"_227":228,"_185":332},{"_263":283,"_282":-5,"_9":-5},"routes/_app+/_layout",{"_195":143,"_335":336,"_463":464,"_466":16},"exercises",[337,352,362,378,401,418,436,452],{"_263":281,"_142":338,"_339":340,"_343":344,"_346":347},"Composition","solutions",[341],{"_282":281,"_142":342,"_20":27},"Composition and Layout Components","problems",[345],{"_282":281,"_142":342,"_20":21},"steps",[348],{"_282":281,"_142":342,"_20":21,"_280":349,"_350":351},{"_20":21,"_142":342},"solution",{"_20":27,"_142":342},{"_263":328,"_142":353,"_339":354,"_343":356,"_346":358},"Latest Ref",[355],{"_282":281,"_142":353,"_20":35},[357],{"_282":281,"_142":353,"_20":31},[359],{"_282":281,"_142":353,"_20":31,"_280":360,"_350":361},{"_20":31,"_142":353},{"_20":35,"_142":353},{"_263":291,"_142":363,"_339":364,"_343":368,"_346":371},"Compound Components",[365,366],{"_282":281,"_142":363,"_20":43},{"_282":328,"_142":367,"_20":51},"Compound Components Validation",[369,370],{"_282":281,"_142":363,"_20":39},{"_282":328,"_142":367,"_20":47},[372,375],{"_282":281,"_142":363,"_20":39,"_280":373,"_350":374},{"_20":39,"_142":363},{"_20":43,"_142":363},{"_282":328,"_142":367,"_20":47,"_280":376,"_350":377},{"_20":47,"_142":367},{"_20":51,"_142":367},{"_263":283,"_142":379,"_339":380,"_343":387,"_346":391},"Slots",[381,383,385],{"_282":281,"_142":382,"_20":59},"Slot Context",{"_282":328,"_142":384,"_20":67},"Generic Slot Components",{"_282":291,"_142":386,"_20":75},"Slot Prop",[388,389,390],{"_282":281,"_142":382,"_20":55},{"_282":328,"_142":384,"_20":63},{"_282":291,"_142":386,"_20":71},[392,395,398],{"_282":281,"_142":382,"_20":55,"_280":393,"_350":394},{"_20":55,"_142":382},{"_20":59,"_142":382},{"_282":328,"_142":384,"_20":63,"_280":396,"_350":397},{"_20":63,"_142":384},{"_20":67,"_142":384},{"_282":291,"_142":386,"_20":71,"_280":399,"_350":400},{"_20":71,"_142":386},{"_20":75,"_142":386},{"_263":327,"_142":402,"_339":403,"_343":408,"_346":411},"Prop Collections and Getters",[404,406],{"_282":281,"_142":405,"_20":83},"Prop Collections",{"_282":328,"_142":407,"_20":91},"Prop Getters",[409,410],{"_282":281,"_142":405,"_20":79},{"_282":328,"_142":407,"_20":87},[412,415],{"_282":281,"_142":405,"_20":79,"_280":413,"_350":414},{"_20":79,"_142":405},{"_20":83,"_142":405},{"_282":328,"_142":407,"_20":87,"_280":416,"_350":417},{"_20":87,"_142":407},{"_20":91,"_142":407},{"_263":419,"_142":420,"_339":421,"_343":426,"_346":429},6,"State Initializer",[422,424],{"_282":281,"_142":423,"_20":99},"Initialize Toggle",{"_282":328,"_142":425,"_20":107},"Stability",[427,428],{"_282":281,"_142":423,"_20":95},{"_282":328,"_142":425,"_20":103},[430,433],{"_282":281,"_142":423,"_20":95,"_280":431,"_350":432},{"_20":95,"_142":423},{"_20":99,"_142":423},{"_282":328,"_142":425,"_20":103,"_280":434,"_350":435},{"_20":103,"_142":425},{"_20":107,"_142":425},{"_263":264,"_142":437,"_339":438,"_343":442,"_346":445},"State Reducer",[439,440],{"_282":281,"_142":437,"_20":115},{"_282":328,"_142":441,"_20":123},"Default State Reducer",[443,444],{"_282":281,"_142":437,"_20":111},{"_282":328,"_142":441,"_20":119},[446,449],{"_282":281,"_142":437,"_20":111,"_280":447,"_350":448},{"_20":111,"_142":437},{"_20":115,"_142":437},{"_282":328,"_142":441,"_20":119,"_280":450,"_350":451},{"_20":119,"_142":441},{"_20":123,"_142":441},{"_263":453,"_142":454,"_339":455,"_343":457,"_346":459},8,"Control Props",[456],{"_282":281,"_142":454,"_20":131},[458],{"_282":281,"_142":454,"_20":127},[460],{"_282":281,"_142":454,"_20":127,"_280":461,"_350":462},{"_20":127,"_142":454},{"_20":131,"_142":454},"playground",{"_465":-5,"_263":-2,"_282":-2,"_9":-7},"appName","isMenuOpened","routes/_app+/exercise+/$exerciseNumber_.finished",{"_469":470,"_195":143,"_185":471,"_597":598,"_599":600,"_601":602,"_606":607,"_612":613},"articleId","workshop-advanced-react-patterns-4-finished",{"_22":472,"_263":283,"_473":474,"_142":379,"_475":476,"_477":478,"_479":480,"_482":483,"_346":485,"_343":565,"_339":581},"/myapp/workshop-content/exercises/04.slots","dirName","04.slots","instructionsCode","var Component=(()=>{var p=Object.create;var r=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var v=(a,e)=>()=>(e||a((e={exports:{}}).exports,e),e.exports),k=(a,e)=>{for(var l in e)r(a,l,{get:e[l],enumerable:!0})},c=(a,e,l,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let s of m(e))!y.call(a,s)&&s!==l&&r(a,s,{get:()=>e[s],enumerable:!(o=b(e,s))||o.enumerable});return a};var x=(a,e,l)=>(l=a!=null?p(u(a)):{},c(e||!a||!a.__esModule?r(l,\"default\",{value:a,enumerable:!0}):l,a)),f=a=>c(r({},\"__esModule\",{value:!0}),a);var i=v((C,t)=>{t.exports=_jsx_runtime});var A={};k(A,{default:()=>h,frontmatter:()=>N});var n=x(i()),N=void 0;function d(a){let e={a:\"a\",code:\"code\",h1:\"h1\",h2:\"h2\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",span:\"span\",strong:\"strong\",...a.components},{EpicVideo:l}=e;return l||g(\"EpicVideo\",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h1,{children:\"Slots\"}),`\n`,(0,n.jsx)(l,{url:\"https://www.epicreact.dev/workshops/advanced-react-patterns/intro-to-slots\"}),`\n`,(0,n.jsx)(\"callout-success\",{children:(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"One liner:\"}),` Slots allow you to specify an element which takes on a\nparticular role in the overall collection of components.`]})}),`\n`,(0,n.jsx)(e.p,{children:`This pattern is particularly useful for situations where you're building a UI\nlibrary with a lot of components that need to work together. It's a way to\nprovide a flexible API for your components that allows them to be used in a\nvariety of contexts.`}),`\n`,(0,n.jsx)(e.p,{children:`If you're building a component library, you have to deal with two competing\ninterests:`}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Correctness\"}),`\n`,(0,n.jsx)(e.li,{children:\"Flexibility\"}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:`You want to make sure people don't mess up things like accessibility, but you\nalso want to give them the flexibility to build things the way their diverse\nneeds require. Slots can help with this.`}),`\n`,(0,n.jsxs)(e.p,{children:[`Here's a quick example of a component that uses slots (from the\n`,(0,n.jsx)(e.a,{href:\"https://react-spectrum.adobe.com/react-aria/index.html\",children:(0,n.jsx)(e.code,{children:\"react-aria\"})}),\" docs):\"]}),`\n`,(0,n.jsx)(e.pre,{\"data-line-numbers\":\"true\",\"data-lang\":\"tsx\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",children:[\"<\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"CheckboxGroup\"}),\">\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[\"\t<\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"Label\"}),\">Pets\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:[\"\t<\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"MyCheckbox\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"value\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"dogs\"}),'\"',\">Dogs\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",children:[\"\t<\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"MyCheckbox\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"value\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"cats\"}),'\"',\">Cats\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",children:[\"\t<\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"MyCheckbox\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"value\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"dragons\"}),'\"',\">Dragons\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",children:[\"\t<\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"Text\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"slot\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"description\"}),'\"',\">Select your pets.\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"7\",children:[\"\",`\n`]})]})}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:'slot=\"description\"'}),\" prop is letting the \",(0,n.jsx)(e.code,{children:\"Text\"}),` component know that it needs\nto look for special props that are meant to be used as a description. Those\nspecial props will be provided by the `,(0,n.jsx)(e.code,{children:\"CheckboxGroup\"}),\" component.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Essentially, the \",(0,n.jsx)(e.code,{children:\"CheckboxGroup\"}),` component will say: \"here's a bucket of props\nfor any component that takes on the role of a description.\" The `,(0,n.jsx)(e.code,{children:\"Text\"}),` component\nwill then say: \"Oh look, I've got a `,(0,n.jsx)(e.code,{children:\"slot\"}),\" prop that matches the \",(0,n.jsx)(e.code,{children:\"description\"}),`\nslot, so I'll use these props to render myself.\"`]}),`\n`,(0,n.jsx)(e.p,{children:\"All of this is built using context.\"}),`\n`,(0,n.jsxs)(e.p,{children:[`What this enables is a powerfully flexible capability to have components which\nare highly reusable. The `,(0,n.jsx)(e.code,{children:\"Text\"}),` component can be used in many different\ncontexts, and it can adapt to the needs of the parent component. For example,\nit's also used in react-aria's `,(0,n.jsx)(e.code,{children:\"ComboBox\"}),` components. Here's the anatomy of a\nreact-aria `,(0,n.jsx)(e.code,{children:\"ComboBox\"}),\" component:\"]}),`\n`,(0,n.jsx)(e.pre,{\"data-line-numbers\":\"true\",\"data-lang\":\"tsx\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",children:[\"<\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"ComboBox\"}),\">\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[\"\t<\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"Label\"}),\" />\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:[\"\t<\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"Input\"}),\" />\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",children:[\"\t<\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"Button\"}),\" />\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-highlight\":\"true\",\"data-line-number\":\"5\",children:[\"\t<\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"Text\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"slot\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"description\"}),'\"',\" />\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",children:[\"\t<\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"FieldError\"}),\" />\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"7\",children:[\"\t<\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"Popover\"}),\">\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"8\",children:[\"\t\t<\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"ListBox\"}),\">\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"9\",children:[\"\t\t\t<\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"ListBoxItem\"}),\">\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-highlight\":\"true\",\"data-line-number\":\"10\",children:[\"\t\t\t\t<\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"Text\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"slot\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"label\"}),'\"',\" />\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-highlight\":\"true\",\"data-line-number\":\"11\",children:[\"\t\t\t\t<\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"Text\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"slot\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"description\"}),'\"',\" />\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"12\",children:[\"\t\t\t\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"13\",children:[\"\t\t\t<\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"Section\"}),\">\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"14\",children:[\"\t\t\t\t<\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"Header\"}),\" />\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"15\",children:[\"\t\t\t\t<\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"ListBoxItem\"}),\" />\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"16\",children:[\"\t\t\t\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"17\",children:[\"\t\t\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"18\",children:[\"\t\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"19\",children:[\"\",`\n`]})]})}),`\n`,(0,n.jsxs)(e.p,{children:[\"This can be used to apply appropriate \",(0,n.jsx)(e.code,{children:\"aria-\"}),\" attributes as well as \",(0,n.jsx)(e.code,{children:\"id\"}),`s and\nevent handlers. You might think about it as a way to implement compound\ncomponents in a way that doesn't require an individual component for every\nsingle use case.`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Implementation\"}),`\n`,(0,n.jsx)(e.p,{children:`Folks tend to struggle with this one a bit more than the rest, but it's simpler\nthan it seems.`}),`\n`,(0,n.jsx)(e.p,{children:\"The basic concept is your root component creates collections of props like so:\"}),`\n`,(0,n.jsx)(e.pre,{\"data-line-numbers\":\"true\",\"data-lang\":\"tsx\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"function\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"NumberField\"}),\"({ \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"children\"}),\" }\",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\":\"}),\" { \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"children\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\":\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"React\"}),\".\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"ReactNode\"}),\" }) {\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[\"\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// setup state/events/etc\"}),`\n`]}),(0,n.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:`\n`}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",children:[\"\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"slots\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" {\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",children:[\"\t\tlabel: { htmlFor: \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"inputId\"}),\" },\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",children:[\"\t\tdecrement: { onClick: \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"decrement\"}),\" },\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"7\",children:[\"\t\tincrement: { onClick: \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"increment\"}),\" },\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"8\",children:[\"\t\tdescription: { id: \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"descriptionId\"}),\" },\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"9\",children:[\"\t\tinput: { id: \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"inputId\"}),\", \",\"'\",(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"aria-describedby\"}),\"'\",\": \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"descriptionId\"}),\" },\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"10\",children:[\"\t}\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"11\",children:[\"\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"return\"}),\" <\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"SlotContext\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"value\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"slots\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\">\",(0,n.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"children\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\"\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"12\",children:[\"}\",`\n`]})]})}),`\n`,(0,n.jsxs)(e.p,{children:[\"Then the consuming components use the \",(0,n.jsx)(e.code,{children:\"use(SlotContext)\"}),` to get access to the\n`,(0,n.jsx)(e.code,{children:\"slots\"}),\" object and pluck off the props they need to do their job:\"]}),`\n`,(0,n.jsx)(e.pre,{\"data-line-numbers\":\"true\",\"data-lang\":\"tsx\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"function\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"Input\"}),\"(\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"props\"}),\") {\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[\"\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"props\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"useSlotProps\"}),\"(\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"props\"}),\", \",\"'\",(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"input\"}),\"'\",\")\",`\n`]}),(0,n.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:`\n`}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",children:[\"\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"return\"}),\" <\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"input\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"...\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"props\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\">\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",children:[\"}\",`\n`]})]})}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"useSlotProps\"}),` hook is responsible for taking the props that have been\nspecified and combining it with those from the `,(0,n.jsx)(e.code,{children:\"SlotContext\"}),\" for the named slot.\"]})]})}function h(a={}){let{wrapper:e}=a.components||{};return e?(0,n.jsx)(e,{...a,children:(0,n.jsx)(d,{...a})}):d(a)}function g(a,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+a+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return f(A);})();\n;return Component;","finishedCode","var Component=(()=>{var l=Object.create;var i=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var j=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),_=(e,t)=>{for(var n in t)i(e,n,{get:t[n],enumerable:!0})},c=(e,t,n,s)=>{if(t&&typeof t==\"object\"||typeof t==\"function\")for(let r of u(t))!x.call(e,r)&&r!==n&&i(e,r,{get:()=>t[r],enumerable:!(s=m(t,r))||s.enumerable});return e};var w=(e,t,n)=>(n=e!=null?l(h(e)):{},c(t||!e||!e.__esModule?i(n,\"default\",{value:e,enumerable:!0}):n,e)),y=e=>c(i({},\"__esModule\",{value:!0}),e);var d=j((E,a)=>{a.exports=_jsx_runtime});var k={};_(k,{default:()=>f,frontmatter:()=>b});var o=w(d()),b=void 0;function p(e){let t={h1:\"h1\",p:\"p\",...e.components},{EpicVideo:n}=t;return n||g(\"EpicVideo\",!0),(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.h1,{children:\"Slots\"}),`\n`,(0,o.jsx)(n,{url:\"https://www.epicreact.dev/workshops/advanced-react-patterns/dad-joke-break-slots\"}),`\n`,(0,o.jsx)(t.p,{children:`\\u{1F468}\\u200D\\u{1F4BC} This is a really nice pattern if you find yourself building a library of\ncomponents that have a lot of common components. Great job!`})]})}function f(e={}){let{wrapper:t}=e.components||{};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(p,{...e})}):p(e)}function g(e,t){throw new Error(\"Expected \"+(t?\"component\":\"object\")+\" `\"+e+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return y(k);})();\n;return Component;","instructionsEpicVideoEmbeds",[481],"https://www.epicreact.dev/workshops/advanced-react-patterns/intro-to-slots","finishedEpicVideoEmbeds",[484],"https://www.epicreact.dev/workshops/advanced-react-patterns/dad-joke-break-slots",[486,519,542],{"_282":281,"_280":487,"_350":507},{"_20":55,"_142":382,"_473":488,"_22":56,"_24":57,"_475":489,"_490":491,"_493":494,"_501":502,"_504":505,"_263":283,"_282":281,"_9":280,"_506":59},"01.problem.context","var Component=(()=>{var u=Object.create;var r=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var w=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var x=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),v=(n,e)=>{for(var o in e)r(n,o,{get:e[o],enumerable:!0})},c=(n,e,o,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let d of m(e))!b.call(n,d)&&d!==o&&r(n,d,{get:()=>e[d],enumerable:!(i=f(e,d))||i.enumerable});return n};var y=(n,e,o)=>(o=n!=null?u(w(n)):{},c(e||!n||!n.__esModule?r(o,\"default\",{value:n,enumerable:!0}):o,n)),g=n=>c(r({},\"__esModule\",{value:!0}),n);var h=x((j,l)=>{l.exports=_jsx_runtime});var S={};v(S,{default:()=>p,frontmatter:()=>k});var t=y(h()),k=void 0;function s(n){let e={code:\"code\",h1:\"h1\",p:\"p\",...n.components},{EpicVideo:o,InlineFile:i}=e;return o||a(\"EpicVideo\",!0),i||a(\"InlineFile\",!0),(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(e.h1,{children:\"Slot Context\"}),`\n`,(0,t.jsx)(o,{url:\"https://www.epicreact.dev/workshops/advanced-react-patterns/slot-context\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"\\u{1F468}\\u200D\\u{1F4BC} It's a tale as old as time. Our \",(0,t.jsx)(e.code,{children:\"label\"}),\" and \",(0,t.jsx)(e.code,{children:\"input\"}),` are not properly\nassociated in this form and so clicking the `,(0,t.jsx)(e.code,{children:\"label\"}),\" will not focus the \",(0,t.jsx)(e.code,{children:\"input\"}),`\nas expected (in addition to other accessibility issues).`]}),`\n`,(0,t.jsxs)(e.p,{children:[`But we don't want developers to be able to make this mistake. So we've made a\n`,(0,t.jsx)(e.code,{children:\"TextField\"}),\" component which will generate the \",(0,t.jsx)(e.code,{children:\"id\"}),` for the relationship (if one\nis not provided). The tricky bit is we want people to be able to structure their\nlabel and input however they want, so we can't render the `,(0,t.jsx)(e.code,{children:\"input\"}),\" and \",(0,t.jsx)(e.code,{children:\"label\"}),`\nfor them. Instead, we want to be able to provide the `,(0,t.jsx)(e.code,{children:\"id\"}),\" and \",(0,t.jsx)(e.code,{children:\"htmlFor\"}),` props to\nthe `,(0,t.jsx)(e.code,{children:\"label\"}),\" and \",(0,t.jsx)(e.code,{children:\"input\"}),\".\"]}),`\n`,(0,t.jsxs)(e.p,{children:[\"So what we want you to do is first create a \",(0,t.jsx)(e.code,{children:\"SlotContext\"}),\" and \",(0,t.jsx)(e.code,{children:\"useSlotProps\"}),`\nhook in `,(0,t.jsx)(i,{file:\"slots.tsx\"}),\", then use those in the \",(0,t.jsx)(e.code,{children:\"Label\"}),` and\n`,(0,t.jsx)(e.code,{children:\"Input\"}),\" components to retrieve the necessary props.\"]}),`\n`,(0,t.jsxs)(e.p,{children:[\"The \",(0,t.jsx)(e.code,{children:\"useSlotProps\"}),` hook should accept a props object and a slot name and return\nthe props to be applied to the element for that slot. It should merge the props\nit's been given with the props from the `,(0,t.jsx)(e.code,{children:\"SlotContext\"}),\" for that slot.\"]}),`\n`,(0,t.jsxs)(e.p,{children:[\"Once you've finished that, then render the \",(0,t.jsx)(e.code,{children:\"SlotContext\"}),` provider in the\n`,(0,t.jsx)(e.code,{children:\"TextField\"}),\" component in \",(0,t.jsx)(i,{file:\"text-field.tsx\"}),` to provide slot\nprops for the `,(0,t.jsx)(e.code,{children:\"label\"}),\" and \",(0,t.jsx)(e.code,{children:\"input\"}),\".\"]}),`\n`,(0,t.jsx)(e.p,{children:`When you're finished, the label and input should be properly associated and\nclicking the label should focus the input.`})]})}function p(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,{...n,children:(0,t.jsx)(s,{...n})}):s(n)}function a(n,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+n+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return g(S);})();\n;return Component;","epicVideoEmbeds",[492],"https://www.epicreact.dev/workshops/advanced-react-patterns/slot-context","test",{"_9":495,"_496":497,"_498":499},"browser","pathname","/app/04.01.problem/test/","testFiles",[500],"index.test.tsx","dev",{"_9":495,"_496":503},"/app/04.01.problem/","stackBlitzUrl","https://stackblitz.com/github/epicweb-dev/advanced-react-patterns/tree/main/exercises/04.slots/01.problem.context?view=editor&title=Slot+Context+%28problem%29&hidedevtools=1&terminalHeight=0&hideNavigation=1&file=index.tsx","solutionName",{"_20":59,"_142":382,"_473":508,"_22":60,"_24":61,"_475":509,"_490":510,"_493":512,"_501":515,"_504":517,"_263":283,"_282":281,"_9":350,"_518":-5},"01.solution.context","var Component=(()=>{var u=Object.create;var c=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var w=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),_=(t,e)=>{for(var n in e)c(t,n,{get:e[n],enumerable:!0})},s=(t,e,n,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of m(e))!f.call(t,r)&&r!==n&&c(t,r,{get:()=>e[r],enumerable:!(i=l(e,r))||i.enumerable});return t};var g=(t,e,n)=>(n=t!=null?u(x(t)):{},s(e||!t||!t.__esModule?c(n,\"default\",{value:t,enumerable:!0}):n,t)),j=t=>s(c({},\"__esModule\",{value:!0}),t);var p=w((y,a)=>{a.exports=_jsx_runtime});var M={};_(M,{default:()=>h,frontmatter:()=>v});var o=g(p()),v=void 0;function d(t){let e={h1:\"h1\",p:\"p\",...t.components},{EpicVideo:n}=e;return n||E(\"EpicVideo\",!0),(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(e.h1,{children:\"Slot Context\"}),`\n`,(0,o.jsx)(n,{url:\"https://www.epicreact.dev/workshops/advanced-react-patterns/slot-context/solution\"}),`\n`,(0,o.jsx)(e.p,{children:`\\u{1F468}\\u200D\\u{1F4BC} That's a great start! Now we have that in place, I think we can use this in\nour toggle component!`})]})}function h(t={}){let{wrapper:e}=t.components||{};return e?(0,o.jsx)(e,{...t,children:(0,o.jsx)(d,{...t})}):d(t)}function E(t,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+t+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return j(M);})();\n;return Component;",[511],"https://www.epicreact.dev/workshops/advanced-react-patterns/slot-context/solution",{"_9":495,"_496":513,"_498":514},"/app/04.01.solution/test/",[500],{"_9":495,"_496":516},"/app/04.01.solution/","https://stackblitz.com/github/epicweb-dev/advanced-react-patterns/tree/main/exercises/04.slots/01.solution.context?view=editor&title=Slot+Context+%28solution%29&hidedevtools=1&terminalHeight=0&hideNavigation=1&file=index.tsx","problemName",{"_282":328,"_280":520,"_350":531},{"_20":63,"_142":384,"_473":521,"_22":64,"_24":65,"_475":522,"_490":523,"_493":525,"_501":528,"_504":530,"_263":283,"_282":328,"_9":280,"_506":67},"02.problem.generic","var Component=(()=>{var u=Object.create;var d=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var w=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),b=(t,e)=>{for(var n in e)d(t,n,{get:e[n],enumerable:!0})},c=(t,e,n,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of m(e))!x.call(t,r)&&r!==n&&d(t,r,{get:()=>e[r],enumerable:!(i=g(e,r))||i.enumerable});return t};var y=(t,e,n)=>(n=t!=null?u(f(t)):{},c(e||!t||!t.__esModule?d(n,\"default\",{value:t,enumerable:!0}):n,t)),v=t=>c(d({},\"__esModule\",{value:!0}),t);var a=w((F,l)=>{l.exports=_jsx_runtime});var j={};b(j,{default:()=>p,frontmatter:()=>_});var o=y(a()),_=void 0;function s(t){let e={code:\"code\",h1:\"h1\",p:\"p\",...t.components},{EpicVideo:n,InlineFile:i}=e;return n||h(\"EpicVideo\",!0),i||h(\"InlineFile\",!0),(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(e.h1,{children:\"Generic Slot Components\"}),`\n`,(0,o.jsx)(n,{url:\"https://www.epicreact.dev/workshops/advanced-react-patterns/generic-slot-components\"}),`\n`,(0,o.jsxs)(e.p,{children:[\"\\u{1F468}\\u200D\\u{1F4BC} You'll notice our party mode toggle button is using \",(0,o.jsx)(e.code,{children:\"useId\"}),` to properly\nassociate the toggle button with its label. We'd like to make that implicit and\nreuse the `,(0,o.jsx)(e.code,{children:\"Label\"}),\" component for the \",(0,o.jsx)(e.code,{children:\"Toggle\"}),\" as well.\"]}),`\n`,(0,o.jsxs)(e.p,{children:[\"Please update the \",(0,o.jsx)(e.code,{children:\"Toggle\"}),\" component in \",(0,o.jsx)(i,{file:\"toggle.tsx\"}),` to\nrender a `,(0,o.jsx)(e.code,{children:\"SlotContext\"}),\" provider (in addition to the \",(0,o.jsx)(e.code,{children:\"ToggleContext\"}),` provider\nit's already rendering) so it can provide props for a `,(0,o.jsx)(e.code,{children:\"label\"}),` slot (the slot\nname for a `,(0,o.jsx)(e.code,{children:\"Label\"}),\"). You'll also want to put the \",(0,o.jsx)(e.code,{children:\"id\"}),\" in the \",(0,o.jsx)(e.code,{children:\"ToggleContext\"}),` so\nthe `,(0,o.jsx)(e.code,{children:\"ToggleButton\"}),\" can grab it.\"]}),`\n`,(0,o.jsxs)(e.p,{children:[\"Once you're finished with that, you can remove the manual \",(0,o.jsx)(e.code,{children:\"id\"}),\"/\",(0,o.jsx)(e.code,{children:\"htmlFor\"}),` props\nin the `,(0,o.jsx)(i,{file:\"app.tsx\"}),\" file and the \",(0,o.jsx)(e.code,{children:\"id\"}),` should be provided\nautomatically.`]})]})}function p(t={}){let{wrapper:e}=t.components||{};return e?(0,o.jsx)(e,{...t,children:(0,o.jsx)(s,{...t})}):s(t)}function h(t,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+t+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return v(j);})();\n;return Component;",[524],"https://www.epicreact.dev/workshops/advanced-react-patterns/generic-slot-components",{"_9":495,"_496":526,"_498":527},"/app/04.02.problem/test/",[500],{"_9":495,"_496":529},"/app/04.02.problem/","https://stackblitz.com/github/epicweb-dev/advanced-react-patterns/tree/main/exercises/04.slots/02.problem.generic?view=editor&title=Generic+Slot+Components+%28problem%29&hidedevtools=1&terminalHeight=0&hideNavigation=1&file=index.tsx",{"_20":67,"_142":384,"_473":532,"_22":68,"_24":69,"_475":533,"_490":534,"_493":536,"_501":539,"_504":541,"_263":283,"_282":328,"_9":350,"_518":-5},"02.solution.generic","var Component=(()=>{var u=Object.create;var c=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var l=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var w=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),g=(n,e)=>{for(var t in e)c(n,t,{get:e[t],enumerable:!0})},s=(n,e,t,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of l(e))!x.call(n,r)&&r!==t&&c(n,r,{get:()=>e[r],enumerable:!(i=h(e,r))||i.enumerable});return n};var _=(n,e,t)=>(t=n!=null?u(f(n)):{},s(e||!n||!n.__esModule?c(t,\"default\",{value:n,enumerable:!0}):t,n)),j=n=>s(c({},\"__esModule\",{value:!0}),n);var p=w((y,d)=>{d.exports=_jsx_runtime});var b={};g(b,{default:()=>m,frontmatter:()=>E});var o=_(p()),E=void 0;function a(n){let e={code:\"code\",h1:\"h1\",p:\"p\",...n.components},{EpicVideo:t}=e;return t||M(\"EpicVideo\",!0),(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(e.h1,{children:\"Generic Slot Components\"}),`\n`,(0,o.jsx)(t,{url:\"https://www.epicreact.dev/workshops/advanced-react-patterns/generic-slot-components/solution\"}),`\n`,(0,o.jsxs)(e.p,{children:[\"\\u{1F468}\\u200D\\u{1F4BC} Great! Now we can reuse the \",(0,o.jsx)(e.code,{children:\"Label\"}),\" component in our set of \",(0,o.jsx)(e.code,{children:\"Toggle\"}),` compound\ncomponents. Let's go a step further with a generic `,(0,o.jsx)(e.code,{children:\"Text\"}),\" component.\"]})]})}function m(n={}){let{wrapper:e}=n.components||{};return e?(0,o.jsx)(e,{...n,children:(0,o.jsx)(a,{...n})}):a(n)}function M(n,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+n+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return j(b);})();\n;return Component;",[535],"https://www.epicreact.dev/workshops/advanced-react-patterns/generic-slot-components/solution",{"_9":495,"_496":537,"_498":538},"/app/04.02.solution/test/",[500],{"_9":495,"_496":540},"/app/04.02.solution/","https://stackblitz.com/github/epicweb-dev/advanced-react-patterns/tree/main/exercises/04.slots/02.solution.generic?view=editor&title=Generic+Slot+Components+%28solution%29&hidedevtools=1&terminalHeight=0&hideNavigation=1&file=index.tsx",{"_282":291,"_280":543,"_350":554},{"_20":71,"_142":386,"_473":544,"_22":72,"_24":73,"_475":545,"_490":546,"_493":548,"_501":551,"_504":553,"_263":283,"_282":291,"_9":280,"_506":75},"03.problem.prop","var Component=(()=>{var u=Object.create;var r=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var y=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),x=(o,e)=>{for(var c in e)r(o,c,{get:e[c],enumerable:!0})},i=(o,e,c,d)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let l of b(e))!g.call(o,l)&&l!==c&&r(o,l,{get:()=>e[l],enumerable:!(d=f(e,l))||d.enumerable});return o};var v=(o,e,c)=>(c=o!=null?u(m(o)):{},i(e||!o||!o.__esModule?r(c,\"default\",{value:o,enumerable:!0}):c,o)),T=o=>i(r({},\"__esModule\",{value:!0}),o);var s=y((O,a)=>{a.exports=_jsx_runtime});var k={};x(k,{default:()=>p,frontmatter:()=>w});var n=v(s()),w=void 0;function h(o){let e={code:\"code\",h1:\"h1\",li:\"li\",p:\"p\",pre:\"pre\",span:\"span\",ul:\"ul\",...o.components},{DiffLink:c,EpicVideo:d,InlineFile:l}=e;return c||t(\"DiffLink\",!0),d||t(\"EpicVideo\",!0),l||t(\"InlineFile\",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h1,{children:\"Slot Prop\"}),`\n`,(0,n.jsx)(d,{url:\"https://www.epicreact.dev/workshops/advanced-react-patterns/slot-prop\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u{1F468}\\u200D\\u{1F4BC} We have \",(0,n.jsx)(e.code,{children:\"ToggleOn\"}),\" and \",(0,n.jsx)(e.code,{children:\"ToggleOff\"}),` components, but really we could make those\ncomponents a simple `,(0,n.jsx)(e.code,{children:\"Text\"}),\" component that accepts a \",(0,n.jsx)(e.code,{children:\"slot\"}),` prop. Then the\n`,(0,n.jsx)(e.code,{children:\"Toggle\"}),\" component could define the props that the individual \",(0,n.jsx)(e.code,{children:\"Text\"}),` components\nshould have based on which slot they're taking.`]}),`\n`,(0,n.jsxs)(e.p,{children:[\"In fact, we could do this with the \",(0,n.jsx)(e.code,{children:\"Switch\"}),\" as well!\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u{1F9DD}\\u200D\\u2642\\uFE0F I've added \",(0,n.jsx)(e.code,{children:\"Text\"}),\" and \",(0,n.jsx)(e.code,{children:\"Switch\"}),` components to\nthe `,(0,n.jsx)(l,{file:\"slots.tsx\"}),` file for you to use. These are both already\nwired up to consume a `,(0,n.jsx)(e.code,{children:\"slot\"}),\" named \",(0,n.jsx)(e.code,{children:\"text\"}),\" and \",(0,n.jsx)(e.code,{children:\"switch\"}),`. You\ncan `,(0,n.jsx)(c,{app1:-1,children:\"check the diff\"}),\" for details.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"What we want to do in this exercise is add a \",(0,n.jsx)(e.code,{children:\"slot\"}),` prop to each of our slot\ncomponents so the slot they're taking can be defined by the parent component.`]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Then you'll need to update \",(0,n.jsx)(e.code,{children:\"Toggle\"}),\" to get rid of the \",(0,n.jsx)(e.code,{children:\"ToggleContext\"}),` provider\nand instead use the `,(0,n.jsx)(e.code,{children:\"SlotProvider\"}),` for all the components it wants to send props\nto:`]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"label\"}),\" - \",(0,n.jsx)(e.code,{children:\"htmlFor\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"onText\"}),\" - \",(0,n.jsx)(e.code,{children:\"hidden\"}),\" (\",(0,n.jsx)(e.code,{children:\"undefined\"}),\" if \",(0,n.jsx)(e.code,{children:\"isOn\"}),\" is true, and \",(0,n.jsx)(e.code,{children:\"true\"}),\" if \",(0,n.jsx)(e.code,{children:\"isOn\"}),` is\n`,(0,n.jsx)(e.code,{children:\"false\"}),\")\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"offText\"}),\" - \",(0,n.jsx)(e.code,{children:\"hidden\"}),\" (\",(0,n.jsx)(e.code,{children:\"undefined\"}),\" if \",(0,n.jsx)(e.code,{children:\"isOn\"}),\" is false, and \",(0,n.jsx)(e.code,{children:\"true\"}),\" if \",(0,n.jsx)(e.code,{children:\"isOn\"}),` is\n`,(0,n.jsx)(e.code,{children:\"true\"}),\")\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"switch\"}),\" - \",(0,n.jsx)(e.code,{children:\"id\"}),\", \",(0,n.jsx)(e.code,{children:\"on\"}),\", and \",(0,n.jsx)(e.code,{children:\"onClick\"})]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"So by the end of all of this, here's what I want the API to be like:\"}),`\n`,(0,n.jsx)(e.pre,{\"data-line-numbers\":\"true\",\"data-lang\":\"tsx\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",children:[\"<\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"Toggle\"}),\">\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[\"\t<\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"Label\"}),\">Party mode\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:[\"\t<\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"Switch\"}),\" />\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",children:[\"\t<\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"Text\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"slot\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"onText\"}),'\"',\">Let's party \\u{1F973}\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",children:[\"\t<\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"Text\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"slot\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"offText\"}),'\"',\">Sad town \\u{1F62D}\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",children:[\"\",`\n`]})]})}),`\n`,(0,n.jsxs)(e.p,{children:[\"Once that's been updated, you can delete the \",(0,n.jsx)(e.code,{children:\"useToggle\"}),` hook and the\n`,(0,n.jsx)(e.code,{children:\"ToggleOn\"}),\", \",(0,n.jsx)(e.code,{children:\"ToggleOff\"}),\", and \",(0,n.jsx)(e.code,{children:\"ToggleButton\"}),\" components.\"]}),`\n`,(0,n.jsx)(e.p,{children:\"Reusability FTW!\"})]})}function p(o={}){let{wrapper:e}=o.components||{};return e?(0,n.jsx)(e,{...o,children:(0,n.jsx)(h,{...o})}):h(o)}function t(o,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+o+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return T(k);})();\n;return Component;",[547],"https://www.epicreact.dev/workshops/advanced-react-patterns/slot-prop",{"_9":495,"_496":549,"_498":550},"/app/04.03.problem/test/",[500],{"_9":495,"_496":552},"/app/04.03.problem/","https://stackblitz.com/github/epicweb-dev/advanced-react-patterns/tree/main/exercises/04.slots/03.problem.prop?view=editor&title=Slot+Prop+%28problem%29&hidedevtools=1&terminalHeight=0&hideNavigation=1&file=index.tsx",{"_20":75,"_142":386,"_473":555,"_22":76,"_24":77,"_475":556,"_490":557,"_493":559,"_501":562,"_504":564,"_263":283,"_282":291,"_9":350,"_518":-5},"03.solution.prop","var Component=(()=>{var u=Object.create;var s=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var l=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var g=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),w=(t,e)=>{for(var n in e)s(t,n,{get:e[n],enumerable:!0})},c=(t,e,n,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of l(e))!x.call(t,r)&&r!==n&&s(t,r,{get:()=>e[r],enumerable:!(a=f(e,r))||a.enumerable});return t};var y=(t,e,n)=>(n=t!=null?u(m(t)):{},c(e||!t||!t.__esModule?s(n,\"default\",{value:t,enumerable:!0}):n,t)),_=t=>c(s({},\"__esModule\",{value:!0}),t);var p=g((M,i)=>{i.exports=_jsx_runtime});var v={};w(v,{default:()=>h,frontmatter:()=>b});var o=y(p()),b=void 0;function d(t){let e={a:\"a\",h1:\"h1\",p:\"p\",...t.components},{EpicVideo:n}=e;return n||j(\"EpicVideo\",!0),(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(e.h1,{children:\"Slot Prop\"}),`\n`,(0,o.jsx)(n,{url:\"https://www.epicreact.dev/workshops/advanced-react-patterns/slot-prop/solution\"}),`\n`,(0,o.jsx)(e.p,{children:\"\\u{1F468}\\u200D\\u{1F4BC} Great! Now we can use the same component for multiple slots!\"}),`\n`,(0,o.jsxs)(e.p,{children:[`One thing to note is that there's not a great way to have good type safety on\nthese props, though if you're creative, you could add nice runtime errors,\n`,(0,o.jsx)(e.a,{href:\"https://github.com/adobe/react-spectrum/blob/3db98d2d378f977a88d94e9f2501feca8ef8ce51/packages/react-aria-components/src/utils.tsx#L169-L181\",children:\"for example\"}),\".\"]})]})}function h(t={}){let{wrapper:e}=t.components||{};return e?(0,o.jsx)(e,{...t,children:(0,o.jsx)(d,{...t})}):d(t)}function j(t,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+t+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return _(v);})();\n;return Component;",[558],"https://www.epicreact.dev/workshops/advanced-react-patterns/slot-prop/solution",{"_9":495,"_496":560,"_498":561},"/app/04.03.solution/test/",[500],{"_9":495,"_496":563},"/app/04.03.solution/","https://stackblitz.com/github/epicweb-dev/advanced-react-patterns/tree/main/exercises/04.slots/03.solution.prop?view=editor&title=Slot+Prop+%28solution%29&hidedevtools=1&terminalHeight=0&hideNavigation=1&file=index.tsx",[566,571,576],{"_20":55,"_142":382,"_473":488,"_22":56,"_24":57,"_475":489,"_490":567,"_493":568,"_501":570,"_504":505,"_263":283,"_282":281,"_9":280,"_506":59},[492],{"_9":495,"_496":497,"_498":569},[500],{"_9":495,"_496":503},{"_20":63,"_142":384,"_473":521,"_22":64,"_24":65,"_475":522,"_490":572,"_493":573,"_501":575,"_504":530,"_263":283,"_282":328,"_9":280,"_506":67},[524],{"_9":495,"_496":526,"_498":574},[500],{"_9":495,"_496":529},{"_20":71,"_142":386,"_473":544,"_22":72,"_24":73,"_475":545,"_490":577,"_493":578,"_501":580,"_504":553,"_263":283,"_282":291,"_9":280,"_506":75},[547],{"_9":495,"_496":549,"_498":579},[500],{"_9":495,"_496":552},[582,587,592],{"_20":59,"_142":382,"_473":508,"_22":60,"_24":61,"_475":509,"_490":583,"_493":584,"_501":586,"_504":517,"_263":283,"_282":281,"_9":350,"_518":-5},[511],{"_9":495,"_496":513,"_498":585},[500],{"_9":495,"_496":516},{"_20":67,"_142":384,"_473":532,"_22":68,"_24":69,"_475":533,"_490":588,"_493":589,"_501":591,"_504":541,"_263":283,"_282":328,"_9":350,"_518":-5},[535],{"_9":495,"_496":537,"_498":590},[500],{"_9":495,"_496":540},{"_20":75,"_142":386,"_473":555,"_22":76,"_24":77,"_475":556,"_490":593,"_493":594,"_501":596,"_504":564,"_263":283,"_282":291,"_9":350,"_518":-5},[558],{"_9":495,"_496":560,"_498":595},[500],{"_9":495,"_496":563},"exerciseFormEmbedUrl","https://docs.google.com/forms/d/e/1FAIpQLSf3o9xyjQepTlOTH5Z7ZwkeSTdXh6YWI_RGc9KiyD3oUN0p6w/viewform?hl=en&embedded=true&entry.1836176234=Advanced%20React%20Patterns%20%F0%9F%A4%AF&entry.428900931=Slots","epicVideoInfosPromise",["P",600],"exerciseFinished",{"_603":604,"_24":605},"file","/myapp/workshop-content/exercises/04.slots/FINISHED.mdx","exercises/04.slots/FINISHED.mdx","prevStepLink",{"_608":609,"_610":611},"to","/exercise/04/03/solution","aria-label","Slot Prop (solution)","nextStepLink",{"_608":614,"_610":402},"/exercise/05","actionData","errors"]

04. Slots/Elaboration