{"version":3,"file":"Button.DQH0e-e3.mjs","names":["useState"],"sources":["https:/framerusercontent.com/modules/0ubVmotny6bLSWnNGkGW/GDHVKvFFr11yvLcepR3i/Button.js"],"sourcesContent":["/**\n * Button — primary CTA for hu-man.casa\n *\n * The pill from the case studies index, pulled out so it can be dropped on any\n * page. Renders an <a> when a Link is set, a focusable element otherwise.\n * Outline by default: transparent fill, accent border and label. Filled\n * inverts that. Either variant swaps to its opposite on hover, so the feedback\n * is built in. The label uses Mono Spec Variable, self-hosted via the same\n * @font-face the rest of the site uses so it renders on published mobile.\n *\n * @framerSupportedLayoutWidth auto\n * @framerSupportedLayoutHeight auto\n * @framerIntrinsicWidth 160\n * @framerIntrinsicHeight 44\n */import{jsx as _jsx}from\"react/jsx-runtime\";import{addPropertyControls,ControlType}from\"framer\";import{useEffect,useState}from\"react\";const SURFACE=\"#FDFBF5\";const INK=\"#1A1814\";// Brand accent pairs: the fill, and the label colour that sits on that fill.\nconst ACCENTS={Ink:{fill:INK,on:SURFACE},Blue:{fill:\"#4E67F5\",on:\"#FFFFFF\"},Amber:{fill:\"#FFB300\",on:\"#1A0D00\"},Green:{fill:\"#4AC124\",on:\"#002200\"},Coral:{fill:\"#F65036\",on:\"#FFFFFF\"}};const DISPLAY=\"'Mono Spec Variable', ui-monospace, monospace\";// Self-hosted display font, injected once behind an id guard. Same pattern and\n// id the index and CaseHero use, so the <style> is shared rather than dupli-\n// cated when several of these sit on one page.\nfunction useMonoSpecFace(){useEffect(()=>{if(typeof document===\"undefined\")return;const id=\"human-monospec-face\";if(document.getElementById(id))return;const el=document.createElement(\"style\");el.id=id;el.textContent=\"@font-face{font-family:'Mono Spec Variable';src:url('https://nwk.ysh.temporary.site/fonts/MonoSpec-Variable.woff2') format('woff2');font-weight:100 900;font-display:block}\";document.head.appendChild(el);},[]);}export default function Button(props){const{label=\"Get in touch\",link,newTab=false,variant=\"Outline\",color=\"Ink\",style}=props;useMonoSpecFace();const[hover,setHover]=useState(false);const pair=ACCENTS[color]||ACCENTS.Ink;// Filled shows the fill at rest; Outline shows it on hover. Each is the\n// other's hover state, so one expression covers both variants.\nconst showFill=variant===\"Filled\"?!hover:hover;const base={display:\"inline-flex\",alignItems:\"center\",justifyContent:\"center\",fontFamily:DISPLAY,fontSize:11,letterSpacing:\"0.16em\",lineHeight:1,textTransform:\"uppercase\",whiteSpace:\"nowrap\",padding:\"10px 16px\",borderRadius:999,border:`1px solid ${pair.fill}`,background:showFill?pair.fill:\"transparent\",color:showFill?pair.on:pair.fill,cursor:\"pointer\",textDecoration:\"none\",transition:\"background 180ms ease, color 180ms ease\",...style};const bind={style:base,onMouseEnter:()=>setHover(true),onMouseLeave:()=>setHover(false),onFocus:()=>setHover(true),onBlur:()=>setHover(false)};if(link){return /*#__PURE__*/_jsx(\"a\",{href:link,target:newTab?\"_blank\":undefined,rel:newTab?\"noopener noreferrer\":undefined,...bind,children:label});}return /*#__PURE__*/_jsx(\"div\",{role:\"button\",tabIndex:0,...bind,children:label});}addPropertyControls(Button,{label:{type:ControlType.String,title:\"Label\",defaultValue:\"Get in touch\"},link:{type:ControlType.Link,title:\"Link\"},newTab:{type:ControlType.Boolean,title:\"New Tab\",defaultValue:false,enabledTitle:\"Yes\",disabledTitle:\"No\"},variant:{type:ControlType.Enum,title:\"Variant\",options:[\"Outline\",\"Filled\"],optionTitles:[\"Outline\",\"Filled\"],defaultValue:\"Outline\",displaySegmentedControl:true},color:{type:ControlType.Enum,title:\"Color\",options:[\"Ink\",\"Blue\",\"Amber\",\"Green\",\"Coral\"],optionTitles:[\"Ink\",\"Blue\",\"Amber\",\"Green\",\"Coral\"],defaultValue:\"Ink\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"Button\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./Button.map"],"mappings":"iLAkBA,SAAS,GAAiB,CAAC,MAAc,CAAC,GAAG,OAAO,SAAW,IAAY,OAAO,IAAM,EAAG,sBAAsB,GAAG,SAAS,eAAe,CAAE,EAAE,OAAO,IAAM,EAAG,SAAS,cAAc,OAAO,EAAE,EAAG,GAAG,EAAG,EAAG,YAAY,8KAA8K,SAAS,KAAK,YAAY,CAAE,CAAE,EAAE,CAAC,CAAC,CAAE,CAAC,SAAwB,EAAO,EAAM,CAAC,GAAK,CAAC,QAAM,eAAe,OAAK,SAAO,GAAM,UAAQ,UAAU,QAAM,MAAM,SAAO,EAAM,EAAgB,EAAE,GAAK,CAAC,EAAM,GAAUA,EAAS,EAAK,EAAQ,EAAK,EAAQ,IAAQ,EAAQ,IAE9nB,EAAS,IAAU,SAAS,CAAC,EAAM,EAAmc,EAAK,CAAC,MAAM,CAA7b,QAAQ,cAAc,WAAW,SAAS,eAAe,SAAS,WAAW,EAAQ,SAAS,GAAG,cAAc,SAAS,WAAW,EAAE,cAAc,YAAY,WAAW,SAAS,QAAQ,YAAY,aAAa,IAAI,OAAO,aAAa,EAAK,OAAO,WAAW,EAAS,EAAK,KAAK,cAAc,MAAM,EAAS,EAAK,GAAG,EAAK,KAAK,OAAO,UAAU,eAAe,OAAO,WAAW,0CAA0C,GAAG,CAA4B,EAAE,iBAAiB,EAAS,EAAI,EAAE,iBAAiB,EAAS,EAAK,EAAE,YAAY,EAAS,EAAI,EAAE,WAAW,EAAS,EAAK,CAAC,EAAyJ,OAApJ,EAA0B,EAAK,IAAI,CAAC,KAAK,EAAK,OAAO,EAAO,SAAS,IAAA,GAAU,IAAI,EAAO,sBAAsB,IAAA,GAAU,GAAG,EAAK,SAAS,CAAK,CAAC,EAAuB,EAAK,MAAM,CAAC,KAAK,SAAS,SAAS,EAAE,GAAG,EAAK,SAAS,CAAK,CAAC,CAAE,qBANjzB,IAAoD,IAAsC,EACjI,EAAQ,CAAC,IAAI,CAAC,KAAK,UAAI,GAAG,SAAO,EAAE,KAAK,CAAC,KAAK,UAAU,GAAG,SAAS,EAAE,MAAM,CAAC,KAAK,UAAU,GAAG,SAAS,EAAE,MAAM,CAAC,KAAK,UAAU,GAAG,SAAS,EAAE,MAAM,CAAC,KAAK,UAAU,GAAG,SAAS,CAAC,EAAQ,EAAQ,gDAKwpB,EAAoB,EAAO,CAAC,MAAM,CAAC,KAAK,EAAY,OAAO,MAAM,QAAQ,aAAa,cAAc,EAAE,KAAK,CAAC,KAAK,EAAY,KAAK,MAAM,MAAM,EAAE,OAAO,CAAC,KAAK,EAAY,QAAQ,MAAM,UAAU,aAAa,GAAM,aAAa,MAAM,cAAc,IAAI,EAAE,QAAQ,CAAC,KAAK,EAAY,KAAK,MAAM,UAAU,QAAQ,CAAC,UAAU,QAAQ,EAAE,aAAa,CAAC,UAAU,QAAQ,EAAE,aAAa,UAAU,wBAAwB,EAAI,EAAE,MAAM,CAAC,KAAK,EAAY,KAAK,MAAM,QAAQ,QAAQ,CAAC,MAAM,OAAO,QAAQ,QAAQ,OAAO,EAAE,aAAa,CAAC,MAAM,OAAO,QAAQ,QAAQ,OAAO,EAAE,aAAa,KAAK,CAAC,CAAC"}