{
  "version": 3,
  "sources": ["ssg:https://framerusercontent.com/modules/xhmx8D9kOmVmSv6UaACf/45YuROHKLsTQKOGYdCs4/Card_Flip.js"],
  "sourcesContent": ["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import*as React from\"react\";import{addPropertyControls,ControlType}from\"framer\";import{motion}from\"framer-motion\";/**\n * These annotations control how your component sizes\n * Learn more: https://www.framer.com/docs/guides/auto-sizing\n *\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight any-prefer-fixed\n */export function FlipCard(props){const{children,animationDuration,easingType,actionTrigger,flipAxis}=props;const[isFlipped,setFlipped]=React.useState(false);// Check that we have exactly 2 children (front and back)\nif(children.length!==2)return /*#__PURE__*/_jsx(\"div\",{style:{display:\"flex\",width:\"100%\",height:\"100%\",placeContent:\"center\",placeItems:\"center\",flexDirection:\"column\",color:\"#96F\",background:\"rgba(136, 85, 255, 0.1)\",overflow:\"hidden\",padding:\"20px 20px 20px 20px\"},children:/*#__PURE__*/_jsx(\"h3\",{children:\"Please connect exactly 2 frames using the handles on the right\"})});const flipCard=()=>{if(actionTrigger===\"click\"){setFlipped(!isFlipped);}};const hoverCard=()=>{if(actionTrigger===\"hover\"){setFlipped(!isFlipped);}};const flipRotation=flipAxis===\"Y\"?{rotateY:isFlipped?-180:0}:{rotateX:isFlipped?-180:0};return /*#__PURE__*/_jsx(motion.div,{onClick:flipCard,onMouseEnter:hoverCard,onMouseLeave:hoverCard,style:{width:\"100%\",height:\"100%\",perspective:1e3,position:\"relative\"},children:/*#__PURE__*/_jsxs(motion.div,{animate:flipRotation,transition:{duration:animationDuration,ease:easingType},style:{width:\"100%\",height:\"100%\",position:\"absolute\",transformStyle:\"preserve-3d\"},children:[/*#__PURE__*/_jsx(motion.div,{style:{position:\"absolute\",width:\"100%\",height:\"100%\",backfaceVisibility:\"hidden\"},children:children[0]}),/*#__PURE__*/_jsx(motion.div,{style:{position:\"absolute\",width:\"100%\",height:\"100%\",backfaceVisibility:\"hidden\",rotateY:flipAxis===\"Y\"?180:0,rotateX:flipAxis===\"X\"?180:0},children:children[1]})]})});}FlipCard.defaultProps={children:[],animationDuration:1,easingType:\"easeOut\",actionTrigger:\"click\",flipAxis:\"Y\"};addPropertyControls(FlipCard,{children:{type:ControlType.Array,propertyControl:{type:ControlType.ComponentInstance},maxCount:2,title:\"Frames\"},animationDuration:{type:ControlType.Number,title:\"Animation Duration\",defaultValue:FlipCard.defaultProps.animationDuration,min:.1,max:10,step:.1},easingType:{title:\"Easing Type\",type:ControlType.Enum,options:[\"linear\",\"easeIn\",\"easeOut\",\"easeInOut\"],defaultValue:FlipCard.defaultProps.easingType},actionTrigger:{title:\"Action Trigger\",type:ControlType.Enum,options:[\"click\",\"hover\"],defaultValue:FlipCard.defaultProps.actionTrigger},flipAxis:{title:\"Flip Axis\",type:ControlType.Enum,options:[\"X\",\"Y\"],defaultValue:FlipCard.defaultProps.flipAxis}});\nexport const __FramerMetadata__ = {\"exports\":{\"FlipCard\":{\"type\":\"reactComponent\",\"name\":\"FlipCard\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\",\"framerSupportedLayoutHeight\":\"any-prefer-fixed\",\"framerSupportedLayoutWidth\":\"any-prefer-fixed\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./Card_Flip.map"],
  "mappings": "8EAMU,SAASA,EAASC,EAAM,CAAC,GAAK,CAAC,SAAAC,EAAS,kBAAAC,EAAkB,WAAAC,EAAW,cAAAC,EAAc,SAAAC,CAAQ,EAAEL,EAAW,CAACM,EAAUC,CAAU,EAAQC,EAAS,EAAK,EAC7J,GAAGP,EAAS,SAAS,EAAE,OAAoBQ,EAAK,MAAM,CAAC,MAAM,CAAC,QAAQ,OAAO,MAAM,OAAO,OAAO,OAAO,aAAa,SAAS,WAAW,SAAS,cAAc,SAAS,MAAM,OAAO,WAAW,0BAA0B,SAAS,SAAS,QAAQ,qBAAqB,EAAE,SAAsBA,EAAK,KAAK,CAAC,SAAS,gEAAgE,CAAC,CAAC,CAAC,EAAE,IAAMC,EAAS,IAAI,CAAIN,IAAgB,SAASG,EAAW,CAACD,CAAS,CAAG,EAAQK,EAAU,IAAI,CAAIP,IAAgB,SAASG,EAAW,CAACD,CAAS,CAAG,EAAQM,EAAaP,IAAW,IAAI,CAAC,QAAQC,EAAU,KAAK,CAAC,EAAE,CAAC,QAAQA,EAAU,KAAK,CAAC,EAAE,OAAoBG,EAAKI,EAAO,IAAI,CAAC,QAAQH,EAAS,aAAaC,EAAU,aAAaA,EAAU,MAAM,CAAC,MAAM,OAAO,OAAO,OAAO,YAAY,IAAI,SAAS,UAAU,EAAE,SAAsBG,EAAMD,EAAO,IAAI,CAAC,QAAQD,EAAa,WAAW,CAAC,SAASV,EAAkB,KAAKC,CAAU,EAAE,MAAM,CAAC,MAAM,OAAO,OAAO,OAAO,SAAS,WAAW,eAAe,aAAa,EAAE,SAAS,CAAcM,EAAKI,EAAO,IAAI,CAAC,MAAM,CAAC,SAAS,WAAW,MAAM,OAAO,OAAO,OAAO,mBAAmB,QAAQ,EAAE,SAASZ,EAAS,CAAC,CAAC,CAAC,EAAeQ,EAAKI,EAAO,IAAI,CAAC,MAAM,CAAC,SAAS,WAAW,MAAM,OAAO,OAAO,OAAO,mBAAmB,SAAS,QAAQR,IAAW,IAAI,IAAI,EAAE,QAAQA,IAAW,IAAI,IAAI,CAAC,EAAE,SAASJ,EAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAE,CAACF,EAAS,aAAa,CAAC,SAAS,CAAC,EAAE,kBAAkB,EAAE,WAAW,UAAU,cAAc,QAAQ,SAAS,GAAG,EAAEgB,EAAoBhB,EAAS,CAAC,SAAS,CAAC,KAAKiB,EAAY,MAAM,gBAAgB,CAAC,KAAKA,EAAY,iBAAiB,EAAE,SAAS,EAAE,MAAM,QAAQ,EAAE,kBAAkB,CAAC,KAAKA,EAAY,OAAO,MAAM,qBAAqB,aAAajB,EAAS,aAAa,kBAAkB,IAAI,GAAG,IAAI,GAAG,KAAK,EAAE,EAAE,WAAW,CAAC,MAAM,cAAc,KAAKiB,EAAY,KAAK,QAAQ,CAAC,SAAS,SAAS,UAAU,WAAW,EAAE,aAAajB,EAAS,aAAa,UAAU,EAAE,cAAc,CAAC,MAAM,iBAAiB,KAAKiB,EAAY,KAAK,QAAQ,CAAC,QAAQ,OAAO,EAAE,aAAajB,EAAS,aAAa,aAAa,EAAE,SAAS,CAAC,MAAM,YAAY,KAAKiB,EAAY,KAAK,QAAQ,CAAC,IAAI,GAAG,EAAE,aAAajB,EAAS,aAAa,QAAQ,CAAC,CAAC",
  "names": ["FlipCard", "props", "children", "animationDuration", "easingType", "actionTrigger", "flipAxis", "isFlipped", "setFlipped", "ye", "p", "flipCard", "hoverCard", "flipRotation", "motion", "u", "addPropertyControls", "ControlType"]
}