[{"_1":2,"_627":-5,"_628":-5},"loaderData",{"_3":4,"_375":376,"_479":480,"_626":-5},"root",{"_5":6,"_11":-5,"_12":13,"_14":-5,"_15":16,"_17":18,"_134":135,"_187":137,"_188":139,"_140":141,"_189":190,"_200":201,"_225":-5,"_226":-5,"_227":228},"userId",{"_7":8,"_9":10},"id","j7yfqszvg6gyy2cvxatvbif6","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","workshopConfig",{"_136":137,"_138":139,"_140":141,"_147":148,"_165":166,"_167":168,"_169":170,"_171":172,"_175":176,"_181":182,"_185":186},"title","Advanced React Patterns 🤯","subtitle","Learn how to build simple and flexible React Components and Hooks using modern patterns","instructor",{"_20":142,"_143":144,"_145":146},"Kent C. Dodds","avatar","/images/instructor.png","𝕏","kentcdodds","product",{"_149":150,"_151":152,"_153":154,"_155":156,"_157":158,"_159":160,"_161":162},"host","www.epicreact.dev","displayName","EpicReact.dev","displayNameShort","Epic React","logo","/logo.svg","slug","advanced-react-patterns","discordChannelId","1285244676286189569","discordTags",[163,164],"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",{"_173":174},"view","editor","forms",{"_177":178,"_179":180},"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",{"_183":184},"enabled",true,"initialRoute","/","workshopTitle","workshopSubtitle","ENV",{"_191":192,"_193":194,"_195":168,"_196":170,"_197":184,"_198":199},"MODE","production","EPICSHOP_CONTEXT_CWD","/myapp/workshop-content","EPICSHOP_GITHUB_REPO","EPICSHOP_GITHUB_ROOT","EPICSHOP_DEPLOYED","EPICSHOP_APP_VERSION","5.9.0","requestInfo",{"_202":203,"_204":205,"_206":207,"_208":209,"_210":209,"_211":212,"_219":220,"_221":222,"_223":186,"_224":184},"protocol","http:","hostname","advanced-patterns.epicreact.dev","port","","origin","http://advanced-patterns.epicreact.dev","domain","hints",{"_213":214,"_215":216,"_217":218},"theme","light","timeZone","UTC","reducedMotion","no-preference","path","/exercise/04/finished","session",{"_213":-5},"separator","online","toast","confettiId","presence",{"_229":230},"users",[231,246,257,268,278,287,294,302,309,316,323,329,334,340,346,352,358,365,371],{"_7":232,"_233":234,"_20":235,"_236":237},"a9ea28dcffefdf7853ee9a4d0fa450f3","avatarUrl","https://www.gravatar.com/avatar/a9ea28dcffefdf7853ee9a4d0fa450f3?size=288&default=identicon","Christos Kalivas","location",{"_187":238,"_208":239,"_179":240},"📐 Pixel Perfect Tailwind","http://localhost:5639",{"_9":241,"_242":243,"_244":245},"problem","exerciseNumber",1,"stepNumber",2,{"_7":247,"_248":184,"_249":250,"_251":252,"_20":253,"_236":254},"a6f25ff5-3ce3-4a19-ba0f-0d94b2623a48","hasAccess","imageUrlSmall","https://www.gravatar.com/avatar/0247ef69ecb99965e28743ff86aa2eaa?size=64&default=identicon","imageUrlLarge","https://www.gravatar.com/avatar/0247ef69ecb99965e28743ff86aa2eaa?size=512&default=identicon","Francesco Manno",{"_187":255,"_208":239,"_179":256},"Full Stack Foundations 🔭",{"_242":245},{"_7":258,"_248":184,"_249":259,"_251":260,"_20":261,"_236":262},"cc23ff97-d4d2-435c-a947-ae0697988649","https://avatars.githubusercontent.com/u/15137214?v=4&size=64","https://avatars.githubusercontent.com/u/15137214?v=4&size=512","Jun-Xin Huang",{"_187":263,"_208":239,"_179":264},"Data Modeling Deep Dive 💾",{"_9":265,"_242":266,"_244":267},"solution",7,4,{"_7":269,"_248":184,"_249":270,"_251":271,"_20":272,"_236":273},"e8cb17ed-de12-4160-8ed4-157d3d2a91c3","https://www.gravatar.com/avatar/f6b024dc484ab9d9cc17e343fec6c3fd?size=64&default=identicon","https://www.gravatar.com/avatar/f6b024dc484ab9d9cc17e343fec6c3fd?size=512&default=identicon","Ryan Morrow",{"_187":274,"_208":239,"_179":275},"React Hooks 🎣",{"_9":241,"_242":276,"_244":277},6,3,{"_7":279,"_248":184,"_249":280,"_251":281,"_20":282,"_236":283},"cb4a328d-9dbe-4a0f-8278-231c0e30a9ed","https://avatars.githubusercontent.com/u/685034?v=4&size=64","https://avatars.githubusercontent.com/u/685034?v=4&size=512","Pat O'Callaghan",{"_187":284,"_208":285,"_179":286},"React Fundamentals ⚛","http://192.168.0.29:5639",{"_9":265,"_242":266,"_244":277},{"_7":288,"_248":184,"_249":289,"_251":290,"_20":291,"_236":292},"effb88c1-961c-47a0-a095-b66e0530d2dd","https://avatars.githubusercontent.com/u/1569180?v=4&size=64","https://avatars.githubusercontent.com/u/1569180?v=4&size=512","Toni Laukka",{"_187":137,"_208":239,"_179":293},{"_242":276},{"_7":295,"_248":16,"_249":296,"_251":297,"_20":298,"_236":299},"2105d50c-dee8-4a4c-8e7b-520eb53248a6","https://www.gravatar.com/avatar/93a302ba35b4d1c176925d22b6f74ea3?size=64&default=identicon","https://www.gravatar.com/avatar/93a302ba35b4d1c176925d22b6f74ea3?size=512&default=identicon","ELENA GOLOVKO",{"_187":274,"_208":239,"_179":300},{"_242":301},5,{"_7":303,"_248":184,"_249":304,"_251":305,"_20":306,"_236":307},"15837a67-5bc7-4128-b17b-d81678ee897e","https://www.gravatar.com/avatar/9cc69f7970a625abf97b56c9fa39e368?size=64&default=identicon","https://www.gravatar.com/avatar/9cc69f7970a625abf97b56c9fa39e368?size=512&default=identicon","Cris Curelaru",{"_187":308,"_208":239},"Advanced React APIs 🔥",{"_7":310,"_248":184,"_249":311,"_251":312,"_20":313,"_236":314},"09146c81-4d61-4133-8539-ced50ccb7baf","https://cdn.discordapp.com/avatars/139412744439988224/d2f81421b670f2a1e9b0ca0a30662e95.png?size=64","https://cdn.discordapp.com/avatars/139412744439988224/d2f81421b670f2a1e9b0ca0a30662e95.png?size=512","Eric Lachance",{"_187":274,"_208":239,"_179":315},{"_9":241,"_242":276,"_244":243},{"_7":317,"_248":184,"_249":318,"_251":319,"_20":320,"_236":321},"9a9693e8-80a1-4e72-9d12-d5e54e88e50a","https://cdn.discordapp.com/avatars/634128025910378498/107df324bca257cc4274d01fcc322e79.png?size=64","https://cdn.discordapp.com/avatars/634128025910378498/107df324bca257cc4274d01fcc322e79.png?size=512","Rafael Hernandez",{"_187":284,"_208":239,"_179":322},{"_242":301},{"_7":324,"_236":325},"kyeg2px8xgolq4o8m3h0iyak",{"_187":326,"_208":327,"_179":328},"Full Stack Testing 🧪","http://testing.epicweb.dev",{"_242":266},{"_7":330,"_236":331},"qp8fh3tt28dl6cjtbdl9hebh",{"_187":332,"_208":239,"_179":333},"Web Authentication 🔐",{"_9":241,"_242":243,"_244":245},{"_7":335,"_248":184,"_249":336,"_251":337,"_20":-5,"_236":338},"b29562b0-1c8f-4888-857c-8b30f2918d06","https://www.gravatar.com/avatar/0527a43e1308267ac94b0dfbc6f974ac?size=64&default=identicon","https://www.gravatar.com/avatar/0527a43e1308267ac94b0dfbc6f974ac?size=512&default=identicon",{"_187":137,"_208":239,"_179":339},{"_242":267},{"_7":341,"_248":184,"_249":342,"_251":343,"_20":-5,"_236":344},"b878f6b7-6366-43b4-a8eb-e0c25b5baec7","https://cdn.discordapp.com/avatars/540292879541862411/87105f36fb906d0ad3bd2c1b7640bc50.png?size=64","https://cdn.discordapp.com/avatars/540292879541862411/87105f36fb906d0ad3bd2c1b7640bc50.png?size=512",{"_187":274,"_208":239,"_179":345},{"_9":241,"_242":243,"_244":301},{"_7":347,"_248":16,"_249":348,"_251":349,"_20":-5,"_236":350},"83b2188e-5a1d-482d-aff0-6958b7db2b81","https://www.gravatar.com/avatar/1bf12af882720f4eebca5f552338bb74?size=64&default=identicon","https://www.gravatar.com/avatar/1bf12af882720f4eebca5f552338bb74?size=512&default=identicon",{"_187":308,"_208":239,"_179":351},{"_242":266},{"_7":353,"_236":354},"r2c2fk21z08q1bgitfanls9e",{"_187":284,"_208":355,"_179":356},"http://fundamentals.epicreact.dev",{"_9":241,"_242":357,"_244":243},9,{"_7":359,"_248":184,"_249":360,"_251":361,"_20":-5,"_236":362},"31471d6d-9123-4204-9d0e-bd6088ee0603","https://www.gravatar.com/avatar/4bf2cee6512562472ea162d42c2e1067?size=64&default=identicon","https://www.gravatar.com/avatar/4bf2cee6512562472ea162d42c2e1067?size=512&default=identicon",{"_187":363,"_208":239,"_179":364},"Professional Web Forms 📝",{"_9":241,"_242":243,"_244":277},{"_7":366,"_248":184,"_249":367,"_251":368,"_20":-5,"_236":369},"9a870da3-721b-4cc4-aa89-777441711328","https://www.gravatar.com/avatar/a4f24a80d106ec87c5ca706889e542e4?size=64&default=identicon","https://www.gravatar.com/avatar/a4f24a80d106ec87c5ca706889e542e4?size=512&default=identicon",{"_187":308,"_208":239,"_179":370},{"_242":267},{"_7":372,"_236":373},"ywpel144exbg0g5b6v3bnpyj",{"_187":137,"_208":209,"_179":374},{"_242":267,"_244":-5,"_9":-5},"routes/_app+/_layout",{"_187":137,"_377":378,"_475":476,"_478":16},"exercises",[379,391,399,411,428,441,454,466],{"_242":243,"_136":380,"_381":382,"_385":386,"_388":389},"Composition","solutions",[383],{"_244":243,"_136":384,"_20":27},"Composition and Layout Components","problems",[387],{"_244":243,"_136":384,"_20":21},"steps",[390],{"_244":243,"_136":384,"_20":21},{"_242":245,"_136":392,"_381":393,"_385":395,"_388":397},"Latest Ref",[394],{"_244":243,"_136":392,"_20":35},[396],{"_244":243,"_136":392,"_20":31},[398],{"_244":243,"_136":392,"_20":31},{"_242":277,"_136":400,"_381":401,"_385":405,"_388":408},"Compound Components",[402,403],{"_244":243,"_136":400,"_20":43},{"_244":245,"_136":404,"_20":51},"Compound Components Validation",[406,407],{"_244":243,"_136":400,"_20":39},{"_244":245,"_136":404,"_20":47},[409,410],{"_244":243,"_136":400,"_20":39},{"_244":245,"_136":404,"_20":47},{"_242":267,"_136":412,"_381":413,"_385":420,"_388":424},"Slots",[414,416,418],{"_244":243,"_136":415,"_20":59},"Slot Context",{"_244":245,"_136":417,"_20":67},"Generic Slot Components",{"_244":277,"_136":419,"_20":75},"Slot Prop",[421,422,423],{"_244":243,"_136":415,"_20":55},{"_244":245,"_136":417,"_20":63},{"_244":277,"_136":419,"_20":71},[425,426,427],{"_244":243,"_136":415,"_20":55},{"_244":245,"_136":417,"_20":63},{"_244":277,"_136":419,"_20":71},{"_242":301,"_136":429,"_381":430,"_385":435,"_388":438},"Prop Collections and Getters",[431,433],{"_244":243,"_136":432,"_20":83},"Prop Collections",{"_244":245,"_136":434,"_20":91},"Prop Getters",[436,437],{"_244":243,"_136":432,"_20":79},{"_244":245,"_136":434,"_20":87},[439,440],{"_244":243,"_136":432,"_20":79},{"_244":245,"_136":434,"_20":87},{"_242":276,"_136":442,"_381":443,"_385":448,"_388":451},"State Initializer",[444,446],{"_244":243,"_136":445,"_20":99},"Initialize Toggle",{"_244":245,"_136":447,"_20":107},"Stability",[449,450],{"_244":243,"_136":445,"_20":95},{"_244":245,"_136":447,"_20":103},[452,453],{"_244":243,"_136":445,"_20":95},{"_244":245,"_136":447,"_20":103},{"_242":266,"_136":455,"_381":456,"_385":460,"_388":463},"State Reducer",[457,458],{"_244":243,"_136":455,"_20":115},{"_244":245,"_136":459,"_20":123},"Default State Reducer",[461,462],{"_244":243,"_136":455,"_20":111},{"_244":245,"_136":459,"_20":119},[464,465],{"_244":243,"_136":455,"_20":111},{"_244":245,"_136":459,"_20":119},{"_242":467,"_136":468,"_381":469,"_385":471,"_388":473},8,"Control Props",[470],{"_244":243,"_136":468,"_20":131},[472],{"_244":243,"_136":468,"_20":127},[474],{"_244":243,"_136":468,"_20":127},"playground",{"_477":-5,"_242":-2},"appName","isMenuOpened","routes/_app+/exercise+/$exerciseNumber_.finished",{"_481":482,"_187":137,"_179":483,"_608":609,"_610":611,"_612":613,"_617":618,"_623":624},"articleId","workshop-advanced-react-patterns-4-finished",{"_242":267,"_484":485,"_136":412,"_486":487,"_488":489,"_490":491,"_493":494,"_388":496,"_385":576,"_381":592},"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",[492],"https://www.epicreact.dev/workshops/advanced-react-patterns/intro-to-slots","finishedEpicVideoEmbeds",[495],"https://www.epicreact.dev/workshops/advanced-react-patterns/dad-joke-break-slots",[497,530,553],{"_244":243,"_241":498,"_265":518},{"_20":55,"_136":415,"_484":499,"_22":56,"_24":57,"_486":500,"_501":502,"_504":505,"_512":513,"_515":516,"_242":267,"_244":243,"_9":241,"_517":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",[503],"https://www.epicreact.dev/workshops/advanced-react-patterns/slot-context","test",{"_9":506,"_507":508,"_509":510},"browser","pathname","/app/04.01.problem/test/","testFiles",[511],"index.test.tsx","dev",{"_9":506,"_507":514},"/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","solutionName",{"_20":59,"_136":415,"_484":519,"_22":60,"_24":61,"_486":520,"_501":521,"_504":523,"_512":526,"_515":528,"_242":267,"_244":243,"_9":265,"_529":-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;",[522],"https://www.epicreact.dev/workshops/advanced-react-patterns/slot-context/solution",{"_9":506,"_507":524,"_509":525},"/app/04.01.solution/test/",[511],{"_9":506,"_507":527},"/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","problemName",{"_244":245,"_241":531,"_265":542},{"_20":63,"_136":417,"_484":532,"_22":64,"_24":65,"_486":533,"_501":534,"_504":536,"_512":539,"_515":541,"_242":267,"_244":245,"_9":241,"_517":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;",[535],"https://www.epicreact.dev/workshops/advanced-react-patterns/generic-slot-components",{"_9":506,"_507":537,"_509":538},"/app/04.02.problem/test/",[511],{"_9":506,"_507":540},"/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",{"_20":67,"_136":417,"_484":543,"_22":68,"_24":69,"_486":544,"_501":545,"_504":547,"_512":550,"_515":552,"_242":267,"_244":245,"_9":265,"_529":-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;",[546],"https://www.epicreact.dev/workshops/advanced-react-patterns/generic-slot-components/solution",{"_9":506,"_507":548,"_509":549},"/app/04.02.solution/test/",[511],{"_9":506,"_507":551},"/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",{"_244":277,"_241":554,"_265":565},{"_20":71,"_136":419,"_484":555,"_22":72,"_24":73,"_486":556,"_501":557,"_504":559,"_512":562,"_515":564,"_242":267,"_244":277,"_9":241,"_517":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;",[558],"https://www.epicreact.dev/workshops/advanced-react-patterns/slot-prop",{"_9":506,"_507":560,"_509":561},"/app/04.03.problem/test/",[511],{"_9":506,"_507":563},"/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",{"_20":75,"_136":419,"_484":566,"_22":76,"_24":77,"_486":567,"_501":568,"_504":570,"_512":573,"_515":575,"_242":267,"_244":277,"_9":265,"_529":-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;",[569],"https://www.epicreact.dev/workshops/advanced-react-patterns/slot-prop/solution",{"_9":506,"_507":571,"_509":572},"/app/04.03.solution/test/",[511],{"_9":506,"_507":574},"/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",[577,582,587],{"_20":55,"_136":415,"_484":499,"_22":56,"_24":57,"_486":500,"_501":578,"_504":579,"_512":581,"_515":516,"_242":267,"_244":243,"_9":241,"_517":59},[503],{"_9":506,"_507":508,"_509":580},[511],{"_9":506,"_507":514},{"_20":63,"_136":417,"_484":532,"_22":64,"_24":65,"_486":533,"_501":583,"_504":584,"_512":586,"_515":541,"_242":267,"_244":245,"_9":241,"_517":67},[535],{"_9":506,"_507":537,"_509":585},[511],{"_9":506,"_507":540},{"_20":71,"_136":419,"_484":555,"_22":72,"_24":73,"_486":556,"_501":588,"_504":589,"_512":591,"_515":564,"_242":267,"_244":277,"_9":241,"_517":75},[558],{"_9":506,"_507":560,"_509":590},[511],{"_9":506,"_507":563},[593,598,603],{"_20":59,"_136":415,"_484":519,"_22":60,"_24":61,"_486":520,"_501":594,"_504":595,"_512":597,"_515":528,"_242":267,"_244":243,"_9":265,"_529":-5},[522],{"_9":506,"_507":524,"_509":596},[511],{"_9":506,"_507":527},{"_20":67,"_136":417,"_484":543,"_22":68,"_24":69,"_486":544,"_501":599,"_504":600,"_512":602,"_515":552,"_242":267,"_244":245,"_9":265,"_529":-5},[546],{"_9":506,"_507":548,"_509":601},[511],{"_9":506,"_507":551},{"_20":75,"_136":419,"_484":566,"_22":76,"_24":77,"_486":567,"_501":604,"_504":605,"_512":607,"_515":575,"_242":267,"_244":277,"_9":265,"_529":-5},[569],{"_9":506,"_507":571,"_509":606},[511],{"_9":506,"_507":574},"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",611],"exerciseFinished",{"_614":615,"_24":616},"file","/myapp/workshop-content/exercises/04.slots/FINISHED.mdx","exercises/04.slots/FINISHED.mdx","prevStepLink",{"_619":620,"_621":622},"to","/exercise/04/03/solution","aria-label","Slot Prop (solution)","nextStepLink",{"_619":625,"_621":429},"/exercise/05","routes/_app+/exercise+/_layout","actionData","errors"]

04. Slots/Elaboration