{
  "version": 3,
  "sources": ["ssg:https://framerusercontent.com/modules/5od71RrbPHSuc1b0d0cI/TNXZODVdAwWfCMPVT0ZM/AuthForm.js"],
  "sourcesContent": ["// Welcome to Code in Framer\n// Get Started: https://www.framer.com/docs/guides/\nimport{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{useState}from\"react\";import{addPropertyControls,ControlType}from\"framer\";import styled,{keyframes}from\"styled-components\";// function Spinner2() {\n//     // TODO:\n//     // - add loading icon\n//     // - add css styles to spin icon\n//     return <Spinner />\n// }\nfunction PasswordInput(){return /*#__PURE__*/ _jsx(\"div\",{style:rowContainer,children:/*#__PURE__*/ _jsxs(\"div\",{style:inputContainer,children:[/*#__PURE__*/ _jsx(\"label\",{htmlFor:\"password\",style:labelStyle,children:\"Password\"}),/*#__PURE__*/ _jsx(\"input\",{type:\"password\",id:\"password\",style:inputStyle,placeholder:\"password\"})]})});}/**\n * These annotations control how your component sizes\n * Learn more: https://www.framer.com/docs/guides/auto-sizing\n *\n * @framerSupportedLayoutWidth any\n * @framerSupportedLayoutHeight any\n */ export default function AuthForm(props){// - Find inspiration: https://www.framer.com/developers/\nconst[isLoggingIn,setIsLoggingIn]=useState(false);const[isError,setIsError]=useState(false);const btnTitle=props.button.title||\"Title\";const handleLogin=async e=>{e.preventDefault();await setIsLoggingIn(true);window.setTimeout(async()=>{await setIsError(true);await setIsLoggingIn(false);},1200);};return /*#__PURE__*/ _jsx(\"div\",{style:containerStyle,id:\"login-form\",children:/*#__PURE__*/ _jsxs(\"form\",{// To learn more about styling see:\n// https://reactjs.org/docs/dom-elements.html#style\nstyle:formContainer,id:\"loginForm\",children:[/*#__PURE__*/ _jsx(\"div\",{style:rowContainer,children:/*#__PURE__*/ _jsxs(\"div\",{style:inputContainer,children:[/*#__PURE__*/ _jsx(\"label\",{htmlFor:\"email\",style:labelStyle,children:\"Email\"}),/*#__PURE__*/ _jsx(\"input\",{type:\"text\",id:\"email\",style:inputStyle,placeholder:\"example@email.com\"})]})}),props.password?/*#__PURE__*/ _jsx(PasswordInput,{}):null,isError?/*#__PURE__*/ _jsx(\"p\",{style:{color:\"red\"},children:props.errorMessage}):null,/*#__PURE__*/ _jsx(\"button\",{type:\"submit\",onClick:e=>handleLogin(e),style:{...buttonStyles,background:props.button.colour,borderRadius:`${props.button.radius||6}px`},children:isLoggingIn?/*#__PURE__*/ _jsx(Spinner,{}):btnTitle})]})});};// Styles are written in object syntax\n// Learn more: https://reactjs.org/docs/dom-elements.html#style\nconst containerStyle={height:\"100%\",display:\"flex\",width:\"100%\",justifyContent:\"center\",alignItems:\"center\",overflow:\"hidden\"};const formContainer={borderRadius:\"50px\",width:\"100%\"};const inputStyle={borderRadius:\"6px\",padding:\"10px\",width:\"100%\",border:\"1px solid #EFF0F6\"};const inputContainer={display:\"flex\",flexDirection:\"column\",width:\"100%\",paddingBottom:\"20px\"};const labelStyle={marginBottom:\"10px\",fontSize:\"16px\"};const rowContainer={display:\"flex\",width:\"100%\",justifyContent:\"space-between\"};const buttonStyles={background:\"#000\",border:\"none\",color:\"white\",padding:\"10px 20px\",borderRadius:\"10px\",fontSize:\"16px\",textAlign:\"center\",width:\"100%\"};AuthForm.defaultProps={password:true,errorMessage:\"Error\"};addPropertyControls(AuthForm,{button:{type:ControlType.Object,controls:{title:{type:ControlType.String},colour:{type:ControlType.Color},radius:{type:ControlType.Number}}},password:{title:\"Password\",type:ControlType.Boolean},errorMessage:{title:\"Text\",type:ControlType.String}});const spin=keyframes`\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n`;const Spinner=styled.div`\n  border: 3px solid #f3f3f3;\n  border-top: 3px solid #3498db;\n  border-radius: 50%;\n  width: 20px;\n  height: 20px;\n  animation: ${spin} 1s linear infinite;\n`;\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"AuthForm\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutWidth\":\"any\",\"framerContractVersion\":\"1\",\"framerSupportedLayoutHeight\":\"any\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./AuthForm.map"],
  "mappings": "8JAQA,SAASA,GAAe,CAAC,OAAqBC,EAAK,MAAM,CAAC,MAAMC,EAAa,SAAuBC,EAAM,MAAM,CAAC,MAAMC,EAAe,SAAS,CAAeH,EAAK,QAAQ,CAAC,QAAQ,WAAW,MAAMI,EAAW,SAAS,UAAU,CAAC,EAAgBJ,EAAK,QAAQ,CAAC,KAAK,WAAW,GAAG,WAAW,MAAMK,EAAW,YAAY,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAE,CAM5T,SAARC,EAA0BC,EAAM,CAC3C,GAAK,CAACC,EAAYC,CAAc,EAAEC,EAAS,EAAK,EAAO,CAACC,EAAQC,CAAU,EAAEF,EAAS,EAAK,EAAQG,EAASN,EAAM,OAAO,OAAO,QAAcO,EAAY,MAAMC,GAAG,CAACA,EAAE,eAAe,EAAE,MAAMN,EAAe,EAAI,EAAEO,EAAO,WAAW,SAAS,CAAC,MAAMJ,EAAW,EAAI,EAAE,MAAMH,EAAe,EAAK,CAAE,EAAE,IAAI,CAAE,EAAE,OAAqBT,EAAK,MAAM,CAAC,MAAMiB,EAAe,GAAG,aAAa,SAAuBf,EAAM,OAAO,CAEpZ,MAAMgB,EAAc,GAAG,YAAY,SAAS,CAAelB,EAAK,MAAM,CAAC,MAAMC,EAAa,SAAuBC,EAAM,MAAM,CAAC,MAAMC,EAAe,SAAS,CAAeH,EAAK,QAAQ,CAAC,QAAQ,QAAQ,MAAMI,EAAW,SAAS,OAAO,CAAC,EAAgBJ,EAAK,QAAQ,CAAC,KAAK,OAAO,GAAG,QAAQ,MAAMK,EAAW,YAAY,mBAAmB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAEE,EAAM,SAAuBP,EAAKD,EAAc,CAAC,CAAC,EAAE,KAAKY,EAAsBX,EAAK,IAAI,CAAC,MAAM,CAAC,MAAM,KAAK,EAAE,SAASO,EAAM,YAAY,CAAC,EAAE,KAAmBP,EAAK,SAAS,CAAC,KAAK,SAAS,QAAQe,GAAGD,EAAYC,CAAC,EAAE,MAAM,CAAC,GAAGI,EAAa,WAAWZ,EAAM,OAAO,OAAO,aAAa,GAAGA,EAAM,OAAO,QAAQ,KAAK,EAAE,SAASC,EAA0BR,EAAKoB,EAAQ,CAAC,CAAC,EAAEP,CAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAE,CAEntB,IAAMI,EAAe,CAAC,OAAO,OAAO,QAAQ,OAAO,MAAM,OAAO,eAAe,SAAS,WAAW,SAAS,SAAS,QAAQ,EAAQC,EAAc,CAAC,aAAa,OAAO,MAAM,MAAM,EAAQb,EAAW,CAAC,aAAa,MAAM,QAAQ,OAAO,MAAM,OAAO,OAAO,mBAAmB,EAAQF,EAAe,CAAC,QAAQ,OAAO,cAAc,SAAS,MAAM,OAAO,cAAc,MAAM,EAAQC,EAAW,CAAC,aAAa,OAAO,SAAS,MAAM,EAAQH,EAAa,CAAC,QAAQ,OAAO,MAAM,OAAO,eAAe,eAAe,EAAQkB,EAAa,CAAC,WAAW,OAAO,OAAO,OAAO,MAAM,QAAQ,QAAQ,YAAY,aAAa,OAAO,SAAS,OAAO,UAAU,SAAS,MAAM,MAAM,EAAEb,EAAS,aAAa,CAAC,SAAS,GAAK,aAAa,OAAO,EAAEe,EAAoBf,EAAS,CAAC,OAAO,CAAC,KAAKgB,EAAY,OAAO,SAAS,CAAC,MAAM,CAAC,KAAKA,EAAY,MAAM,EAAE,OAAO,CAAC,KAAKA,EAAY,KAAK,EAAE,OAAO,CAAC,KAAKA,EAAY,MAAM,CAAC,CAAC,EAAE,SAAS,CAAC,MAAM,WAAW,KAAKA,EAAY,OAAO,EAAE,aAAa,CAAC,MAAM,OAAO,KAAKA,EAAY,MAAM,CAAC,CAAC,EAAE,IAAMC,EAAKC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOx+BJ,EAAQK,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAMRF;",
  "names": ["PasswordInput", "p", "rowContainer", "u", "inputContainer", "labelStyle", "inputStyle", "AuthForm", "props", "isLoggingIn", "setIsLoggingIn", "ye", "isError", "setIsError", "btnTitle", "handleLogin", "e", "window", "containerStyle", "formContainer", "buttonStyles", "Spinner", "addPropertyControls", "ControlType", "spin", "Ue", "He"]
}