{"version":3,"file":"KickerTag.CVjdirjo.mjs","names":["useMemo","useRef","useState","useId","__esmMin","pe","te","init_npm_react_18_3_1","_e","p","ce","ie","de","motion","useInView","init_framer_motion_DbYmcygs","addPropertyControls","init_framer_BbPeGsXv","ControlType","useIsStaticRenderer","KickerTag","props","text","label","ref","isStatic","inView","n","setN","uid","i","startDelay","id","speed","show","typed","rest","done","cursorRetired","setCursorRetired","t","normalizedBackground","background","isOutlined","baseFont","textColor","cursorStyle","hideBelow","init_KickerTag","init_jsx_runtime"],"sources":["https:/framerusercontent.com/modules/U4ZAsug8pNOCnrwCYAab/6Wiblxq9gjBkawm0g1pI/KickerTag.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{addPropertyControls,ControlType,useIsStaticRenderer}from\"framer\";import{motion,useInView}from\"framer-motion\";import{useRef,useEffect,useState,startTransition,useMemo,useId}from\"react\";/**\n * Kicker Tag — outlined pill (transparent fill, hairline border = text color),\n * shape reveal + typewriter. The cursor blinks while typing, then fades out\n * once the label is complete. The cursor is a zero-width overlay so it never\n * affects the pill's size — the pill stays the same width from first frame\n * to last (an invisible copy of the untyped text reserves the full measure).\n *\n * ── CURSOR REMOVAL 2026-09-14 ───────────────────────────────────────────────\n * The fade-out used to be an opacity animation only, and it did not reliably\n * land: measured on the published site, kickers were sitting at cursor opacity\n * 1 and 0.75 long after their text had finished typing (every kicker on\n * /connectors, and \"PRECISION RETRIEVAL\" on /corporate). A stuck cursor is not\n * a cosmetic detail here — it is zero-width and paints INTO the pill's right\n * padding, so the label reads as pushed left even though it is mathematically\n * centred (measured 11px of padding on both sides). It gets reported as a\n * centring bug, which it is not.\n *\n * So the cursor is now UNMOUNTED once typing completes, after a short delay\n * that lets the fade play. The opacity animation is kept for the fade itself;\n * the unmount is what guarantees the end state. Never go back to relying on\n * the animation alone — an interrupted or never-started framer-motion\n * animation leaves the glyph on screen permanently.\n *\n * NOTE on width: the pill is `max-content` so short labels stay tight, capped\n * against the VIEWPORT rather than the parent. Instances usually sit in a Framer\n * node set to `fit-content`, which sizes itself to the pill's max-content — so\n * a `max-width:100%` would resolve against the pill's own overflowing width and\n * constrain nothing. A long label then ran straight off the right edge on\n * phones. Capping on 100vw fixes every instance at once, and `pre-wrap` lets the\n * label take a second line instead of being clipped.\n *\n * `hideBelow` (0 = never, the default, so existing instances are unaffected)\n * hides the pill at or below that viewport width. Added for the /connectors\n * hero, where the compact logo lockup takes over the kicker's job on small\n * screens — the marks say \"works inside these\" better than a label that wraps\n * to two lines at 390px. Only use it where something else carries the same\n * information, and make sure that replacement is announced to screen readers.\n *\n * @framerIntrinsicWidth 150\n * @framerIntrinsicHeight 28\n * @framerSupportedLayoutWidth auto\n * @framerSupportedLayoutHeight auto\n */export default function KickerTag(props){const{label=\"LABEL\",textColor=\"rgb(124, 130, 221)\",background=\"transparent\",borderRadius=999,speed=55,hideBelow=0}=props;const text=useMemo(()=>(label||\"\").toUpperCase(),[label]);const ref=useRef(null);const isStatic=useIsStaticRenderer();const inView=useInView(ref,{once:true,amount:.6});const[n,setN]=useState(0);const uid=\"kt-\"+useId().replace(/[^a-zA-Z0-9]/g,\"\");useEffect(()=>{if(isStatic){startTransition(()=>setN(text.length));return;}if(!inView)return;let i=0;const startDelay=setTimeout(()=>{const id=setInterval(()=>{i+=1;startTransition(()=>setN(i));if(i>=text.length)clearInterval(id);},speed);},380);return()=>clearTimeout(startDelay);},[inView,isStatic,text,speed]);const show=isStatic?text.length:n;const typed=text.slice(0,show);const rest=text.slice(show);const done=show>=text.length;// Take the cursor out of the DOM once the label is complete. The opacity\n// animation below still plays the fade; this is what guarantees it ends.\nconst[cursorRetired,setCursorRetired]=useState(false);useEffect(()=>{if(!done){setCursorRetired(false);return;}const t=setTimeout(()=>setCursorRetired(true),1e3);return()=>clearTimeout(t);},[done]);const normalizedBackground=useMemo(()=>(background||\"\").toString().trim().toLowerCase(),[background]);const isOutlined=useMemo(()=>{if(!normalizedBackground)return true;if(normalizedBackground===\"transparent\"||normalizedBackground===\"none\")return true;if(normalizedBackground===\"#0000\"||normalizedBackground===\"#00000000\")return true;return normalizedBackground.startsWith(\"rgba(\")&&/,\\s*0(?:\\.0+)?\\s*\\)$/.test(normalizedBackground);},[normalizedBackground]);const baseFont=useMemo(()=>({fontFamily:'Roboto, Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif',fontWeight:600,fontSize:11,letterSpacing:\"0.07em\",lineHeight:1.2,textTransform:\"uppercase\",color:textColor,whiteSpace:\"pre-wrap\"}),[textColor]);const cursorStyle=useMemo(()=>({...baseFont,marginLeft:2,opacity:.75,fontSize:10}),[baseFont]);return /*#__PURE__*/_jsxs(\"div\",{ref:ref,className:uid,style:{position:\"relative\",display:\"inline-block\",width:\"max-content\",maxWidth:\"min(100%, calc(100vw - 88px))\",// 1px breathing room so the hairline border never sits on the\n// component's clipped edge (canvas rasterization eats it there)\npadding:1,...props.style},children:[hideBelow>0?/*#__PURE__*/_jsx(\"style\",{dangerouslySetInnerHTML:{__html:`@media (max-width:${hideBelow}px){.${uid}{display:none !important}}`}}):null,/*#__PURE__*/_jsx(\"link\",{href:\"https://fonts.googleapis.com/css2?family=Roboto:wght@500;600;700&display=swap\",rel:\"stylesheet\"}),/*#__PURE__*/_jsx(motion.div,{initial:isStatic?{scaleX:1}:{scaleX:0},animate:inView||isStatic?{scaleX:1}:{scaleX:0},transition:{duration:.4,ease:[.22,1,.36,1]},style:{position:\"absolute\",inset:1,background,borderRadius,transformOrigin:\"left center\",border:`1px solid ${textColor}`,boxShadow:isOutlined?\"none\":\"0 1px 2px rgba(0,0,0,0.18)\"}}),/*#__PURE__*/_jsxs(\"div\",{style:{position:\"relative\",padding:\"5px 16px\",display:\"block\"},children:[/*#__PURE__*/_jsx(\"span\",{style:baseFont,children:typed}),!isStatic&&!cursorRetired&&/*#__PURE__*/_jsx(\"span\",{style:{display:\"inline-block\",width:0,overflow:\"visible\"},children:/*#__PURE__*/_jsx(motion.span,{animate:done?{opacity:0}:{opacity:[1,1,0,0]},transition:done?{delay:.6,duration:.3,ease:\"easeOut\"}:{duration:1,repeat:Infinity,ease:\"linear\",times:[0,.5,.5,1]},style:{...cursorStyle,display:\"inline-block\"},children:\"|\"})}),rest?/*#__PURE__*/_jsx(\"span\",{style:{...baseFont,opacity:0},children:rest}):null]})]});}addPropertyControls(KickerTag,{label:{type:ControlType.String,title:\"Label\",defaultValue:\"THE APPROACH\"},textColor:{type:ControlType.Color,title:\"Text\",defaultValue:\"rgb(124, 130, 221)\"},background:{type:ControlType.Color,title:\"Background\",defaultValue:\"transparent\"},borderRadius:{type:ControlType.Number,title:\"Radius\",defaultValue:999,min:0,max:999},speed:{type:ControlType.Number,title:\"Type speed (ms)\",defaultValue:55,min:10,max:200},hideBelow:{type:ControlType.Number,title:\"Hide below px\",description:\"0 = never. Only use where something else carries the same information on small screens.\",defaultValue:0,min:0,max:1400,step:10}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"KickerTag\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\",\"framerSupportedLayoutWidth\":\"auto\",\"framerSupportedLayoutHeight\":\"auto\",\"framerIntrinsicHeight\":\"28\",\"framerIntrinsicWidth\":\"150\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./KickerTag.map"],"mappings":"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"}