[{"_1":2,"_630":-5,"_631":-5},"loaderData",{"_3":4,"_349":350,"_482":483},"root",{"_5":6,"_11":-5,"_12":13,"_14":-5,"_15":16,"_17":18,"_134":135,"_137":138,"_139":16,"_140":141,"_198":143,"_199":145,"_146":147,"_200":201,"_222":223,"_247":-5,"_248":-5,"_249":250},"userId",{"_7":8,"_9":10},"id","00355f68-7979-46be-8828-a69314974c49","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,"_174":175,"_176":177,"_178":179,"_182":183,"_188":189,"_192":193,"_194":195,"_196":197},"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",[173],"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",{"_180":181},"view","editor","forms",{"_184":185,"_186":187},"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",{"_190":191},"enabled",true,"initialRoute","/","notifications",[],"sidecarProcesses",{},"workshopTitle","workshopSubtitle","ENV",{"_202":203,"_204":205,"_206":207,"_208":175,"_209":177,"_210":191,"_211":212,"_213":214,"_215":216,"_217":191,"_218":219,"_220":221},"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.41.3","EPICSHOP_PARENT_PORT","3742","EPICSHOP_PARENT_TOKEN","76eabfd224336d05a4decdc24e1d352c28d891dcc1c69a069463108faec827bd","EPICSHOP_IS_PUBLISHED","SENTRY_DSN","https://cd51fbf4ca0834f7b3529a478a8ece4c@o913766.ingest.us.sentry.io/4509630082252800","SENTRY_PROJECT_ID","4509630082252800","requestInfo",{"_224":225,"_226":227,"_228":229,"_230":231,"_232":231,"_233":234,"_241":242,"_243":244,"_245":193,"_246":191},"protocol","http:","hostname","advanced-patterns.epicreact.dev","port","","origin","http://advanced-patterns.epicreact.dev","domain","hints",{"_235":236,"_237":238,"_239":240},"theme","light","timeZone","UTC","reducedMotion","no-preference","path","/exercise/04/finished","session",{"_235":-5},"separator","online","toast","confettiId","presence",{"_251":252},"users",[253,268,280,287,297,306,314,322,328,333,338,345],{"_7":254,"_255":191,"_256":257,"_258":259,"_20":260,"_261":262},"9e1050f2-9616-4e2e-8400-01b733d1a880","hasAccess","imageUrlSmall","https://www.gravatar.com/avatar/611181cb6cb6f8cdb6d675582d29cb59?size=64&default=identicon","imageUrlLarge","https://www.gravatar.com/avatar/611181cb6cb6f8cdb6d675582d29cb59?size=512&default=identicon","Moritz Frölich","location",{"_198":263,"_230":264,"_186":265},"React Fundamentals ⚛","http://localhost:5641",{"_266":267},"exerciseNumber",9,{"_7":269,"_255":191,"_256":270,"_258":271,"_20":272,"_261":273},"5dcceac3-781b-419b-86d0-1189f5acd260","https://avatars.githubusercontent.com/u/16737095?v=4&size=64","https://avatars.githubusercontent.com/u/16737095?v=4&size=512","David Barbosa Maia",{"_198":263,"_230":274,"_186":275},"http://localhost:5639",{"_9":276,"_266":277,"_278":279},"problem",7,"stepNumber",1,{"_7":281,"_255":191,"_256":282,"_258":283,"_20":284,"_261":285},"ae42a6c8-5879-47c5-8693-2c71d990df1b","https://www.gravatar.com/avatar/989d1b14803420c2897c3f88eec738ef?size=64&default=identicon","https://www.gravatar.com/avatar/989d1b14803420c2897c3f88eec738ef?size=512&default=identicon","Zafiris Fardellas",{"_198":263,"_230":274,"_186":286},{"_9":276,"_266":267,"_278":279},{"_7":288,"_255":191,"_256":289,"_258":290,"_20":291,"_261":292},"70078aa1-7b41-40f4-9930-79013303627b","https://avatars.githubusercontent.com/u/4356894?v=4&size=64","https://avatars.githubusercontent.com/u/4356894?v=4&size=512","Thor Anderson",{"_198":293,"_230":274,"_186":294},"MCP Fundamentals 🧱",{"_9":276,"_266":295,"_278":296},2,3,{"_7":298,"_255":191,"_256":299,"_258":300,"_20":301,"_261":302},"fd80210f-666b-4081-930d-52062f2086b8","https://www.gravatar.com/avatar/d8963a5ca3c5d15d3292f11def65a533?size=64&default=identicon","https://www.gravatar.com/avatar/d8963a5ca3c5d15d3292f11def65a533?size=512&default=identicon","Joe",{"_198":263,"_230":303,"_186":304},"http://localhost:5643",{"_266":305},5,{"_7":307,"_255":191,"_256":308,"_258":309,"_20":310,"_261":311},"ecef3a37-c9b4-4283-ac74-bd82af6108d6","https://www.gravatar.com/avatar/f28288b2785c726653fd2ca826d82791?size=64&default=identicon","https://www.gravatar.com/avatar/f28288b2785c726653fd2ca826d82791?size=512&default=identicon","Martin Gaviola",{"_198":143,"_230":312,"_186":313},"http://localhost:5640",{"_266":279},{"_7":315,"_255":191,"_256":316,"_258":317,"_20":318,"_261":319},"9c778bc9-b36a-497d-ad4e-e3301c187d14","https://www.gravatar.com/avatar/5b3ec04cf342139ea5ae0f93a0eaa6dc?size=64&default=identicon","https://www.gravatar.com/avatar/5b3ec04cf342139ea5ae0f93a0eaa6dc?size=512&default=identicon","Emma S. Frisk",{"_198":263,"_230":274,"_186":320},{"_266":321},6,{"_7":323,"_255":191,"_256":324,"_258":325,"_20":-5,"_261":326},"32e9c236-66f7-484f-961b-7098c35cdbba","https://www.gravatar.com/avatar/4756e41fb41e695bcc98c5d667414845?size=64&default=identicon","https://www.gravatar.com/avatar/4756e41fb41e695bcc98c5d667414845?size=512&default=identicon",{"_198":143,"_230":274,"_186":327},{"_9":276,"_266":305,"_278":279},{"_7":329,"_261":330},"1a6dc8c9-4a7b-4463-ae63-11f402ca5315",{"_198":143,"_230":231,"_186":331},{"_266":332},4,{"_7":334,"_261":335},"pyj2k3ttxcqdmt7ixqrltgwn",{"_198":336,"_230":274,"_186":337},"MCP UI 🪟",{"_9":276,"_266":296,"_278":295},{"_7":339,"_255":191,"_256":340,"_258":341,"_20":-5,"_261":342},"fd7d6e19-0656-4a10-a7d2-d1b9d66417d0","https://www.gravatar.com/avatar/39d0d4037c10ff20696891c63e3903d9?size=64&default=identicon","https://www.gravatar.com/avatar/39d0d4037c10ff20696891c63e3903d9?size=512&default=identicon",{"_198":343,"_230":274,"_186":344},"React Performance ⚡",{"_9":276,"_266":295,"_278":279},{"_7":346,"_261":347},"625a5d8f-b835-41a7-a1a4-be65dc68b42b",{"_198":143,"_230":231,"_186":348},{"_266":332,"_278":-5,"_9":-5},"routes/_app+/_layout",{"_198":143,"_351":352,"_478":479,"_481":16},"exercises",[353,368,378,394,417,434,451,467],{"_266":279,"_142":354,"_355":356,"_359":360,"_362":363},"Composition","solutions",[357],{"_278":279,"_142":358,"_20":27},"Composition and Layout Components","problems",[361],{"_278":279,"_142":358,"_20":21},"steps",[364],{"_278":279,"_142":358,"_20":21,"_276":365,"_366":367},{"_20":21,"_142":358},"solution",{"_20":27,"_142":358},{"_266":295,"_142":369,"_355":370,"_359":372,"_362":374},"Latest Ref",[371],{"_278":279,"_142":369,"_20":35},[373],{"_278":279,"_142":369,"_20":31},[375],{"_278":279,"_142":369,"_20":31,"_276":376,"_366":377},{"_20":31,"_142":369},{"_20":35,"_142":369},{"_266":296,"_142":379,"_355":380,"_359":384,"_362":387},"Compound Components",[381,382],{"_278":279,"_142":379,"_20":43},{"_278":295,"_142":383,"_20":51},"Compound Components Validation",[385,386],{"_278":279,"_142":379,"_20":39},{"_278":295,"_142":383,"_20":47},[388,391],{"_278":279,"_142":379,"_20":39,"_276":389,"_366":390},{"_20":39,"_142":379},{"_20":43,"_142":379},{"_278":295,"_142":383,"_20":47,"_276":392,"_366":393},{"_20":47,"_142":383},{"_20":51,"_142":383},{"_266":332,"_142":395,"_355":396,"_359":403,"_362":407},"Slots",[397,399,401],{"_278":279,"_142":398,"_20":59},"Slot Context",{"_278":295,"_142":400,"_20":67},"Generic Slot Components",{"_278":296,"_142":402,"_20":75},"Slot Prop",[404,405,406],{"_278":279,"_142":398,"_20":55},{"_278":295,"_142":400,"_20":63},{"_278":296,"_142":402,"_20":71},[408,411,414],{"_278":279,"_142":398,"_20":55,"_276":409,"_366":410},{"_20":55,"_142":398},{"_20":59,"_142":398},{"_278":295,"_142":400,"_20":63,"_276":412,"_366":413},{"_20":63,"_142":400},{"_20":67,"_142":400},{"_278":296,"_142":402,"_20":71,"_276":415,"_366":416},{"_20":71,"_142":402},{"_20":75,"_142":402},{"_266":305,"_142":418,"_355":419,"_359":424,"_362":427},"Prop Collections and Getters",[420,422],{"_278":279,"_142":421,"_20":83},"Prop Collections",{"_278":295,"_142":423,"_20":91},"Prop Getters",[425,426],{"_278":279,"_142":421,"_20":79},{"_278":295,"_142":423,"_20":87},[428,431],{"_278":279,"_142":421,"_20":79,"_276":429,"_366":430},{"_20":79,"_142":421},{"_20":83,"_142":421},{"_278":295,"_142":423,"_20":87,"_276":432,"_366":433},{"_20":87,"_142":423},{"_20":91,"_142":423},{"_266":321,"_142":435,"_355":436,"_359":441,"_362":444},"State Initializer",[437,439],{"_278":279,"_142":438,"_20":99},"Initialize Toggle",{"_278":295,"_142":440,"_20":107},"Stability",[442,443],{"_278":279,"_142":438,"_20":95},{"_278":295,"_142":440,"_20":103},[445,448],{"_278":279,"_142":438,"_20":95,"_276":446,"_366":447},{"_20":95,"_142":438},{"_20":99,"_142":438},{"_278":295,"_142":440,"_20":103,"_276":449,"_366":450},{"_20":103,"_142":440},{"_20":107,"_142":440},{"_266":277,"_142":452,"_355":453,"_359":457,"_362":460},"State Reducer",[454,455],{"_278":279,"_142":452,"_20":115},{"_278":295,"_142":456,"_20":123},"Default State Reducer",[458,459],{"_278":279,"_142":452,"_20":111},{"_278":295,"_142":456,"_20":119},[461,464],{"_278":279,"_142":452,"_20":111,"_276":462,"_366":463},{"_20":111,"_142":452},{"_20":115,"_142":452},{"_278":295,"_142":456,"_20":119,"_276":465,"_366":466},{"_20":119,"_142":456},{"_20":123,"_142":456},{"_266":468,"_142":469,"_355":470,"_359":472,"_362":474},8,"Control Props",[471],{"_278":279,"_142":469,"_20":131},[473],{"_278":279,"_142":469,"_20":127},[475],{"_278":279,"_142":469,"_20":127,"_276":476,"_366":477},{"_20":127,"_142":469},{"_20":131,"_142":469},"playground",{"_480":-5,"_266":-2,"_278":-2,"_9":-7},"appName","isMenuOpened","routes/_app+/exercise+/$exerciseNumber_.finished",{"_484":485,"_198":143,"_186":486,"_612":613,"_614":615,"_616":617,"_621":622,"_627":628},"articleId","workshop-advanced-react-patterns-4-finished",{"_22":487,"_266":332,"_488":489,"_142":395,"_490":491,"_492":493,"_494":495,"_497":498,"_362":500,"_359":580,"_355":596},"/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",[496],"https://www.epicreact.dev/workshops/advanced-react-patterns/intro-to-slots","finishedEpicVideoEmbeds",[499],"https://www.epicreact.dev/workshops/advanced-react-patterns/dad-joke-break-slots",[501,534,557],{"_278":279,"_276":502,"_366":522},{"_20":55,"_142":398,"_488":503,"_22":56,"_24":57,"_490":504,"_505":506,"_508":509,"_516":517,"_519":520,"_266":332,"_278":279,"_9":276,"_521":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",[507],"https://www.epicreact.dev/workshops/advanced-react-patterns/slot-context","test",{"_9":510,"_511":512,"_513":514},"browser","pathname","/app/04.01.problem/test/","testFiles",[515],"index.test.tsx","dev",{"_9":510,"_511":518},"/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":398,"_488":523,"_22":60,"_24":61,"_490":524,"_505":525,"_508":527,"_516":530,"_519":532,"_266":332,"_278":279,"_9":366,"_533":-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;",[526],"https://www.epicreact.dev/workshops/advanced-react-patterns/slot-context/solution",{"_9":510,"_511":528,"_513":529},"/app/04.01.solution/test/",[515],{"_9":510,"_511":531},"/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",{"_278":295,"_276":535,"_366":546},{"_20":63,"_142":400,"_488":536,"_22":64,"_24":65,"_490":537,"_505":538,"_508":540,"_516":543,"_519":545,"_266":332,"_278":295,"_9":276,"_521":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;",[539],"https://www.epicreact.dev/workshops/advanced-react-patterns/generic-slot-components",{"_9":510,"_511":541,"_513":542},"/app/04.02.problem/test/",[515],{"_9":510,"_511":544},"/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":400,"_488":547,"_22":68,"_24":69,"_490":548,"_505":549,"_508":551,"_516":554,"_519":556,"_266":332,"_278":295,"_9":366,"_533":-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;",[550],"https://www.epicreact.dev/workshops/advanced-react-patterns/generic-slot-components/solution",{"_9":510,"_511":552,"_513":553},"/app/04.02.solution/test/",[515],{"_9":510,"_511":555},"/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",{"_278":296,"_276":558,"_366":569},{"_20":71,"_142":402,"_488":559,"_22":72,"_24":73,"_490":560,"_505":561,"_508":563,"_516":566,"_519":568,"_266":332,"_278":296,"_9":276,"_521":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;",[562],"https://www.epicreact.dev/workshops/advanced-react-patterns/slot-prop",{"_9":510,"_511":564,"_513":565},"/app/04.03.problem/test/",[515],{"_9":510,"_511":567},"/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":402,"_488":570,"_22":76,"_24":77,"_490":571,"_505":572,"_508":574,"_516":577,"_519":579,"_266":332,"_278":296,"_9":366,"_533":-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;",[573],"https://www.epicreact.dev/workshops/advanced-react-patterns/slot-prop/solution",{"_9":510,"_511":575,"_513":576},"/app/04.03.solution/test/",[515],{"_9":510,"_511":578},"/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",[581,586,591],{"_20":55,"_142":398,"_488":503,"_22":56,"_24":57,"_490":504,"_505":582,"_508":583,"_516":585,"_519":520,"_266":332,"_278":279,"_9":276,"_521":59},[507],{"_9":510,"_511":512,"_513":584},[515],{"_9":510,"_511":518},{"_20":63,"_142":400,"_488":536,"_22":64,"_24":65,"_490":537,"_505":587,"_508":588,"_516":590,"_519":545,"_266":332,"_278":295,"_9":276,"_521":67},[539],{"_9":510,"_511":541,"_513":589},[515],{"_9":510,"_511":544},{"_20":71,"_142":402,"_488":559,"_22":72,"_24":73,"_490":560,"_505":592,"_508":593,"_516":595,"_519":568,"_266":332,"_278":296,"_9":276,"_521":75},[562],{"_9":510,"_511":564,"_513":594},[515],{"_9":510,"_511":567},[597,602,607],{"_20":59,"_142":398,"_488":523,"_22":60,"_24":61,"_490":524,"_505":598,"_508":599,"_516":601,"_519":532,"_266":332,"_278":279,"_9":366,"_533":-5},[526],{"_9":510,"_511":528,"_513":600},[515],{"_9":510,"_511":531},{"_20":67,"_142":400,"_488":547,"_22":68,"_24":69,"_490":548,"_505":603,"_508":604,"_516":606,"_519":556,"_266":332,"_278":295,"_9":366,"_533":-5},[550],{"_9":510,"_511":552,"_513":605},[515],{"_9":510,"_511":555},{"_20":75,"_142":402,"_488":570,"_22":76,"_24":77,"_490":571,"_505":608,"_508":609,"_516":611,"_519":579,"_266":332,"_278":296,"_9":366,"_533":-5},[573],{"_9":510,"_511":575,"_513":610},[515],{"_9":510,"_511":578},"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",615],"exerciseFinished",{"_618":619,"_24":620},"file","/myapp/workshop-content/exercises/04.slots/FINISHED.mdx","exercises/04.slots/FINISHED.mdx","prevStepLink",{"_623":624,"_625":626},"to","/exercise/04/03/solution","aria-label","Slot Prop (solution)","nextStepLink",{"_623":629,"_625":418},"/exercise/05","actionData","errors"]

04. Slots/Elaboration