var Component=(()=>{var p=Object.create;var l=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var f=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),w=(o,e)=>{for(var t in e)l(o,t,{get:e[t],enumerable:!0})},i=(o,e,t,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of u(e))!y.call(o,a)&&a!==t&&l(o,a,{get:()=>e[a],enumerable:!(r=m(e,a))||r.enumerable});return o};var v=(o,e,t)=>(t=o!=null?p(b(o)):{},i(e||!o||!o.__esModule?l(t,"default",{value:o,enumerable:!0}):t,o)),g=o=>i(l({},"__esModule",{value:!0}),o);var c=f((I,s)=>{s.exports=_jsx_runtime});var C={};w(C,{default:()=>h,frontmatter:()=>k});var n=v(c()),k=void 0;function d(o){let e={a:"a",code:"code",h1:"h1",li:"li",p:"p",pre:"pre",span:"span",strong:"strong",ul:"ul",...o.components},{EpicVideo:t}=e;return t||x("EpicVideo",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h1,{children:"Compound Components"}),` `,(0,n.jsx)(t,{url:"https://www.epicreact.dev/workshops/advanced-react-patterns/intro-to-compound-components"}),` `,(0,n.jsx)("callout-success",{children:(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:"One liner:"}),` The Compound Components Pattern enables you to provide a set of components that implicitly share state for a simple yet powerful declarative API for reusable components.`]})}),` `,(0,n.jsxs)(e.p,{children:[`Compound components are components that work together to form a complete UI. The classic example of this is `,(0,n.jsx)(e.code,{children:""}),` is the element responsible for managing the state of the UI, and the `,(0,n.jsx)(e.code,{children:"

03. Compound Components/Elaboration