{"version":3,"file":"typographyV1.Ceb2FOLx.mjs","names":["React.useState"],"sources":["https:/framerusercontent.com/modules/FWcQouC9VuuG4boSnOIf/PXfmyi31fSSjpxJxtdl4/typographyV1.js"],"sourcesContent":["/**\n * typography.ts — Shared typography design system\n *\n * Import into any Framer code component:\n *   import { TYPE, responsive, clamp } from \"./typography\"\n *\n * ─── USAGE ───────────────────────────────────────────────────────────────────\n *\n * 1. Static (desktop L breakpoint only):\n *      <h1 style={TYPE.h1.L} />\n *\n * 2. Fully responsive (auto-picks size for current viewport):\n *      const { fontSize, lineHeight, letterSpacing } = responsive(TYPE.h1)\n *      <h1 style={{ ...TYPE.h1.base, fontSize, lineHeight, letterSpacing }} />\n *\n * 3. Shorthand — base + responsive merged in one call:\n *      <h1 style={rStyle(TYPE.h1)} />\n *\n * ─── BREAKPOINTS ─────────────────────────────────────────────────────────────\n *   S   0px+     mobile\n *   M   810px+   tablet\n *   L   1200px+  desktop\n *\n * ─── EXTENDING ───────────────────────────────────────────────────────────────\n * Spread and override individual properties as needed:\n *   <p style={{ ...TYPE.blogParagraph.base, color: \"#3a3a3a\" }} />\n */import*as React from\"react\";// ─── Breakpoint constants ─────────────────────────────────────────────────────\nexport const BP={S:0,M:810,L:1200};// ─── Base shared resets ───────────────────────────────────────────────────────\n// Applied to every heading so browser UA styles don't interfere.\nconst HEADING_BASE={fontFamily:\"Inter, system-ui, sans-serif\",color:\"#101010\",textAlign:\"left\",textTransform:\"none\",margin:0,padding:0};const BODY_BASE={fontFamily:\"Inter, system-ui, sans-serif\",color:\"#101010\",textAlign:\"left\",textTransform:\"none\",margin:0,padding:0};// ─── Type scale definitions ───────────────────────────────────────────────────\nexport const TYPE={h1:{base:{...HEADING_BASE,fontWeight:700,fontStyle:\"normal\"},S:{fontSize:25,lineHeight:1.2,letterSpacing:\"-0.04em\",paragraphSpacing:40},M:{fontSize:30,lineHeight:1.2,letterSpacing:\"-0.04em\",paragraphSpacing:40},L:{fontSize:36,lineHeight:1.2,letterSpacing:\"-0.04em\",paragraphSpacing:40}},h2:{base:{...HEADING_BASE,fontWeight:600,fontStyle:\"normal\"},S:{fontSize:20,lineHeight:1.3,letterSpacing:\"-0.04em\",paragraphSpacing:40},M:{fontSize:24,lineHeight:1.3,letterSpacing:\"-0.04em\",paragraphSpacing:40},L:{fontSize:29,lineHeight:1.3,letterSpacing:\"-0.04em\",paragraphSpacing:40}},h3:{base:{...HEADING_BASE,fontWeight:600,fontStyle:\"normal\"},S:{fontSize:16,lineHeight:1.3,letterSpacing:\"-0.04em\",paragraphSpacing:40},M:{fontSize:18,lineHeight:1.3,letterSpacing:\"-0.04em\",paragraphSpacing:40},L:{fontSize:20,lineHeight:1.3,letterSpacing:\"-0.04em\",paragraphSpacing:40}},h4:{base:{...HEADING_BASE,fontWeight:600,fontStyle:\"normal\"},S:{fontSize:15,lineHeight:1.4,letterSpacing:\"-0.04em\",paragraphSpacing:40},M:{fontSize:16,lineHeight:1.4,letterSpacing:\"-0.04em\",paragraphSpacing:40},L:{fontSize:18,lineHeight:1.4,letterSpacing:\"-0.04em\",paragraphSpacing:40}},h5:{base:{...HEADING_BASE,fontWeight:600,fontStyle:\"normal\"},S:{fontSize:12,lineHeight:1.4,letterSpacing:\"-0.04em\",paragraphSpacing:40},M:{fontSize:13,lineHeight:1.4,letterSpacing:\"-0.04em\",paragraphSpacing:40},L:{fontSize:15,lineHeight:1.4,letterSpacing:\"-0.04em\",paragraphSpacing:40}},h6:{base:{...HEADING_BASE,fontWeight:600,fontStyle:\"normal\"},S:{fontSize:10,lineHeight:1.5,letterSpacing:\"-0.04em\",paragraphSpacing:40},M:{fontSize:11,lineHeight:1.5,letterSpacing:\"-0.04em\",paragraphSpacing:40},L:{fontSize:12,lineHeight:1.5,letterSpacing:\"-0.04em\",paragraphSpacing:40}},button:{base:{...BODY_BASE,fontWeight:600,fontStyle:\"normal\"},S:{fontSize:12,lineHeight:1.4,letterSpacing:\"-0.02em\",paragraphSpacing:20},M:{fontSize:13,lineHeight:1.4,letterSpacing:\"-0.02em\",paragraphSpacing:20},L:{fontSize:14,lineHeight:1.4,letterSpacing:\"-0.02em\",paragraphSpacing:20}},blogParagraph:{base:{...BODY_BASE,fontWeight:400,fontStyle:\"normal\"},S:{fontSize:14,lineHeight:1.7,letterSpacing:\"-0.02em\",paragraphSpacing:20},M:{fontSize:15,lineHeight:1.72,letterSpacing:\"-0.02em\",paragraphSpacing:20},L:{fontSize:16,lineHeight:1.75,letterSpacing:\"-0.02em\",paragraphSpacing:20}}};// ─── Contrast color utility ───────────────────────────────────────────────────\n// Given any hex background color, returns \"#ffffff\" or \"#000000\" — whichever\n// has sufficient contrast. Uses the WCAG relative luminance formula.\n//\n// Usage:\n//   color: contrastColor(p.ctaBg)   // automatically black or white\nexport function contrastColor(hex){// Strip # and expand shorthand (#abc → #aabbcc)\nlet h=hex.replace(\"#\",\"\");if(h.length===3)h=h.split(\"\").map(c=>c+c).join(\"\");if(h.length!==6)return\"#000000\";const r=parseInt(h.slice(0,2),16);const g=parseInt(h.slice(2,4),16);const b=parseInt(h.slice(4,6),16);// sRGB linearisation\nconst toLinear=c=>{const s=c/255;return s<=.04045?s/12.92:Math.pow((s+.055)/1.055,2.4);};// WCAG relative luminance\nconst L=.2126*toLinear(r)+.7152*toLinear(g)+.0722*toLinear(b);// White on dark (L < 0.179), black on light\nreturn L<.179?\"#ffffff\":\"#000000\";}// ─── Responsive helper ────────────────────────────────────────────────────────\n// Call inside a component to get the correct TypeScale for the current\n// viewport width. Uses a React ref so it stays stable across renders.\n//\n// Usage:\n//   const scale = responsive(TYPE.h2)\n//   <h2 style={{ ...TYPE.h2.base, fontSize: scale.fontSize, ... }} />\nexport function responsive(style){if(typeof window===\"undefined\")return style.L;const w=window.innerWidth;if(w>=BP.L)return style.L;if(w>=BP.M)return style.M;return style.S;}// ─── rStyle — convenience: merge base + responsive scale into one object ──────\n// Returns a complete React.CSSProperties object ready to spread onto an element.\n//\n// Usage:\n//   <h1 style={rStyle(TYPE.h1)} />\n//   <h1 style={{ ...rStyle(TYPE.h1), color: \"#3a3a3a\" }} />\nexport function rStyle(style){const scale=responsive(style);return{...style.base,fontSize:`${scale.fontSize}px`,lineHeight:scale.lineHeight,letterSpacing:scale.letterSpacing};}// ─── useResponsiveType — React hook for live viewport updates ─────────────────\n// Use this when you need the style to re-compute on window resize,\n// e.g. for components that render server-side or inside Framer's canvas.\n//\n// Usage:\n//   const h1Style = useResponsiveType(TYPE.h1)\n//   <h1 style={h1Style} />\nexport function useResponsiveType(style){const[scale,setScale]=React.useState(()=>responsive(style));React.useEffect(()=>{const update=()=>setScale(responsive(style));update();window.addEventListener(\"resize\",update);return()=>window.removeEventListener(\"resize\",update);},[style]);return{...style.base,fontSize:`${scale.fontSize}px`,lineHeight:scale.lineHeight,letterSpacing:scale.letterSpacing};}// ─── Static lookup — get TypeScale for a specific breakpoint ──────────────────\n// Useful when you know the context (e.g. always render at desktop size in OG images).\n//\n// Usage:\n//   const desktopSize = atBreakpoint(TYPE.h1, \"L\").fontSize  // 36\nexport function atBreakpoint(style,bp){return style[bp];}// ─── Quick reference table ────────────────────────────────────────────────────\n//\n//  Token             S      M      L      Weight   Style\n//  ─────────────────────────────────────────────────────\n//  TYPE.h1           25px   30px   36px   700      normal\n//  TYPE.h2           20px   24px   29px   600      normal\n//  TYPE.h3           16px   18px   20px   600      normal\n//  TYPE.h4           15px   16px   18px   600      normal\n//  TYPE.h5           12px   13px   15px   600      normal\n//  TYPE.h6           10px   11px   12px   600      normal\n//  TYPE.button       12px   13px   14px   600      normal\n//  TYPE.blogParagraph 14px  15px   16px   400      normal\n\nexport const __FramerMetadata__ = {\"exports\":{\"atBreakpoint\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"useResponsiveType\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"TypeScale\":{\"type\":\"tsType\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"responsive\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"contrastColor\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"TYPE\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"rStyle\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"TypeStyle\":{\"type\":\"tsType\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"BP\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./typographyV1.map"],"mappings":"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"}