(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[97195],{74270:(e,s,r)=>{"use strict";r.d(s,{A:()=>t});let t=(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:()=>t});let t=(0,r(2651).A)("X",[["path",{d:"M18 6 6 18",key:"1bl5f8"}],["path",{d:"m6 6 12 12",key:"d8bk6v"}]])},99800:(e,s,r)=>{"use strict";r.d(s,{A:()=>i,M:()=>a});var t=r(87687),n=r(52751);let a=n.createContext({code:"",lang:""}),i=n.memo(function(e){let{code:s,lang:r,children:n}=e;return(0,t.jsx)(a.Provider,{value:{code:s,lang:r},children:n})})},64075:(e,s,r)=>{"use strict";r.d(s,{A:()=>a});var t=r(31928),n=r(42591);let a=(0,t.I)(n.uS)({name:"Space",class:"s1hfctpl",propsAsIs:!0});r(6743)},37680:(e,s,r)=>{"use strict";r.d(s,{A:()=>t.default});var t=r(99e3)},97195:(e,s,r)=>{"use strict";r.r(s),r.d(s,{default:()=>F});var t=r(87687),n=r(52751),a=r(31928),i=r(74270),l=r(55518),o=r(68852),c=r(21347),d=r(64075),u=r(99800),p=r(38007),m=r(4230),h=r(37680);let g=(0,a.I)("section")({name:"Wrapper",class:"wisrit8",propsAsIs:!1}),v=(0,a.I)("div")({name:"Grid",class:"gijc6j0",propsAsIs:!1}),j=(0,a.I)(function(e){return(0,t.jsxs)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"70",height:"29",fill:"none",viewBox:"0 0 70 29",...e,children:[(0,t.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,t.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,a.I)("div")({name:"Column",class:"c1r1buo0",propsAsIs:!1}),y=(0,a.I)(x)({name:"MobileColumn",class:"mrpt25n",propsAsIs:!0}),I=(0,a.I)(x)({name:"DesktopColumn",class:"d1aj769",propsAsIs:!0}),b=(0,a.I)("div")({name:"Divider",class:"d18mkrov",propsAsIs:!1}),k=function(e){let{handleDismiss:s,...r}=e;return n.useEffect(()=>{function e(e){"Escape"===e.code&&s()}return window.addEventListener("keydown",e),()=>{window.removeEventListener("keydown",e)}},[s]),(0,t.jsxs)(g,{...r,children:[(0,t.jsx)(j,{}),(0,t.jsxs)(v,{children:[(0,t.jsxs)(y,{style:{"--delay":"350ms"},children:[(0,t.jsx)(h.A,{includeBorder:!1,width:325,height:325,wrapperStyle:{margin:"18px auto"},src:"/images/interactive-guide-to-grid/assignable-children-pointer.mp4"}),(0,t.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,t.jsxs)(I,{style:{"--delay":"350ms"},children:[(0,t.jsx)("h4",{children:"With a pointer device"}),(0,t.jsx)(h.A,{includeBorder:!1,width:325,height:325,wrapperStyle:{margin:"18px auto"},src:"/images/interactive-guide-to-grid/assignable-children-pointer.mp4"}),(0,t.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,t.jsx)(b,{style:{"--delay":"380ms"}}),(0,t.jsxs)(I,{style:{"--delay":"420ms"},children:[(0,t.jsx)("h4",{children:"With keyboard"}),(0,t.jsx)(h.A,{includeBorder:!1,width:325,height:325,wrapperStyle:{margin:"18px auto"},src:"/images/interactive-guide-to-grid/assignable-children-keyboard.mp4"}),(0,t.jsxs)("p",{children:["Tab to focus the first cell, and then use arrow keys to move around. Press ",(0,t.jsx)("kbd",{children:"Enter"})," to enter “placement mode”. Press ",(0,t.jsx)("kbd",{children:"Enter"})," again to lock in the selected placement."]})]})]})]})};r(79214);var A=r(34250);let w=(e,s,r)=>"button-".concat(e.replace(/:/g,""),"-").concat(s,"-").concat(r),f=(0,a.I)(d.A)({name:"OuterWrapper",class:"o17lus0i",propsAsIs:!0}),C=(0,a.I)("header")({name:"Header",class:"hqd1ik0",propsAsIs:!1}),q=(0,a.I)("button")({name:"Button",class:"b1qnbhvb",propsAsIs:!1}),S=(0,a.I)(q)({name:"SquareButton",class:"scx171y",propsAsIs:!0}),D=(0,a.I)(q)({name:"LongButton",class:"l1yemk7c",propsAsIs:!0}),E=(0,a.I)("div")({name:"Row",class:"rbgsiuj",propsAsIs:!1}),W=(0,a.I)("div")({name:"DemoWrapper",class:"dk3un81",propsAsIs:!1}),L=(0,a.I)("div")({name:"Grid",class:"g6jq72a",propsAsIs:!1}),P=(0,a.I)("div")({name:"ChildLayer",class:"ch7ifsm",propsAsIs:!1}),R=(0,a.I)(m.A)({name:"GridChild",class:"g3tjl5r",propsAsIs:!0}),B=(0,a.I)("div")({name:"InteractiveLayer",class:"i1cjixrm",propsAsIs:!1}),M=(0,a.I)("div")({name:"InteractiveWrapper",class:"i30rx4p",propsAsIs:!1}),N=(0,a.I)(L)({name:"InteractiveGrid",class:"i1jpd98j",propsAsIs:!0}),G=(0,a.I)("button")({name:"GridButton",class:"g1x6i8n8",propsAsIs:!1}),T=(0,a.I)(L)({name:"ChildWrapper",class:"c3mbpr",propsAsIs:!0}),z=(0,a.I)(A.y6)({name:"CodeWrapper",class:"cxqv44g",propsAsIs:!0}),F=function(e){let{codeOutput:s}=e,r=n.useId(),[a,d]=n.useState(null),[m,h]=n.useState(null),[g,v]=n.useState(!1),[j,x]=n.useState(!1),y=n.useRef(null),I=n.useRef(a),b=n.useRef(m);I.current=a,b.current=m;let[A,{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:a,gridCol:m}),O=null!==a&&null!==m,Q=n.useCallback(()=>{v(!1),F(),window.removeEventListener("pointerup",Q)},[F]),U=n.useCallback(function(e,s){if(!g||!y.current)return;let r=[y.current.rowNum,e].sort(),t=[y.current.colNum,s].sort();r[0]===r[1]&&r.pop(),t[0]===t[1]&&t.pop(),r[1]&&(r[1]+=1),t[1]&&(t[1]+=1);let n=r.join(" / "),a=t.join(" / "),i=!1;n!==I.current&&(d(n),i=!0),a!==b.current&&(h(a),i=!0),i&&(q(),A())},[g,A,q]),V=n.useCallback((0,o.nF)(e=>{let{clientX:s,clientY:r}=e,t=document.elementFromPoint(s,r),n=t.getAttribute("data-row"),a=t.getAttribute("data-col");U(Number(n),Number(a))},50),[U]),X=n.useCallback(()=>{x(!1)},[]);return(0,t.jsxs)(f,{as:"section",children:[(0,t.jsxs)(C,{children:[(0,t.jsx)(p.default,{as:S,style:{opacity:j?.5:void 0}}),(0,t.jsx)(S,{"aria-label":"View instructions",onClick:()=>{j||_(),x(!j)},children:(0,t.jsx)(i.A,{size:24})}),(0,t.jsxs)(D,{style:{opacity:j?.5:void 0},onClick:()=>{d(null),h(null),H()},children:[(0,t.jsx)(l.A,{}),"Reset"]})]}),(0,t.jsxs)(E,{style:{opacity:j?0:1},children:[(0,t.jsx)(z,{children:(0,t.jsx)(u.A,{code:K,lang:"css",children:s})}),(0,t.jsxs)(W,{children:[(0,t.jsx)(B,{children:(0,t.jsx)(M,{children:(0,t.jsx)(N,{children:(0,o.y1)(1,5).map(e=>(0,o.y1)(1,5).map(s=>{let n=!j&&1===e&&1===s;return(0,t.jsx)(G,{id:w(r,e,s),"data-row":e,"data-col":s,tabIndex:n?void 0:"-1",style:{cursor:g?"crosshair":"pointer"},onPointerDown:()=>{d(String(e)),h(String(s)),v(!0),y.current={rowNum:e,colNum:s},window.addEventListener("pointerup",Q),L()},onTouchMove:e=>{V(e.touches[0])},onMouseEnter:()=>{g&&U(e,s)},onKeyDown:t=>(function(e,s,t){if("Enter"===e.code){let e=!g;e?(y.current={rowNum:s,colNum:t},L(),d(s),h(t)):(y.current=null,F()),v(e);return}let n=s,a=t;switch(e.code){case"ArrowLeft":e.preventDefault(),(a-=1)<1&&(n-=1,a=4),n<1&&(n=4);break;case"ArrowRight":e.preventDefault(),(a+=1)>4&&(n+=1,a=1),n>4&&(n=1);break;case"ArrowUp":e.preventDefault(),(n-=1)<1&&(n=4);break;case"ArrowDown":e.preventDefault(),(n+=1)>4&&(n=1)}let i=w(r,n,a);document.querySelector("#"+i).focus(),g&&U(n,a)})(t,e,s)},"".concat(e,"-").concat(s))}))})})}),(0,t.jsx)(P,{children:(0,t.jsx)(T,{children:O&&(0,t.jsx)(R,{layout:!1,style:{gridRow:a,gridColumn:m,opacity:g?.5:.9}})})})]})]}),j&&(0,t.jsx)(k,{style:{gridArea:"main-content"},handleDismiss:X})]})};r(85173)},34250:(e,s,r)=>{"use strict";r.d(s,{I4:()=>l,Qc:()=>a,sD:()=>o,y6:()=>i});var t=r(31928),n=r(59341);let a=(0,t.I)("div")({name:"GridStructure",class:"g1nrkimi",propsAsIs:!1}),i=(0,t.I)("div")({name:"BaseCodeWrapper",class:"bu47715",propsAsIs:!1}),l=(0,t.I)(n.P.div)({name:"LabeledColumn",class:"ljraie7",propsAsIs:!0}),o=(0,t.I)(n.P.div)({name:"LabeledRow",class:"l12tgnsh",propsAsIs:!0});r(97406)},4230:(e,s,r)=>{"use strict";r.d(s,{A:()=>o});var t=r(87687),n=r(31928),a=r(59341);let i=(0,n.I)(a.P.div)({name:"Wrapper",class:"wg9umku",propsAsIs:!0}),l=(0,n.I)(a.P.div)({name:"InnerWrapper",class:"iizukyq",propsAsIs:!0}),o=function(e){let{ref:s,primary:r,layout:n=!0,style:o={},wrapperStyle:c={},textWrapperStyle:d={},children:u,...p}=e;return(0,t.jsx)(i,{ref:s,layout:n,initial:{borderRadius:4},style:{background:r?"hsl(50deg 100% 90%)":"var(--color-gray-500)",...o},...p,children:(0,t.jsx)(l,{layout:n,initial:{borderRadius:2},style:{color:r?"black":"var(--color-text)",background:r?"hsl(50deg 100% 50%)":"var(--color-gray-100)",...c},children:(0,t.jsx)(a.P.span,{layout:n,style:{display:"inline-block",...d},children:u})})})};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.706e8a4a8f5ce43e.js.map