(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[61479],{99800:(e,t,s)=>{"use strict";s.d(t,{A:()=>l,M:()=>i});var n=s(87687),a=s(52751);let i=a.createContext({code:"",lang:""}),l=a.memo(function(e){let{code:t,lang:s,children:a}=e;return(0,n.jsx)(i.Provider,{value:{code:t,lang:s},children:a})})},9006:(e,t,s)=>{"use strict";s.d(t,{A:()=>o});var n=s(87687),a=s(52751),i=s(31928),l=s(19901),r=s(44386);let c=(0,i.I)("label")({name:"Wrapper",class:"wfao701",propsAsIs:!1}),o=function(e){let{active:t,handleToggle:s,children:i,...o}=e,p=a.useId();return(0,n.jsxs)(c,{htmlFor:p,...o,children:[(0,n.jsx)(r.A,{id:p,active:t,handleToggle:s,handleFocusColor:null,handleColor:t?"var(--color-text)":"var(--color-gray-400)"}),(0,n.jsx)(l.A,{size:16}),i]})};s(41133)},31368:(e,t,s)=>{"use strict";s.r(t),s.d(t,{default:()=>P});var n=s(87687),a=s(52751),i=s(31928),l=s(30251),r=s(59341),c=s(20120),o=s(71597),p=s(99800),d=s(9006);let g={initial:".container {\n  display: grid;\n  place-content: center;\n}\n\n.element {\n  grid-row: 1;\n  grid-column: 1;\n}","different-sizes":".container {\n  display: grid;\n  place-content: center;\n  place-items: center;\n}\n\n.element {\n  grid-row: 1;\n  grid-column: 1;\n}","toggleable-place-items":".container {\n  display: grid;\n  place-content: center;\n}\n\n.element {\n  grid-row: 1;\n  grid-column: 1;\n}"},m=[{src:"photo-stack-rainbow.jpg",alt:"A small toy rainbow sits on a table",width:165,height:165,transform:{rotate:-3}},{src:"photo-stack-droplets-rect.jpg",alt:"A bunch of iridescent water droplets on black",width:160,height:200,transform:{rotate:2,y:-3}},{src:"photo-stack-city-rect.jpg",alt:"A pink city skyline",width:185,height:150,transform:{rotate:-4,y:-1}},{src:"photo-stack-peace-rect.jpg",alt:"A neon peace sign",width:150,height:160,transform:{rotate:.5,y:2}}];function h(e){let{isVisible:t,variant:s,src:a,alt:i,width:r,height:c,transform:o}=e,p=(0,l.zh)({width:"initial"===s?150:r,height:"initial"===s?150:c,transform:t?"rotate(".concat("initial"===s?o.rotate:0,"deg) translateY(").concat("initial"===s&&o.y||0,"px)"):"rotate(0deg) translateY(10px)",config:{tension:200,friction:50}});return(0,n.jsxs)(w,{style:{...p,opacity:t?1:0},children:[(0,n.jsx)(y,{src:"/images/center-a-div/".concat(a),alt:i}),(0,n.jsx)(A,{}),(0,n.jsx)(b,{children:".element"})]})}function u(e){let{src:t,alt:s,width:a,height:i}=e;return(0,n.jsxs)(w,{as:r.P.div,layout:"position",style:{width:a,height:i},children:[(0,n.jsx)(y,{src:"/images/center-a-div/".concat(t),alt:s}),(0,n.jsx)(A,{}),(0,n.jsx)(b,{children:".element"})]})}function j(e){let{isRevealed:t,appliedElements:s}=e,a=s.reduce((e,t)=>t.height>e?t.height:e,0),i=s.reduce((e,t)=>t.width>e?t.width:e,0);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(q,{animate:{height:a?a+6:"100%"},style:{opacity:t&&s.length?1:0}}),(0,n.jsx)(G,{animate:{width:i?i+6:"100%"},style:{opacity:t&&s.length?1:0}})]})}let f=(0,i.I)("div")({name:"Row",class:"r39r0pu",propsAsIs:!1}),x=(0,i.I)("div")({name:"Column",class:"cjpnvew",propsAsIs:!1}),I=(0,i.I)(x)({name:"DemoColumn",class:"d1qjht29",propsAsIs:!0}),v=(0,i.I)(o.A)({name:"Container",class:"c14mc128",propsAsIs:!0}),w=(0,i.I)(l.CS.div)({name:"Child",class:"c1sag85g",propsAsIs:!0}),y=(0,i.I)("img")({name:"Image",class:"i1dw9mw",propsAsIs:!1}),A=(0,i.I)("div")({name:"Gradient",class:"g1s5g333",propsAsIs:!1}),b=(0,i.I)("span")({name:"Label",class:"lpmspk3",propsAsIs:!1}),k=(0,i.I)("div")({name:"Footer",class:"fsfguy3",propsAsIs:!1}),C=(0,i.I)(r.P.div)({name:"GridTrack",class:"gdujfif",propsAsIs:!0}),q=(0,i.I)(C)({name:"GridRow",class:"g1tuqjtv",propsAsIs:!0}),G=(0,i.I)(C)({name:"GridColumn",class:"g1nboj2i",propsAsIs:!0}),P=function(e){let{variant:t,codeOutput:s}=e,[i,l]=a.useState("initial"!==t);return(0,n.jsx)(c.Ay,{initialValues:{numOfItems:"toggleable-place-items"===t?4:1,placeItems:"toggleable-place-items"===t?"start":"center"},controlPosition:"top",customGrid:{gridTemplateColumns:"1fr"},outputWrapper:null,controls:["toggleable-place-items"===t?(0,n.jsx)(c.Cd,{id:"placeItems",label:"place-items",options:[{label:"start (default)",value:"start"},{label:"center",value:"center"}]},"placeItems"):(0,n.jsx)(c.oP,{id:"numOfItems",label:"# of items",min:0,max:4},"numOfItems")],children:e=>{let a,{numOfItems:r,placeItems:c}=e,o="toggleable-place-items"===t?m.filter((e,t)=>t<r):m,w=(a=g[t],"toggleable-place-items"===t&&"center"===c&&(a=g["different-sizes"]),a);return(0,n.jsxs)("div",{children:[(0,n.jsxs)(f,{children:[(0,n.jsx)(x,{children:(0,n.jsx)(p.A,{lang:"css",code:w,children:s})}),(0,n.jsx)(I,{children:(0,n.jsxs)(v,{style:{placeItems:c},children:["initial"!==t&&(0,n.jsx)(j,{isRevealed:i,appliedElements:m.slice(0,r)}),o.map((e,s)=>(0,n.jsx)("toggleable-place-items"===t?u:h,{isVisible:s+1<=r,variant:t,...e},e.src))]})})]}),"initial"!==t&&(0,n.jsx)(k,{children:(0,n.jsx)(d.A,{active:i,handleToggle:()=>l(!i),children:"Reveal Grid"})})]})}})};s(43228)},41133:e=>{e.exports={wfao701:"wfao701"}},43228:e=>{e.exports={r39r0pu:"r39r0pu",cjpnvew:"cjpnvew",d1qjht29:"d1qjht29",c14mc128:"c14mc128",c1sag85g:"c1sag85g",i1dw9mw:"i1dw9mw",g1s5g333:"g1s5g333",lpmspk3:"lpmspk3",fsfguy3:"fsfguy3",gdujfif:"gdujfif",g1tuqjtv:"g1tuqjtv",g1nboj2i:"g1nboj2i"}}}]);
//# sourceMappingURL=61479.56bf5ef6a041056e.js.map