{"version":3,"file":"Button.DYzFw5O2.mjs","names":["useRef","useState"],"sources":["https:/framerusercontent.com/modules/QrIWNhLp7IAkJGsr0VEn/Is38UvU7Avj0haxdnn3T/Button.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{addPropertyControls,ControlType,useIsStaticRenderer}from\"framer\";import{motion,useMotionValue,useSpring}from\"framer-motion\";import{useEffect,useRef,useState}from\"react\";/**\n * The site button. A pill with the label on the left and a round icon well\n * with the arrow on the right. Primary is Signal with an ink well and goes\n * to Ember on hover; ghost is outlined and inverts to ink on hover. Magnetic\n * on fine pointers, still under reduced motion.\n *\n * @framerSupportedLayoutWidth any-prefer-auto\n * @framerSupportedLayoutHeight auto\n */export default function Button(props){const{label=\"Read the writing\",link=\"/writing\",openInNewTab=false,variant=\"primary\",magnetic=true,font,signal=\"#E8521F\",ember=\"#B83A0E\",onSignal=\"#FFFFFF\",ink=\"#0A0908\",ground=\"#FFFFFF\",outline=\"rgba(10, 9, 8, 0.22)\",inkSoft=\"rgba(10, 9, 8, 0.08)\",groundSoft=\"rgba(255, 255, 255, 0.14)\",style}=props;const isStatic=useIsStaticRenderer();const ref=useRef(null);const[hover,setHover]=useState(false);const[active,setActive]=useState(false);const x=useMotionValue(0);const y=useMotionValue(0);const sx=useSpring(x,{stiffness:180,damping:18,mass:.4});const sy=useSpring(y,{stiffness:180,damping:18,mass:.4});useEffect(()=>{if(isStatic||!magnetic||typeof window===\"undefined\")return;const fine=window.matchMedia(\"(pointer: fine)\").matches;const reduce=window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;setActive(fine&&!reduce);},[isStatic,magnetic]);function onMove(e){if(!active||!ref.current)return;const b=ref.current.getBoundingClientRect();x.set((e.clientX-(b.left+b.width/2))*.2);y.set((e.clientY-(b.top+b.height/2))*.28);}function onLeave(){setHover(false);x.set(0);y.set(0);}const primary=variant===\"primary\";const fill=primary?hover?ember:signal:hover?ink:\"transparent\";const color=primary?onSignal:hover?ground:ink;const border=primary?\"1px solid transparent\":`1px solid ${hover?ink:outline}`;const wellFill=primary?ground:hover?groundSoft:inkSoft;const wellColor=primary?ink:\"currentColor\";const fullWidth=style&&style.width===\"100%\";return /*#__PURE__*/_jsxs(motion.a,{ref:ref,href:link,target:openInNewTab?\"_blank\":undefined,rel:openInNewTab?\"noopener\":undefined,onMouseMove:onMove,onMouseEnter:()=>setHover(true),onMouseLeave:onLeave,style:{...style,x:active?sx:0,y:active?sy:0,position:\"relative\",display:\"inline-flex\",alignItems:\"center\",justifyContent:fullWidth?\"space-between\":\"flex-start\",gap:12,padding:\"8px 8px 8px 20px\",borderRadius:999,border,background:fill,color,textDecoration:\"none\",whiteSpace:\"nowrap\",boxSizing:\"border-box\",width:fullWidth?\"100%\":\"auto\",minWidth:fullWidth?undefined:\"max-content\",cursor:\"pointer\",transition:\"background .2s ease, color .2s ease, border-color .2s ease\",...font},children:[/*#__PURE__*/_jsx(\"span\",{children:label}),/*#__PURE__*/_jsx(\"span\",{\"aria-hidden\":\"true\",style:{width:32,height:32,borderRadius:\"50%\",display:\"grid\",placeItems:\"center\",flexShrink:0,background:wellFill,color:wellColor,transform:hover?\"translateX(3px)\":\"none\",transition:\"transform .25s ease, background .2s ease\"},children:/*#__PURE__*/_jsx(\"svg\",{width:\"14\",height:\"14\",viewBox:\"0 0 16 16\",fill:\"none\",stroke:\"currentColor\",strokeWidth:\"2\",strokeLinecap:\"round\",strokeLinejoin:\"round\",children:/*#__PURE__*/_jsx(\"path\",{d:\"M2 8h12M9 3l5 5-5 5\"})})})]});}addPropertyControls(Button,{label:{type:ControlType.String,title:\"Label\",defaultValue:\"Read the writing\"},link:{type:ControlType.Link,title:\"Link\",defaultValue:\"/writing\"},openInNewTab:{type:ControlType.Boolean,title:\"New tab\",defaultValue:false},variant:{type:ControlType.Enum,title:\"Variant\",options:[\"primary\",\"ghost\"],optionTitles:[\"Primary\",\"Ghost\"],defaultValue:\"primary\",displaySegmentedControl:true},magnetic:{type:ControlType.Boolean,title:\"Magnetic\",defaultValue:true},font:{type:ControlType.Font,title:\"Font\",controls:\"extended\",defaultFontType:\"sans-serif\",defaultValue:{fontSize:\"15px\",variant:\"Semibold\",letterSpacing:\"-0.005em\",lineHeight:\"1.4em\"}},signal:{type:ControlType.Color,title:\"Signal\",defaultValue:\"#E8521F\"},ember:{type:ControlType.Color,title:\"Ember\",defaultValue:\"#B83A0E\"},onSignal:{type:ControlType.Color,title:\"On Signal\",defaultValue:\"#FFFFFF\"},ink:{type:ControlType.Color,title:\"Ink\",defaultValue:\"#0A0908\"},ground:{type:ControlType.Color,title:\"Ground\",defaultValue:\"#FFFFFF\"},outline:{type:ControlType.Color,title:\"Outline\",defaultValue:\"rgba(10, 9, 8, 0.22)\"},inkSoft:{type:ControlType.Color,title:\"Ink soft\",defaultValue:\"rgba(10, 9, 8, 0.08)\"},groundSoft:{type:ControlType.Color,title:\"Ground soft\",defaultValue:\"rgba(255, 255, 255, 0.14)\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"Button\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\",\"framerSupportedLayoutWidth\":\"any-prefer-auto\",\"framerSupportedLayoutHeight\":\"auto\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./Button.map"],"mappings":"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"}