{
  "version": 3,
  "sources": ["ssg:https://framerusercontent.com/modules/Ysccay0BopkovK7KnLik/TTWIv5v3Ub5iCTCl8HUb/GridBackground.js"],
  "sourcesContent": ["// Grid lines background component with configurable line color, background color, spacing, and line thickness\nimport{jsx as _jsx}from\"react/jsx-runtime\";import{addPropertyControls,ControlType}from\"framer\";import{useMemo}from\"react\";/**\n * GridBackground\n *\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight any-prefer-fixed\n */export default function GridBackground(props){const{backgroundColor,lineColor,spacing,thickness,gridStyle,style}=props;const svg=useMemo(()=>{const size=spacing;if(gridStyle===\"lines\"){return`\n        <svg width=\"${size}\" height=\"${size}\" xmlns=\"http://www.w3.org/2000/svg\">\n          <rect width=\"${size}\" height=\"${size}\" fill=\"none\" />\n          <line x1=\"0\" y1=\"0\" x2=\"0\" y2=\"${size}\" stroke=\"${lineColor}\" stroke-width=\"${thickness}\" />\n          <line x1=\"0\" y1=\"0\" x2=\"${size}\" y2=\"0\" stroke=\"${lineColor}\" stroke-width=\"${thickness}\" />\n        </svg>\n      `.replace(/\\n/g,\"\");}else{return`\n        <svg width=\"${size}\" height=\"${size}\" xmlns=\"http://www.w3.org/2000/svg\">\n          <rect width=\"${size}\" height=\"${size}\" fill=\"none\" />\n          <circle cx=\"${size/2}\" cy=\"${size/2}\" r=\"${thickness/2}\" fill=\"${lineColor}\" />\n        </svg>\n      `.replace(/\\n/g,\"\");}},[lineColor,spacing,thickness,gridStyle]);return /*#__PURE__*/_jsx(\"div\",{style:{...style,width:\"100%\",height:\"100%\",backgroundColor,backgroundImage:`url('data:image/svg+xml;utf8,${encodeURIComponent(svg)}')`,backgroundRepeat:\"repeat\",backgroundSize:`${spacing}px ${spacing}px`,position:\"relative\"}});}addPropertyControls(GridBackground,{backgroundColor:{type:ControlType.Color,title:\"Background\",defaultValue:\"#FFFFFF\"},lineColor:{type:ControlType.Color,title:\"Line Color\",defaultValue:\"#EEEEEE\"},spacing:{type:ControlType.Number,title:\"Spacing\",defaultValue:32,min:4,max:200,step:1,unit:\"px\"},thickness:{type:ControlType.Number,title:\"Line Thickness\",defaultValue:1,min:1,max:8,step:1,unit:\"px\"},gridStyle:{type:ControlType.Enum,title:\"Style\",options:[\"lines\",\"dots\"],defaultValue:\"lines\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"GridBackground\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutWidth\":\"any-prefer-fixed\",\"framerContractVersion\":\"1\",\"framerSupportedLayoutHeight\":\"any-prefer-fixed\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./GridBackground.map"],
  "mappings": "yIAAAA,IAMkB,SAARC,EAAgCC,EAAM,CAAC,GAAK,CAAC,gBAAAC,EAAgB,UAAAC,EAAU,QAAAC,EAAQ,UAAAC,EAAU,UAAAC,EAAU,MAAAC,CAAK,EAAEN,EAAYO,EAAIC,EAAQ,IAAI,CAAC,IAAMC,EAAKN,EAAQ,OAAGE,IAAY,QAAe;AAAA,sBAC5KI,CAAI,aAAaA,CAAI;AAAA,yBAClBA,CAAI,aAAaA,CAAI;AAAA,2CACHA,CAAI,aAAaP,CAAS,mBAAmBE,CAAS;AAAA,oCAC7DK,CAAI,oBAAoBP,CAAS,mBAAmBE,CAAS;AAAA;AAAA,QAEzF,QAAQ,MAAM,EAAE,EAAc;AAAA,sBAChBK,CAAI,aAAaA,CAAI;AAAA,yBAClBA,CAAI,aAAaA,CAAI;AAAA,wBACtBA,EAAK,CAAC,SAASA,EAAK,CAAC,QAAQL,EAAU,CAAC,WAAWF,CAAS;AAAA;AAAA,QAE5E,QAAQ,MAAM,EAAE,CAAG,EAAE,CAACA,EAAUC,EAAQC,EAAUC,CAAS,CAAC,EAAE,OAAoBK,EAAK,MAAM,CAAC,MAAM,CAAC,GAAGJ,EAAM,MAAM,OAAO,OAAO,OAAO,gBAAAL,EAAgB,gBAAgB,gCAAgC,mBAAmBM,CAAG,CAAC,KAAK,iBAAiB,SAAS,eAAe,GAAGJ,CAAO,MAAMA,CAAO,KAAK,SAAS,UAAU,CAAC,CAAC,CAAE,CAACQ,EAAoBZ,EAAe,CAAC,gBAAgB,CAAC,KAAKa,EAAY,MAAM,MAAM,aAAa,aAAa,SAAS,EAAE,UAAU,CAAC,KAAKA,EAAY,MAAM,MAAM,aAAa,aAAa,SAAS,EAAE,QAAQ,CAAC,KAAKA,EAAY,OAAO,MAAM,UAAU,aAAa,GAAG,IAAI,EAAE,IAAI,IAAI,KAAK,EAAE,KAAK,IAAI,EAAE,UAAU,CAAC,KAAKA,EAAY,OAAO,MAAM,iBAAiB,aAAa,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,IAAI,EAAE,UAAU,CAAC,KAAKA,EAAY,KAAK,MAAM,QAAQ,QAAQ,CAAC,QAAQ,MAAM,EAAE,aAAa,OAAO,CAAC,CAAC",
  "names": ["init_ssg_sandbox_shims", "GridBackground", "props", "backgroundColor", "lineColor", "spacing", "thickness", "gridStyle", "style", "svg", "se", "size", "p", "addPropertyControls", "ControlType"]
}