(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[97195],{74270:(e,s,r)=>{"use strict";r.d(s,{A:()=>n});let n=(0,r(2651).A)("CircleHelp",[["circle",{cx:"12",cy:"12",r:"10",key:"1mglay"}],["path",{d:"M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3",key:"1u773s"}],["path",{d:"M12 17h.01",key:"p32p05"}]])},55518:(e,s,r)=>{"use strict";r.d(s,{A:()=>n});let n=(0,r(2651).A)("X",[["path",{d:"M18 6 6 18",key:"1bl5f8"}],["path",{d:"m6 6 12 12",key:"d8bk6v"}]])},37680:(e,s,r)=>{"use strict";r.d(s,{A:()=>n.default});var n=r(99e3)},97195:(e,s,r)=>{"use strict";r.r(s),r.d(s,{default:()=>F});var n=r(87687),t=r(52751),i=r(31928),a=r(74270),l=r(55518),o=r(68852),c=r(21347),d=r(64075),p=r(99800),u=r(38007),m=r(4230),h=r(37680);let g=(0,i.I)("section")({name:"Wrapper",class:"wisrit8",propsAsIs:!1}),j=(0,i.I)("div")({name:"Grid",class:"gijc6j0",propsAsIs:!1}),v=(0,i.I)(function(e){return(0,n.jsxs)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"70",height:"29",fill:"none",viewBox:"0 0 70 29",...e,children:[(0,n.jsx)("path",{fill:"var(--syntax-bg)",d:"M35 1C25.5 1 20.615 27 1 27v2h68v-2C48.077 27 44.5 1 35 1z"}),(0,n.jsx)("path",{stroke:"var(--color-gray-300)",strokeLinecap:"round",strokeWidth:"2",d:"M1 27C20.615 27 25.5 1 35 1s13.077 26 34 26"})]})})({name:"Tip",class:"t1bolryu",propsAsIs:!0}),x=(0,i.I)("div")({name:"Column",class:"c1r1buo0",propsAsIs:!1}),y=(0,i.I)(x)({name:"MobileColumn",class:"mrpt25n",propsAsIs:!0}),b=(0,i.I)(x)({name:"DesktopColumn",class:"d1aj769",propsAsIs:!0}),I=(0,i.I)("div")({name:"Divider",class:"d18mkrov",propsAsIs:!1}),k=function(e){let{handleDismiss:s,...r}=e;return t.useEffect(()=>{function e(e){"Escape"===e.code&&s()}return window.addEventListener("keydown",e),()=>{window.removeEventListener("keydown",e)}},[s]),(0,n.jsxs)(g,{...r,children:[(0,n.jsx)(v,{}),(0,n.jsxs)(j,{children:[(0,n.jsxs)(y,{style:{"--delay":"350ms"},children:[(0,n.jsx)(h.A,{includeBorder:!1,width:325,height:325,wrapperStyle:{margin:"18px auto"},src:"/images/interactive-guide-to-grid/assignable-children-pointer.mp4"}),(0,n.jsx)("p",{children:"Tap a single cell to place the child within. Press and drag to span the child across multiple rows and/or columns."})]}),(0,n.jsxs)(b,{style:{"--delay":"350ms"},children:[(0,n.jsx)("h4",{children:"With a pointer device"}),(0,n.jsx)(h.A,{includeBorder:!1,width:325,height:325,wrapperStyle:{margin:"18px auto"},src:"/images/interactive-guide-to-grid/assignable-children-pointer.mp4"}),(0,n.jsx)("p",{children:"Click a single cell to place the child within. Click and drag to span the child across multiple rows and/or columns."})]}),(0,n.jsx)(I,{style:{"--delay":"380ms"}}),(0,n.jsxs)(b,{style:{"--delay":"420ms"},children:[(0,n.jsx)("h4",{children:"With keyboard"}),(0,n.jsx)(h.A,{includeBorder:!1,width:325,height:325,wrapperStyle:{margin:"18px auto"},src:"/images/interactive-guide-to-grid/assignable-children-keyboard.mp4"}),(0,n.jsxs)("p",{children:["Tab to focus the first cell, and then use arrow keys to move around. Press ",(0,n.jsx)("kbd",{children:"Enter"})," to enter “placement mode”. Press ",(0,n.jsx)("kbd",{children:"Enter"})," again to lock in the selected placement."]})]})]})]})};r(79214);var w=r(34250);let A=(e,s,r)=>"button-".concat(e.replace(/:/g,""),"-").concat(s,"-").concat(r),f=(0,i.I)(d.A)({name:"OuterWrapper",class:"o17lus0i",propsAsIs:!0}),C=(0,i.I)("header")({name:"Header",class:"hqd1ik0",propsAsIs:!1}),q=(0,i.I)("button")({name:"Button",class:"b1qnbhvb",propsAsIs:!1}),D=(0,i.I)(q)({name:"SquareButton",class:"scx171y",propsAsIs:!0}),E=(0,i.I)(q)({name:"LongButton",class:"l1yemk7c",propsAsIs:!0}),S=(0,i.I)("div")({name:"Row",class:"rbgsiuj",propsAsIs:!1}),W=(0,i.I)("div")({name:"DemoWrapper",class:"dk3un81",propsAsIs:!1}),L=(0,i.I)("div")({name:"Grid",class:"g6jq72a",propsAsIs:!1}),R=(0,i.I)("div")({name:"ChildLayer",class:"ch7ifsm",propsAsIs:!1}),P=(0,i.I)(m.A)({name:"GridChild",class:"g3tjl5r",propsAsIs:!0}),B=(0,i.I)("div")({name:"InteractiveLayer",class:"i1cjixrm",propsAsIs:!1}),M=(0,i.I)("div")({name:"InteractiveWrapper",class:"i30rx4p",propsAsIs:!1}),N=(0,i.I)(L)({name:"InteractiveGrid",class:"i1jpd98j",propsAsIs:!0}),G=(0,i.I)("button")({name:"GridButton",class:"g1x6i8n8",propsAsIs:!1}),T=(0,i.I)(L)({name:"ChildWrapper",class:"c3mbpr",propsAsIs:!0}),z=(0,i.I)(w.y6)({name:"CodeWrapper",class:"cxqv44g",propsAsIs:!0}),F=function(e){let{codeOutput:s}=e,r=t.useId(),[i,d]=t.useState(null),[m,h]=t.useState(null),[g,j]=t.useState(!1),[v,x]=t.useState(!1),y=t.useRef(null),b=t.useRef(i),I=t.useRef(m);b.current=i,I.current=m;let[w,{stop:q}]=(0,c.A)("/sounds/switch-on.wav",{volume:.1}),[L]=(0,c.A)("/sounds/plunger-immediate.mp3",{volume:.2}),[F]=(0,c.A)("/sounds/pop.mp3",{volume:.4}),[_]=(0,c.A)("/sounds/menu-open.mp3",{volume:.6}),[H]=(0,c.A)("/sounds/empty-trash.wav",{volume:.4}),K=function(){let{gridRow:e=null,gridCol:s=null}=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},r=null!==e&&null!==s?"grid-row: ".concat(e,";\n  grid-column: ").concat(s,";"):"\n";return".parent {\n  display: grid;\n  grid-template-columns:\n    repeat(".concat(4,", 1fr);\n  grid-template-rows:\n    repeat(").concat(4,", 1fr);\n}\n\n.child {\n  ").concat(r,"\n}")}({gridRow:i,gridCol:m}),O=null!==i&&null!==m,Q=t.useCallback(()=>{j(!1),F(),window.removeEventListener("pointerup",Q)},[F]),U=t.useCallback(function(e,s){if(!g||!y.current)return;let r=[y.current.rowNum,e].sort(),n=[y.current.colNum,s].sort();r[0]===r[1]&&r.pop(),n[0]===n[1]&&n.pop(),r[1]&&(r[1]+=1),n[1]&&(n[1]+=1);let t=r.join(" / "),i=n.join(" / "),a=!1;t!==b.current&&(d(t),a=!0),i!==I.current&&(h(i),a=!0),a&&(q(),w())},[g,w,q]),V=t.useCallback((0,o.nF)(e=>{let{clientX:s,clientY:r}=e,n=document.elementFromPoint(s,r),t=n.getAttribute("data-row"),i=n.getAttribute("data-col");U(Number(t),Number(i))},50),[U]),X=t.useCallback(()=>{x(!1)},[]);return(0,n.jsxs)(f,{as:"section",children:[(0,n.jsxs)(C,{children:[(0,n.jsx)(u.default,{as:D,style:{opacity:v?.5:void 0}}),(0,n.jsx)(D,{"aria-label":"View instructions",onClick:()=>{v||_(),x(!v)},children:(0,n.jsx)(a.A,{size:24})}),(0,n.jsxs)(E,{style:{opacity:v?.5:void 0},onClick:()=>{d(null),h(null),H()},children:[(0,n.jsx)(l.A,{}),"Reset"]})]}),(0,n.jsxs)(S,{style:{opacity:v?0:1},children:[(0,n.jsx)(z,{children:(0,n.jsx)(p.A,{code:K,lang:"css",children:s})}),(0,n.jsxs)(W,{children:[(0,n.jsx)(B,{children:(0,n.jsx)(M,{children:(0,n.jsx)(N,{children:(0,o.y1)(1,5).map(e=>(0,o.y1)(1,5).map(s=>{let t=!v&&1===e&&1===s;return(0,n.jsx)(G,{id:A(r,e,s),"data-row":e,"data-col":s,tabIndex:t?void 0:"-1",style:{cursor:g?"crosshair":"pointer"},onPointerDown:()=>{d(String(e)),h(String(s)),j(!0),y.current={rowNum:e,colNum:s},window.addEventListener("pointerup",Q),L()},onTouchMove:e=>{V(e.touches[0])},onMouseEnter:()=>{g&&U(e,s)},onKeyDown:n=>(function(e,s,n){if("Enter"===e.code){let e=!g;e?(y.current={rowNum:s,colNum:n},L(),d(s),h(n)):(y.current=null,F()),j(e);return}let t=s,i=n;switch(e.code){case"ArrowLeft":e.preventDefault(),(i-=1)<1&&(t-=1,i=4),t<1&&(t=4);break;case"ArrowRight":e.preventDefault(),(i+=1)>4&&(t+=1,i=1),t>4&&(t=1);break;case"ArrowUp":e.preventDefault(),(t-=1)<1&&(t=4);break;case"ArrowDown":e.preventDefault(),(t+=1)>4&&(t=1)}let a=A(r,t,i);document.querySelector("#"+a).focus(),g&&U(t,i)})(n,e,s)},"".concat(e,"-").concat(s))}))})})}),(0,n.jsx)(R,{children:(0,n.jsx)(T,{children:O&&(0,n.jsx)(P,{layout:!1,style:{gridRow:i,gridColumn:m,opacity:g?.5:.9}})})})]})]}),v&&(0,n.jsx)(k,{style:{gridArea:"main-content"},handleDismiss:X})]})};r(85173)},34250:(e,s,r)=>{"use strict";r.d(s,{I4:()=>l,Qc:()=>i,sD:()=>o,y6:()=>a});var n=r(31928),t=r(59341);let i=(0,n.I)("div")({name:"GridStructure",class:"g1nrkimi",propsAsIs:!1}),a=(0,n.I)("div")({name:"BaseCodeWrapper",class:"bu47715",propsAsIs:!1}),l=(0,n.I)(t.P.div)({name:"LabeledColumn",class:"ljraie7",propsAsIs:!0}),o=(0,n.I)(t.P.div)({name:"LabeledRow",class:"l12tgnsh",propsAsIs:!0});r(97406)},4230:(e,s,r)=>{"use strict";r.d(s,{A:()=>o});var n=r(87687),t=r(31928),i=r(59341);let a=(0,t.I)(i.P.div)({name:"Wrapper",class:"wg9umku",propsAsIs:!0}),l=(0,t.I)(i.P.div)({name:"InnerWrapper",class:"iizukyq",propsAsIs:!0}),o=function(e){let{ref:s,primary:r,layout:t=!0,style:o={},wrapperStyle:c={},textWrapperStyle:d={},children:p,...u}=e;return(0,n.jsx)(a,{ref:s,layout:t,initial:{borderRadius:4},style:{background:r?"hsl(50deg 100% 90%)":"var(--color-gray-500)",...o},...u,children:(0,n.jsx)(l,{layout:t,initial:{borderRadius:2},style:{color:r?"black":"var(--color-text)",background:r?"hsl(50deg 100% 50%)":"var(--color-gray-100)",...c},children:(0,n.jsx)(i.P.span,{layout:t,style:{display:"inline-block",...d},children:p})})})};r(49452)},85173:e=>{e.exports={o17lus0i:"o17lus0i",hqd1ik0:"hqd1ik0",b1qnbhvb:"b1qnbhvb",scx171y:"scx171y",l1yemk7c:"l1yemk7c",rbgsiuj:"rbgsiuj",dk3un81:"dk3un81",g6jq72a:"g6jq72a",ch7ifsm:"ch7ifsm",i1cjixrm:"i1cjixrm",i30rx4p:"i30rx4p",i1jpd98j:"i1jpd98j",g1x6i8n8:"g1x6i8n8",c3mbpr:"c3mbpr",cxqv44g:"cxqv44g"}},79214:e=>{e.exports={wisrit8:"wisrit8",fadeIn:"fadeIn",gijc6j0:"gijc6j0",t1bolryu:"t1bolryu","bulge-t1bolryu":"bulge-t1bolryu",c1r1buo0:"c1r1buo0","contentRise-c1r1buo0":"contentRise-c1r1buo0",mrpt25n:"mrpt25n",d1aj769:"d1aj769",d18mkrov:"d18mkrov"}},97406:e=>{e.exports={g1nrkimi:"g1nrkimi",bu47715:"bu47715",ljraie7:"ljraie7",l12tgnsh:"l12tgnsh"}},49452:e=>{e.exports={wg9umku:"wg9umku",fadeFromTransparent:"fadeFromTransparent",iizukyq:"iizukyq"}}}]);
//# sourceMappingURL=97195.6b08a18c4fe1d441.js.map