{"version":3,"file":"GridBackground.Cm74u7F2.mjs","names":["useMemo"],"sources":["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":"kQAMG,SAAwB,EAAe,EAAM,CAAC,GAAK,CAAC,kBAAgB,YAAU,UAAQ,YAAU,YAAU,SAAO,EAAY,EAAIA,MAAY,CAAC,IAAM,EAAK,EAM5H,OANuI,IAAY,QAAe;sBAC5K,EAAK,YAAY,EAAK;yBACnB,EAAK,YAAY,EAAK;2CACJ,EAAK,YAAY,EAAU,kBAAkB,EAAU;oCAC9D,EAAK,mBAAmB,EAAU,kBAAkB,EAAU;;QAE1F,QAAQ,MAAM,GAAG,CAAa;sBAChB,EAAK,YAAY,EAAK;yBACnB,EAAK,YAAY,EAAK;wBACvB,EAAK,EAAE,QAAQ,EAAK,EAAE,OAAO,EAAU,EAAE,UAAU,EAAU;;QAE7E,QAAQ,MAAM,GAAG,EAAI,CAAC,EAAU,EAAQ,EAAU,EAAU,CAAC,CAAC,OAAoB,EAAK,MAAM,CAAC,MAAM,CAAC,GAAG,EAAM,MAAM,OAAO,OAAO,OAAO,kBAAgB,gBAAgB,gCAAgC,mBAAmB,EAAI,CAAC,IAAI,iBAAiB,SAAS,eAAe,GAAG,EAAQ,KAAK,EAAQ,IAAI,SAAS,WAAW,CAAC,CAAC,kBAhB7R,IAAoD,IAA2B,CAgBgN,EAAoB,EAAe,CAAC,gBAAgB,CAAC,KAAK,EAAY,MAAM,MAAM,aAAa,aAAa,UAAU,CAAC,UAAU,CAAC,KAAK,EAAY,MAAM,MAAM,aAAa,aAAa,UAAU,CAAC,QAAQ,CAAC,KAAK,EAAY,OAAO,MAAM,UAAU,aAAa,GAAG,IAAI,EAAE,IAAI,IAAI,KAAK,EAAE,KAAK,KAAK,CAAC,UAAU,CAAC,KAAK,EAAY,OAAO,MAAM,iBAAiB,aAAa,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,KAAK,CAAC,UAAU,CAAC,KAAK,EAAY,KAAK,MAAM,QAAQ,QAAQ,CAAC,QAAQ,OAAO,CAAC,aAAa,QAAQ,CAAC,CAAC"}