{"version":3,"file":"GridBackgroundSystem.CkJUZ1lf.mjs","names":["React.useMemo"],"sources":["https:/framerusercontent.com/modules/cvjmpVVfok8OfRkiP3ze/n0UNn0ctQYb8CVEVH7It/GridBackgroundSystem.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import*as React from\"react\";import{addPropertyControls,ControlType}from\"framer\";function clamp(n,min,max){return Math.min(max,Math.max(min,n));}function hexToRgb(hex){const raw=(hex||\"\").trim();const m=raw.match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/i);if(!m)return null;let h=m[1];if(h.length===3)h=h.split(\"\").map(c=>c+c).join(\"\");const num=parseInt(h,16);return{r:num>>16&255,g:num>>8&255,b:num&255};}function toRgba(color,alpha){const a=clamp(alpha,0,1);const rgb=hexToRgb(color);if(rgb)return`rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${a})`;// Fallback: if color isn't hex, try using CSS color-mix (supported in modern browsers),\n// otherwise just return the color (alpha might not apply).\nreturn`color-mix(in srgb, ${color} ${Math.round(a*100)}%, transparent)`;}/**\n * Instructions:\n * Create a subtle, premium grid background system that can be used across the website as a base layer.\n * Two grid variations:\n * 1) Standard Grid: square grid layout, 40px×40px or 60px×60px, thin 1px lines, subtle (10%–20% opacity).\n * 2) Hero Grid: same base grid, slight radial fade from center + optional soft glow behind CTA to guide attention.\n *\n * @framerIntrinsicWidth 600\n * @framerIntrinsicHeight 400\n *\n * @framerSupportedLayoutWidth any\n * @framerSupportedLayoutHeight any\n */export default function GridBackgroundSystem(props){const{variant,backgroundColor,lineColor,lineOpacity,gridSize,lineWidth,heroFadeStrength,heroFadeRadius,glowEnabled,glowColor,glowOpacity,glowRadius,style}=props;const safeGridSize=Math.max(2,Math.round(gridSize));const safeLineWidth=Math.max(1,Math.round(lineWidth));const safeLineOpacity=clamp(lineOpacity,0,1);const gridBg=React.useMemo(()=>{const c=toRgba(lineColor,safeLineOpacity);// Two orthogonal gradients to form a square grid.\n// Using transparent up to (grid - lineWidth) to draw a crisp line at each cell boundary.\nconst v=`linear-gradient(to right, ${c} 0, ${c} ${safeLineWidth}px, transparent ${safeLineWidth}px, transparent ${safeGridSize}px)`;const h=`linear-gradient(to bottom, ${c} 0, ${c} ${safeLineWidth}px, transparent ${safeLineWidth}px, transparent ${safeGridSize}px)`;return{backgroundColor,backgroundImage:`${v}, ${h}`,backgroundSize:`${safeGridSize}px ${safeGridSize}px, ${safeGridSize}px ${safeGridSize}px`,backgroundPosition:\"0 0, 0 0\"};},[backgroundColor,lineColor,safeLineOpacity,safeGridSize,safeLineWidth]);const showHero=variant===\"hero\";const fadeStrength=clamp(heroFadeStrength,0,1);const fadeRadius=clamp(heroFadeRadius,20,120);const safeGlowOpacity=clamp(glowOpacity,0,1);const safeGlowRadius=clamp(glowRadius,10,160);const heroFadeStyle=React.useMemo(()=>{// Overlay that becomes more opaque toward edges, keeping center clearer (guides attention).\n// We fade the grid by painting the background color from ~radius outward.\nconst bg0=toRgba(backgroundColor,0);const bg1=toRgba(backgroundColor,fadeStrength);return{position:\"absolute\",inset:0,pointerEvents:\"none\",backgroundImage:`radial-gradient(circle at 50% 40%, ${bg0} 0%, ${bg0} ${fadeRadius}%, ${bg1} 100%)`};},[backgroundColor,fadeStrength,fadeRadius]);const heroGlowStyle=React.useMemo(()=>{if(!glowEnabled)return null;const g0=toRgba(glowColor,safeGlowOpacity);const g1=toRgba(glowColor,0);return{position:\"absolute\",inset:0,pointerEvents:\"none\",backgroundImage:`radial-gradient(circle at 50% 55%, ${g0} 0%, ${g1} ${safeGlowRadius}%)`,filter:\"blur(0px)\"};},[glowEnabled,glowColor,safeGlowOpacity,safeGlowRadius]);return /*#__PURE__*/_jsxs(\"div\",{style:{position:\"relative\",width:\"100%\",height:\"100%\",minWidth:5,minHeight:5,overflow:\"hidden\",...gridBg,...style},\"aria-hidden\":\"true\",children:[showHero&&/*#__PURE__*/_jsx(\"div\",{style:heroFadeStyle}),showHero&&glowEnabled&&heroGlowStyle&&/*#__PURE__*/_jsx(\"div\",{style:heroGlowStyle})]});}addPropertyControls(GridBackgroundSystem,{variant:{type:ControlType.Enum,title:\"Variant\",options:[\"standard\",\"hero\"],optionTitles:[\"Standard\",\"Hero\"],defaultValue:\"standard\",displaySegmentedControl:true},backgroundColor:{type:ControlType.Color,title:\"Background\",defaultValue:\"#FFFFFF\"},lineColor:{type:ControlType.Color,title:\"Grid Lines\",defaultValue:\"#EEEEEE\"},lineOpacity:{type:ControlType.Number,title:\"Line Opacity\",defaultValue:.14,min:0,max:1,step:.01},gridSize:{type:ControlType.Number,title:\"Grid Size\",defaultValue:40,min:8,max:200,step:1,unit:\"px\"},lineWidth:{type:ControlType.Number,title:\"Line Width\",defaultValue:1,min:1,max:4,step:1,unit:\"px\"},heroFadeStrength:{type:ControlType.Number,title:\"Hero Fade\",defaultValue:.85,min:0,max:1,step:.01,hidden:p=>p.variant!==\"hero\"},heroFadeRadius:{type:ControlType.Number,title:\"Fade Radius\",defaultValue:55,min:20,max:120,step:1,unit:\"%\",hidden:p=>p.variant!==\"hero\"},glowEnabled:{type:ControlType.Boolean,title:\"Glow\",defaultValue:true,enabledTitle:\"On\",disabledTitle:\"Off\",hidden:p=>p.variant!==\"hero\"},glowColor:{type:ControlType.Color,title:\"Glow Color\",defaultValue:\"#FFFFFF\",hidden:p=>p.variant!==\"hero\"||!p.glowEnabled},glowOpacity:{type:ControlType.Number,title:\"Glow Opacity\",defaultValue:.6,min:0,max:1,step:.01,hidden:p=>p.variant!==\"hero\"||!p.glowEnabled},glowRadius:{type:ControlType.Number,title:\"Glow Radius\",defaultValue:42,min:10,max:160,step:1,unit:\"%\",hidden:p=>p.variant!==\"hero\"||!p.glowEnabled}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"GridBackgroundSystem\",\"slots\":[],\"annotations\":{\"framerIntrinsicHeight\":\"400\",\"framerSupportedLayoutWidth\":\"any\",\"framerContractVersion\":\"1\",\"framerSupportedLayoutHeight\":\"any\",\"framerIntrinsicWidth\":\"600\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./GridBackgroundSystem.map"],"mappings":"iLAAyI,SAAS,EAAM,EAAE,EAAI,EAAI,CAAC,OAAO,KAAK,IAAI,EAAI,KAAK,IAAI,EAAI,CAAC,CAAC,CAAE,CAAC,SAAS,EAAS,EAAI,CAA4B,IAAM,GAAtB,GAAK,GAAA,CAAI,KAAiB,CAAC,CAAC,MAAM,+BAA+B,EAAE,GAAG,CAAC,EAAE,OAAO,KAAK,IAAI,EAAE,EAAE,GAAM,EAAE,SAAS,IAAE,EAAE,EAAE,MAAM,EAAE,CAAC,CAAC,IAAI,GAAG,EAAE,CAAC,CAAC,CAAC,KAAK,EAAE,GAAE,IAAM,EAAI,SAAS,EAAE,EAAE,EAAE,MAAM,CAAC,EAAE,GAAK,GAAG,IAAI,EAAE,GAAK,EAAE,IAAI,EAAE,EAAI,GAAG,CAAE,CAAC,SAAS,EAAO,EAAM,EAAM,CAAC,IAAM,EAAE,EAAM,EAAM,EAAE,CAAC,EAAQ,EAAI,EAAS,CAAK,EAEnhB,OAFwhB,EAAU,QAAQ,EAAI,EAAE,IAAI,EAAI,EAAE,IAAI,EAAI,EAAE,IAAI,EAAE,GAEpkB,sBAAsB,EAAM,GAAG,KAAK,MAAM,EAAE,GAAG,EAAE,gBAAiB,CAYrE,SAAwB,EAAqB,EAAM,CAAC,GAAK,CAAC,UAAQ,kBAAgB,YAAU,cAAY,WAAS,YAAU,mBAAiB,iBAAe,cAAY,YAAU,cAAY,aAAW,SAAO,EAAY,EAAa,KAAK,IAAI,EAAE,KAAK,MAAM,CAAQ,CAAC,EAAQ,EAAc,KAAK,IAAI,EAAE,KAAK,MAAM,CAAS,CAAC,EAAQ,EAAgB,EAAM,EAAY,EAAE,CAAC,EAAQ,EAAOA,MAAkB,CAAC,IAAM,EAAE,EAAO,EAAU,CAAe,EAEjb,EAAE,6BAA6B,EAAE,MAAM,EAAE,GAAG,EAAc,kBAAkB,EAAc,kBAAkB,EAAa,KAAW,EAAE,8BAA8B,EAAE,MAAM,EAAE,GAAG,EAAc,kBAAkB,EAAc,kBAAkB,EAAa,KAAK,MAAM,CAAC,kBAAgB,gBAAgB,GAAG,EAAE,IAAI,IAAI,eAAe,GAAG,EAAa,KAAK,EAAa,MAAM,EAAa,KAAK,EAAa,IAAI,mBAAmB,UAAU,CAAE,EAAE,CAAC,EAAgB,EAAU,EAAgB,EAAa,CAAa,CAAC,EAAQ,EAAS,IAAU,OAAa,EAAa,EAAM,EAAiB,EAAE,CAAC,EAAQ,EAAW,EAAM,EAAe,GAAG,GAAG,EAAQ,EAAgB,EAAM,EAAY,EAAE,CAAC,EAAQ,EAAe,EAAM,EAAW,GAAG,GAAG,EAAQ,EAAcA,MAAkB,CAE9vB,IAAM,EAAI,EAAO,EAAgB,CAAC,EAAQ,EAAI,EAAO,EAAgB,CAAY,EAAE,MAAM,CAAC,SAAS,WAAW,MAAM,EAAE,cAAc,OAAO,gBAAgB,sCAAsC,EAAI,OAAO,EAAI,GAAG,EAAW,KAAK,EAAI,OAAO,CAAE,EAAE,CAAC,EAAgB,EAAa,CAAU,CAAC,EAAQ,EAAcA,MAAuB,EAAsG,CAAC,SAAS,WAAW,MAAM,EAAE,cAAc,OAAO,gBAAgB,sCAAvI,EAAO,EAAU,CAA6J,EAAE,OAArI,EAAO,EAAU,CAA4H,EAAE,GAAG,EAAe,IAAI,OAAO,WAAW,EAAhP,KAAoP,CAAC,EAAY,EAAU,EAAgB,CAAc,CAAC,EAAE,OAAoB,EAAM,MAAM,CAAC,MAAM,CAAC,SAAS,WAAW,MAAM,OAAO,OAAO,OAAO,SAAS,EAAE,UAAU,EAAE,SAAS,SAAS,GAAG,EAAO,GAAG,CAAK,EAAE,cAAc,OAAO,SAAS,CAAC,GAAuB,EAAK,MAAM,CAAC,MAAM,CAAa,CAAC,EAAE,GAAU,GAAa,GAA4B,EAAK,MAAM,CAAC,MAAM,CAAa,CAAC,CAAC,CAAC,CAAC,CAAE,iBAlBn5B,IAA4B,IAAoD,EAkBo0B,EAAoB,EAAqB,CAAC,QAAQ,CAAC,KAAK,EAAY,KAAK,MAAM,UAAU,QAAQ,CAAC,WAAW,MAAM,EAAE,aAAa,CAAC,WAAW,MAAM,EAAE,aAAa,WAAW,wBAAwB,EAAI,EAAE,gBAAgB,CAAC,KAAK,EAAY,MAAM,MAAM,aAAa,aAAa,SAAS,EAAE,UAAU,CAAC,KAAK,EAAY,MAAM,MAAM,aAAa,aAAa,SAAS,EAAE,YAAY,CAAC,KAAK,EAAY,OAAO,MAAM,eAAe,aAAa,IAAI,IAAI,EAAE,IAAI,EAAE,KAAK,GAAG,EAAE,SAAS,CAAC,KAAK,EAAY,OAAO,MAAM,YAAY,aAAa,GAAG,IAAI,EAAE,IAAI,IAAI,KAAK,EAAE,KAAK,IAAI,EAAE,UAAU,CAAC,KAAK,EAAY,OAAO,MAAM,aAAa,aAAa,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,IAAI,EAAE,iBAAiB,CAAC,KAAK,EAAY,OAAO,MAAM,YAAY,aAAa,IAAI,IAAI,EAAE,IAAI,EAAE,KAAK,IAAI,OAAO,GAAG,EAAE,UAAU,MAAM,EAAE,eAAe,CAAC,KAAK,EAAY,OAAO,MAAM,cAAc,aAAa,GAAG,IAAI,GAAG,IAAI,IAAI,KAAK,EAAE,KAAK,IAAI,OAAO,GAAG,EAAE,UAAU,MAAM,EAAE,YAAY,CAAC,KAAK,EAAY,QAAQ,MAAM,OAAO,aAAa,GAAK,aAAa,KAAK,cAAc,MAAM,OAAO,GAAG,EAAE,UAAU,MAAM,EAAE,UAAU,CAAC,KAAK,EAAY,MAAM,MAAM,aAAa,aAAa,UAAU,OAAO,GAAG,EAAE,UAAU,QAAQ,CAAC,EAAE,WAAW,EAAE,YAAY,CAAC,KAAK,EAAY,OAAO,MAAM,eAAe,aAAa,GAAG,IAAI,EAAE,IAAI,EAAE,KAAK,IAAI,OAAO,GAAG,EAAE,UAAU,QAAQ,CAAC,EAAE,WAAW,EAAE,WAAW,CAAC,KAAK,EAAY,OAAO,MAAM,cAAc,aAAa,GAAG,IAAI,GAAG,IAAI,IAAI,KAAK,EAAE,KAAK,IAAI,OAAO,GAAG,EAAE,UAAU,QAAQ,CAAC,EAAE,WAAW,CAAC,CAAC"}