{ "version": 3, "sources": ["ssg:https://framerusercontent.com/modules/hkeHXCiR1Ibo4sAlkFtn/hxk7LoYvXBOw76NsR2HV/MasonryLayout_1.js", "ssg:https://framerusercontent.com/modules/7yeYvUYiSf3Nks7xY3C5/oCZT4bd4SfjRn7gFRZf7/WdMscfac4.js"], "sourcesContent": ["import{jsx as _jsx}from\"react/jsx-runtime\";import{addPropertyControls,ControlType}from\"framer\";///////////////////////////\n// Code from Nikolay Goncharuk on GitHub:\n// https://github.com/GoncharukBro/react-smart-masonry/blob/master/src/Masonry.tsx\n// https://github.com/GoncharukBro/react-smart-masonry/blob/master/src/useResize.ts\n//\n// Modified by Isaac Roberts (twitter.com/madebyisaacr)\n//\n// Copyright (c) 2021 Nikolay Goncharuk\n// MIT License\nimport{useState,useLayoutEffect,useEffect,useMemo,useRef,Children,forwardRef,isValidElement}from\"react\";function getCurrentBreakpoints(breakpoints,width){const normalizedBreakpoints=breakpoints&&Object.entries(breakpoints).sort((a,b)=>b[1]-a[1]);return normalizedBreakpoints===null||normalizedBreakpoints===void 0?void 0:normalizedBreakpoints.filter(item=>item[1]<=width).map(item=>item[0]);}function getState(breakpoints,width){return{width,currentBreakpoints:getCurrentBreakpoints(breakpoints,width)};}function useResize(breakpoints){const[state,setState]=useState(()=>getState(breakpoints,0)//global.innerWidth)\n);useEffect(()=>{const handleResize=()=>{setState(getState(breakpoints,window.innerWidth));};window.addEventListener(\"resize\",handleResize);return()=>{window.removeEventListener(\"resize\",handleResize);};},[breakpoints]);return state;}function getCurrentParam(breakpoints,param,defaultValue){if(typeof param===\"object\"){const breakpoint=breakpoints===null||breakpoints===void 0?void 0:breakpoints.find(item=>param[item]!==undefined);var _breakpoint;return breakpoint!==undefined?(_breakpoint=param[breakpoint])!==null&&_breakpoint!==void 0?_breakpoint:defaultValue:defaultValue;}return param;}const DEFAULT_COLUMNS=1;const DEFAULT_GAP=0;function MasonryComponent({breakpoints,columns=DEFAULT_COLUMNS,gap=DEFAULT_GAP,reverse=false,autoArrange=false,children,style,...otherProps},forwardedRef){const{currentBreakpoints}=useResize(breakpoints);const elements=useRef([]);const[arrange,setArrange]=useState(false);const[currentColumns,setCurrentColumns]=useState(()=>{return getCurrentParam(currentBreakpoints,columns,DEFAULT_COLUMNS);});const[currentGap,setCurrentGap]=useState(()=>{return getCurrentParam(currentBreakpoints,gap,DEFAULT_GAP);});// eslint-disable-next-line react-hooks/exhaustive-deps\nuseLayoutEffect(()=>{if(autoArrange&&!arrange)setArrange(true);return()=>{if(autoArrange&&arrange)setArrange(false);};});useEffect(()=>{const param=getCurrentParam(currentBreakpoints,columns,DEFAULT_COLUMNS);setCurrentColumns(param);},[columns,currentBreakpoints]);useEffect(()=>{const param=getCurrentParam(currentBreakpoints,gap,DEFAULT_GAP);setCurrentGap(param);},[gap,currentBreakpoints]);const layout=useMemo(()=>{if(currentColumns<1)return[];const arrayOfChildren=Children.toArray(children);if(reverse)arrayOfChildren.reverse();const newLayout=Array.from({length:currentColumns},()=>{return[];});const columnHeights=newLayout.map(()=>0);const getcolumnIndex=index=>{if(autoArrange&&arrange&&elements.current.length>0){const columnIndex=columnHeights.findIndex(item=>{return item===Math.min(...columnHeights);});const element=elements.current.find(item=>item.index===index);const elementHeight=element===null||element===void 0?void 0:element.element.getBoundingClientRect().height;columnHeights[columnIndex]+=elementHeight||0;return columnIndex;}return index%currentColumns;};arrayOfChildren.forEach((child,index)=>{if(child&&/*#__PURE__*/isValidElement(child)){newLayout[getcolumnIndex(index)].push({element:child,index});}});return newLayout;},[arrange,autoArrange,children,currentColumns,reverse]);const temporaryElements=[];const addElement=index=>element=>{if(element!==null){temporaryElements.push({element,index});elements.current=temporaryElements;}};return /*#__PURE__*/_jsx(\"div\",{ref:forwardedRef,style:{display:\"flex\",gap:currentGap,...style},...otherProps,children:layout.map((column,columnIndex)=>/*#__PURE__*/_jsx(\"div\",{style:{flex:1,display:\"flex\",flexDirection:\"column\",gap:currentGap},children:column.map((item,itemIndex)=>/*#__PURE__*/_jsx(\"div\",{ref:addElement(item.index),children:item.element},itemIndex))},columnIndex))});}const Masonry=/*#__PURE__*/forwardRef(MasonryComponent);///////////////////////////\n/**\n * @framerSupportedLayoutWidth any\n * @framerSupportedLayoutHeight auto\n */export default function MasonryLayout(props){var _props_layers;let layers=[];if(props.columnWidth==\"fill\"){for(let i=0;i