{"version":3,"file":"OverlappingImageLayout.DL3g_zI0.mjs","names":[],"sources":["https:/framerusercontent.com/modules/5VLR7G8Uzx3lQb3LuJ8w/MCwLGvTG0uIyZDzHrWwE/OverlappingImageLayout.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{addPropertyControls,ControlType}from\"framer\";/**\n * Overlapping Image Layout\n *\n * A full-width image collage with overlapping sections\n * inspired by editorial/magazine layouts.\n *\n * @framerIntrinsicWidth 400\n * @framerIntrinsicHeight 1200\n *\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight auto\n */export default function OverlappingImageLayout(props){const{image1={src:\"https://framerusercontent.com/images/GfGkADagM4KEibNcIiRUWlfrR0.jpg\",alt:\"Image 1\"},image2={src:\"https://framerusercontent.com/images/aNsAT3jCvt4zglbWCUoFe33Q.jpg\",alt:\"Image 2\"},image3={src:\"https://framerusercontent.com/images/BYnxEV1zjYb9bhWh1IwBZ1ZoS60.jpg\",alt:\"Image 3\"},image4={src:\"https://framerusercontent.com/images/2uTNEj5aTl2K3NJaEFWMbnrA.jpg\",alt:\"Image 4\"},image5={src:\"https://framerusercontent.com/images/f9RiWoNpmlCMqVRIHz8l8wYfeI.jpg\",alt:\"Image 5\"},image6={src:\"https://framerusercontent.com/images/GfGkADagM4KEibNcIiRUWlfrR0.jpg\",alt:\"Image 6\"},image7={src:\"https://framerusercontent.com/images/aNsAT3jCvt4zglbWCUoFe33Q.jpg\",alt:\"Image 7\"},backgroundColor=\"#FFFFFF\",overlapAmount=0,gap=24,row6ColumnGap=24,row2LeftFlex=1.6,row2RightFlex=1,row4LeftFlex=.6,row4RightFlex=1.4,row6LeftFlex=1.2,row6RightFlex=1,image1AspectRatio=\"3/4\",image2AspectRatio=\"3/4\",image3AspectRatio=\"1/1\",image4AspectRatio=\"16/9\",image5AspectRatio=\"3/4\",image6AspectRatio=\"16/9\",image7AspectRatio=\"16/9\",image1Height=0,outerPadding=\"0px\",rowGap=0,row2Gap=0,row4Gap=0,image1Padding=\"0px\",image2Padding=\"0px\",image3Padding=\"0px\",image4Padding=\"0px\",image5Padding=\"0px\",image6Padding=\"0px\",image7Padding=\"0px\",hideTopImage=false}=props;const containerStyle={width:\"100%\",backgroundColor,position:\"relative\",overflow:\"hidden\",padding:outerPadding,boxSizing:\"border-box\"};const imgStyle=objectPosition=>({width:\"100%\",height:\"100%\",objectFit:\"cover\",objectPosition:objectPosition||\"center\",display:\"block\",position:\"absolute\",top:0,left:0});const renderPaddedImage=(image,padding,innerStyle,objectPosition)=>{return /*#__PURE__*/_jsx(\"div\",{style:{padding,boxSizing:\"border-box\"},children:/*#__PURE__*/_jsx(\"div\",{style:{...innerStyle,overflow:\"hidden\"},children:/*#__PURE__*/_jsx(\"img\",{src:image.src,style:imgStyle(objectPosition),alt:image.alt})})});};return /*#__PURE__*/_jsxs(\"div\",{style:containerStyle,children:[!hideTopImage&&renderPaddedImage(image1,image1Padding,{width:\"100%\",position:\"relative\",zIndex:10,aspectRatio:image1AspectRatio,height:image1Height>0?image1Height:undefined},\"center top\"),/*#__PURE__*/_jsxs(\"div\",{style:{display:\"flex\",width:\"100%\",marginTop:hideTopImage?0:rowGap,position:\"relative\",zIndex:20,padding:0,gap:row2Gap},children:[/*#__PURE__*/_jsx(\"div\",{style:{flex:row2LeftFlex},children:renderPaddedImage(image2,image2Padding,{position:\"relative\",aspectRatio:image2AspectRatio})}),/*#__PURE__*/_jsx(\"div\",{style:{flex:row2RightFlex,marginTop:0},children:renderPaddedImage(image3,image3Padding,{position:\"relative\",aspectRatio:image3AspectRatio})})]}),renderPaddedImage(image4,image4Padding,{width:\"100%\",marginTop:rowGap,position:\"relative\",zIndex:15,aspectRatio:image4AspectRatio}),/*#__PURE__*/_jsxs(\"div\",{style:{display:\"flex\",width:\"100%\",marginTop:rowGap,position:\"relative\",zIndex:25,padding:0,gap:row4Gap},children:[/*#__PURE__*/_jsx(\"div\",{style:{flex:row4LeftFlex},children:renderPaddedImage(image5,image5Padding,{position:\"relative\",aspectRatio:image5AspectRatio})}),/*#__PURE__*/_jsx(\"div\",{style:{flex:row4RightFlex,marginTop:0},children:renderPaddedImage(image6,image6Padding,{position:\"relative\",aspectRatio:image6AspectRatio})})]}),renderPaddedImage(image7,image7Padding,{width:\"100%\",marginTop:rowGap,position:\"relative\",zIndex:18,aspectRatio:image7AspectRatio})]});}addPropertyControls(OverlappingImageLayout,{image1:{type:ControlType.ResponsiveImage,title:\"Image 1 (Top)\"},hideTopImage:{type:ControlType.Boolean,title:\"Hide Top Image\",defaultValue:false,enabledTitle:\"Yes\",disabledTitle:\"No\"},image2:{type:ControlType.ResponsiveImage,title:\"Image 2 (Left)\"},image3:{type:ControlType.ResponsiveImage,title:\"Image 3 (Right)\"},image4:{type:ControlType.ResponsiveImage,title:\"Image 4 (Wide)\"},image5:{type:ControlType.ResponsiveImage,title:\"Image 5 (Small Left)\"},image6:{type:ControlType.ResponsiveImage,title:\"Image 6 (Large Right)\"},image7:{type:ControlType.ResponsiveImage,title:\"Image 7 (Large)\"},backgroundColor:{type:ControlType.Color,title:\"Background\",defaultValue:\"#FFFFFF\"},outerPadding:{type:ControlType.Padding,title:\"Outer Padding\",defaultValue:\"0px\"},rowGap:{type:ControlType.Number,title:\"Row Gap\",defaultValue:0,min:0,max:200,step:2,unit:\"px\"},row2Gap:{type:ControlType.Number,title:\"Row 2 - Image Gap\",defaultValue:0,min:0,max:200,step:2,unit:\"px\"},row4Gap:{type:ControlType.Number,title:\"Row 4 - Image Gap\",defaultValue:0,min:0,max:200,step:2,unit:\"px\"},overlapAmount:{type:ControlType.Number,title:\"Overlap\",defaultValue:60,min:0,max:200,step:5,unit:\"px\"},gap:{type:ControlType.Number,title:\"Small Images Gap\",defaultValue:24,min:0,max:120,step:2,unit:\"px\"},row6ColumnGap:{type:ControlType.Number,title:\"Row 6 - Column Gap\",defaultValue:24,min:0,max:120,step:2,unit:\"px\"},row2LeftFlex:{type:ControlType.Number,title:\"Row 2 - Left Width\",defaultValue:1.6,min:.3,max:3,step:.1},row2RightFlex:{type:ControlType.Number,title:\"Row 2 - Right Width\",defaultValue:1,min:.3,max:3,step:.1},row4LeftFlex:{type:ControlType.Number,title:\"Row 4 - Left Width\",defaultValue:.6,min:.3,max:3,step:.1},row4RightFlex:{type:ControlType.Number,title:\"Row 4 - Right Width\",defaultValue:1.4,min:.3,max:3,step:.1},row6LeftFlex:{type:ControlType.Number,title:\"Row 6 - Left Width\",defaultValue:1.2,min:.3,max:3,step:.1},row6RightFlex:{type:ControlType.Number,title:\"Row 6 - Right Width\",defaultValue:1,min:.3,max:3,step:.1},image1AspectRatio:{type:ControlType.String,title:\"Img 1 Ratio\",defaultValue:\"3/4\",placeholder:\"e.g. 16/9, 3/4, 1/1\"},image2AspectRatio:{type:ControlType.String,title:\"Img 2 Ratio\",defaultValue:\"3/4\",placeholder:\"e.g. 16/9, 3/4, 1/1\"},image3AspectRatio:{type:ControlType.String,title:\"Img 3 Ratio\",defaultValue:\"1/1\",placeholder:\"e.g. 16/9, 3/4, 1/1\"},image4AspectRatio:{type:ControlType.String,title:\"Img 4 Ratio\",defaultValue:\"16/9\",placeholder:\"e.g. 16/9, 3/4, 1/1\"},image5AspectRatio:{type:ControlType.String,title:\"Img 5 Ratio\",defaultValue:\"3/4\",placeholder:\"e.g. 16/9, 3/4, 1/1\"},image6AspectRatio:{type:ControlType.String,title:\"Img 6 Ratio\",defaultValue:\"16/9\",placeholder:\"e.g. 16/9, 3/4, 1/1\"},image7AspectRatio:{type:ControlType.String,title:\"Img 7 Ratio\",defaultValue:\"16/9\",placeholder:\"e.g. 16/9, 3/4, 1/1\"},image1Height:{type:ControlType.Number,title:\"Img 1 Height\",defaultValue:0,min:0,max:800,step:10,unit:\"px\"},image1Padding:{type:ControlType.Padding,title:\"Img 1 Padding\",defaultValue:\"0px\"},image2Padding:{type:ControlType.Padding,title:\"Img 2 Padding\",defaultValue:\"0px\"},image3Padding:{type:ControlType.Padding,title:\"Img 3 Padding\",defaultValue:\"0px\"},image4Padding:{type:ControlType.Padding,title:\"Img 4 Padding\",defaultValue:\"0px\"},image5Padding:{type:ControlType.Padding,title:\"Img 5 Padding\",defaultValue:\"0px\"},image6Padding:{type:ControlType.Padding,title:\"Img 6 Padding\",defaultValue:\"0px\"},image7Padding:{type:ControlType.Padding,title:\"Img 7 Padding\",defaultValue:\"0px\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"OverlappingImageLayout\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutWidth\":\"any-prefer-fixed\",\"framerIntrinsicHeight\":\"1200\",\"framerContractVersion\":\"1\",\"framerIntrinsicWidth\":\"400\",\"framerSupportedLayoutHeight\":\"auto\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./OverlappingImageLayout.map"],"mappings":"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"}