[{"_1":2,"_699":-5,"_700":-5},"loaderData",{"_3":4,"_418":419,"_551":552},"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":-7,"_249":250},"userId",{"_7":8,"_9":10},"id","qi93sncysjmfwxnat8ihf5mf","type","cookie.clientId","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.36.0","EPICSHOP_PARENT_PORT","3742","EPICSHOP_PARENT_TOKEN","21bc579963a3accd843a09e97a56ad1fed45d100c9da198d1eb74890537da2b7","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,281,289,296,305,315,323,330,338,345,352,359,365,372,379,384,390,396,402,406,412,415],{"_7":254,"_255":191,"_256":257,"_258":259,"_20":260,"_261":262},"fd80210f-666b-4081-930d-52062f2086b8","hasAccess","imageUrlSmall","https://www.gravatar.com/avatar/d8963a5ca3c5d15d3292f11def65a533?size=64&default=identicon","imageUrlLarge","https://www.gravatar.com/avatar/d8963a5ca3c5d15d3292f11def65a533?size=512&default=identicon","Joe","location",{"_198":263,"_230":264,"_186":265},"Advanced React APIs 🔥","http://localhost:5641",{"_266":267},"exerciseNumber",6,{"_7":269,"_255":191,"_256":270,"_258":271,"_20":272,"_261":273},"d53db536-1454-45f2-9ca4-e26723a264cb","https://avatars.githubusercontent.com/u/3432425?v=4&size=64","https://avatars.githubusercontent.com/u/3432425?v=4&size=512","Rosbel Sanroman",{"_198":274,"_230":275,"_186":276},"MCP Fundamentals 🧱","http://localhost:5639",{"_9":277,"_266":278,"_279":280},"problem",2,"stepNumber",1,{"_7":282,"_255":191,"_256":283,"_258":284,"_20":285,"_261":286},"1c7280fe-b2ca-4416-9d2e-11e4fa91e655","https://cdn.discordapp.com/avatars/603759289391382556/8c5277b23a4e81afd524afce2dc19dc2.png?size=64","https://cdn.discordapp.com/avatars/603759289391382556/8c5277b23a4e81afd524afce2dc19dc2.png?size=512","Lenin",{"_198":287,"_230":275,"_186":288},"React Hooks 🎣",{"_266":280},{"_7":290,"_255":191,"_256":291,"_258":292,"_20":293,"_261":294},"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":274,"_230":275,"_186":295},{"_9":277,"_266":278,"_279":278},{"_7":297,"_255":191,"_256":298,"_258":299,"_20":300,"_261":301},"297a4c4e-8f5e-428a-9a5b-5cb54ad37b78","https://avatars.githubusercontent.com/u/2852660?v=4&size=64","https://avatars.githubusercontent.com/u/2852660?v=4&size=512","Minh Nguyen",{"_198":302,"_230":275,"_186":303},"Advanced MCP Features 🐡",{"_9":277,"_266":304,"_279":278},3,{"_7":306,"_255":191,"_256":307,"_258":308,"_20":309,"_261":310},"a9816ed0-87da-4830-9f1d-e8cbbfa38737","https://www.gravatar.com/avatar/8c55b99925b14a604d0750740dbf1be3?size=64&default=identicon","https://www.gravatar.com/avatar/8c55b99925b14a604d0750740dbf1be3?size=512&default=identicon","Marina Nicolai",{"_198":274,"_230":311,"_186":312},"http://localhost:5640",{"_9":313,"_266":314,"_279":278},"solution",5,{"_7":316,"_255":191,"_256":317,"_258":318,"_20":319,"_261":320},"ef6d7fb0-10dd-4eb0-a034-ab4b0f34e4ad","https://www.gravatar.com/avatar/d761905826e670eba1fbeb0f84bf6137?size=64&default=identicon","https://www.gravatar.com/avatar/d761905826e670eba1fbeb0f84bf6137?size=512&default=identicon","Rob Pinna",{"_198":321,"_230":275,"_186":322},"Advanced Vitest Patterns",{"_9":313,"_266":304,"_279":280},{"_7":324,"_255":191,"_256":325,"_258":326,"_20":327,"_261":328},"926b5406-4854-4731-bd4f-da63fa9baa9b","https://www.gravatar.com/avatar/6e6245b1507778895a87d1648a7769f1?size=64&default=identicon","https://www.gravatar.com/avatar/6e6245b1507778895a87d1648a7769f1?size=512&default=identicon","Mingus",{"_198":274,"_230":275,"_186":329},{"_266":280},{"_7":331,"_255":191,"_256":332,"_258":333,"_20":334,"_261":335},"1ba0a5c1-ed9f-40bc-968b-c5a32fbc6a0b","https://cdn.discordapp.com/avatars/907352201511469096/a446641c21a308259f121724ccef166c.png?size=64","https://cdn.discordapp.com/avatars/907352201511469096/a446641c21a308259f121724ccef166c.png?size=512","Nicolás Mejía",{"_198":302,"_230":311,"_186":336},{"_266":337},4,{"_7":339,"_255":191,"_256":340,"_258":341,"_20":342,"_261":343},"6dd572cb-3e85-4e32-a1c9-8c91e2aea3d5","https://cdn.discordapp.com/avatars/1027693649808597123/9170181dbb8baad5d4b8ff346251bc85.png?size=64","https://cdn.discordapp.com/avatars/1027693649808597123/9170181dbb8baad5d4b8ff346251bc85.png?size=512","Jeff CA",{"_198":287,"_230":275,"_186":344},{"_9":277,"_266":280,"_279":337},{"_7":346,"_255":191,"_256":347,"_258":348,"_20":349,"_261":350},"2c4caa18-6594-48f9-8914-a4beb45c20cd","https://cdn.discordapp.com/avatars/105755735731781632/a_1afdce133caaa4d8d17d02c07b0d2b69.gif?size=64","https://cdn.discordapp.com/avatars/105755735731781632/a_1afdce133caaa4d8d17d02c07b0d2b69.gif?size=512","Kent",{"_198":351,"_230":275},"MCP UI 🪟",{"_7":353,"_255":191,"_256":354,"_258":355,"_20":356,"_261":357},"3798d1b4-ec02-4e2c-b792-1b6d08dc061a","https://cdn.discordapp.com/avatars/1267891572289179678/187e6e8b66638bb33a918c42a82907ac.png?size=64","https://cdn.discordapp.com/avatars/1267891572289179678/187e6e8b66638bb33a918c42a82907ac.png?size=512","afonso",{"_198":302,"_230":275,"_186":358},{"_266":280},{"_7":360,"_255":191,"_256":361,"_258":362,"_20":363,"_261":364},"0e60c142-f3d0-4c5d-8a12-cf2ab8c9d0aa","https://avatars.githubusercontent.com/u/23122365?v=4&size=64","https://avatars.githubusercontent.com/u/23122365?v=4&size=512","Denis",{"_198":274,"_230":275},{"_7":366,"_255":191,"_256":367,"_258":368,"_20":369,"_261":370},"d15eabf3-02c8-4419-80f1-cff0833567b0","https://www.gravatar.com/avatar/9e38df1be137c0f6dce7503da675b5d9?size=64&default=identicon","https://www.gravatar.com/avatar/9e38df1be137c0f6dce7503da675b5d9?size=512&default=identicon","Kevin",{"_198":274,"_230":275,"_186":371},{"_9":313,"_266":304,"_279":337},{"_7":373,"_255":191,"_256":374,"_258":375,"_20":376,"_261":377},"ddf3110e-bc8d-4d75-a067-95eb29675bdd","https://cdn.discordapp.com/avatars/186174192721461259/450d07bd5f2ef4d85e618206f7e2bc0a.png?size=64","https://cdn.discordapp.com/avatars/186174192721461259/450d07bd5f2ef4d85e618206f7e2bc0a.png?size=512","Marvin",{"_198":302,"_230":275,"_186":378},{"_9":313,"_266":280,"_279":280},{"_7":380,"_261":381},"zz2wve4lfvj8kqungtw1m2kf",{"_198":382,"_230":383},"React Performance ⚡","http://performance.epicreact.dev",{"_7":385,"_255":191,"_256":386,"_258":387,"_20":-5,"_261":388},"735cee90-dcd4-484d-95a2-7b63b6b9ea68","https://cdn.discordapp.com/avatars/767098986888298526/b8351a0e221f4ee83351bcd4076afdaa.png?size=64","https://cdn.discordapp.com/avatars/767098986888298526/b8351a0e221f4ee83351bcd4076afdaa.png?size=512",{"_198":274,"_230":275,"_186":389},{"_9":277,"_266":314,"_279":280},{"_7":391,"_255":16,"_256":392,"_258":393,"_20":-5,"_261":394},"6cca6894-c48b-48c8-9011-43317bc2174b","https://www.gravatar.com/avatar/06d4bf3ae925cce17be2699cc6241cc3?size=64&default=identicon","https://www.gravatar.com/avatar/06d4bf3ae925cce17be2699cc6241cc3?size=512&default=identicon",{"_198":274,"_230":311,"_186":395},{"_9":313,"_266":304,"_279":337},{"_7":397,"_255":191,"_256":398,"_258":399,"_20":-5,"_261":400},"d0c15df3-ee32-4757-8004-2b37ad485cd2","https://cdn.discordapp.com/avatars/690008320207224854/92bf9bebdbff03c8779e0a86f49834a7.png?size=64","https://cdn.discordapp.com/avatars/690008320207224854/92bf9bebdbff03c8779e0a86f49834a7.png?size=512",{"_198":274,"_230":275,"_186":401},{"_9":277,"_266":304,"_279":304},{"_7":403,"_261":404},"p8kuel0stzpfo5tn21c26zhi",{"_198":287,"_230":405},"http://hooks.epicreact.dev",{"_7":407,"_255":191,"_256":408,"_258":409,"_20":-5,"_261":410},"4cc4a7f7-e1d7-4831-8bce-8c1e715da102","https://www.gravatar.com/avatar/cfeb8c0b20d4ae4ea140e86fadf4ffb8?size=64&default=identicon","https://www.gravatar.com/avatar/cfeb8c0b20d4ae4ea140e86fadf4ffb8?size=512&default=identicon",{"_198":274,"_230":275,"_186":411},{"_9":277,"_266":304,"_279":280},{"_7":413,"_261":414},"a7rcd5qh9r5q2577y9pheqd4",{"_198":274,"_230":275},{"_7":8,"_261":416},{"_198":143,"_230":231,"_186":417},{"_266":337,"_279":-5,"_9":-5},"routes/_app+/_layout",{"_198":143,"_420":421,"_547":548,"_550":16},"exercises",[422,436,446,462,485,502,519,536],{"_266":280,"_142":423,"_424":425,"_428":429,"_431":432},"Composition","solutions",[426],{"_279":280,"_142":427,"_20":27},"Composition and Layout Components","problems",[430],{"_279":280,"_142":427,"_20":21},"steps",[433],{"_279":280,"_142":427,"_20":21,"_277":434,"_313":435},{"_20":21,"_142":427},{"_20":27,"_142":427},{"_266":278,"_142":437,"_424":438,"_428":440,"_431":442},"Latest Ref",[439],{"_279":280,"_142":437,"_20":35},[441],{"_279":280,"_142":437,"_20":31},[443],{"_279":280,"_142":437,"_20":31,"_277":444,"_313":445},{"_20":31,"_142":437},{"_20":35,"_142":437},{"_266":304,"_142":447,"_424":448,"_428":452,"_431":455},"Compound Components",[449,450],{"_279":280,"_142":447,"_20":43},{"_279":278,"_142":451,"_20":51},"Compound Components Validation",[453,454],{"_279":280,"_142":447,"_20":39},{"_279":278,"_142":451,"_20":47},[456,459],{"_279":280,"_142":447,"_20":39,"_277":457,"_313":458},{"_20":39,"_142":447},{"_20":43,"_142":447},{"_279":278,"_142":451,"_20":47,"_277":460,"_313":461},{"_20":47,"_142":451},{"_20":51,"_142":451},{"_266":337,"_142":463,"_424":464,"_428":471,"_431":475},"Slots",[465,467,469],{"_279":280,"_142":466,"_20":59},"Slot Context",{"_279":278,"_142":468,"_20":67},"Generic Slot Components",{"_279":304,"_142":470,"_20":75},"Slot Prop",[472,473,474],{"_279":280,"_142":466,"_20":55},{"_279":278,"_142":468,"_20":63},{"_279":304,"_142":470,"_20":71},[476,479,482],{"_279":280,"_142":466,"_20":55,"_277":477,"_313":478},{"_20":55,"_142":466},{"_20":59,"_142":466},{"_279":278,"_142":468,"_20":63,"_277":480,"_313":481},{"_20":63,"_142":468},{"_20":67,"_142":468},{"_279":304,"_142":470,"_20":71,"_277":483,"_313":484},{"_20":71,"_142":470},{"_20":75,"_142":470},{"_266":314,"_142":486,"_424":487,"_428":492,"_431":495},"Prop Collections and Getters",[488,490],{"_279":280,"_142":489,"_20":83},"Prop Collections",{"_279":278,"_142":491,"_20":91},"Prop Getters",[493,494],{"_279":280,"_142":489,"_20":79},{"_279":278,"_142":491,"_20":87},[496,499],{"_279":280,"_142":489,"_20":79,"_277":497,"_313":498},{"_20":79,"_142":489},{"_20":83,"_142":489},{"_279":278,"_142":491,"_20":87,"_277":500,"_313":501},{"_20":87,"_142":491},{"_20":91,"_142":491},{"_266":267,"_142":503,"_424":504,"_428":509,"_431":512},"State Initializer",[505,507],{"_279":280,"_142":506,"_20":99},"Initialize Toggle",{"_279":278,"_142":508,"_20":107},"Stability",[510,511],{"_279":280,"_142":506,"_20":95},{"_279":278,"_142":508,"_20":103},[513,516],{"_279":280,"_142":506,"_20":95,"_277":514,"_313":515},{"_20":95,"_142":506},{"_20":99,"_142":506},{"_279":278,"_142":508,"_20":103,"_277":517,"_313":518},{"_20":103,"_142":508},{"_20":107,"_142":508},{"_266":520,"_142":521,"_424":522,"_428":526,"_431":529},7,"State Reducer",[523,524],{"_279":280,"_142":521,"_20":115},{"_279":278,"_142":525,"_20":123},"Default State Reducer",[527,528],{"_279":280,"_142":521,"_20":111},{"_279":278,"_142":525,"_20":119},[530,533],{"_279":280,"_142":521,"_20":111,"_277":531,"_313":532},{"_20":111,"_142":521},{"_20":115,"_142":521},{"_279":278,"_142":525,"_20":119,"_277":534,"_313":535},{"_20":119,"_142":525},{"_20":123,"_142":525},{"_266":537,"_142":538,"_424":539,"_428":541,"_431":543},8,"Control Props",[540],{"_279":280,"_142":538,"_20":131},[542],{"_279":280,"_142":538,"_20":127},[544],{"_279":280,"_142":538,"_20":127,"_277":545,"_313":546},{"_20":127,"_142":538},{"_20":131,"_142":538},"playground",{"_549":-5,"_266":-2,"_279":-2,"_9":-7},"appName","isMenuOpened","routes/_app+/exercise+/$exerciseNumber_.finished",{"_553":554,"_198":143,"_186":555,"_681":682,"_683":684,"_685":686,"_690":691,"_696":697},"articleId","workshop-advanced-react-patterns-4-finished",{"_22":556,"_266":337,"_557":558,"_142":463,"_559":560,"_561":562,"_563":564,"_566":567,"_431":569,"_428":649,"_424":665},"/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",[565],"https://www.epicreact.dev/workshops/advanced-react-patterns/intro-to-slots","finishedEpicVideoEmbeds",[568],"https://www.epicreact.dev/workshops/advanced-react-patterns/dad-joke-break-slots",[570,603,626],{"_279":280,"_277":571,"_313":591},{"_20":55,"_142":466,"_557":572,"_22":56,"_24":57,"_559":573,"_574":575,"_577":578,"_585":586,"_588":589,"_266":337,"_279":280,"_9":277,"_590":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",[576],"https://www.epicreact.dev/workshops/advanced-react-patterns/slot-context","test",{"_9":579,"_580":581,"_582":583},"browser","pathname","/app/04.01.problem/test/","testFiles",[584],"index.test.tsx","dev",{"_9":579,"_580":587},"/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":466,"_557":592,"_22":60,"_24":61,"_559":593,"_574":594,"_577":596,"_585":599,"_588":601,"_266":337,"_279":280,"_9":313,"_602":-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;",[595],"https://www.epicreact.dev/workshops/advanced-react-patterns/slot-context/solution",{"_9":579,"_580":597,"_582":598},"/app/04.01.solution/test/",[584],{"_9":579,"_580":600},"/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",{"_279":278,"_277":604,"_313":615},{"_20":63,"_142":468,"_557":605,"_22":64,"_24":65,"_559":606,"_574":607,"_577":609,"_585":612,"_588":614,"_266":337,"_279":278,"_9":277,"_590":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;",[608],"https://www.epicreact.dev/workshops/advanced-react-patterns/generic-slot-components",{"_9":579,"_580":610,"_582":611},"/app/04.02.problem/test/",[584],{"_9":579,"_580":613},"/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":468,"_557":616,"_22":68,"_24":69,"_559":617,"_574":618,"_577":620,"_585":623,"_588":625,"_266":337,"_279":278,"_9":313,"_602":-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;",[619],"https://www.epicreact.dev/workshops/advanced-react-patterns/generic-slot-components/solution",{"_9":579,"_580":621,"_582":622},"/app/04.02.solution/test/",[584],{"_9":579,"_580":624},"/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",{"_279":304,"_277":627,"_313":638},{"_20":71,"_142":470,"_557":628,"_22":72,"_24":73,"_559":629,"_574":630,"_577":632,"_585":635,"_588":637,"_266":337,"_279":304,"_9":277,"_590":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;",[631],"https://www.epicreact.dev/workshops/advanced-react-patterns/slot-prop",{"_9":579,"_580":633,"_582":634},"/app/04.03.problem/test/",[584],{"_9":579,"_580":636},"/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":470,"_557":639,"_22":76,"_24":77,"_559":640,"_574":641,"_577":643,"_585":646,"_588":648,"_266":337,"_279":304,"_9":313,"_602":-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;",[642],"https://www.epicreact.dev/workshops/advanced-react-patterns/slot-prop/solution",{"_9":579,"_580":644,"_582":645},"/app/04.03.solution/test/",[584],{"_9":579,"_580":647},"/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",[650,655,660],{"_20":55,"_142":466,"_557":572,"_22":56,"_24":57,"_559":573,"_574":651,"_577":652,"_585":654,"_588":589,"_266":337,"_279":280,"_9":277,"_590":59},[576],{"_9":579,"_580":581,"_582":653},[584],{"_9":579,"_580":587},{"_20":63,"_142":468,"_557":605,"_22":64,"_24":65,"_559":606,"_574":656,"_577":657,"_585":659,"_588":614,"_266":337,"_279":278,"_9":277,"_590":67},[608],{"_9":579,"_580":610,"_582":658},[584],{"_9":579,"_580":613},{"_20":71,"_142":470,"_557":628,"_22":72,"_24":73,"_559":629,"_574":661,"_577":662,"_585":664,"_588":637,"_266":337,"_279":304,"_9":277,"_590":75},[631],{"_9":579,"_580":633,"_582":663},[584],{"_9":579,"_580":636},[666,671,676],{"_20":59,"_142":466,"_557":592,"_22":60,"_24":61,"_559":593,"_574":667,"_577":668,"_585":670,"_588":601,"_266":337,"_279":280,"_9":313,"_602":-5},[595],{"_9":579,"_580":597,"_582":669},[584],{"_9":579,"_580":600},{"_20":67,"_142":468,"_557":616,"_22":68,"_24":69,"_559":617,"_574":672,"_577":673,"_585":675,"_588":625,"_266":337,"_279":278,"_9":313,"_602":-5},[619],{"_9":579,"_580":621,"_582":674},[584],{"_9":579,"_580":624},{"_20":75,"_142":470,"_557":639,"_22":76,"_24":77,"_559":640,"_574":677,"_577":678,"_585":680,"_588":648,"_266":337,"_279":304,"_9":313,"_602":-5},[642],{"_9":579,"_580":644,"_582":679},[584],{"_9":579,"_580":647},"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",684],"exerciseFinished",{"_687":688,"_24":689},"file","/myapp/workshop-content/exercises/04.slots/FINISHED.mdx","exercises/04.slots/FINISHED.mdx","prevStepLink",{"_692":693,"_694":695},"to","/exercise/04/03/solution","aria-label","Slot Prop (solution)","nextStepLink",{"_692":698,"_694":486},"/exercise/05","actionData","errors"]

04. Slots/Elaboration