{"version":3,"file":"DiagonalBackground.-vy28bye.mjs","names":["React.useRef","React.useState"],"sources":["https:/framerusercontent.com/modules/qiH0z3CBryKDoLXvmkwB/H8u2o5l3vzk6em9XH3K8/DiagonalBackground.js"],"sourcesContent":["import{jsx as _jsx}from\"react/jsx-runtime\";import*as React from\"react\";import{Frame,addPropertyControls,ControlType}from\"framer\";export default function DiagonalBackground(props){const imageURL=props.fill?.src;const containerRef=React.useRef(null);const[dropPercent,setDropPercent]=React.useState(props.drop);// Calculate drop based on container dimensions and desired angle\nReact.useEffect(()=>{const updateDrop=()=>{if(containerRef.current&&props.useFixedAngle){const{width,height}=containerRef.current.getBoundingClientRect();if(width>0&&height>0){// Convert angle to radians\nconst angleRad=props.diagonalAngle*Math.PI/180;// Calculate how much the right side should drop (in pixels)\n// tan(angle) = dropAmount / width\nconst dropPx=width*Math.tan(angleRad);// Convert to percentage of height (from top)\nconst calculatedDrop=(height-dropPx)/height*100;setDropPercent(Math.max(0,Math.min(100,calculatedDrop)));}}else{setDropPercent(props.drop);}};updateDrop();window.addEventListener(\"resize\",updateDrop);return()=>window.removeEventListener(\"resize\",updateDrop);},[props.useFixedAngle,props.diagonalAngle,props.drop]);// Compute gradient string\nconst gradient=!imageURL&&props.color?`linear-gradient(${props.angle}deg, ${props.color} 0%, #ffffff 100%)`:undefined;return /*#__PURE__*/_jsx(Frame,{ref:containerRef,width:\"100%\",height:\"100%\",style:{backgroundImage:imageURL?`url(${imageURL})`:gradient,backgroundSize:\"cover\",backgroundPosition:\"center\",backgroundRepeat:\"no-repeat\",clipPath:`polygon(\n                    0 0,\n                    100% 0,\n                    100% ${dropPercent}%,\n                    0% 100%\n                )`},children:props.children});}addPropertyControls(DiagonalBackground,{fill:{type:ControlType.ResponsiveImage,title:\"Image\"},color:{type:ControlType.Color,title:\"Color\",defaultValue:\"#D3DCF5\"},angle:{type:ControlType.Number,title:\"Gradient Angle\",min:0,max:360,defaultValue:0,unit:\"\\xb0\",step:1},useFixedAngle:{type:ControlType.Boolean,title:\"Fixed Diagonal\",defaultValue:false,description:\"Use a fixed angle that stays consistent across widths\"},diagonalAngle:{type:ControlType.Number,title:\"Diagonal Angle\",min:0,max:45,defaultValue:3,unit:\"\\xb0\",step:.5,hidden:props=>!props.useFixedAngle},drop:{type:ControlType.Number,title:\"Drop %\",defaultValue:95,min:70,max:100,step:.1,hidden:props=>props.useFixedAngle}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"DiagonalBackground\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./DiagonalBackground.map"],"mappings":"8MAAiI,SAAwB,EAAmB,EAAM,CAAC,IAAM,EAAS,EAAM,MAAM,IAAU,EAAaA,EAAa,KAAK,CAAM,CAAC,EAAY,GAAgBC,EAAe,EAAM,KAAK,CACpT,MAAoB,CAAC,IAAM,MAAe,CAAC,GAAG,EAAa,SAAS,EAAM,cAAc,CAAC,GAAK,CAAC,QAAM,UAAQ,EAAa,QAAQ,uBAAuB,CAAC,GAAG,EAAM,GAAG,EAAO,EAAE,CAC/K,IAAM,EAAS,EAAM,cAAc,KAAK,GAAG,IAGrC,GAAgB,EADT,EAAM,KAAK,IAAI,EAAS,EACA,EAAO,IAAI,EAAe,KAAK,IAAI,EAAE,KAAK,IAAI,IAAI,EAAe,CAAC,CAAC,OAAQ,EAAe,EAAM,KAAK,EAA8D,OAA1D,GAAY,CAAC,EAAO,iBAAiB,SAAS,EAAW,KAAW,EAAO,oBAAoB,SAAS,EAAW,EAAG,CAAC,EAAM,cAAc,EAAM,cAAc,EAAM,KAAK,CAAC,CACzT,IAAM,EAAS,CAAC,GAAU,EAAM,MAAM,mBAAmB,EAAM,MAAM,OAAO,EAAM,MAAM,oBAAoB,IAAA,GAAU,OAAoB,EAAK,EAAM,CAAC,IAAI,EAAa,MAAM,OAAO,OAAO,OAAO,MAAM,CAAC,gBAAgB,EAAS,OAAO,EAAS,GAAG,EAAS,eAAe,QAAQ,mBAAmB,SAAS,iBAAiB,YAAY,SAAS;;;2BAG5T,EAAY;;mBAEpB,CAAC,SAAS,EAAM,SAAS,CAAC,sBAXF,IAA4B,IAA0D,CAWlF,EAAoB,EAAmB,CAAC,KAAK,CAAC,KAAK,EAAY,gBAAgB,MAAM,QAAQ,CAAC,MAAM,CAAC,KAAK,EAAY,MAAM,MAAM,QAAQ,aAAa,UAAU,CAAC,MAAM,CAAC,KAAK,EAAY,OAAO,MAAM,iBAAiB,IAAI,EAAE,IAAI,IAAI,aAAa,EAAE,KAAK,IAAO,KAAK,EAAE,CAAC,cAAc,CAAC,KAAK,EAAY,QAAQ,MAAM,iBAAiB,aAAa,GAAM,YAAY,wDAAwD,CAAC,cAAc,CAAC,KAAK,EAAY,OAAO,MAAM,iBAAiB,IAAI,EAAE,IAAI,GAAG,aAAa,EAAE,KAAK,IAAO,KAAK,GAAG,OAAO,GAAO,CAAC,EAAM,cAAc,CAAC,KAAK,CAAC,KAAK,EAAY,OAAO,MAAM,SAAS,aAAa,GAAG,IAAI,GAAG,IAAI,IAAI,KAAK,GAAG,OAAO,GAAO,EAAM,cAAc,CAAC,CAAC"}