(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[46718],{90231:(s,e,r)=>{"use strict";r.d(e,{Z:()=>a});/**
 * @license lucide-react v0.460.0 - ISC
 *
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */let a=(0,r(43349).Z)("ChevronLeft",[["path",{d:"m15 18-6-6 6-6",key:"1wnfg3"}]])},84190:(s,e,r)=>{"use strict";r.d(e,{Z:()=>a});/**
 * @license lucide-react v0.460.0 - ISC
 *
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */let a=(0,r(43349).Z)("ChevronRight",[["path",{d:"m9 18 6-6-6-6",key:"mthhwq"}]])},18056:(s,e,r)=>{"use strict";r.d(e,{Z:()=>a});/**
 * @license lucide-react v0.460.0 - ISC
 *
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */let a=(0,r(43349).Z)("ChevronUp",[["path",{d:"m18 15-6-6-6 6",key:"153udz"}]])},25967:(s,e,r)=>{"use strict";r.d(e,{Z:()=>l});var a=r(64833),i=r(21364);let l=(0,a.z)(i.Wc)({name:"Space",class:"s1hfctpl",propsAsIs:!0});r(55245)},15594:(s,e,r)=>{"use strict";r.d(e,{G0:()=>c,c7:()=>n,oS:()=>o,oy:()=>l});var a=r(64833),i=r(45700);let l=(0,a.z)("div")({name:"GridStructure",class:"g1nrkimi",propsAsIs:!1}),n=(0,a.z)("div")({name:"BaseCodeWrapper",class:"bu47715",propsAsIs:!1}),o=(0,a.z)(i.E.div)({name:"LabeledColumn",class:"ljraie7",propsAsIs:!0}),c=(0,a.z)(i.E.div)({name:"LabeledRow",class:"l12tgnsh",propsAsIs:!0});r(19351)},46718:(s,e,r)=>{"use strict";r.r(e),r.d(e,{default:()=>Q});var a=r(67841),i=r(79477),l=r(64833),n=r(74631),o=r(25967),c=r(28061),t=r(76533),p=r(18056),d=r(70428),h=r(90231),m=r(84190),g=r(45700);function u(s){let{distance:e,animateTransitions:r,...i}=s;return(0,a.jsx)(v,{as:r?g.E.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)(A,{children:[(0,a.jsx)(y,{size:20}),(0,a.jsx)(k,{size:20}),(0,a.jsx)(C,{})]})})})}function z(s){let{distance:e,animateTransitions:r,...i}=s;return(0,a.jsx)(v,{as:r?g.E.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)(I,{size:20}),(0,a.jsx)(q,{})]})})})}let v=(0,l.z)("div")({name:"Wrapper",class:"w17wzim9",propsAsIs:!1}),x=(0,l.z)("div")({name:"ArrowWrapper",class:"ahosie7",propsAsIs:!1}),w=(0,l.z)("div")({name:"ArrowElem",class:"as6eggc",propsAsIs:!1}),j=(0,l.z)(w)({name:"VerticalArrowElem",class:"v19pviis",propsAsIs:!0}),A=(0,l.z)(w)({name:"HorizontalArrowElem",class:"h14hl7x3",propsAsIs:!0}),b=(0,l.z)(p.Z)({name:"Up",class:"uo1bewq",propsAsIs:!0}),I=(0,l.z)(d.Z)({name:"Down",class:"diiqul1",propsAsIs:!0}),y=(0,l.z)(h.Z)({name:"Left",class:"l32b2cq",propsAsIs:!0}),k=(0,l.z)(m.Z)({name:"Right",class:"rf5s2f6",propsAsIs:!0}),f=(0,l.z)("div")({name:"Shaft",class:"ss0yqmt",propsAsIs:!1}),q=(0,l.z)(f)({name:"VerticalShaft",class:"vr4z59i",propsAsIs:!0}),C=(0,l.z)(f)({name:"HorizontalShaft",class:"h19zxr4f",propsAsIs:!0}),E=function(s){let{distance:e,animateTransitions:r,axis:i,...l}=s;return(0,a.jsx)("horizontal"===i?u:z,{distance:e,animateTransitions:r,...l})};r(48374);var Z=r(15594);let L=(0,l.z)(o.Z)({name:"OuterWrapper",class:"ozgqcj5",propsAsIs:!0}),R=(0,l.z)("div")({name:"Row",class:"rvobocp",propsAsIs:!1}),S=(0,l.z)("div")({name:"DemoWrapper",class:"dnr59ln",propsAsIs:!1}),T=(0,l.z)("div")({name:"Grid",class:"ggce5b9",propsAsIs:!1}),W=(0,l.z)("div")({name:"GridLayer",class:"gm5pt56",propsAsIs:!1}),G=(0,l.z)("div")({name:"GridCols",class:"g1odws70",propsAsIs:!1}),_=(0,l.z)("div")({name:"GridCol",class:"gsuturn",propsAsIs:!1}),B=(0,l.z)("div")({name:"ColLabel",class:"c31btwp",propsAsIs:!1}),D=(0,l.z)(G)({name:"GridRows",class:"g52dmza",propsAsIs:!0}),F=(0,l.z)("div")({name:"GridRow",class:"g6wdbj4",propsAsIs:!1}),H=(0,l.z)("div")({name:"RowLabel",class:"rsych3y",propsAsIs:!1}),N=(0,l.z)("div")({name:"ChildLayer",class:"cudo9om",propsAsIs:!1}),U=(0,l.z)(T)({name:"ChildWrapper",class:"c1gbwz3d",propsAsIs:!0}),V=(0,l.z)(t.Z)({name:"GridChild",class:"gmtd6nr",propsAsIs:!0}),M=(0,l.z)("div")({name:"TopLabel",class:"t1kh1upm",propsAsIs:!1}),O=(0,l.z)("div")({name:"TopLabelText",class:"t152kyg2",propsAsIs:!1}),J=(0,l.z)("div")({name:"SideLabel",class:"s1hq6k47",propsAsIs:!1}),K=(0,l.z)("div")({name:"SideLabelText",class:"s9k28gx",propsAsIs:!1}),P=(0,l.z)(Z.c7)({name:"CodeWrapper",class:"cirwc5p",propsAsIs:!0}),Q=function(){let[s]=i.useState("2 / 4"),[e]=i.useState("1 / 4");return(0,a.jsx)(L,{as:"section",children:(0,a.jsxs)(R,{children:[(0,a.jsx)(P,{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)(S,{children:[(0,a.jsxs)(W,{children:[(0,a.jsx)(D,{children:(0,n.w6)(1,5).map(s=>(0,a.jsx)(F,{children:(0,a.jsx)(H,{children:s})},s))}),(0,a.jsx)(G,{children:(0,n.w6)(1,6).map(s=>(0,a.jsx)(_,{children:(0,a.jsx)(B,{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)(E,{distance:208,axis:"horizontal",animateTransitions:!1}),(0,a.jsx)(O,{children:"Column 1 to 4"})]}),(0,a.jsxs)(J,{children:[(0,a.jsx)(E,{distance:132,axis:"vertical",animateTransitions:!1}),(0,a.jsx)(K,{children:"Row 2 to 4"})]})]})})})]})]})})};r(37547)},76533:(s,e,r)=>{"use strict";r.d(e,{Z:()=>c});var a=r(67841),i=r(64833),l=r(45700);let n=(0,i.z)(l.E.div)({name:"Wrapper",class:"wg9umku",propsAsIs:!0}),o=(0,i.z)(l.E.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.E.span,{layout:i,style:{display:"inline-block",...p},children:d})})})};r(76206)},48374: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"}},19351:s=>{s.exports={g1nrkimi:"g1nrkimi",bu47715:"bu47715",ljraie7:"ljraie7",l12tgnsh:"l12tgnsh"}},37547: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"}},76206:s=>{s.exports={wg9umku:"wg9umku",fadeFromTransparent:"fadeFromTransparent",iizukyq:"iizukyq"}}}]);
//# sourceMappingURL=46718.f7e1a9e1e7f4957d.js.map