{
  "version": 3,
  "sources": ["ssg:https://framerusercontent.com/modules/SWmNy8oofTQ84wBmP3Oi/4h8UM9ZWlFEDSNfAJQFm/PerfectGrid.js"],
  "sourcesContent": ["/*\n * Perfect Grid by framer.today\n * v1.0.0\n *\n * hi@framer.today\n * _joerl on \uD835\uDD4F\n *\n * Full terms here \u21B4\n * https://framer.today/license\n *\n */import{jsx as _jsx}from\"react/jsx-runtime\";import{useRef,useState,useEffect}from\"react\";import{addPropertyControls,ControlType}from\"framer\";import{motion}from\"framer-motion\";/**\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight any-prefer-fixed\n * @framerDisableUnlink\n */export default function PerfectGrid(props){const containerRef=useRef(null);const[gridSize,setGridSize]=useState(null);useEffect(()=>{if(containerRef.current){const containerWidth=containerRef.current.offsetWidth;// Calculate the number of columns\nconst columns=Math.ceil(containerWidth/props.columnWidth);// Adjust the column width slightly to fit the rightmost line within the container\nconst adjustedColumnWidth=(containerWidth-1)/columns;setGridSize(adjustedColumnWidth);}},[props.columnWidth]);const dashArray=props.dashed?`${props.dashLength},${props.dashSpace}`:\"0\";const encodedSvg=encodeURIComponent(`<svg xmlns='http://www.w3.org/2000/svg' width='${gridSize}' height='${gridSize}' viewBox='0 0 ${gridSize} ${gridSize}'>`+`<path d='M 0 0.5 L ${gridSize} 0.5 M 0.5 0 L 0.5 ${gridSize}' stroke='${props.lineColor}' stroke-dasharray='${dashArray}' stroke-width='1' />`+`</svg>`);const containerStyle={height:\"100%\",width:\"100%\",...props.style,backgroundSize:`${gridSize}px ${gridSize}px`,backgroundRepeat:\"repeat\",backgroundImage:`url(\"data:image/svg+xml,${encodedSvg}\")`};return /*#__PURE__*/_jsx(motion.div,{ref:containerRef,style:containerStyle,initial:{opacity:0},animate:{opacity:1},transition:{duration:.2}});}PerfectGrid.defaultProps={lineColor:\"#777\",columnWidth:50,dashed:false,dashLength:5,dashSpace:5};addPropertyControls(PerfectGrid,{columnWidth:{type:ControlType.Number,title:\"Column Width\",defaultValue:50,min:10,max:200,step:1},dashed:{type:ControlType.Boolean,title:\"Dashed Lines\",defaultValue:false},dashLength:{type:ControlType.Number,title:\"Dash Length\",defaultValue:5,min:1,max:20,step:1,hidden:props=>!props.dashed},dashSpace:{type:ControlType.Number,title:\"Dash Space\",defaultValue:5,min:1,max:20,step:1,hidden:props=>!props.dashed},lineColor:{type:ControlType.Color,title:\"Line Color\",defaultValue:\"#000000\",description:`\n        \n        *from framer.today*\n [License](https://framer.today/license)\n    `}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"PerfectGrid\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\",\"framerDisableUnlink\":\"\",\"framerSupportedLayoutWidth\":\"any-prefer-fixed\",\"framerSupportedLayoutHeight\":\"any-prefer-fixed\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./PerfectGrid.map"],
  "mappings": "qHAckB,SAARA,EAA6BC,EAAM,CAAC,IAAMC,EAAaC,EAAO,IAAI,EAAO,CAACC,EAASC,CAAW,EAAEC,EAAS,IAAI,EAAEC,EAAU,IAAI,CAAC,GAAGL,EAAa,QAAQ,CAAC,IAAMM,EAAeN,EAAa,QAAQ,YACrMO,EAAQ,KAAK,KAAKD,EAAeP,EAAM,WAAW,EAClDS,GAAqBF,EAAe,GAAGC,EAAQJ,EAAYK,CAAmB,CAAE,CAAC,EAAE,CAACT,EAAM,WAAW,CAAC,EAAE,IAAMU,EAAUV,EAAM,OAAO,GAAGA,EAAM,UAAU,IAAIA,EAAM,SAAS,GAAG,IAAUW,EAAW,mBAAmB,kDAAkDR,CAAQ,aAAaA,CAAQ,kBAAkBA,CAAQ,IAAIA,CAAQ,wBAA2BA,CAAQ,sBAAsBA,CAAQ,aAAaH,EAAM,SAAS,uBAAuBU,CAAS,6BAAgC,EAAQE,EAAe,CAAC,OAAO,OAAO,MAAM,OAAO,GAAGZ,EAAM,MAAM,eAAe,GAAGG,CAAQ,MAAMA,CAAQ,KAAK,iBAAiB,SAAS,gBAAgB,2BAA2BQ,CAAU,IAAI,EAAE,OAAoBE,EAAKC,EAAO,IAAI,CAAC,IAAIb,EAAa,MAAMW,EAAe,QAAQ,CAAC,QAAQ,CAAC,EAAE,QAAQ,CAAC,QAAQ,CAAC,EAAE,WAAW,CAAC,SAAS,EAAE,CAAC,CAAC,CAAE,CAACb,EAAY,aAAa,CAAC,UAAU,OAAO,YAAY,GAAG,OAAO,GAAM,WAAW,EAAE,UAAU,CAAC,EAAEgB,EAAoBhB,EAAY,CAAC,YAAY,CAAC,KAAKiB,EAAY,OAAO,MAAM,eAAe,aAAa,GAAG,IAAI,GAAG,IAAI,IAAI,KAAK,CAAC,EAAE,OAAO,CAAC,KAAKA,EAAY,QAAQ,MAAM,eAAe,aAAa,EAAK,EAAE,WAAW,CAAC,KAAKA,EAAY,OAAO,MAAM,cAAc,aAAa,EAAE,IAAI,EAAE,IAAI,GAAG,KAAK,EAAE,OAAOhB,GAAO,CAACA,EAAM,MAAM,EAAE,UAAU,CAAC,KAAKgB,EAAY,OAAO,MAAM,aAAa,aAAa,EAAE,IAAI,EAAE,IAAI,GAAG,KAAK,EAAE,OAAOhB,GAAO,CAACA,EAAM,MAAM,EAAE,UAAU,CAAC,KAAKgB,EAAY,MAAM,MAAM,aAAa,aAAa,UAAU,YAAY;AAAA;AAAA;AAAA;AAAA,KAI/6C,CAAC,CAAC",
  "names": ["PerfectGrid", "props", "containerRef", "pe", "gridSize", "setGridSize", "ye", "ue", "containerWidth", "columns", "adjustedColumnWidth", "dashArray", "encodedSvg", "containerStyle", "p", "motion", "addPropertyControls", "ControlType"]
}