(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[33034],{79298:(e,s,t)=>{"use strict";t.d(s,{A:()=>n});let n=(0,t(31928).I)("code")({name:"InlineCode",class:"i165vvr1",propsAsIs:!1});t(87585)},33034:(e,s,t)=>{"use strict";t.r(s),t.d(s,{default:()=>F});var n=t(87687),i=t(52751),l=t(31928),r=t(59341),c=t(20120),d=t(87542),a=t(71597),o=t(54729),h=t(79298),x=t(13663),p=t(93275),u=t(99800);let m=["width: 12rem"];function f(e){let s,{values:t}=e;if(t.includes("left: 0px")&&t.includes("right: 0px")?s=(0,n.jsxs)(n.Fragment,{children:["If we want the element to be ",(0,n.jsx)(h.A,{children:"0px"})," from the left edge, and ",(0,n.jsx)(h.A,{children:"0px"})," from the right edge, it will stretch to the full width of the viewport, which is wider than ",(0,n.jsx)(h.A,{children:"12rem"}),"."]}):t.includes("left: 0px")&&t.includes("width: 12rem")?s=(0,n.jsxs)(n.Fragment,{children:["We can anchor the element to the left edge, and have it be",(0,n.jsx)(h.A,{children:"12rem"})," wide, but then it won't be"," ",(0,n.jsx)(h.A,{children:"0px"})," from the right edge."]}):t.includes("right: 0px")&&t.includes("width: 12rem")&&(s=(0,n.jsxs)(n.Fragment,{children:["We can stick the element to the right edge with a"," ",(0,n.jsx)(h.A,{children:"12rem"})," width, but this will pull it away from the left edge."]})),s)return(0,n.jsx)(x.A,{children:(0,n.jsx)(o.A,{children:s})})}function j(e){let{id:s}=e,{id:t,state:l,setState:r}=i.useContext(d.A),c=l[s],a="".concat(t,"_").concat(s),o=c.reduce((e,s)=>(e[s]=!0,e),{});return(0,n.jsx)(p.A,{id:a,label:"Pick two",options:["left: 0px","right: 0px","width: 12rem"],value:o,setValue:e=>{let t;(t=c.includes(e)?c.filter(s=>s!==e):[...c,e]).length>2&&t.shift(),r(e=>({...e,[s]:t}))}})}let g=(0,l.I)("div")({name:"Row",class:"r3vmhao",propsAsIs:!1}),v=(0,l.I)("div")({name:"Column",class:"c7zul9b",propsAsIs:!1}),w=(0,l.I)(v)({name:"DemoColumn",class:"d19iwc1r",propsAsIs:!0}),A=(0,l.I)(a.A)({name:"Container",class:"ctnf89z",propsAsIs:!0}),I=(0,l.I)("div")({name:"Background",class:"b14ie1by",propsAsIs:!1}),b=(0,l.I)("div")({name:"FakeHeading",class:"fujgo4n",propsAsIs:!1}),k=(0,l.I)("div")({name:"FakeParagraph",class:"f1p79fid",propsAsIs:!1}),y=(0,l.I)("span")({name:"Block",class:"byjv7xx",propsAsIs:!1}),C=(0,l.I)(y)({name:"HeadingBlock",class:"h1vx44g7",propsAsIs:!0}),z=(0,l.I)(r.P.div)({name:"Modal",class:"m1xc6jkk",propsAsIs:!0}),F=function(e){let{codeOutput:s}=e;return(0,n.jsx)(c.Ay,{initialValues:{values:m},controlPosition:"top",customGrid:{gridTemplateColumns:"1fr"},outputWrapper:null,controls:[(0,n.jsx)(j,{id:"values"},"values")],renderAfter:e=>{let{values:s}=e;return(0,n.jsx)(f,{values:s})},children:e=>{let{values:t}=e;return(0,n.jsx)(n.Fragment,{children:(0,n.jsxs)(g,{children:[(0,n.jsx)(v,{children:(0,n.jsx)(u.A,{lang:"css",code:function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:m,s=[...e].sort().join(";\n  ");return s&&(s="\n  ".concat(s,";")),".element {\n  position: fixed;".concat(s,"\n}")}(t),children:s})}),(0,n.jsx)(w,{children:(0,n.jsxs)(A,{children:[(0,n.jsxs)(I,{children:[(0,n.jsx)(b,{children:[3,5,1,4,7].map((e,s)=>(0,n.jsx)(C,{style:{width:"".concat(e,"rem")}},s))}),(0,n.jsx)(k,{children:[1,4,1.5,2,4.75,.5,4,7,1.25,1.5,2.25,1,5,.5,2.1,.785,2.5,4.2,3.5,1].map((e,s)=>(0,n.jsx)(y,{style:{width:"".concat(e,"rem")}},s))}),(0,n.jsx)(k,{children:[.785,4.2,1.25,4,1.5,1.5,1,2.25,.5,2.1,2.5,3.5,1].map((e,s)=>(0,n.jsx)(y,{style:{width:"".concat(e,"rem")}},s))})]}),(0,n.jsx)(z,{layout:!0,style:{left:t.includes("left: 0px")?0:void 0,right:t.includes("right: 0px")?0:void 0,width:t.includes("width: 12rem")?"12rem":void 0}})]})})]})})}})};t(64085)},64085:e=>{e.exports={r3vmhao:"r3vmhao",c7zul9b:"c7zul9b",d19iwc1r:"d19iwc1r",ctnf89z:"ctnf89z",b14ie1by:"b14ie1by",fujgo4n:"fujgo4n",f1p79fid:"f1p79fid",byjv7xx:"byjv7xx",h1vx44g7:"h1vx44g7",m1xc6jkk:"m1xc6jkk"}}}]);
//# sourceMappingURL=33034.9c169d54b5ac1ead.js.map