(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[72243],{53645:(s,e,r)=>{"use strict";r.d(e,{A:()=>a});let a=(0,r(2651).A)("ChevronLeft",[["path",{d:"m15 18-6-6 6-6",key:"1wnfg3"}]])},99150:(s,e,r)=>{"use strict";r.d(e,{A:()=>a});let a=(0,r(2651).A)("ChevronRight",[["path",{d:"m9 18 6-6-6-6",key:"mthhwq"}]])},37501:(s,e,r)=>{"use strict";r.d(e,{A:()=>a});let a=(0,r(2651).A)("ChevronUp",[["path",{d:"m18 15-6-6-6 6",key:"153udz"}]])},64075:(s,e,r)=>{"use strict";r.d(e,{A:()=>l});var a=r(31928),i=r(42591);let l=(0,a.I)(i.uS)({name:"Space",class:"s1hfctpl",propsAsIs:!0});r(6743)},34250:(s,e,r)=>{"use strict";r.d(e,{I4:()=>o,Qc:()=>l,sD:()=>c,y6:()=>n});var a=r(31928),i=r(59341);let l=(0,a.I)("div")({name:"GridStructure",class:"g1nrkimi",propsAsIs:!1}),n=(0,a.I)("div")({name:"BaseCodeWrapper",class:"bu47715",propsAsIs:!1}),o=(0,a.I)(i.P.div)({name:"LabeledColumn",class:"ljraie7",propsAsIs:!0}),c=(0,a.I)(i.P.div)({name:"LabeledRow",class:"l12tgnsh",propsAsIs:!0});r(97406)},72243:(s,e,r)=>{"use strict";r.r(e),r.d(e,{default:()=>X});var a=r(87687),i=r(52751),l=r(31928),n=r(68852),o=r(64075),c=r(51311),t=r(4230),p=r(37501),d=r(88700),h=r(53645),m=r(99150),I=r(59341);function u(s){let{distance:e,animateTransitions:r,...i}=s;return(0,a.jsx)(v,{as:r?I.P.div:"div",style:{width:r?void 0:e,height:20},animate:{width:r?e:void 0},...i,children:(0,a.jsx)(x,{children:(0,a.jsxs)(w,{children:[(0,a.jsx)(k,{size:20}),(0,a.jsx)(z,{size:20}),(0,a.jsx)(C,{})]})})})}function g(s){let{distance:e,animateTransitions:r,...i}=s;return(0,a.jsx)(v,{as:r?I.P.div:"div",style:{width:20,height:r?void 0:e},animate:{height:r?e:void 0},...i,children:(0,a.jsx)(x,{children:(0,a.jsxs)(j,{children:[(0,a.jsx)(b,{size:20}),(0,a.jsx)(y,{size:20}),(0,a.jsx)(q,{})]})})})}let v=(0,l.I)("div")({name:"Wrapper",class:"w17wzim9",propsAsIs:!1}),x=(0,l.I)("div")({name:"ArrowWrapper",class:"ahosie7",propsAsIs:!1}),A=(0,l.I)("div")({name:"ArrowElem",class:"as6eggc",propsAsIs:!1}),j=(0,l.I)(A)({name:"VerticalArrowElem",class:"v19pviis",propsAsIs:!0}),w=(0,l.I)(A)({name:"HorizontalArrowElem",class:"h14hl7x3",propsAsIs:!0}),b=(0,l.I)(p.A)({name:"Up",class:"uo1bewq",propsAsIs:!0}),y=(0,l.I)(d.A)({name:"Down",class:"diiqul1",propsAsIs:!0}),k=(0,l.I)(h.A)({name:"Left",class:"l32b2cq",propsAsIs:!0}),z=(0,l.I)(m.A)({name:"Right",class:"rf5s2f6",propsAsIs:!0}),f=(0,l.I)("div")({name:"Shaft",class:"ss0yqmt",propsAsIs:!1}),q=(0,l.I)(f)({name:"VerticalShaft",class:"vr4z59i",propsAsIs:!0}),C=(0,l.I)(f)({name:"HorizontalShaft",class:"h19zxr4f",propsAsIs:!0}),L=function(s){let{distance:e,animateTransitions:r,axis:i,...l}=s;return(0,a.jsx)("horizontal"===i?u:g,{distance:e,animateTransitions:r,...l})};r(42491);var R=r(34250);let S=(0,l.I)(o.A)({name:"OuterWrapper",class:"ozgqcj5",propsAsIs:!0}),T=(0,l.I)("div")({name:"Row",class:"rvobocp",propsAsIs:!1}),E=(0,l.I)("div")({name:"DemoWrapper",class:"dnr59ln",propsAsIs:!1}),W=(0,l.I)("div")({name:"Grid",class:"ggce5b9",propsAsIs:!1}),G=(0,l.I)("div")({name:"GridLayer",class:"gm5pt56",propsAsIs:!1}),P=(0,l.I)("div")({name:"GridCols",class:"g1odws70",propsAsIs:!1}),_=(0,l.I)("div")({name:"GridCol",class:"gsuturn",propsAsIs:!1}),D=(0,l.I)("div")({name:"ColLabel",class:"c31btwp",propsAsIs:!1}),B=(0,l.I)(P)({name:"GridRows",class:"g52dmza",propsAsIs:!0}),F=(0,l.I)("div")({name:"GridRow",class:"g6wdbj4",propsAsIs:!1}),H=(0,l.I)("div")({name:"RowLabel",class:"rsych3y",propsAsIs:!1}),N=(0,l.I)("div")({name:"ChildLayer",class:"cudo9om",propsAsIs:!1}),U=(0,l.I)(W)({name:"ChildWrapper",class:"c1gbwz3d",propsAsIs:!0}),V=(0,l.I)(t.A)({name:"GridChild",class:"gmtd6nr",propsAsIs:!0}),M=(0,l.I)("div")({name:"TopLabel",class:"t1kh1upm",propsAsIs:!1}),O=(0,l.I)("div")({name:"TopLabelText",class:"t152kyg2",propsAsIs:!1}),Q=(0,l.I)("div")({name:"SideLabel",class:"s1hq6k47",propsAsIs:!1}),J=(0,l.I)("div")({name:"SideLabelText",class:"s9k28gx",propsAsIs:!1}),K=(0,l.I)(R.y6)({name:"CodeWrapper",class:"cirwc5p",propsAsIs:!0}),X=function(){let[s]=i.useState("2 / 4"),[e]=i.useState("1 / 4");return(0,a.jsx)(S,{as:"section",children:(0,a.jsxs)(T,{children:[(0,a.jsx)(K,{children:(0,a.jsx)(c.default,{omitCopyButton:!0,lockedToColorMode:"dark",code:".child {\n  grid-row: 2 / 4;\n  grid-column: 1 / 4;\n}",lang:"css"})}),(0,a.jsxs)(E,{children:[(0,a.jsxs)(G,{children:[(0,a.jsx)(B,{children:(0,n.y1)(1,5).map(s=>(0,a.jsx)(F,{children:(0,a.jsx)(H,{children:s})},s))}),(0,a.jsx)(P,{children:(0,n.y1)(1,6).map(s=>(0,a.jsx)(_,{children:(0,a.jsx)(D,{style:{left:1===s?1.5:""},children:s})},s))})]}),(0,a.jsx)(N,{children:(0,a.jsx)(U,{children:null!==s&&null!==e&&(0,a.jsxs)(V,{layout:!1,style:{gridRow:s,gridColumn:e,opacity:.9},children:[(0,a.jsxs)(M,{children:[(0,a.jsx)(L,{distance:208,axis:"horizontal",animateTransitions:!1}),(0,a.jsx)(O,{children:"Column 1 to 4"})]}),(0,a.jsxs)(Q,{children:[(0,a.jsx)(L,{distance:132,axis:"vertical",animateTransitions:!1}),(0,a.jsx)(J,{children:"Row 2 to 4"})]})]})})})]})]})})};r(10150)},4230:(s,e,r)=>{"use strict";r.d(e,{A:()=>c});var a=r(87687),i=r(31928),l=r(59341);let n=(0,i.I)(l.P.div)({name:"Wrapper",class:"wg9umku",propsAsIs:!0}),o=(0,i.I)(l.P.div)({name:"InnerWrapper",class:"iizukyq",propsAsIs:!0}),c=function(s){let{ref:e,primary:r,layout:i=!0,style:c={},wrapperStyle:t={},textWrapperStyle:p={},children:d,...h}=s;return(0,a.jsx)(n,{ref:e,layout:i,initial:{borderRadius:4},style:{background:r?"hsl(50deg 100% 90%)":"var(--color-gray-500)",...c},...h,children:(0,a.jsx)(o,{layout:i,initial:{borderRadius:2},style:{color:r?"black":"var(--color-text)",background:r?"hsl(50deg 100% 50%)":"var(--color-gray-100)",...t},children:(0,a.jsx)(l.P.span,{layout:i,style:{display:"inline-block",...p},children:d})})})};r(49452)},42491:s=>{s.exports={w17wzim9:"w17wzim9",ahosie7:"ahosie7",as6eggc:"as6eggc",v19pviis:"v19pviis","verticalEnter-v19pviisas6eggc":"verticalEnter-v19pviisas6eggc",h14hl7x3:"h14hl7x3","horizontalEnter-h14hl7x3as6eggc":"horizontalEnter-h14hl7x3as6eggc",uo1bewq:"uo1bewq",diiqul1:"diiqul1",l32b2cq:"l32b2cq",rf5s2f6:"rf5s2f6",ss0yqmt:"ss0yqmt",vr4z59i:"vr4z59i",h19zxr4f:"h19zxr4f"}},97406:s=>{s.exports={g1nrkimi:"g1nrkimi",bu47715:"bu47715",ljraie7:"ljraie7",l12tgnsh:"l12tgnsh"}},10150:s=>{s.exports={ozgqcj5:"ozgqcj5",rvobocp:"rvobocp",dnr59ln:"dnr59ln",ggce5b9:"ggce5b9",gm5pt56:"gm5pt56",g1odws70:"g1odws70",gsuturn:"gsuturn",c31btwp:"c31btwp",g52dmza:"g52dmza",g6wdbj4:"g6wdbj4",rsych3y:"rsych3y",cudo9om:"cudo9om",c1gbwz3d:"c1gbwz3d",t1kh1upm:"t1kh1upm",t152kyg2:"t152kyg2",s1hq6k47:"s1hq6k47",s9k28gx:"s9k28gx",cirwc5p:"cirwc5p"}},49452:s=>{s.exports={wg9umku:"wg9umku",fadeFromTransparent:"fadeFromTransparent",iizukyq:"iizukyq"}}}]);
//# sourceMappingURL=72243.bf1461ff7869cb36.js.map