{"version":3,"file":"component---src-pages-index-tsx-9cae70a80368910d9902.js","mappings":"gJAKMA,EAAUC,EAAAA,QAAAA,QAAAA,WAAH,2DAAGA,CAAH,oEAKPC,EAAUD,EAAAA,QAAAA,QAAAA,WAAH,2DAAGA,CAAH,mLAQE,SAACE,GAAD,OACTA,EAAMC,aAAN,gDAGAC,EAASJ,EAAAA,QAAAA,OAAAA,WAAH,0DAAGA,CAAH,4KAMU,SAACE,GAAD,OAClBA,EAAMG,QAAN,GAAmBH,EAAMG,QAAzB,aAOEC,EAAcN,EAAAA,QAAAA,IAAAA,WAAH,+DAAGA,CAAH,8KAML,SAACE,GAAD,OACRA,EAAMG,QAAN,aAA6BH,EAAMG,QAAnC,uBAQEE,EAAOP,EAAAA,QAAAA,IAAAA,WAAH,wDAAGA,CAAH,mCA0DV,IAjC6C,SAAC,GAAD,IAC3CQ,EAD2C,EAC3CA,SACAC,EAF2C,EAE3CA,sBAF2C,OAI3C,gBAACV,EAAD,MACGU,MAAAA,OAAA,EAAAA,EAAuBC,iBAAiBD,MAAAA,OAAxC,EAAwCA,EAAuBE,aAC9D,gBAACP,EAAD,CAAQC,QAASI,EAAsBC,eACrC,gBAACJ,EAAD,CAAaD,QAASI,EAAsBC,eACzCD,EAAsBE,WACrB,gBAACJ,EAAD,CAAMK,IAAKH,EAAsBE,WAAYE,IAAI,SAEjD,gBAAC,IAAD,QAMR,gBAACZ,EAAD,CACEE,cACEM,MAAAA,OAAA,EAAAA,EAAuBC,iBACvBD,MAAAA,OADA,EACAA,EAAuBE,aAQxBH,M,mCCjEDM,GAASd,E,KAAAA,UApCI,SAAC,GAAD,IAAGe,EAAH,EAAGA,MAAOC,EAAV,EAAUA,OAAV,OACjB,uBACED,MAAOA,EACPC,OAAQA,EACRC,QAAQ,YACRC,KAAK,OACLC,MAAM,6BACNC,MAAO,CACLC,cAAe,OACfC,kBAAmB,SACnBC,wBAAyB,WACzBC,wBAAyB,WAG3B,wBACEC,EAAE,wFACFC,OAAO,gCACPC,YAAY,IACZC,cAAc,UAEhB,4BACE,kCACEC,GAAG,0BACHC,GAAG,IACHC,GAAG,UACHC,GAAG,UACHC,GAAG,UACHC,cAAc,kBAEd,wBAAMC,UAAU,YAChB,wBAAMC,OAAO,IAAID,UAAU,kBAMvB,sEAAGnC,CAAH,gFAeZ,IAJuB,SAAC,GAAD,QAAGe,MAAAA,OAAH,MAAW,GAAX,MAAeC,OAAAA,OAAf,MAAwB,GAAxB,SACrB,gBAACF,EAAD,CAAQC,MAAOA,EAAOC,OAAQA,M,oDC9ChC,UAFsB,kBAAM,gBAAC,IAAD","sources":["webpack://payment-flow/./src/components/Layout.tsx","webpack://payment-flow/./src/components/Spinner.tsx","webpack://payment-flow/./src/pages/index.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport Spinner from './Spinner';\n// import { P } from './Typography';\n\nconst Wrapper = styled.section`\n  height: calc(100vh - 65px + 65px * 2);\n  background-color: #f4f7f9;\n`;\n\nconst Section = styled.section<{ isWithHeader?: boolean }>`\n  /* height: calc(100vh -); */\n  padding: 5rem calc((100vw - 800px) / 2);\n  overflow-y: none;\n  background-color: #f4f7f9;\n  position: relative;\n  @media (max-width: 900px) {\n    height: calc(100vh - 5rem + 5rem * 2);\n    padding: ${(props) =>\n      props.isWithHeader ? `5rem var(--space-2)` : `3rem var(--space-2) `};\n  }\n`;\nconst Header = styled.header<{ bgColor?: string }>`\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  padding: 0 8rem;\n  height: 65px;\n  background-color: ${(props) =>\n    props.bgColor ? `${props.bgColor}` : `#13273F`};\n  @media (max-width: 900px) {\n    padding: 0;\n    justify-content: center;\n  }\n`;\n\nconst LogoWrapper = styled.div<{ bgColor?: string }>`\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-color: white;\n  position: absolute;\n  border: ${(props) =>\n    props.bgColor ? `5px solid ${props.bgColor}` : `5px solid #13273F`};\n  top: 10px;\n  border-radius: 50%;\n  width: 85px;\n  height: 85px;\n  z-index: 99;\n`;\n\nconst Logo = styled.img`\n  width: 101%;\n  border-radius: 50%;\n`;\n\n/* const Banner = styled.div`\n  padding: var(--space-2);\n  background: linear-gradient(\n    270deg,\n    #7914c9 12.33%,\n    #af14c9 99.99%,\n    #af14c9 100%\n  );\n  display: flex;\n  justify-content: center;\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n`; */\n\n/* const BannerText = styled(P)`\n  color: white;\n`; */\n\nconst Layout: React.FunctionComponent<any> = ({\n  children /* , isSandbox */,\n  customisationSettings,\n}) => (\n  <Wrapper>\n    {customisationSettings?.headerBgColor && customisationSettings?.headerLogo && (\n      <Header bgColor={customisationSettings.headerBgColor}>\n        <LogoWrapper bgColor={customisationSettings.headerBgColor}>\n          {customisationSettings.headerLogo ? (\n            <Logo src={customisationSettings.headerLogo} alt=\"logo\" />\n          ) : (\n            <Spinner />\n          )}\n        </LogoWrapper>\n      </Header>\n    )}\n\n    <Section\n      isWithHeader={\n        customisationSettings?.headerBgColor &&\n        customisationSettings?.headerLogo\n      }\n    >\n      {/* isSandbox && (\n      <Banner>\n        <BannerText>You are in sandbox mode!</BannerText>\n      </Banner>\n    ) */}\n      {children}\n    </Section>\n  </Wrapper>\n);\n\nexport default Layout;\n","import React from 'react';\nimport styled from 'styled-components';\n\nconst SpinnerSvg = ({ width, height }: any) => (\n  <svg\n    width={width}\n    height={height}\n    viewBox=\"0 0 22 22\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    style={{\n      animationName: `spin`,\n      animationDuration: `2000ms`,\n      animationIterationCount: `infinite`,\n      animationTimingFunction: `linear`,\n    }}\n  >\n    <path\n      d=\"M11 20C15.9706 20 20 15.9706 20 11C20 6.02944 15.9706 2 11 2C6.02944 2 2 6.02944 2 11\"\n      stroke=\"url(#paint0_linear_3328_1046)\"\n      strokeWidth=\"3\"\n      strokeLinecap=\"round\"\n    />\n    <defs>\n      <linearGradient\n        id=\"paint0_linear_3328_1046\"\n        x1=\"2\"\n        y1=\"4.30233\"\n        x2=\"21.3333\"\n        y2=\"5.69598\"\n        gradientUnits=\"userSpaceOnUse\"\n      >\n        <stop stopColor=\"#2CD19E\" />\n        <stop offset=\"1\" stopColor=\"#00F3A8\" />\n      </linearGradient>\n    </defs>\n  </svg>\n);\n\nconst Styled = styled(SpinnerSvg)`\n  @keyframes spin {\n    0% {\n      transform: rotateZ(0);\n    }\n    100% {\n      transform: rotateZ(360deg);\n    }\n  }\n`;\n\nexport const Spinner = ({ width = 22, height = 22 }) => (\n  <Styled width={width} height={height} />\n);\n\nexport default Spinner;\n","import Layout from '@/components/Layout';\nimport React, { FC } from 'react';\n\nconst IndexPage: FC = () => <Layout />;\n\nexport default IndexPage;\n"],"names":["Wrapper","styled","Section","props","isWithHeader","Header","bgColor","LogoWrapper","Logo","children","customisationSettings","headerBgColor","headerLogo","src","alt","Styled","width","height","viewBox","fill","xmlns","style","animationName","animationDuration","animationIterationCount","animationTimingFunction","d","stroke","strokeWidth","strokeLinecap","id","x1","y1","x2","y2","gradientUnits","stopColor","offset"],"sourceRoot":""}