{"version":3,"file":"SEOScrollTextBox.D52xf7m9.mjs","names":["React.useId","React.useRef","React.useState","React.useMemo","React.startTransition"],"sources":["https:/framerusercontent.com/modules/GaHRmRUVHxRFq9Q2jzL1/Ho8W7KNwUNjyIbqajtws/SEOScrollTextBox.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import*as React from\"react\";import{addPropertyControls,ControlType}from\"framer\";/**\n * Instructions:\n * Create a reusable Framer component called SEO Scroll Text Box.\n * Requirements:\n * - A fixed-height card container with rounded corners and padding\n * - Inner content should be vertically scrollable when text exceeds the height\n * - Add properties for: Heading text, Body text, Heading tag (H1, H2, H3), Body tag (P, Span), Height, Border radius, Padding\n * - The heading and body must render with proper semantic HTML tags for SEO\n * - Text content should be editable from the properties panel\n * - Overflow should scroll only inside the box, not the page\n * - Clean minimal style suitable for agency/service pages\n * - Responsive width\n * - Optional toggle to hide scrollbar while keeping scroll active\n *\n * @framerIntrinsicWidth 420\n * @framerIntrinsicHeight 240\n *\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight fixed\n */export default function SEOScrollTextBox(props){const{contentHtml,height,borderRadius,padding,backgroundColor,borderColor,borderWidth,headingColor,bodyColor,h1Font,h2Font,h3Font,bodyFont,hideScrollbar,gap,style}=props;const uid=React.useId();const scrollRef=React.useRef(null);const[isHovered,setIsHovered]=React.useState(false);const rootClassName=React.useMemo(()=>`seo-scroll-text-box__root_${uid.replace(/:/g,\"\")}`,[uid]);const scrollClassName=React.useMemo(()=>`seo-scroll-text-box__scroll_${uid.replace(/:/g,\"\")}`,[uid]);const contentClassName=React.useMemo(()=>`seo-scroll-text-box__content_${uid.replace(/:/g,\"\")}`,[uid]);const isHeightStretch=style?.height===\"100%\";const resolvedHeight=isHeightStretch?\"100%\":`${height}px`;const shouldHideScrollbar=!!hideScrollbar;const resolvedHtml=React.useMemo(()=>{return coerceToHtml(contentHtml);},[contentHtml]);React.useEffect(()=>{if(typeof window===\"undefined\")return;const el=scrollRef.current;if(!el||!isHovered)return;const onWheel=e=>{const target=scrollRef.current;if(!target)return;const canScroll=target.scrollHeight>target.clientHeight+1;if(!canScroll)return;// Keep the scroll inside the box (prevent the page from scrolling while hovered).\ne.preventDefault();target.scrollTop+=e.deltaY;};el.addEventListener(\"wheel\",onWheel,{passive:false});return()=>el.removeEventListener(\"wheel\",onWheel);},[isHovered]);return /*#__PURE__*/_jsxs(\"div\",{className:rootClassName,style:{position:\"relative\",width:\"100%\",height:resolvedHeight,boxSizing:\"border-box\",borderRadius,padding,background:backgroundColor,border:`${borderWidth}px solid ${borderColor}`,overflow:\"hidden\",...style},\"aria-label\":\"SEO scroll text box\",children:[/*#__PURE__*/_jsx(\"style\",{// eslint-disable-next-line react/no-danger\ndangerouslySetInnerHTML:{__html:`\n\t\t\t\t\t\t.${scrollClassName} { overflow-y: auto; }\n\t\t\t\t\t\t${shouldHideScrollbar?`.${scrollClassName} { scrollbar-width: none; -ms-overflow-style: none; } .${scrollClassName}::-webkit-scrollbar { width: 0px; height: 0px; display: none; }`:\"\"}\n\t\t\t\t\t\t.${contentClassName} :where(h1,h2,h3,p,span) { margin: 0; padding: 0; }\n\t\t\t\t\t\t.${contentClassName} :where(p,span,li) { white-space: pre-wrap; overflow-wrap: anywhere; }\n\t\t\t\t\t\t.${contentClassName} :where(ul,ol) { margin: 0.5em 0; padding-left: 1.25em; }\n\t\t\t\t\t\t.${contentClassName} li { margin: 0.2em 0; }\n\t\t\t\t\t\t.${contentClassName} h1 { ${serializeFontToCss(h1Font)} color: ${headingColor}; }\n\t\t\t\t\t\t.${contentClassName} h2 { ${serializeFontToCss(h2Font)} color: ${headingColor}; }\n\t\t\t\t\t\t.${contentClassName} h3 { ${serializeFontToCss(h3Font)} color: ${headingColor}; }\n\t\t\t\t\t\t.${contentClassName} :where(p,span,li) { ${serializeFontToCss(bodyFont)} color: ${bodyColor}; }\n\t\t\t\t\t\t.${contentClassName} a { color: inherit; }\n\t\t\t\t\t`}}),/*#__PURE__*/_jsx(\"div\",{ref:scrollRef,className:scrollClassName,style:{position:\"relative\",width:\"100%\",height:\"100%\",overflowX:\"hidden\",overflowY:\"auto\",boxSizing:\"border-box\",WebkitOverflowScrolling:\"touch\",overscrollBehavior:\"contain\",display:\"flex\",flexDirection:\"column\",gap},onMouseEnter:()=>React.startTransition(()=>setIsHovered(true)),onMouseLeave:()=>React.startTransition(()=>setIsHovered(false)),role:\"region\",\"aria-label\":\"Scrollable content\",children:/*#__PURE__*/_jsx(\"div\",{className:contentClassName,// eslint-disable-next-line react/no-danger\ndangerouslySetInnerHTML:{__html:resolvedHtml}})})]});}function serializeFontToCss(font){if(!font)return\"\";const entries=Object.entries(font).filter(([,v])=>v!==undefined&&v!==null&&v!==\"\");return entries.map(([k,v])=>{const prop=k.replace(/[A-Z]/g,m=>`-${m.toLowerCase()}`);return`${prop}:${String(v)};`;}).join(\" \");}function coerceToHtml(input){const raw=(input??\"\").trim();if(!raw)return\"\";// If the user pasted HTML (from a doc/export), use as-is.\nif(/<\\s*\\w+[^>]*>/.test(raw))return raw;// Otherwise, coerce basic formatting (paragraphs + bullet/numbered lists) from plain text.\nconst lines=raw.replace(/\\r\\n?/g,\"\\n\").split(\"\\n\");let html=\"\";let inList=null;const closeList=()=>{if(!inList)return;html+=`</${inList}>`;inList=null;};for(const line of lines){const trimmed=line.trim();if(!trimmed){closeList();html+=\"\";continue;}const unordered=/^([•\\-*]|\\u2022)\\s+/.test(trimmed);const ordered=/^\\d+[.)]\\s+/.test(trimmed);if(unordered||ordered){const nextList=ordered?\"ol\":\"ul\";if(inList!==nextList){closeList();html+=`<${nextList}>`;inList=nextList;}const itemText=trimmed.replace(/^([•\\-*]|\\u2022)\\s+/,\"\").replace(/^\\d+[.)]\\s+/,\"\");html+=`<li>${escapeHtml(itemText)}</li>`;continue;}closeList();html+=`<p>${escapeHtml(trimmed)}</p>`;}closeList();return html;}function escapeHtml(text){return text.replace(/&/g,\"&amp;\").replace(/</g,\"&lt;\").replace(/>/g,\"&gt;\").replace(/\\\"/g,\"&quot;\").replace(/'/g,\"&#039;\");}addPropertyControls(SEOScrollTextBox,{contentHtml:{type:ControlType.String,title:\"Content (HTML)\",defaultValue:\"<h2>What we do</h2>\\n<p>We help teams ship faster with clear strategy, crisp design, and reliable engineering.</p>\\n\\n<h3>What you get</h3>\\n<ul>\\n<li>Clear positioning</li>\\n<li>Conversion-focused copy</li>\\n<li>Fast, accessible pages</li>\\n</ul>\",displayTextArea:true},height:{type:ControlType.Number,title:\"Height\",defaultValue:240,min:80,max:1200,step:1,unit:\"px\"},borderRadius:{type:ControlType.BorderRadius,title:\"Radius\",defaultValue:\"16px\"},padding:{type:ControlType.Padding,title:\"Padding\",defaultValue:\"16px\"},backgroundColor:{type:ControlType.Color,title:\"Background\",defaultValue:\"#FFFFFF\"},borderColor:{type:ControlType.Color,title:\"Border\",defaultValue:\"#EEEEEE\"},borderWidth:{type:ControlType.Number,title:\"Border W\",defaultValue:1,min:0,max:12,step:1,unit:\"px\"},headingColor:{type:ControlType.Color,title:\"Heading Color\",defaultValue:\"#000000\"},bodyColor:{type:ControlType.Color,title:\"Body Color\",defaultValue:\"#000000\"},h1Font:{type:ControlType.Font,title:\"H1 Font\",controls:\"extended\",defaultFontType:\"sans-serif\",defaultValue:{fontSize:\"40px\",variant:\"Bold\",letterSpacing:\"-0.04em\",lineHeight:\"1em\"}},h2Font:{type:ControlType.Font,title:\"H2 Font\",controls:\"extended\",defaultFontType:\"sans-serif\",defaultValue:{fontSize:\"32px\",variant:\"Semibold\",letterSpacing:\"-0.03em\",lineHeight:\"1em\"}},h3Font:{type:ControlType.Font,title:\"H3 Font\",controls:\"extended\",defaultFontType:\"sans-serif\",defaultValue:{fontSize:\"22px\",variant:\"Semibold\",letterSpacing:\"-0.01em\",lineHeight:\"1.2em\"}},bodyFont:{type:ControlType.Font,title:\"Body Font\",controls:\"extended\",defaultFontType:\"sans-serif\",defaultValue:{fontSize:\"15px\",variant:\"Medium\",letterSpacing:\"-0.01em\",lineHeight:\"1.4em\"}},gap:{type:ControlType.Number,title:\"Gap\",defaultValue:10,min:0,max:48,step:1,unit:\"px\"},hideScrollbar:{type:ControlType.Boolean,title:\"Scrollbar\",defaultValue:false,enabledTitle:\"Hidden\",disabledTitle:\"Visible\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"SEOScrollTextBox\",\"slots\":[],\"annotations\":{\"framerIntrinsicHeight\":\"240\",\"framerSupportedLayoutWidth\":\"any-prefer-fixed\",\"framerIntrinsicWidth\":\"420\",\"framerSupportedLayoutHeight\":\"fixed\",\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./SEOScrollTextBox.map"],"mappings":"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"}