{"version":3,"file":"ButtonWithImage.AhQCTR18.mjs","names":["useState","useCallback","useMemo"],"sources":["https:/framerusercontent.com/modules/fjfC2vEemwxA45apMgEu/VtMJ1RYzEqM0vkxXDXLF/ButtonWithImage.js"],"sourcesContent":["// Build a button component with controls for background, hover state, colors, fonts, size, padding, and the position of text + a left image with right-justified text. Also control the link destination (internal site pages).\nimport{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{addPropertyControls,ControlType}from\"framer\";import{useIsStaticRenderer}from\"framer\";import{motion}from\"framer-motion\";import{startTransition,useCallback,useMemo,useState}from\"react\";/**\n * @framerIntrinsicWidth 220\n * @framerIntrinsicHeight 44\n *\n * @framerSupportedLayoutWidth any\n * @framerSupportedLayoutHeight any-prefer-fixed\n */export default function ButtonWithImage(props){const{label,link,openInNewTab,variant,background,backgroundHover,textColor,textColorHover,borderSide,borderColor,borderColorHover,borderWidth,radius,shadow,font,padding,gap,minHeight,showImage,image={src:\"https://framerusercontent.com/images/GfGkADagM4KEibNcIiRUWlfrR0.jpg\",alt:\"Button image\"},imageSize,imageRadius,imageFit,imageOpacity,contentAlignY,textAlign,hoverFlipDuration,style}=props;const isStatic=useIsStaticRenderer();const[isHover,setIsHover]=useState(false);const onEnter=useCallback(()=>{startTransition(()=>setIsHover(true));},[]);const onLeave=useCallback(()=>{startTransition(()=>setIsHover(false));},[]);const justifyContent=useMemo(()=>{switch(contentAlignY){case\"top\":return\"flex-start\";case\"bottom\":return\"flex-end\";case\"center\":default:return\"center\";}},[contentAlignY]);const effectiveBackground=isHover?backgroundHover:background;const effectiveTextColor=isHover?textColorHover:textColor;const effectiveBorderColor=isHover?borderColorHover:borderColor;const borderStyles=useMemo(()=>{if(borderSide===\"top\")return{borderTop:`${borderWidth}px solid ${effectiveBorderColor}`};if(borderSide===\"bottom\")return{borderBottom:`${borderWidth}px solid ${effectiveBorderColor}`};return{};},[borderSide,borderWidth,effectiveBorderColor]);const computedButtonStyle=useMemo(()=>{const base={position:\"relative\",width:\"100%\",height:\"100%\",minHeight,display:\"flex\",alignItems:justifyContent,justifyContent:\"flex-start\",gap,padding,borderRadius:radius,boxShadow:shadow,textDecoration:\"none\",userSelect:\"none\",WebkitUserSelect:\"none\",cursor:\"pointer\",outline:\"none\",boxSizing:\"border-box\",transform:\"translateZ(0)\",overflow:\"hidden\",willChange:\"color, border-color, transform\",transition:\"border-color 160ms ease, color 160ms ease, transform 120ms ease\",...font,...borderStyles};if(variant===\"fill\"){return{...base,background:isStatic?effectiveBackground:background,color:effectiveTextColor,border:\"none\"};}if(variant===\"outline\"){return{...base,background:\"transparent\",color:effectiveTextColor,border:\"none\"};}return{...base,background:\"transparent\",color:effectiveTextColor,border:\"none\"};},[background,borderStyles,effectiveBackground,effectiveTextColor,font,gap,isStatic,justifyContent,minHeight,padding,radius,shadow,variant]);const imgWrapStyle=useMemo(()=>({position:\"relative\",width:imageSize,height:imageSize,flex:\"0 0 auto\",opacity:imageOpacity,borderRadius:imageRadius,overflow:\"hidden\"}),[imageOpacity,imageRadius,imageSize]);const imgStyle=useMemo(()=>({width:\"100%\",height:\"100%\",borderRadius:\"inherit\",objectFit:imageFit,display:\"block\"}),[imageFit]);const labelStyle=useMemo(()=>({flex:1,minWidth:0,color:\"inherit\",textAlign,width:\"100%\",lineHeight:\"inherit\"}),[textAlign]);const rel=openInNewTab?\"noreferrer noopener\":undefined;const target=openInNewTab?\"_blank\":undefined;const showFlipOverlay=!isStatic&&variant===\"fill\";return /*#__PURE__*/_jsxs(\"a\",{href:link||\"#\",target:target,rel:rel,style:{...computedButtonStyle,...style},role:\"button\",\"aria-label\":label,onMouseEnter:onEnter,onMouseLeave:onLeave,onFocus:onEnter,onBlur:onLeave,onKeyDown:e=>{if(e.key===\"Enter\"||e.key===\" \"){e.currentTarget.click();}},children:[showFlipOverlay?/*#__PURE__*/_jsx(motion.div,{\"aria-hidden\":true,style:{position:\"absolute\",inset:0,background:backgroundHover,transformOrigin:\"bottom\",zIndex:0,pointerEvents:\"none\"},initial:false,animate:{scaleY:isHover?1:0},transition:{duration:hoverFlipDuration,ease:[.2,.9,.2,1]}}):null,/*#__PURE__*/_jsxs(\"div\",{style:{position:\"relative\",zIndex:1,width:\"100%\",height:\"100%\",minHeight:\"inherit\",display:\"flex\",alignItems:\"inherit\",justifyContent:\"inherit\",gap:\"inherit\"},children:[showImage&&image?.src?/*#__PURE__*/_jsxs(\"div\",{style:imgWrapStyle,\"aria-hidden\":true,children:[/*#__PURE__*/_jsx(\"img\",{src:image.src,srcSet:image.srcSet,alt:image.alt||\"\",style:imgStyle}),!isStatic?/*#__PURE__*/_jsx(motion.div,{\"aria-hidden\":true,style:{position:\"absolute\",inset:0,backgroundColor:textColorHover,WebkitMaskImage:`url(${image.src})`,maskImage:`url(${image.src})`,WebkitMaskRepeat:\"no-repeat\",maskRepeat:\"no-repeat\",WebkitMaskPosition:\"center\",maskPosition:\"center\",WebkitMaskSize:imageFit===\"cover\"?\"cover\":\"contain\",maskSize:imageFit===\"cover\"?\"cover\":\"contain\",borderRadius:\"inherit\",pointerEvents:\"none\"},initial:false,animate:{opacity:isHover?1:0},transition:{duration:.16,ease:\"easeOut\"}}):null]}):null,/*#__PURE__*/_jsx(\"span\",{style:labelStyle,children:label})]})]});}addPropertyControls(ButtonWithImage,{label:{type:ControlType.String,title:\"Text\",defaultValue:\"Button\"},link:{type:ControlType.Link,title:\"Link\",defaultValue:\"/\"},openInNewTab:{type:ControlType.Boolean,title:\"New Tab\",defaultValue:false,enabledTitle:\"Yes\",disabledTitle:\"No\"},variant:{type:ControlType.Enum,title:\"Variant\",options:[\"fill\",\"outline\",\"ghost\"],optionTitles:[\"Fill\",\"Outline\",\"Ghost\"],defaultValue:\"fill\",displaySegmentedControl:true},background:{type:ControlType.Color,title:\"Background\",defaultValue:\"#FFFFFF\",hidden:({variant})=>variant!==\"fill\"},backgroundHover:{type:ControlType.Color,title:\"Bg Hover\",defaultValue:\"#F5F5F5\",hidden:({variant})=>variant!==\"fill\"},textColor:{type:ControlType.Color,title:\"Text\",defaultValue:\"#000000\"},textColorHover:{type:ControlType.Color,title:\"Text Hover\",defaultValue:\"#000000\"},borderSide:{type:ControlType.Enum,title:\"Border\",options:[\"none\",\"bottom\",\"top\"],optionTitles:[\"None\",\"Bottom\",\"Top\"],defaultValue:\"bottom\",displaySegmentedControl:true},borderColor:{type:ControlType.Color,title:\"Border\",defaultValue:\"#EEEEEE\",hidden:({borderSide})=>borderSide===\"none\"},borderColorHover:{type:ControlType.Color,title:\"Border Hover\",defaultValue:\"#CCCCCC\",hidden:({borderSide})=>borderSide===\"none\"},borderWidth:{type:ControlType.Number,title:\"Border W\",defaultValue:1,min:0,max:12,step:1,unit:\"px\",hidden:({borderSide})=>borderSide===\"none\"},hoverFlipDuration:{type:ControlType.Number,title:\"Flip Dur\",defaultValue:.28,min:.05,max:1.5,step:.01,unit:\"s\",hidden:({variant})=>variant!==\"fill\"},radius:{type:ControlType.BorderRadius,title:\"Radius\",defaultValue:\"10px\"},shadow:{type:ControlType.BoxShadow,title:\"Shadow\"},font:{type:ControlType.Font,title:\"Font\",controls:\"extended\",defaultFontType:\"sans-serif\",defaultValue:{fontSize:\"14px\",variant:\"Semibold\",letterSpacing:\"-0.01em\",lineHeight:\"1em\"}},padding:{type:ControlType.Padding,title:\"Padding\",defaultValue:\"12px 14px\"},gap:{type:ControlType.Number,title:\"Gap\",defaultValue:10,min:0,max:40,step:1,unit:\"px\"},minHeight:{type:ControlType.Number,title:\"Min H\",defaultValue:44,min:24,max:120,step:1,unit:\"px\"},contentAlignY:{type:ControlType.Enum,title:\"Align Y\",options:[\"center\",\"top\",\"bottom\"],optionTitles:[\"Center\",\"Top\",\"Bottom\"],defaultValue:\"center\",displaySegmentedControl:true},textAlign:{type:ControlType.Enum,title:\"Text Align\",options:[\"left\",\"center\",\"right\"],optionTitles:[\"Left\",\"Center\",\"Right\"],defaultValue:\"right\",displaySegmentedControl:true},showImage:{type:ControlType.Boolean,title:\"Image\",defaultValue:true,enabledTitle:\"Show\",disabledTitle:\"Hide\"},image:{type:ControlType.ResponsiveImage,title:\" \",hidden:({showImage})=>!showImage},imageSize:{type:ControlType.Number,title:\"Img Size\",defaultValue:20,min:10,max:80,step:1,unit:\"px\",hidden:({showImage})=>!showImage},imageRadius:{type:ControlType.BorderRadius,title:\"Img Radius\",defaultValue:\"6px\",hidden:({showImage})=>!showImage},imageFit:{type:ControlType.Enum,title:\"Img Fit\",options:[\"contain\",\"cover\"],optionTitles:[\"Contain\",\"Cover\"],defaultValue:\"cover\",displaySegmentedControl:true,hidden:({showImage})=>!showImage},imageOpacity:{type:ControlType.Number,title:\"Img Opacity\",defaultValue:1,min:0,max:1,step:.05,hidden:({showImage})=>!showImage}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"ButtonWithImage\",\"slots\":[],\"annotations\":{\"framerIntrinsicWidth\":\"220\",\"framerIntrinsicHeight\":\"44\",\"framerSupportedLayoutHeight\":\"any-prefer-fixed\",\"framerContractVersion\":\"1\",\"framerSupportedLayoutWidth\":\"any\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./ButtonWithImage.map"],"mappings":"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"}