(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[60208],{40084:(e,t,s)=>{"use strict";s.d(t,{Z:()=>r,m:()=>l});var n=s(67841),i=s(79477);let l=i.createContext({code:"",lang:""}),r=i.memo(function(e){let{code:t,lang:s,children:i}=e;return(0,n.jsx)(l.Provider,{value:{code:t,lang:s},children:i})})},56073:(e,t,s)=>{"use strict";s.d(t,{Z:()=>n});let n=(0,s(64833).z)("code")({name:"InlineCode",class:"i165vvr1",propsAsIs:!1});s(67787)},60208:(e,t,s)=>{"use strict";s.r(t),s.d(t,{default:()=>C});var n=s(67841),i=s(79477),l=s(64833),r=s(45700),c=s(55158),d=s(80566),a=s(62867),o=s(40996),h=s(56073),u=s(62710),x=s(11682),p=s(40084);let m=["width: 12rem"];function f(e){let t,{values:s}=e;if(s.includes("left: 0px")&&s.includes("right: 0px")?t=(0,n.jsxs)(n.Fragment,{children:["If we want the element to be ",(0,n.jsx)(h.Z,{children:"0px"})," from the left edge, and ",(0,n.jsx)(h.Z,{children:"0px"})," from the right edge, it will stretch to the full width of the viewport, which is wider than ",(0,n.jsx)(h.Z,{children:"12rem"}),"."]}):s.includes("left: 0px")&&s.includes("width: 12rem")?t=(0,n.jsxs)(n.Fragment,{children:["We can anchor the element to the left edge, and have it be",(0,n.jsx)(h.Z,{children:"12rem"})," wide, but then it won't be"," ",(0,n.jsx)(h.Z,{children:"0px"})," from the right edge."]}):s.includes("right: 0px")&&s.includes("width: 12rem")&&(t=(0,n.jsxs)(n.Fragment,{children:["We can stick the element to the right edge with a"," ",(0,n.jsx)(h.Z,{children:"12rem"})," width, but this will pull it away from the left edge."]})),t)return(0,n.jsx)(u.Z,{children:(0,n.jsx)(o.Z,{children:t})})}function j(e){let{id:t}=e,{id:s,state:l,setState:r}=i.useContext(d.Z),c=l[t],a="".concat(s,"_").concat(t),o=c.reduce((e,t)=>(e[t]=!0,e),{});return(0,n.jsx)(x.Z,{id:a,label:"Pick two",options:["left: 0px","right: 0px","width: 12rem"],value:o,setValue:e=>{let s;(s=c.includes(e)?c.filter(t=>t!==e):[...c,e]).length>2&&s.shift(),r(e=>({...e,[t]:s}))}})}let g=(0,l.z)("div")({name:"Row",class:"r3vmhao",propsAsIs:!1}),v=(0,l.z)("div")({name:"Column",class:"c7zul9b",propsAsIs:!1}),w=(0,l.z)(v)({name:"DemoColumn",class:"d19iwc1r",propsAsIs:!0}),b=(0,l.z)(a.Z)({name:"Container",class:"ctnf89z",propsAsIs:!0}),k=(0,l.z)("div")({name:"Background",class:"b14ie1by",propsAsIs:!1}),z=(0,l.z)("div")({name:"FakeHeading",class:"fujgo4n",propsAsIs:!1}),Z=(0,l.z)("div")({name:"FakeParagraph",class:"f1p79fid",propsAsIs:!1}),I=(0,l.z)("span")({name:"Block",class:"byjv7xx",propsAsIs:!1}),y=(0,l.z)(I)({name:"HeadingBlock",class:"h1vx44g7",propsAsIs:!0}),A=(0,l.z)(r.E.div)({name:"Modal",class:"m1xc6jkk",propsAsIs:!0}),C=function(e){let{codeOutput:t}=e;return(0,n.jsx)(c.ZP,{initialValues:{values:m},controlPosition:"top",customGrid:{gridTemplateColumns:"1fr"},outputWrapper:null,controls:[(0,n.jsx)(j,{id:"values"},"values")],renderAfter:e=>{let{values:t}=e;return(0,n.jsx)(f,{values:t})},children:e=>{let{values:s}=e;return(0,n.jsx)(n.Fragment,{children:(0,n.jsxs)(g,{children:[(0,n.jsx)(v,{children:(0,n.jsx)(p.Z,{lang:"css",code:function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:m,t=[...e].sort().join(";\n  ");return t&&(t="\n  ".concat(t,";")),".element {\n  position: fixed;".concat(t,"\n}")}(s),children:t})}),(0,n.jsx)(w,{children:(0,n.jsxs)(b,{children:[(0,n.jsxs)(k,{children:[(0,n.jsx)(z,{children:[3,5,1,4,7].map((e,t)=>(0,n.jsx)(y,{style:{width:"".concat(e,"rem")}},t))}),(0,n.jsx)(Z,{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,t)=>(0,n.jsx)(I,{style:{width:"".concat(e,"rem")}},t))}),(0,n.jsx)(Z,{children:[.785,4.2,1.25,4,1.5,1.5,1,2.25,.5,2.1,2.5,3.5,1].map((e,t)=>(0,n.jsx)(I,{style:{width:"".concat(e,"rem")}},t))})]}),(0,n.jsx)(A,{layout:!0,style:{left:s.includes("left: 0px")?0:void 0,right:s.includes("right: 0px")?0:void 0,width:s.includes("width: 12rem")?"12rem":void 0}})]})})]})})}})};s(91763)},91763:e=>{e.exports={r3vmhao:"r3vmhao",c7zul9b:"c7zul9b",d19iwc1r:"d19iwc1r",ctnf89z:"ctnf89z",b14ie1by:"b14ie1by",fujgo4n:"fujgo4n",f1p79fid:"f1p79fid",byjv7xx:"byjv7xx",h1vx44g7:"h1vx44g7",m1xc6jkk:"m1xc6jkk"}}}]);
//# sourceMappingURL=60208.a28903ad0bd8fc5b.js.map