(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[52296],{53645:(s,e,a)=>{"use strict";a.d(e,{A:()=>r});let r=(0,a(2651).A)("ChevronLeft",[["path",{d:"m15 18-6-6 6-6",key:"1wnfg3"}]])},99150:(s,e,a)=>{"use strict";a.d(e,{A:()=>r});let r=(0,a(2651).A)("ChevronRight",[["path",{d:"m9 18 6-6-6-6",key:"mthhwq"}]])},37501:(s,e,a)=>{"use strict";a.d(e,{A:()=>r});let r=(0,a(2651).A)("ChevronUp",[["path",{d:"m18 15-6-6-6 6",key:"153udz"}]])},87378:(s,e,a)=>{"use strict";a.d(e,{A:()=>E});var r=a(87687);a(52751);var n=a(31928),t=a(37501),i=a(88700),o=a(53645),l=a(99150),c=a(30251),p=a(59341),m=a(68852);function d(s){let{distance:e,animateTransitions:a,flipTextSide:n,multiple:t=1,unit:i="px",...o}=s,l=(0,c.zh)({from:{number:!0===a?0:e},number:e,immediate:!a});return(0,r.jsxs)(x,{as:!0===a?p.P.div:"div",style:{width:!0===a?void 0:e,height:20},animate:!0===a?{width:e}:void 0,...o,children:[(0,r.jsx)(u,{children:(0,r.jsxs)(b,{children:[(0,r.jsx)(f,{size:20}),(0,r.jsx)(g,{size:20}),(0,r.jsx)(y,{})]})}),(0,r.jsx)(C,{style:{top:n?-16:16},children:l.number.to(s=>{let e="px"===i?Math.round(s*t):(0,m.GB)(s/16*t,1).toFixed(1);return s<40?e:e+i})})]})}function h(s){let{distance:e,animateTransitions:a,multiple:n=1,flipTextSide:t,...i}=s,o=(0,c.zh)({from:{number:0},number:e,immediate:!a});return(0,r.jsxs)(x,{as:a?p.P.div:"div",style:{width:20,height:a?void 0:e},animate:{height:a?e:void 0},...i,children:[(0,r.jsx)(u,{style:{opacity:e<16?0:1},children:(0,r.jsxs)(I,{children:[(0,r.jsx)(A,{size:20}),(0,r.jsx)(v,{size:20}),(0,r.jsx)(w,{})]})}),(0,r.jsx)(z,{children:o.number.to(s=>Math.round(s*n)+"px")})]})}let x=(0,n.I)(p.P.div)({name:"Wrapper",class:"w1mbq51h",propsAsIs:!0}),u=(0,n.I)("div")({name:"ArrowWrapper",class:"agjw958",propsAsIs:!1}),j=(0,n.I)("div")({name:"ArrowElem",class:"a15b5ky0",propsAsIs:!1}),I=(0,n.I)(j)({name:"VerticalArrowElem",class:"vt3r0v5",propsAsIs:!0}),b=(0,n.I)(j)({name:"HorizontalArrowElem",class:"h8ja5sk",propsAsIs:!0}),A=(0,n.I)(t.A)({name:"Up",class:"u8eocc7",propsAsIs:!0}),v=(0,n.I)(i.A)({name:"Down",class:"d1phaa8",propsAsIs:!0}),f=(0,n.I)(o.A)({name:"Left",class:"l1xa6ime",propsAsIs:!0}),g=(0,n.I)(l.A)({name:"Right",class:"r15impnm",propsAsIs:!0}),k=(0,n.I)("div")({name:"Shaft",class:"sqdmb0l",propsAsIs:!1}),w=(0,n.I)(k)({name:"VerticalShaft",class:"vfrhcon",propsAsIs:!0}),y=(0,n.I)(k)({name:"HorizontalShaft",class:"h1o8euj3",propsAsIs:!0}),q=(0,n.I)(c.CS.span)({name:"Label",class:"l18fzpc6",propsAsIs:!0}),z=(0,n.I)(q)({name:"VerticalLabel",class:"vcbaeky",propsAsIs:!0}),C=(0,n.I)(q)({name:"HorizontalLabel",class:"hguumh5",propsAsIs:!0}),E=function(s){let{distance:e,animateTransitions:a,flipTextSide:n,multiple:t=1,axis:i,unit:o="px",...l}=s;return(0,r.jsx)("horizontal"===i?d:h,{distance:e,animateTransitions:a,flipTextSide:n,multiple:t,unit:o,...l})};a(27687)},99800:(s,e,a)=>{"use strict";a.d(e,{A:()=>i,M:()=>t});var r=a(87687),n=a(52751);let t=n.createContext({code:"",lang:""}),i=n.memo(function(s){let{code:e,lang:a,children:n}=s;return(0,r.jsx)(t.Provider,{value:{code:e,lang:a},children:n})})},81485:(s,e,a)=>{"use strict";a.r(e),a.d(e,{default:()=>z});var r=a(87687),n=a(52751),t=a(31928),i=a(20120),o=a(71597),l=a(54729),c=a(99800),p=a(87378);let m=(0,t.I)("div")({name:"Row",class:"r13qltba",propsAsIs:!1}),d=(0,t.I)("div")({name:"Column",class:"cips6m5",propsAsIs:!1}),h=(0,t.I)(d)({name:"DemoColumn",class:"dzjrdku",propsAsIs:!0}),x=(0,t.I)(o.A)({name:"Container",class:"c1fb9pjk",propsAsIs:!0}),u=(0,t.I)("div")({name:"Background",class:"behq6v2",propsAsIs:!1}),j=(0,t.I)("div")({name:"Heading",class:"h1ejsq8i",propsAsIs:!1}),I=(0,t.I)("div")({name:"FakeParagraph",class:"ftk4ogd",propsAsIs:!1}),b=(0,t.I)("span")({name:"Block",class:"b2rpzox",propsAsIs:!1}),A=(0,t.I)(b)({name:"HeadingBlock",class:"hlnc7ce",propsAsIs:!0}),v=(0,t.I)("div")({name:"WithArrow",class:"w1cjo0xh",propsAsIs:!1}),f=(0,t.I)("div")({name:"CenteringBox",class:"c1htya36",propsAsIs:!1}),g=(0,t.I)("div")({name:"ModalBase",class:"m1dwfq30",propsAsIs:!1}),k=(0,t.I)(g)({name:"ModalCenterIndicator",class:"m1xnx7sc",propsAsIs:!0}),w=(0,t.I)(g)({name:"Modal",class:"m1qbuarb",propsAsIs:!0}),y=(0,t.I)(w)({name:"MeasuredModal",class:"m1b7oprg",propsAsIs:!0}),q=(0,t.I)("div")({name:"ArrowWrapper",class:"anmk49o",propsAsIs:!1}),z=n.memo(function(s){let{codeOutput:e,variant:a,initialNudge:n}=s;return(0,r.jsx)(i.Ay,{initialValues:{nudge:n},controlPosition:"top",customGrid:{gridTemplateColumns:"1fr 1fr"},outputWrapper:null,controls:[(0,r.jsx)(i.oP,{id:"nudge",label:"Offset",min:"initial"===a?0:20,max:"initial"===a?48:64,previewRenderer:s=>"".concat(s,"px")},"nudge")],renderAfter:s=>{let{nudge:e}=s;return"initial"===a?null:(0,r.jsxs)(l.A,{children:["In other words, the element is suspended between the top and bottom edges of an imaginary box, but now that box sits ",e,"px away from the bottom edge of its container."]})},children:s=>{let{nudge:n}=s;return(0,r.jsx)(r.Fragment,{children:(0,r.jsxs)(m,{children:[(0,r.jsx)(d,{children:(0,r.jsx)(c.A,{lang:"css",code:0===n?".element {\n  position: fixed;\n  inset: 0px;\n  width: 16rem;\n  height: 6rem;\n  margin: auto;\n}":".element {\n  position: fixed;\n  inset: 0px;\n  bottom: ".concat(n,"px;\n  width: 16rem;\n  height: 6rem;\n  margin: auto;\n}"),children:e})}),(0,r.jsx)(h,{children:(0,r.jsxs)(x,{children:[(0,r.jsxs)(u,{children:[(0,r.jsx)(j,{children:[2,6.5,1,8,3].map((s,e)=>(0,r.jsx)(A,{style:{width:"".concat(s,"rem")}},e))}),(0,r.jsx)(I,{children:[2,1,2.25,1,1.5,4.75,1.5,7,4,4.2,1.25,5,.5,2.1,4,.785,2.5,1.5,.5,3.5,1].map((s,e)=>(0,r.jsx)(b,{style:{width:"".concat(s,"rem")}},e))}),(0,r.jsx)(I,{children:[.785,4.2,1.25,4,1.5,1.5,1,2.25,.5,2.1,2.5,3.5,1].map((s,e)=>(0,r.jsx)(b,{style:{width:"".concat(s,"rem")}},e))}),(0,r.jsx)(I,{children:[6,2.25,4,1.3,4.2,8,.5,1.25,2.5,5,1,4.4,.5,8,2.1].map((s,e)=>(0,r.jsx)(b,{style:{width:"".concat(s,"rem")}},e))})]}),"initial"===a?(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(k,{}),(0,r.jsx)(w,{style:{bottom:n+"px"}})]}):(0,r.jsxs)(v,{children:[(0,r.jsx)(f,{style:{height:256-n},children:(0,r.jsx)(y,{})}),(0,r.jsx)(q,{children:(0,r.jsx)(p.A,{animateTransitions:!1,axis:"vertical",distance:n,unit:"px"})})]})]})})]})})}})});a(30928)},27687:s=>{s.exports={w1mbq51h:"w1mbq51h",agjw958:"agjw958",a15b5ky0:"a15b5ky0",vt3r0v5:"vt3r0v5","verticalEnter-vt3r0v5a15b5ky0":"verticalEnter-vt3r0v5a15b5ky0",h8ja5sk:"h8ja5sk","horizontalEnter-h8ja5ska15b5ky0":"horizontalEnter-h8ja5ska15b5ky0",u8eocc7:"u8eocc7",d1phaa8:"d1phaa8",l1xa6ime:"l1xa6ime",r15impnm:"r15impnm",sqdmb0l:"sqdmb0l",vfrhcon:"vfrhcon",h1o8euj3:"h1o8euj3",l18fzpc6:"l18fzpc6",vcbaeky:"vcbaeky",hguumh5:"hguumh5"}},30928:s=>{s.exports={r13qltba:"r13qltba",cips6m5:"cips6m5",dzjrdku:"dzjrdku",c1fb9pjk:"c1fb9pjk",behq6v2:"behq6v2",h1ejsq8i:"h1ejsq8i",ftk4ogd:"ftk4ogd",b2rpzox:"b2rpzox",hlnc7ce:"hlnc7ce",w1cjo0xh:"w1cjo0xh",c1htya36:"c1htya36",m1dwfq30:"m1dwfq30",m1xnx7sc:"m1xnx7sc",m1qbuarb:"m1qbuarb",m1b7oprg:"m1b7oprg",anmk49o:"anmk49o"}}}]);
//# sourceMappingURL=52296.4223523848937274.js.map