{
  "version": 3,
  "sources": ["ssg:https://framerusercontent.com/modules/bmv0hIBfDZtANPW07xgp/yQocToPi6O0X9bugXhZb/Flip.js"],
  "sourcesContent": ["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{addPropertyControls,ControlType,RenderTarget}from\"framer\";import{motion}from\"framer-motion\";import{Children,cloneElement}from\"react\";/**\n *\n * FLIP\n * By Benjamin\n *\n * @framerIntrinsicWidth 200\n * @framerIntrinsicHeight 200\n *\n * @framerDisableUnlink\n *\n * @framerSupportedLayoutWidth fixed\n * @framerSupportedLayoutHeight fixed\n */ export default function Flip(props){var ref,ref1;const isCanvas=RenderTarget.current()===RenderTarget.canvas;const hasChildren=Children.count(props.children)>0;const hasOneChild=Children.count(props.children)===1;const variants={initial:{rotateY:0},hover:{rotateY:180}};/* Empty state */ if(!hasChildren){return /*#__PURE__*/ _jsxs(\"section\",{style:placeholderStyles,children:[/*#__PURE__*/ _jsx(\"div\",{style:emojiStyles,children:\"\u2602\uFE0F\"}),/*#__PURE__*/ _jsx(\"p\",{style:titleStyles,children:\"Connect to Content\"}),/*#__PURE__*/ _jsx(\"p\",{style:subtitleStyles,children:\"Add two layers to flip between on hover.\"})]});}if(hasOneChild){return /*#__PURE__*/ _jsxs(\"section\",{style:placeholderStyles,children:[/*#__PURE__*/ _jsx(\"div\",{style:emojiStyles,children:\"\u2705\"}),/*#__PURE__*/ _jsx(\"p\",{style:titleStyles,children:\"One more!\"}),/*#__PURE__*/ _jsx(\"p\",{style:subtitleStyles,children:\"Add two layers to flip between on hover.\"})]});}return /*#__PURE__*/ _jsx(motion.div,{style:{width:\"100%\",height:\"100%\",position:\"relative\",perspective:1200,...props.style},whileHover:\"hover\",children:/*#__PURE__*/ _jsxs(motion.div,{style:{width:\"100%\",height:\"100%\",position:\"absolute\",userSelect:\"none\",transformStyle:\"preserve-3d\"},variants:variants,transition:props.hoverTransition,children:[/*#__PURE__*/ _jsx(\"div\",{style:{...childStyles},children:/*#__PURE__*/ cloneElement(props.children[0],{...props.children[0].props,style:{...(ref=props.children[0].props)===null||ref===void 0?void 0:ref.style,width:\"100%\",height:\"100%\"}})}),/*#__PURE__*/ _jsx(\"div\",{style:{...childStyles,transform:\"rotateY(180deg)\"},children:/*#__PURE__*/ cloneElement(props.children[1],{...props.children[1].props,style:{...(ref1=props.children[1].props)===null||ref1===void 0?void 0:ref1.style,width:\"100%\",height:\"100%\"}})})]})});};Flip.displayName=\"Flip\";addPropertyControls(Flip,{children:{type:ControlType.Array,title:\"Content\",control:{type:ControlType.ComponentInstance},maxCount:2},hoverTransition:{type:ControlType.Transition,title:\"Transition\",defaultValue:{spring:350,damping:30}}});const childStyles={width:\"100%\",height:\"100%\",position:\"absolute\",backfaceVisibility:\"hidden\"};/* Placeholder Styles */ const placeholderStyles={display:\"flex\",width:\"100%\",height:\"100%\",placeContent:\"center\",placeItems:\"center\",flexDirection:\"column\",color:\"#96F\",background:\"rgba(136, 85, 255, 0.1)\",fontSize:11,overflow:\"hidden\",padding:\"20px 20px 30px 20px\"};const emojiStyles={fontSize:32,marginBottom:10};const titleStyles={margin:0,marginBottom:10,fontWeight:600,textAlign:\"center\"};const subtitleStyles={margin:0,opacity:.7,maxWidth:120,lineHeight:1.5,textAlign:\"center\"};\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"Flip\",\"slots\":[],\"annotations\":{\"framerDisableUnlink\":\"*\",\"framerContractVersion\":\"1\",\"framerIntrinsicHeight\":\"200\",\"framerSupportedLayoutHeight\":\"fixed\",\"framerIntrinsicWidth\":\"200\",\"framerSupportedLayoutWidth\":\"fixed\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./Flip.map"],
  "mappings": "0FAYmB,SAARA,EAAsBC,EAAM,CAAC,IAAIC,EAAIC,EAAK,IAAMC,EAASC,EAAa,QAAQ,IAAIA,EAAa,OAAaC,EAAYC,EAAS,MAAMN,EAAM,QAAQ,EAAE,EAAQO,EAAYD,EAAS,MAAMN,EAAM,QAAQ,IAAI,EAAQQ,EAAS,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC,QAAQ,GAAG,CAAC,EAAoB,OAAIH,EAAqUE,EAAkCE,EAAM,UAAU,CAAC,MAAMC,EAAkB,SAAS,CAAeC,EAAK,MAAM,CAAC,MAAMC,EAAY,SAAS,QAAG,CAAC,EAAgBD,EAAK,IAAI,CAAC,MAAME,EAAY,SAAS,WAAW,CAAC,EAAgBF,EAAK,IAAI,CAAC,MAAMG,EAAe,SAAS,0CAA0C,CAAC,CAAC,CAAC,CAAC,EAAwBH,EAAKI,EAAO,IAAI,CAAC,MAAM,CAAC,MAAM,OAAO,OAAO,OAAO,SAAS,WAAW,YAAY,KAAK,GAAGf,EAAM,KAAK,EAAE,WAAW,QAAQ,SAAuBS,EAAMM,EAAO,IAAI,CAAC,MAAM,CAAC,MAAM,OAAO,OAAO,OAAO,SAAS,WAAW,WAAW,OAAO,eAAe,aAAa,EAAE,SAASP,EAAS,WAAWR,EAAM,gBAAgB,SAAS,CAAeW,EAAK,MAAM,CAAC,MAAM,CAAC,GAAGK,CAAW,EAAE,SAAuBC,EAAajB,EAAM,SAAS,CAAC,EAAE,CAAC,GAAGA,EAAM,SAAS,CAAC,EAAE,MAAM,MAAM,CAAC,IAAIC,EAAID,EAAM,SAAS,CAAC,EAAE,SAAS,MAAMC,IAAM,OAAO,OAAOA,EAAI,MAAM,MAAM,OAAO,OAAO,MAAM,CAAC,CAAC,CAAC,CAAC,EAAgBU,EAAK,MAAM,CAAC,MAAM,CAAC,GAAGK,EAAY,UAAU,iBAAiB,EAAE,SAAuBC,EAAajB,EAAM,SAAS,CAAC,EAAE,CAAC,GAAGA,EAAM,SAAS,CAAC,EAAE,MAAM,MAAM,CAAC,IAAIE,EAAKF,EAAM,SAAS,CAAC,EAAE,SAAS,MAAME,IAAO,OAAO,OAAOA,EAAK,MAAM,MAAM,OAAO,OAAO,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAA37CO,EAAM,UAAU,CAAC,MAAMC,EAAkB,SAAS,CAAeC,EAAK,MAAM,CAAC,MAAMC,EAAY,SAAS,cAAI,CAAC,EAAgBD,EAAK,IAAI,CAAC,MAAME,EAAY,SAAS,oBAAoB,CAAC,EAAgBF,EAAK,IAAI,CAAC,MAAMG,EAAe,SAAS,0CAA0C,CAAC,CAAC,CAAC,CAAC,CAAgqC,CAAEf,EAAK,YAAY,OAAOmB,EAAoBnB,EAAK,CAAC,SAAS,CAAC,KAAKoB,EAAY,MAAM,MAAM,UAAU,QAAQ,CAAC,KAAKA,EAAY,iBAAiB,EAAE,SAAS,CAAC,EAAE,gBAAgB,CAAC,KAAKA,EAAY,WAAW,MAAM,aAAa,aAAa,CAAC,OAAO,IAAI,QAAQ,EAAE,CAAC,CAAC,CAAC,EAAE,IAAMH,EAAY,CAAC,MAAM,OAAO,OAAO,OAAO,SAAS,WAAW,mBAAmB,QAAQ,EAAiCN,EAAkB,CAAC,QAAQ,OAAO,MAAM,OAAO,OAAO,OAAO,aAAa,SAAS,WAAW,SAAS,cAAc,SAAS,MAAM,OAAO,WAAW,0BAA0B,SAAS,GAAG,SAAS,SAAS,QAAQ,qBAAqB,EAAQE,EAAY,CAAC,SAAS,GAAG,aAAa,EAAE,EAAQC,EAAY,CAAC,OAAO,EAAE,aAAa,GAAG,WAAW,IAAI,UAAU,QAAQ,EAAQC,EAAe,CAAC,OAAO,EAAE,QAAQ,GAAG,SAAS,IAAI,WAAW,IAAI,UAAU,QAAQ",
  "names": ["Flip", "props", "ref", "ref1", "isCanvas", "RenderTarget", "hasChildren", "j", "hasOneChild", "variants", "u", "placeholderStyles", "p", "emojiStyles", "titleStyles", "subtitleStyles", "motion", "childStyles", "q", "addPropertyControls", "ControlType"]
}