{"version":3,"file":"component---src-pages-sign-up-js-765accb887a420abefa9.js","mappings":"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","sources":["webpack://gatsby-starter-default/./src/components/helpers/useScript.js","webpack://gatsby-starter-default/./src/components/Hubspot/HubspotForms.js","webpack://gatsby-starter-default/./src/components/SignUp/updateDetails.js","webpack://gatsby-starter-default/./src/components/elements/Spinner.js","webpack://gatsby-starter-default/./src/components/helpers/Emoji.js","webpack://gatsby-starter-default/./src/components/SignUp/EmailForm.js","webpack://gatsby-starter-default/./src/components/SignUp/InviteOnlyEmailForm.js","webpack://gatsby-starter-default/./src/pages/sign-up.js","webpack://gatsby-starter-default/./src/components/SignUp/signup.module.scss"],"sourcesContent":["import { useState, useEffect } from \"react\";\n\nfunction useScript(src) {\n  // Keep track of script status (\"idle\", \"loading\", \"ready\", \"error\")\n  const [status, setStatus] = useState(src ? \"loading\" : \"idle\");\n\n  useEffect(\n    () => {\n      // Allow falsy src value if waiting on other data needed for\n      // constructing the script URL passed to this hook.\n      if (!src) {\n        setStatus(\"idle\");\n        return;\n      }\n\n      // Fetch existing script element by src, ensuring it's the one we added\n      // and has the data attribute we expect.\n      // It may have been added by another intance of this hook\n      let script = document.querySelector(`script[src=\"${src}\"][data-status]`);\n\n      if (!script) {\n        // Create script\n        script = document.createElement(\"script\");\n        script.src = src;\n        script.async = true;\n        script.setAttribute(\"data-status\", \"loading\");\n        // Add script to document body\n        document.body.appendChild(script);\n\n        // Store status in attribute on script\n        // This can be read by other instances of this hook\n        const setAttributeFromEvent = (event) => {\n          script.setAttribute(\n            \"data-status\",\n            event.type === \"load\" ? \"ready\" : \"error\"\n          );\n        };\n\n        script.addEventListener(\"load\", setAttributeFromEvent);\n        script.addEventListener(\"error\", setAttributeFromEvent);\n      } else {\n        // Grab existing script status from attribute and set to state.\n        setStatus(script.getAttribute(\"data-status\"));\n      }\n\n      // Script event handler to update status in state\n      // Note: Even if the script already exists we still need to add\n      // event handlers to update the state for *this* hook instance.\n      const setStateFromEvent = (event) => {\n        setStatus(event.type === \"load\" ? \"ready\" : \"error\");\n      };\n\n      // Add event listeners\n      script.addEventListener(\"load\", setStateFromEvent);\n      script.addEventListener(\"error\", setStateFromEvent);\n\n      // Remove event listeners on cleanup\n      return () => {\n        if (script) {\n          script.removeEventListener(\"load\", setStateFromEvent);\n          script.removeEventListener(\"error\", setStateFromEvent);\n        }\n      };\n    },\n    [src] // Only re-run effect if script src changes\n  );\n\n  return status;\n}\n\nexport default useScript;","import React, { useEffect, useRef } from 'react'\nimport styled from 'styled-components'\n\nimport ThemeDefault from '../theme/ThemeDefault'\nimport useScript from '../helpers/useScript'\nimport Spinner from '../elements/Spinner'\n\nconst HubspotFormWrapper = styled.div.attrs((props) => ({\n  className: props.cssClass,\n}))`\n\n    margin-top: 16px;\n    min-height: ${props => props.height};\n\n    .hubsport-form,\n    .actions {\n      margin: 0;\n      padding: 0;\n    }\n\n    label:not(.hs-error-msg) {\n      display: none !important;\n    }\n\n    .hs-error-msg {\n      color: #d92a0e;\n    }\n\n    .actions,\n    .input {\n      padding: 0 !important;\n      margin: 0 !important;\n    }\n\n    input,\n    textarea {\n      padding: 8px !important;\n      border: 1px solid ${ThemeDefault.greyDark} !important;\n      border-radius: 0 !important;\n      width: 100%;\n      max-width: 100%;\n      font-size: 16px;\n      min-height: auto !important;\n      box-sizing: border-box !important;\n      font-size: 16px !important;\n      line-height: 1 !important;\n      height: auto !important;\n    }\n\n    .hs-button {\n      display: block !important;\n      padding: 16px 24px  !important;\n      background-color: ${props => props.whiteButton ? `${ThemeDefault.white}` : (props.blackButton ? `${ThemeDefault.black}` : `${ThemeDefault.blue}`)};\n      border: none  !important;\n      box-shadow: 0 4px 6px rgba(50,50,93,0.11),0 1px 3px rgba(0,0,0,0.08)  !important;\n      cursor: pointer  !important;\n      line-height: 1  !important;\n      outline: none  !important;\n      text-decoration: none  !important;\n      transition: all 0.15s ease  !important;\n      white-space: nowrap  !important;\n      width: 100%;\n      max-width: 100%;\n      box-sizing: border-box !important;\n      font-weight: 400 !important;\n      color: ${props => props.whiteButton ? `${ThemeDefault.black}` : (props.blackButton ? `${ThemeDefault.white}` : `${ThemeDefault.black}`)};\n\n    }\n\n    ul, li {\n      padding: 0 !important;\n      margin: 0 !important;\n      list-style: none !important;\n    }\n\n    .hubspot-form {\n      .hs-form-field {\n        margin-bottom: 16px !important;\n      }\n    }\n\n    select {\n      border: 1px solid ${ThemeDefault.greyDark} !important;\n      border-radius: 0 !important;\n      width: 100%;\n      padding: 10px 8px !important;\n      max-width: 100%;\n      min-height: auto !important;\n      box-sizing: border-box !important;\n      font-size: 16px !important;\n      line-height: 1 !important;\n      height: auto !important;\n      appearance: none;\n\n    }\n\n    .hs-fieldtype-select {\n      position: relative;\n      &:after {\n        content: '';\n        position: absolute;\n        width: 0;\n        height: 0;\n        right: 8px;\n        top: 50%;\n        border-left: 8px solid transparent;\n        border-right: 8px solid transparent;\n        border-top: 8px solid ${ThemeDefault.black};\n        transform: translateY(-50%);\n      }\n    }\n`\n// A helper component that supports adding a Hubspot form into the page. It\n// does a few things to achieve this:\n//\n// - Injects the Hubspot form javascript library script tag, the effect used to\n//   achieve this triggers re-renders of this component as the status of the\n//   script loading changes.\n// - Adds a DOM element to accept the eventual Hubspot form that will be\n//   rendered, this is styled to match our own app requirements. This initially\n//   has a loading spinner shown.\n// - Waits until the Hubspot javascript is loaded, and our own DOM element is\n//   available in the DOM then calls the Hubspot javascript and requests the\n//   form be rendered, this removes the loading spinner and shows the form.\nconst HubspotForms = React.memo(({\n  blockID,\n  formID,\n  formOptions = {},\n  whiteButton,\n  blackButton,\n  formHeight = '100px',\n}) => {\n\n  const hsJsReady = useRef(false)\n  const status = useScript('//js.hsforms.net/forms/v2.js')\n  hsJsReady.current = status === 'ready'\n\n  // It's important that we only try and invoke the creation of a Hubspot form\n  // once this component has mounted the DOM element that we tell Hubspot to\n  // inject their form into and the Hubspot javascript is available!\n  useEffect(() => {\n    if (hsJsReady.current && window.hbspt)\n    {\n      window.hbspt.forms.create({\n        portalId: process.env.GATSBY_HUBSPOT_PORTAL_ID,\n        region: 'na1',\n        formId: formID,\n        cssClass: 'hubspot-form',\n        target: `.${blockID}`,\n        ...formOptions,\n      })\n    }\n  }, [hsJsReady.current])\n\n  const formReady = typeof window !== 'undefined' && hsJsReady.current\n\n  return <>\n\n    {!formReady &&\n    <div style={{display: 'flex', justifyContent: 'center', alignItems: 'center', height: formHeight, marginBottom: '0px'}}>\n      <Spinner dark />\n    </div>\n    }\n\n    {formReady &&\n    <HubspotFormWrapper\n      cssClass={blockID}\n      whiteButton={whiteButton}\n      blackButton={blackButton}\n      height={formHeight}\n    />\n    }\n\n  </>\n\n})\n\nexport default HubspotForms\n","export const updateDetails = (state, payload) => {\n  return {\n    ...state,\n    signUpDetails: {\n      ...state.signUpDetails,\n      ...payload,\n    }\n  };\n}","import React from \"react\"\nimport \"./spinner.scss\"\n\nconst Spinner = ({ dark = false}) => {\n  return <div className={`loader ${dark ? 'dark': ''}`}></div>\n}\nexport default Spinner\n","import React from 'react';\n\nconst Emoji = props => (\n  <span\n      className=\"emoji\"\n      role=\"img\"\n      aria-label={props.label ? props.label : \"\"}\n      aria-hidden={props.label ? \"false\" : \"true\"}\n  >\n      {props.symbol}\n  </span>);\n  \n  export default Emoji;","import React, { useState, useEffect, useRef } from 'react'\nimport { useStateMachine } from 'little-state-machine'\nimport { navigate, Link } from 'gatsby'\nimport axios from 'axios'\nimport queryString from 'query-string'\n\nimport { updateDetails } from './updateDetails'\nimport Spinner from '../elements/Spinner'\nimport HubspotForms from '../Hubspot/HubspotForms'\nimport Emoji from '../helpers/Emoji'\nimport { isBrowser } from '../helpers/helpers'\n\nimport * as SignUpStyles from './signup.module.scss'\nimport './signupForm.scss'\n\nconst EmailForm = ({ location }) => {\n\n  const [isLoading, setIsLoading] = useState(false)\n\n  const { actions, state } = useStateMachine({ updateDetails })\n\n  const emailFromXero = useRef()\n\n  // Initial component load hook, if we've arrived here after returning from a\n  // redirect through Xero we exchange the code recieved for user details to\n  // prepopulate the email box on the form.\n  useEffect(() => {\n\n    const url = new URL(window.location)\n    const {\n      xero: isXero = false,\n      complete: isCompleted = false,\n      code,\n    } = queryString.parse(location.search)\n\n    if (isXero && isCompleted) {\n      // This is a return back from Xero after redirecting the user there upon\n      // loading our sign up form from the Xero App Store. We exchange the code\n      // they'll have included in the url for their details and auto-fill the\n      // sign up form.\n      setIsLoading(true)\n      axios\n        .post(`${process.env.GATSBY_APIURL}/r/XeroOpenId`, {\n          code,\n          origin: window.localStorage.getItem('@@loaded/xeroOAuthOrigin')\n        })\n        .then(response => {\n          setIsLoading(false)\n          const userEmail = response?.data?.email\n          const firstName = response?.data?.given_name\n          const surname = response?.data?.family_name\n          if (userEmail) {\n            actions.updateDetails({email: userEmail, fullName: `${firstName} ${surname}`})\n            emailFromXero.current = userEmail\n\n            // We may be running after the HubSpot form has loaded, in this case\n            // we need to update the field in-situ instead of the HubSpot form\n            // ready callback populating it after we've set it in the form state.\n            const emailField = getHubSpotEmailField()\n            if (emailField) {\n              emailField.value = userEmail\n              emailField.dispatchEvent(new Event('input', { bubbles: true }))\n            }\n          }\n        })\n    }\n\n  }, [])\n\n  // Return a DOM reference to the email field of the embedded HubSpot form.\n  const getHubSpotEmailField = () => {\n    const form = document.querySelector(`#hsForm_${process.env.GATSBY_HUBSPOT_EMAIL_SIGNUP_FORM_ID}`)\n    return form ? form.querySelector(`#email-${process.env.GATSBY_HUBSPOT_EMAIL_SIGNUP_FORM_ID}`) : null\n  }\n\n  // Attach an event listener once when the component is rendered to cater for\n  // the HubSpot form API and attaching to it's lifecycle events. We can't do\n  // this directly via the options properties onFormReady etc because they\n  // don't have the expected jquery dependnecy in place. This event listener,\n  // while ugly, avoids us having to embed another version of jquery.\n  const email = useRef()\n  const hsFormSubmitting = useRef(false)\n\tuseEffect(() => {\n    if (isBrowser()) { \n\n      const handleHubspotFormEvents = event => {\n        if (!event.data.type === 'hsFormCallback') return\n\n        let emailField\n        switch (event.data.eventName) {\n          case 'onFormReady':\n            const emailToUse = state?.signUpDetails?.email || emailFromXero.current\n\n            if (emailToUse) {\n              emailField = getHubSpotEmailField()\n              emailField.value = emailToUse\n              emailField.dispatchEvent(new Event('input', { bubbles: true }))\n            }\n\n            break\n          case 'onFormSubmit':\n            emailField = getHubSpotEmailField()\n            email.current = emailField.value\n            hsFormSubmitting.current = true\n            break\n          case 'onFormSubmitted':\n            actions.updateDetails({ email: email.current })\n            navigate('/sign-up/welcome')\n            break\n        }\n      }\n\n      window.addEventListener('message', handleHubspotFormEvents)\n\n      // it's important we remove the listeners, else when navigating in the\n      // invite screens the sign-up event listeners above try and fire when\n      // we've already rendered something different - the js exception causes\n      // the rendering to fail on the invite screen\n      return () => {\n        window.removeEventListener('message', handleHubspotFormEvents)\n      }\n\t\t}\n\t},[])\n\n  return (\n    <div className='component email-form'>\n      <h1>Sign Up</h1>\n      <div className={SignUpStyles.subText}>Get yourself a free 14 day trial! <Emoji symbol='👊' label='fist bump' /> </div>\n\n      { isLoading ?\n\t\t\t\t<div style={{display: 'flex', justifyContent: 'center', alignItems: 'center', height: '128px', marginBottom: '128px'}}>\n\t\t\t\t\t<Spinner dark />\n\t\t\t\t</div>\n\t\t\t:\n\t\t\t\t<div>\n          {/* The visibility style here is a workaround to a render quirk with the HubSpot form.\n              When it's submitted the jquery code hides the form, but then it gets re-rendered\n              by React and ends up visible for a brief flash before we transition to the second\n              stage 'welcome' form. We hide the form when we've detected a form submission via\n              CSS here. */}\n          <div style={{ visibility: hsFormSubmitting.current === true ? 'hidden' : 'visible' }}>\n            <HubspotForms\n              formID={`${process.env.GATSBY_HUBSPOT_EMAIL_SIGNUP_FORM_ID}`}\n              blockID={`form-${process.env.GATSBY_HUBSPOT_EMAIL_SIGNUP_FORM_ID}`}\n              formOptions={{\n                locale: 'en',\n                translations: {\n                  en: {\n                    required: 'A valid email address is required'\n                  }\n                },\n              }}\n              formHeight='112px'\n            />\n          </div>\n          <div className='loginLink' style={{marginTop: '32px', marginBottom: '64px', textAlign: 'center'}}>Already got an account? You can <Link to='/login'>login here</Link>.</div>\n\t\t\t\t</div>\n      }\n\n      <div className={SignUpStyles.disclaimer}>\n        By creating a Loaded account I agree to the <Link to='/end-user-licence-agreement'>End User Licence Agreement</Link> and <Link to='/privacy-policy'>Privacy Policy.</Link>\n      </div>\n    </div>\n  )\n}\n\nexport default EmailForm\n","import React, { useEffect, useRef, useState } from 'react'\nimport { useStateMachine } from 'little-state-machine'\nimport { Link, navigate } from 'gatsby'\n\nimport { updateDetails } from './updateDetails'\nimport HubspotForms from '../Hubspot/HubspotForms'\nimport { isBrowser } from '../helpers/helpers' \n\nimport * as SignUpStyles from './signup.module.scss'\nimport './signupForm.scss'\n\nconst InviteOnlyEmailForm = ({ inviteToken, companyName }) => {\n\n  const [createAccount, setCreateAccount] = useState(false)\n  const { actions } = useStateMachine({ updateDetails })\n\n  // Return a DOM reference to the email field of the embedded HubSpot form.\n  const getHubSpotEmailField = () => {\n    const form = document.getElementById(`hsForm_${process.env.GATSBY_HUBSPOT_INVITE_SIGNUP_FORM_ID}`)\n    return form.querySelector(`#email-${process.env.GATSBY_HUBSPOT_INVITE_SIGNUP_FORM_ID}`)\n  }\n\n  // Attach an event listener once when the component is rendered to cater for\n  // the HubSpot form API and attaching to it's lifecycle events. We can't do\n  // this directly via the options properties onFormReady etc because they\n  // don't have the expected jquery dependnecy in place. This event listener,\n  // while ugly, avoids us having to embed another version of jquery.\n  const email = useRef()\n  const hsFormSubmitting = useRef(false)\n\tuseEffect(() => {\n    if (isBrowser()) {\n\n      const handleHubspotFormEvents = event => {\n        if (!event.data.type === 'hsFormCallback') return\n\n        switch (event.data.eventName) {\n          case 'onFormSubmit': \n            const emailField = getHubSpotEmailField()\n            email.current = emailField.value\n            hsFormSubmitting.current = true\n            break;\n          case 'onFormSubmitted':\n            actions.updateDetails({ email: email.current })\n            navigate(`/sign-up/welcome?inviteToken=${inviteToken}&companyName=${companyName}`)\n            break;\n        }\n      }\n\n      window.addEventListener('message', handleHubspotFormEvents)\n\n      return () => {\n        window.removeEventListener('message', handleHubspotFormEvents)\n      }\n\t\t}\n\t},[])\n\n  return (\n    <div className='component'>\n      <h1>Welcome to Loaded Reports</h1>\n\n      {!createAccount &&\n      <div className='invite-header'>\n        <div className={`${SignUpStyles.tCenter} ${SignUpStyles.mb16}`}>You've been invited to access <strong>{companyName}</strong>.</div>\n        <div className={`${SignUpStyles.tCenter} ${SignUpStyles.mb16}`}>To accept this invite, you must be logged in.</div>\n        <div className={SignUpStyles.buttonRow}>\n          <Link to={`/login?inviteToken=${inviteToken}`} className={`${SignUpStyles.button} ${SignUpStyles.open}`} >Login To Existing Account</Link>\n          <div className={`${SignUpStyles.button} ${SignUpStyles.open}`} onClick={() => setCreateAccount(true)}>Create Account</div>\n        </div>\n      </div>\n      }\n\n      {createAccount &&\n      <div className={SignUpStyles.emailForm}>\n        <div className={SignUpStyles.formDiv}>\n          <div className={`${SignUpStyles.tCenter} ${SignUpStyles.mb16}`}>\n            Please enter your email address. This will be the address you log in with in the future.\n          </div>\n          {/* The visibility style here is a workaround to a render quirk with the HubSpot form.\n              When it's submitted the jquery code hides the form, but then it gets re-rendered\n              by React and ends up visible for a brief flash before we transition to the second\n              stage 'welcome' form. We hide the form when we've detected a form submission via\n              CSS here. */}\n          <div style={{ visibility: hsFormSubmitting.current === true ? 'hidden' : 'visible' }}>\n            <HubspotForms\n              formID={process.env.GATSBY_HUBSPOT_INVITE_SIGNUP_FORM_ID}\n              blockID={`form-${process.env.GATSBY_HUBSPOT_INVITE_SIGNUP_FORM_ID}`}\n              formOptions={{\n                locale: 'en',\n                translations: {\n                  en: {\n                    required: 'A valid email address is required'\n                  }\n                }\n              }}\n              formHeight='112px'\n            />\n          </div>\n        </div>\n      </div>\n      }\n\n      <div className={SignUpStyles.disclaimer}>\n        By creating a loaded account I agree to the <Link to='/end-user-licence-agreement'>End User Licence Agreement</Link> and <Link to='/privacy-policy'>Privacy Policy.</Link>\n      </div>\n    </div>\n  )\n}\n\nexport default InviteOnlyEmailForm\n","import React, { useEffect, useState } from 'react'\nimport queryString from 'query-string'\n\nimport Base from '../components/templates/Base'\nimport EmailForm from '../components/SignUp/EmailForm'\nimport InviteOnlyEmailForm from '../components/SignUp/InviteOnlyEmailForm'\n\nimport * as SignUpStyles from '../components/SignUp/signup.module.scss'\n\nconst SignUpPage = ({ location }) => {\n\n  const [isInviteSignup, setIsInviteSignup] = useState(false)\n  const [token, setToken] = useState()\n  const [company, setCompany] = useState()\n\n  // To avoid causing rehydration breaking in unpredictable ways it's important\n  // that the initial browser render of this component is exactly the same as\n  // the server side rendered version of this component. This component renders\n  // a different path based on whether there is a URL parameter present, so we\n  // only check for that after the initial render by changing state after it's\n  // mounted. See https://reactjs.org/docs/react-dom.html#hydrate for details.\n  useEffect(() => {\n\n    const search = location.search ? queryString.parse(location.search) : false;\n    const { inviteToken, companyName } = queryString.parse(location.search);\n\n    setIsInviteSignup(!!inviteToken)\n    setToken(inviteToken)\n    setCompany(companyName)\n\n  })\n\n  return (\n    <Base>\n      <section className={SignUpStyles.signUp}>\n\n          {isInviteSignup &&\n          <div className={`${SignUpStyles.innerDiv} signup-invite`}>\n            <InviteOnlyEmailForm inviteToken={token} companyName={company} />\n          </div>\n          }\n\n          {!isInviteSignup &&\n          <div className={`${SignUpStyles.innerDiv} signup-lead`}>\n            <EmailForm location={location} />\n          </div>\n          }\n\n      </section>\n    </Base>\n  )\n}\n\nexport default SignUpPage","// extracted by mini-css-extract-plugin\nexport var bgColourBlue = \"signup-module--bg-colour--blue--idiGe\";\nexport var bgColourGreen = \"signup-module--bg-colour--green--Fr-i2\";\nexport var bgColourGrey = \"signup-module--bg-colour--grey--aG9Dn\";\nexport var bgColourMenuHightlight = \"signup-module--bg-colour--menuHightlight--rAeTc\";\nexport var bgColourOrange = \"signup-module--bg-colour--orange--Kc9Po\";\nexport var bgColourPink = \"signup-module--bg-colour--pink--HMRjt\";\nexport var bgColourPrimary = \"signup-module--bg-colour--primary--XweUR\";\nexport var bgColourPurple = \"signup-module--bg-colour--purple--dlfvL\";\nexport var bgColourSecondary = \"signup-module--bg-colour--secondary--uEf5D\";\nexport var bgColourTan = \"signup-module--bg-colour--tan--LeiRO\";\nexport var bgColourTertiary = \"signup-module--bg-colour--tertiary--BhDME\";\nexport var bgColourYellow = \"signup-module--bg-colour--yellow--wUoyB\";\nexport var blue = \"signup-module--blue--FbVAi\";\nexport var button = \"signup-module--button--IuuZF\";\nexport var buttonInner = \"signup-module--buttonInner--850Zg\";\nexport var buttonRow = \"signup-module--button-row--3TBc+\";\nexport var disclaimer = \"signup-module--disclaimer--TDcqi\";\nexport var emailForm = \"signup-module--emailForm--4c2HV\";\nexport var errorMessage = \"signup-module--errorMessage--V-upO\";\nexport var fadeIn = \"signup-module--fadeIn--YDy+0\";\nexport var fadeOut = \"signup-module--fadeOut--0Kf2s\";\nexport var forgot = \"signup-module--forgot--6-jjJ\";\nexport var formDiv = \"signup-module--formDiv--Zjmai\";\nexport var hasErrors = \"signup-module--has-errors--Hxset\";\nexport var innerDiv = \"signup-module--innerDiv--8yloP\";\nexport var innerInner = \"signup-module--innerInner--2lEFU\";\nexport var inputCheckbox = \"signup-module--inputCheckbox--nkEdY\";\nexport var inputWrap = \"signup-module--inputWrap--hTrbg\";\nexport var inputWrapCheckbox = \"signup-module--inputWrapCheckbox--2z3Wk\";\nexport var mb16 = \"signup-module--mb-16--vSTXg\";\nexport var noMax = \"signup-module--noMax--hYXHD\";\nexport var open = \"signup-module--open--D4XBd\";\nexport var postErrors = \"signup-module--postErrors--n6NDo\";\nexport var postMessage = \"signup-module--postMessage--pseUa\";\nexport var prevButton = \"signup-module--prevButton--9SzY1\";\nexport var signUp = \"signup-module--signUp--7ZJa8\";\nexport var subText = \"signup-module--subText--DdLu+\";\nexport var tCenter = \"signup-module--t-center--bjfhL\";\nexport var tile = \"signup-module--tile--qtTbk\";\nexport var tileCheckbox = \"signup-module--tileCheckbox--pbgVA\";\nexport var tileIcon = \"signup-module--tileIcon--zJvkv\";\nexport var tileInner = \"signup-module--tileInner--Lm3bs\";\nexport var tileWrapper = \"signup-module--tileWrapper--PSxiR\";\nexport var toggleFields = \"signup-module--toggleFields--SSaMQ\";\nexport var type = \"signup-module--type--mgPlw\";\nexport var w100 = \"signup-module--w-100--KTCq-\";"],"names":["src","useState","status","setStatus","useEffect","script","document","querySelector","getAttribute","createElement","async","setAttribute","body","appendChild","setAttributeFromEvent","event","type","addEventListener","setStateFromEvent","removeEventListener","HubspotFormWrapper","styled","props","className","cssClass","height","ThemeDefault","whiteButton","blackButton","React","blockID","formID","formOptions","formHeight","hsJsReady","useRef","useScript","current","window","hbspt","forms","create","portalId","process","region","formId","target","formReady","style","display","justifyContent","alignItems","marginBottom","Spinner","dark","updateDetails","state","payload","signUpDetails","role","label","symbol","location","isLoading","setIsLoading","useStateMachine","actions","emailFromXero","URL","queryString","search","xero","isXero","complete","isCompleted","code","axios","origin","localStorage","getItem","then","response","userEmail","data","email","firstName","given_name","surname","family_name","fullName","emailField","getHubSpotEmailField","value","dispatchEvent","Event","bubbles","form","hsFormSubmitting","isBrowser","handleHubspotFormEvents","eventName","emailToUse","navigate","SignUpStyles","Emoji","visibility","HubspotForms","locale","translations","en","required","marginTop","textAlign","Link","to","inviteToken","companyName","createAccount","setCreateAccount","getElementById","onClick","isInviteSignup","setIsInviteSignup","token","setToken","company","setCompany","Base","button","buttonInner","buttonRow","disclaimer","emailForm","errorMessage","forgot","formDiv","hasErrors","innerDiv","innerInner","inputCheckbox","inputWrap","inputWrapCheckbox","mb16","noMax","open","postErrors","postMessage","prevButton","signUp","subText","tCenter","tile","tileCheckbox","tileIcon","tileInner","tileWrapper","toggleFields"],"sourceRoot":""}