{"version":3,"file":"GridBackground.DX7fgpED.mjs","names":["useMemo"],"sources":["https:/framerusercontent.com/modules/Ysccay0BopkovK7KnLik/t6shk3k1cYqQ4VbMSrVc/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,blendMode,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\",mixBlendMode:blendMode}});}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\"},blendMode:{type:ControlType.Enum,title:\"Blend Mode\",options:[\"normal\",\"multiply\",\"screen\",\"overlay\",\"darken\",\"lighten\",\"color-dodge\",\"color-burn\",\"hard-light\",\"soft-light\",\"difference\",\"exclusion\",\"hue\",\"saturation\",\"color\",\"luminosity\"],optionTitles:[\"Normal\",\"Multiply\",\"Screen\",\"Overlay\",\"Darken\",\"Lighten\",\"Color Dodge\",\"Color Burn\",\"Hard Light\",\"Soft Light\",\"Difference\",\"Exclusion\",\"Hue\",\"Saturation\",\"Color\",\"Luminosity\"],defaultValue:\"normal\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"GridBackground\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutHeight\":\"any-prefer-fixed\",\"framerSupportedLayoutWidth\":\"any-prefer-fixed\",\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./GridBackground.map"],"mappings":"2KAMG,SAAwB,EAAe,EAAM,CAAC,GAAK,CAAC,kBAAgB,YAAU,UAAQ,YAAU,YAAU,YAAU,SAAO,EAAY,EAAIA,MAAY,CAAC,IAAM,EAAK,EAMtI,OANiJ,IAAY,QAAe;sBACtL,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,aAAa,EAAU,CAAC,CAAC,kBAhBpT,IAAoD,IAA2B,CAgBuO,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,UAAU,CAAC,KAAK,EAAY,KAAK,MAAM,aAAa,QAAQ,CAAC,SAAS,WAAW,SAAS,UAAU,SAAS,UAAU,cAAc,aAAa,aAAa,aAAa,aAAa,YAAY,MAAM,aAAa,QAAQ,aAAa,CAAC,aAAa,CAAC,SAAS,WAAW,SAAS,UAAU,SAAS,UAAU,cAAc,aAAa,aAAa,aAAa,aAAa,YAAY,MAAM,aAAa,QAAQ,aAAa,CAAC,aAAa,SAAS,CAAC,CAAC"}