{"version":3,"file":"components-ui-builder-header-with-wave-d5f65ef803bd06b18cee.js","mappings":"oYAqBAA,EAAAA,EAAQC,UAAUC,EAAAA,GAkBlB,IAAMC,EAAeC,EAAAA,GAAOC,OAAMC,IAAAA,GAAAC,EAAAA,EAAAA,GAAA,oVAUV,SAAAC,GAAK,OAAIA,EAAMC,eAAe,GCjDtD,8UDucA,EA9YuB,SAAHC,GAA+F,IAAzFC,EAAUD,EAAVC,WAAYC,EAAIF,EAAJE,KAAMC,EAAaH,EAAbG,cAAeC,EAAaJ,EAAbI,cAAeC,EAASL,EAATK,UAAWN,EAAeC,EAAfD,gBAGnFO,GAAoCC,EAAAA,EAAAA,WAAS,GAAtCC,EAAUF,EAAA,GAAEG,EAAaH,EAAA,GAChCI,GAAoCH,EAAAA,EAAAA,WAAS,GAAtCI,EAAUD,EAAA,GAAEE,EAAaF,EAAA,GAChCG,GAAmCN,EAAAA,EAAAA,UAAS,IAAzBO,GAAFD,EAAA,GAAcA,EAAA,IAC/BE,GAAmCR,EAAAA,EAAAA,UAAS,IAAzBS,GAAFD,EAAA,GAAcA,EAAA,IACzBE,GAAWC,EAAAA,EAAAA,MACXC,EAAiB,cACnBhB,SAAAA,EAAeiB,YAAWjB,EAAciB,UAAS,WAAcD,IAKnEE,EAAAA,EAAAA,YAAU,WACR,IAAIC,EAEEC,EAAgB,WAChBC,OAAOC,QAAU,GAAKD,OAAOC,SAAWH,EAC1CV,GAAc,GAEdA,GAAc,GAEhBU,EAAaE,OAAOC,OACtB,EAGA,OADAD,OAAOE,iBAAiB,SAAUH,GAC3B,WACLC,OAAOG,oBAAoB,SAAUJ,EACvC,CACF,GAAG,KAEHF,EAAAA,EAAAA,YAAU,WAAO,IAADO,EACRC,EAAe,eAAAC,GAAAC,EAAAA,EAAAA,GAAAC,IAAAA,MAAG,SAAAC,IAAA,IAAAC,EAAA,OAAAF,IAAAA,MAAA,SAAAG,GAAA,cAAAA,EAAAC,KAAAD,EAAAE,MAAA,cAAAF,EAAAE,KAAA,GACCC,EAAAA,EAAAA,MAAc,OAA/BJ,EAAQC,EAAAI,KAEZ9B,IADEyB,GAIH,wBAAAC,EAAAK,OAAA,GAAAP,EAAA,KACF,kBAPoB,OAAAH,EAAAW,MAAA,KAAAC,UAAA,KAWrB,OAF8B,QAA9Bd,EAAAe,SAASC,cAAc,eAAO,IAAAhB,GAA9BA,EAAgCF,iBAAiB,YAAaG,GAEvD,WAAO,IAADgB,EACmB,QAA9BA,EAAAF,SAASC,cAAc,eAAO,IAAAC,GAA9BA,EAAgClB,oBAAoB,YAAaE,EACnE,CACF,GAAG,KAEHR,EAAAA,EAAAA,YAAU,WACJb,IACGP,EAAW6C,MAAK,SAAAC,GAAG,MAAoB,YAAhBA,EAAIC,OAAqB,KACnD/C,EAAWgD,KAAK,CAAED,QAAS,UAAWE,KAAM,qBAGlD,GAAG,CAACjD,EAAYO,IAEhB,IAAM2C,EAAa,eAAAC,GAAArB,EAAAA,EAAAA,GAAAC,IAAAA,MAAG,SAAAqB,IAAA,OAAArB,IAAAA,MAAA,SAAAsB,GAAA,cAAAA,EAAAlB,KAAAkB,EAAAjB,MAAA,OAEsB,OAFtBiB,EAAAlB,KAAA,EAElBnB,GAASsC,EAAAA,EAAAA,KAAgB,EAAO,GAAI,KAAID,EAAAjB,KAAA,EAClCmB,EAAAA,EAAKC,UAAS,OACpBhD,GAAc,IACdiD,EAAAA,EAAAA,MACAJ,EAAAjB,KAAA,gBAAAiB,EAAAlB,KAAA,EAAAkB,EAAAK,GAAAL,EAAA,kCAAAA,EAAAd,OAAA,GAAAa,EAAA,kBAIH,kBAVkB,OAAAD,EAAAX,MAAA,KAAAC,UAAA,KAYbkB,EAA0B,SAACC,GAC/B,IAAMC,EAAWC,KAAKC,KAAK/D,EAAWgE,OAAS,GAI/C,OAH4B,SAATJ,EAAkB5D,EAAWiE,MAAM,EAAGJ,GAAY7D,EAAWiE,MAAMJ,EAAU7D,EAAWgE,SAGzFE,KAAI,SAACC,EAASC,GAC9B,OACEC,EAAAA,cAACC,EAAAA,EAAS,CACRC,IAAQX,EAAI,IAAIQ,EAChBI,KAAML,EAAQlB,KACdwB,UAAU,oCACVC,MAAO,CAAEC,MAAOvE,IAEf+D,EAAQpB,QAGf,GACF,EAEM6B,EAAejB,EAAwB,QACvCkB,EAAgBlB,EAAwB,SAIxCmB,EAAgB,WAAO,IAADC,EAAAC,EACkB,QAA5CD,EAAArC,SAASC,cAAc,6BAAqB,IAAAoC,GAA5CA,EAA8CE,SACP,QAAvCD,EAAAtC,SAASC,cAAc,wBAAgB,IAAAqC,GAAvCA,EAAyCC,QAC3C,EAyBA,OAvBA7D,EAAAA,EAAAA,YAAU,WAGR,OAFAsB,SAASjB,iBAAiB,SAAUqD,GAE7B,WACLpC,SAAShB,oBAAoB,SAAUoD,EACzC,CACF,GAAG,KAEH1D,EAAAA,EAAAA,YAAU,WACRG,OAAO2D,eAAiB,WACtB3D,OAAO4D,SAAS,EAAG,EACrB,CACF,GAAG,KAEH/D,EAAAA,EAAAA,YAAU,WACR,IAAMgE,EAAiB,eAAAC,GAAAvD,EAAAA,EAAAA,GAAAC,IAAAA,MAAG,SAAAuD,IAAA,OAAAvD,IAAAA,MAAA,SAAAwD,GAAA,cAAAA,EAAApD,KAAAoD,EAAAnD,MAAA,OACZ,OADYmD,EAAA7B,GACxB7C,EAAY0E,EAAAnD,KAAA,GAAOoD,EAAAA,EAAAA,MAAc,OACrB,OADqBD,EAAAE,GAAAF,EAAAjD,MAAA,EAAAiD,EAAA7B,IAAA6B,EAAAE,IAAAF,EAAAG,GACjC3E,EAAYwE,EAAAnD,KAAA,GAAOC,EAAAA,EAAAA,MAAc,OAAAkD,EAAAI,GAAAJ,EAAAjD,MAAA,EAAAiD,EAAAG,IAAAH,EAAAI,IAAA,yBAAAJ,EAAAhD,OAAA,GAAA+C,EAAA,KAClC,kBAHsB,OAAAD,EAAA7C,MAAA,KAAAC,UAAA,KAKvB2C,GACF,GAAG,IAGDf,EAAAA,cAAAA,EAAAA,SAAA,KACEA,EAAAA,cAAA,OAAKI,UAAW,kBACdJ,EAAAA,cAACuB,EAAAA,EAAU,CAACC,GAAG,MAAMpB,UAAU,oCAE5B,SAAAqB,GAAA,IAAGC,EAAID,EAAJC,KAAI,OACN1B,EAAAA,cAAA,OACEI,UAAU,gBACVC,MAAO,CACLsB,WAAY,WACZC,IAAKF,GAAQrF,EAAa,MAAQ,SAClCwF,OAAQH,GAAQrF,EAAa,OAAS,MACtCyF,UAAW,kBACXC,gBAAgB,0VAChBC,mBAAoB,gBACpBC,eAAgB,UAGlBjC,EAAAA,cAACkC,EAAAA,EAAM,CACLC,eAAgB,CACdC,MAAO,kBAcXpC,EAAAA,cAAA,OACEI,UAAU,gDACVC,MAAO,CAAE5E,gBAAiBA,EAAiB6E,MAAOvE,IAElDiE,EAAAA,cAAA,OAAKI,UAAU,mDACbJ,EAAAA,cAAA,OAAKI,UAAU,qDAEbJ,EAAAA,cAACuB,EAAAA,EAAWc,OAAM,CAACjC,UAAU,+KAC3BJ,EAAAA,cAAA,QAAMI,UAAU,WAAU,kBAC1BJ,EAAAA,cAACsC,EAAAA,EAAe,CACdC,KAAMb,EAAOc,EAAAA,IAAMC,EAAAA,IACnBpC,MAAO,CAAEC,MAAOvE,GAChBqE,UAAU,gBACV,cAAY,WAIlBJ,EAAAA,cAAA,OAAKI,UAAU,4EACbJ,EAAAA,cAAA,OAAKI,UAAU,mCACbJ,EAAAA,cAACC,EAAAA,EAAS,CAACE,KAAK,KACdH,EAAAA,cAAA,OAAKK,MAAO,CAAEqC,MAAO,QAASC,SAAU,QAAUC,IAAKhH,EAAMiH,IAAI,SAIrE3G,GACA8D,EAAAA,cAAAA,EAAAA,SAAA,KACEA,EAAAA,cAACC,EAAAA,EAAS,CACR,cAAY,SACZE,KAAI,WAAatD,EAAc,IAC/BuD,UAAS,uKACTC,MAAO,CAAE5E,gBAAiB,mBAAoB6E,MAAO,sBACrDwC,QAAS,gBACoB,IAAhB5F,OAAO6F,MAChB7F,OAAO6F,KAAK,QAAS,mBAAoB,CACvCC,KAAM,YAGZ,GACD,eAGDhD,EAAAA,cAACC,EAAAA,EAAS,CACR,cAAY,SACZE,KAAI,WAAatD,EAAc,IAC/BuD,UAAS,uKACTC,MAAO,CAAE5E,gBAAiB,mBAAoB6E,MAAO,sBACrDwC,QAAS,gBACoB,IAAhB5F,OAAO6F,MAChB7F,OAAO6F,KAAK,QAAS,mBAAoB,CACvCC,KAAM,YAGZ,GACD,kBAQThD,EAAAA,cAACuB,EAAAA,EAAW0B,MAAK,CAAC7C,UAAU,aAC1BJ,EAAAA,cAAA,OAAKI,UAAU,2BAA2BC,MAAO,CAAE5E,gBAAAA,IAChDE,EAAWkE,KAAI,SAAAqD,GAAI,OAClBlD,EAAAA,cAACuB,EAAAA,EAAWc,OAAM,CAChBnC,IAAKgD,EAAKxE,QACV8C,GAAG,IACHrB,KAAM+C,EAAKtE,KACXwB,UAAU,6FACVC,MAAO,CAAEC,MAAOvE,IAEfmH,EAAKxE,QACY,IAEtBsB,EAAAA,cAAA,OAAKI,UAAU,kBACdlE,EACC8D,EAAAA,cAAA,OAAKI,UAAU,wCACbJ,EAAAA,cAACC,EAAAA,EAAS,CACRE,KAAM,WACNC,UAAS,4IACTC,MAAO,CAAE5E,gBAAiB,iBAAkB6E,MAAO,uBACpD,WAGDN,EAAAA,cAAA,UACEmD,KAAK,SACL/C,UAAU,uIACVC,MAAO,CAAE5E,gBAAiB,mBAAoB6E,MAAO,kBACrDwC,QAASjE,GACV,aAKHmB,EAAAA,cAAA,OAAKI,UAAU,wCACbJ,EAAAA,cAACoD,EAAAA,EAAU,CACTC,YAAaxH,aAAa,EAAbA,EAAewH,YAC5BvG,UAAWjB,aAAa,EAAbA,EAAeiB,UAC1BwG,WAAYzH,aAAa,EAAbA,EAAeyH,WAC3BC,gBAAiB1H,aAAa,EAAbA,EAAe0H,gBAChCC,mBAAoB3H,aAAa,EAAbA,EAAe2H,mBACnCC,QAAQ,EACRC,UAAS,gJACTZ,QAAS,gBACoB,IAAhB5F,OAAO6F,MAChB7F,OAAO6F,KAAK,QAAS,mBAAoB,CACvCC,KAAM,YAGZ,IAEFhD,EAAAA,cAACoD,EAAAA,EAAU,CACTC,YAAavH,aAAa,EAAbA,EAAeuH,YAC5BvG,UAAWhB,aAAa,EAAbA,EAAegB,UAC1BwG,WAAYxH,aAAa,EAAbA,EAAewH,WAC3BC,gBAAiBzH,aAAa,EAAbA,EAAeyH,gBAChCC,mBAAoB1H,aAAa,EAAbA,EAAe0H,mBACnCC,QAAQ,EACRC,UAAS,gJAMf,IAGV1D,EAAAA,cAAC7E,EAAY,CACXM,gBAAiBA,EACjB2E,UAAS,8CACTC,MAAO,CACLC,MAAOvE,EACP4F,WAAY,WACZC,IAAKvF,EAAa,MAAQ,SAC1BwF,OAAQxF,EAAa,OAAS,MAC9ByF,UAAW,kBACX6B,OAAQ,IAGV3D,EAAAA,cAAA,OAAKI,UAAU,kBAAkB,aAAW,OAC1CJ,EAAAA,cAAA,OAAKI,UAAU,sCACbJ,EAAAA,cAAA,WACEA,EAAAA,cAACC,EAAAA,EAAS,CAACE,KAAK,KACdH,EAAAA,cAAA,QAAMI,UAAU,WAAU,iBAC1BJ,EAAAA,cAAA,OAAKK,MAAO,CAAEqC,MAAO,QAASC,SAAU,QAAUC,IAAKhH,EAAMiH,IAAI,OAGpE3G,EACC8D,EAAAA,cAAA,OAAKI,UAAU,2CACbJ,EAAAA,cAAA,OAAKI,UAAU,0CACbJ,EAAAA,cAAA,OAAKI,UAAU,wCAAwCG,GACvDP,EAAAA,cAAA,OAAKI,UAAU,wCAAwCI,IAGzDR,EAAAA,cAAA,OAAKI,UAAU,sCACbJ,EAAAA,cAAA,OACEI,UAAU,mHACV0C,QAAS,gBACkB,IAAd5F,OAAO0G,IAChB1G,OAAO0G,GAAG,YAAa,QACvB1G,OAAO0G,GAAG,YAAa,SAEvB1G,OAAO2G,YAAW,WAChB3G,OAAO0G,GAAG,YAAa,QACvB1G,OAAO0G,GAAG,YAAa,OACzB,GAAG,IAEP,GAEA5D,EAAAA,cAAC8D,EAAAA,EAAW,CACVpB,MAAO,GACPtC,UAAU,qBACVwC,IAAI,2BACJC,IAAI,eAAckB,YAAAC,EAAA,UAGtBhE,EAAAA,cAACiE,EAAAA,EAAU,CAACC,QAAShI,EAAY2C,cAAeA,MAIpDmB,EAAAA,cAAA,OAAKI,UAAU,wCACbJ,EAAAA,cAAA,OAAKI,UAAU,0BACbJ,EAAAA,cAAA,OAAKI,UAAS,oDAAuDG,GACrEP,EAAAA,cAAA,OAAKI,UAAS,sDAAyDI,IAEzER,EAAAA,cAAA,OACEI,UAAS,mHACT0C,QAAS,gBACkB,IAAd5F,OAAO0G,IAChB1G,OAAO0G,GAAG,YAAa,QACvB1G,OAAO0G,GAAG,YAAa,SAEvB1G,OAAO2G,YAAW,WAChB3G,OAAO0G,GAAG,YAAa,QACvB1G,OAAO0G,GAAG,YAAa,OACzB,GAAG,IAEP,GAEA5D,EAAAA,cAAC8D,EAAAA,EAAW,CACVpB,MAAO,GACPtC,UAAU,qBACVwC,IAAI,2BACJC,IAAI,eAAckB,YAAAC,EAAA,UAGtBhE,EAAAA,cAAA,OAAKI,UAAU,sBACbJ,EAAAA,cAACoD,EAAAA,EAAU,CACTC,YAAaxH,aAAa,EAAbA,EAAewH,YAC5BvG,UAAWjB,aAAa,EAAbA,EAAeiB,UAC1BwG,WAAYzH,aAAa,EAAbA,EAAeyH,WAC3BC,gBAAiB1H,aAAa,EAAbA,EAAe0H,gBAChCC,mBAAoB3H,aAAa,EAAbA,EAAe2H,mBACnCC,QAAQ,EACRC,UAAS,gJACTZ,QAAS,gBACoB,IAAhB5F,OAAO6F,MAChB7F,OAAO6F,KAAK,QAAS,mBAAoB,CACvCC,KAAM,YAGZ,IAEFhD,EAAAA,cAACoD,EAAAA,EAAU,CACTC,YAAa,cACbvG,UAAWhB,aAAa,EAAbA,EAAegB,UAC1BwG,WAAYxH,aAAa,EAAbA,EAAewH,WAC3BC,gBAAiBzH,aAAa,EAAbA,EAAeyH,gBAChCC,mBAAoB1H,aAAa,EAAbA,EAAe0H,mBACnCC,QAAQ,EACRC,UAAS,8IAW/B,C","sources":["webpack://www-differentdog-com/./src/components/ui-builder/header-with-wave/index.tsx","webpack://www-differentdog-com/./src/images/navbar-wave-2.svg"],"sourcesContent":["import { faBars, faX } from '@fortawesome/free-solid-svg-icons'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport { Disclosure } from '@headlessui/react'\nimport { Amplify, Auth } from 'aws-amplify'\nimport { getCognitoId, getVisitorId, removeCognitoId } from 'components/util/UserId'\nimport { StaticImage } from 'gatsby-plugin-image'\nimport React, { useEffect, useState } from 'react' // useContext\nimport { useDispatch } from 'react-redux'\nimport { updateSpoofMode } from 'state/actions/uiAction'\nimport styled from 'styled-components'\nimport LinkRoute from '../../ui/link/Link'\nimport NavbarMenu from '../../ui/navbar/NavbarMenu'\n// import { Builder } from '@builder.io/react'\nimport LinkButton, { LinkButtonProp } from '../common/button'\n\nimport mobileHeaderWave from 'images/navbar-wave-2-mobile.svg'\nimport desktopHeaderWave from 'images/navbar-wave-2.svg'\n// import { BuilderCtx } from '../layouts/PageLayout'\n\n//@ts-ignore\nimport awsconfig from '../../../aws-exports'\nAmplify.configure(awsconfig)\n\nimport './index.css'\nimport { Helmet } from 'react-helmet'\ninterface Navigation {\n  navName: string\n  link: string\n}\n\ninterface Props {\n  backgroundColor: string\n  fontColor: string\n  buttonOneProp: LinkButtonProp\n  buttonTwoProp: LinkButtonProp\n  logo: any\n  navigation: Navigation[]\n}\n\nconst StyledHeader = styled.header`\n  &::before {\n    position: absolute;\n    content: '';\n    z-index: -1;\n    left: 0;\n    right: 0;\n    top: 0;\n    bottom: 0;\n    width: 100%;\n    background-color: ${props => props.backgroundColor};\n    -webkit-mask-image: url(${desktopHeaderWave});\n    -webkit-mask-position: center bottom;\n    -webkit-mask-size: 100%;\n    -webkit-mask-repeat: no-repeat;\n  }\n`\n\nconst HeaderWithWave = ({ navigation, logo, buttonOneProp, buttonTwoProp, fontColor, backgroundColor }: Props) => {\n  console.log('Header::Navigations', navigation)\n  console.log('Header::ButtonProps', buttonOneProp, buttonTwoProp)\n  const [isSignedIn, setIsSignedIn] = useState(false)\n  const [showNavBar, setShowNavBar] = useState(true)\n  const [_visitorId, setVisitorId] = useState('')\n  const [_cognitoId, setCognitoId] = useState('')\n  const dispatch = useDispatch()\n  const dogDetailsPage = 'dog-details'\n  if (buttonOneProp?.buttonUrl) buttonOneProp.buttonUrl = `/signup/${dogDetailsPage}`\n\n  // const BuilderComponentsStore = useContext(BuilderCtx)\n  // const { builderContext, setBuilderContext }: any = BuilderComponentsStore\n\n  useEffect(() => {\n    let lastScroll: number\n\n    const controlNavbar = () => {\n      if (window.scrollY > 0 && window.scrollY >= lastScroll) {\n        setShowNavBar(false)\n      } else {\n        setShowNavBar(true)\n      }\n      lastScroll = window.scrollY\n    }\n\n    window.addEventListener('scroll', controlNavbar)\n    return () => {\n      window.removeEventListener('scroll', controlNavbar)\n    }\n  }, [])\n\n  useEffect(() => {\n    const checkIfSignedIn = async () => {\n      const username = await getCognitoId()\n      if (username) {\n        setIsSignedIn(true)\n      } else {\n        setIsSignedIn(false)\n      }\n    }\n\n    document.querySelector('body')?.addEventListener('mouseover', checkIfSignedIn)\n\n    return () => {\n      document.querySelector('body')?.removeEventListener('mouseover', checkIfSignedIn)\n    }\n  }, [])\n\n  useEffect(() => {\n    if (isSignedIn) {\n      if (!navigation.some(nav => nav.navName === 'Rewards')) {\n        navigation.push({ navName: 'Rewards', link: '/account/rewards' })\n      }\n    }\n  }, [navigation, isSignedIn])\n\n  const handleSignOut = async () => {\n    try {\n      dispatch(updateSpoofMode(false, '', ''))\n      await Auth.signOut()\n      setIsSignedIn(false)\n      removeCognitoId()\n      // setBuilderContext({'isLoggedIn':false})\n    } catch (err: any) {\n      console.log(err, 'error')\n    }\n  }\n\n  const renderDesktopHeaderNavs = (side: string) => {\n    const midPoint = Math.ceil(navigation.length / 2)\n    const slicedNavs = side === 'left' ? navigation.slice(0, midPoint) : navigation.slice(midPoint, navigation.length)\n    console.log(`side ${side}, mid point - ${midPoint}`, slicedNavs)\n\n    return slicedNavs.map((navItem, i) => {\n      return (\n        <LinkRoute\n          key={`${side}-${i}`}\n          href={navItem.link}\n          className=\"hover-bg-color:hover mx-2 text-sm\"\n          style={{ color: fontColor }}\n        >\n          {navItem.navName}\n        </LinkRoute>\n      )\n    })\n  }\n\n  const leftSideNavs = renderDesktopHeaderNavs('left')\n  const rightSideNavs = renderDesktopHeaderNavs('right')\n  // let maxNavNumberPerSide = (leftSideNavs.length > rightSideNavs.length) ? leftSideNavs.length: rightSideNavs.length;\n  // maxNavNumberPerSide = maxNavNumberPerSide === 1 ? 2: maxNavNumberPerSide;\n\n  const scrollHandler = () => {\n    document.querySelector('#cookiebanner-mask')?.remove()\n    document.querySelector('.cookiebanner')?.remove()\n  }\n\n  useEffect(() => {\n    document.addEventListener('scroll', scrollHandler)\n\n    return () => {\n      document.removeEventListener('scroll', scrollHandler)\n    }\n  }, [])\n\n  useEffect(() => {\n    window.onbeforeunload = () => {\n      window.scrollTo(0, 0)\n    }\n  }, [])\n\n  useEffect(() => {\n    const callIdsForClarity = async () => {\n      setVisitorId(await getVisitorId())\n      setCognitoId(await getCognitoId())\n    }\n\n    callIdsForClarity()\n  }, [])\n\n  return (\n    <>\n      <div className={'header-wrapper'}>\n        <Disclosure as=\"nav\" className=\"relative min-h-[68px] md:hidden\">\n          {/* header-fixed */}\n          {({ open }) => (\n            <div\n              className=\"relative z-30\"\n              style={{\n                transition: 'top 0.5s',\n                top: open || showNavBar ? '0px' : '-144px',\n                height: open || showNavBar ? 'auto' : '0px',\n                transform: 'translateZ(0.1)',\n                WebkitMaskImage: `url(${mobileHeaderWave})`,\n                WebkitMaskPosition: 'center bottom',\n                WebkitMaskSize: 'cover'\n              }}\n            >\n              <Helmet\n                bodyAttributes={{\n                  class: 'content-page'\n                }}\n              >\n                {/* {process.env.GATSBY_CLARITY_KEY && (\n                  <script type=\"text/javascript\">{`\n                  (function(c,l,a,r,i,t,y){\n                      c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};\n                      t=l.createElement(r);t.async=1;t.src=\"https://www.clarity.ms/tag/\"+i;\n                      y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);\n                  })(window, document, \"clarity\", \"script\", \"${process.env.GATSBY_CLARITY_KEY}\");\n                  ${(cognitoId || visitorId) && `window.clarity(\"identify\", \"${cognitoId}\", \"${visitorId}\");`}\n                `}</script>\n                )} */}\n              </Helmet>\n              <div\n                className=\"sticky mx-auto px-2 pb-4 pt-2 md:px-6 lg:px-8\"\n                style={{ backgroundColor: backgroundColor, color: fontColor }}\n              >\n                <div className=\"relative flex h-11 items-center justify-between\">\n                  <div className=\"inset-y-0 left-0 mr-2 flex items-center md:hidden\">\n                    {/* Mobile menu button*/}\n                    <Disclosure.Button className=\"hover-bg-color inline-flex items-center justify-center rounded-md p-4 py-2 text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white\">\n                      <span className=\"sr-only\">Open main menu</span>\n                      <FontAwesomeIcon\n                        icon={open ? faX : faBars}\n                        style={{ color: fontColor }}\n                        className=\"block h-6 w-6\"\n                        aria-hidden=\"true\"\n                      />\n                    </Disclosure.Button>\n                  </div>\n                  <div className=\"flex flex-1 items-center justify-start sm:items-stretch sm:justify-start\">\n                    <div className=\"flex-shrink-1 flex items-center\">\n                      <LinkRoute href=\"/\">\n                        <img style={{ width: '200px', maxWidth: '100%' }} src={logo} alt=\"\" />\n                      </LinkRoute>\n                    </div>\n                  </div>\n                  {!isSignedIn && (\n                    <>\n                      <LinkRoute\n                        date-testid=\"signup\"\n                        href={`/signup/${dogDetailsPage}/`}\n                        className={`position-create-plan-btn ml-2 inline-block rounded-full border border-transparent bg-white py-2 px-2 font-medium text-indigo-600 shadow hover:bg-indigo-50 md:hidden`}\n                        style={{ backgroundColor: 'rgb(0, 102, 133)', color: 'rgb(255, 255, 255)' }}\n                        onClick={() => {\n                          if (typeof window.gtag !== 'undefined') {\n                            window.gtag('event', 'cta_button_click', {\n                              page: 'homepage'\n                            })\n                          }\n                        }}\n                      >\n                        Get Started\n                      </LinkRoute>\n                      <LinkRoute\n                        date-testid=\"signup\"\n                        href={`/signup/${dogDetailsPage}/`}\n                        className={`position-create-plan-btn ml-2 md:inline-block rounded-full border border-transparent bg-white py-2 px-2 font-medium text-indigo-600 shadow hover:bg-indigo-50 hidden`}\n                        style={{ backgroundColor: 'rgb(0, 102, 133)', color: 'rgb(255, 255, 255)' }}\n                        onClick={() => {\n                          if (typeof window.gtag !== 'undefined') {\n                            window.gtag('event', 'cta_button_click', {\n                              page: 'homepage'\n                            })\n                          }\n                        }}\n                      >\n                        Create Plan\n                      </LinkRoute>\n                    </>\n                  )}\n                </div>\n              </div>\n\n              <Disclosure.Panel className=\"md:hidden\">\n                <div className=\"space-y-1 px-2 pt-2 pb-3\" style={{ backgroundColor }}>\n                  {navigation.map(item => (\n                    <Disclosure.Button\n                      key={item.navName}\n                      as=\"a\"\n                      href={item.link}\n                      className=\"hover-bg-color block rounded-md px-3 py-2 text-base font-medium text-gray-300 no-underline\"\n                      style={{ color: fontColor }}\n                    >\n                      {item.navName}\n                    </Disclosure.Button>\n                  ))}\n                  <div className=\"header-spacer\" />\n                  {isSignedIn ? (\n                    <div className=\"flex w-full items-center justify-end\">\n                      <LinkRoute\n                        href={'/account'}\n                        className={`mr-2 inline-block rounded-full border border-transparent bg-white py-2 px-2 text-sm font-medium text-indigo-600 shadow hover:bg-indigo-50`}\n                        style={{ backgroundColor: 'rgb(0, 67, 85)', color: 'rgb(255, 255, 255)' }}\n                      >\n                        Account\n                      </LinkRoute>\n                      <button\n                        type=\"button\"\n                        className=\"inline-block rounded-full border border-transparent bg-white py-2 px-2 text-sm font-medium text-indigo-600 shadow hover:bg-indigo-50\"\n                        style={{ backgroundColor: 'rgb(241,140,131)', color: 'rgb(0, 67, 85)' }}\n                        onClick={handleSignOut}\n                      >\n                        Sign out\n                      </button>\n                    </div>\n                  ) : (\n                    <div className=\"flex w-full items-center justify-end\">\n                      <LinkButton\n                        buttonColor={buttonOneProp?.buttonColor}\n                        buttonUrl={buttonOneProp?.buttonUrl}\n                        buttonText={buttonOneProp?.buttonText}\n                        buttonTextColor={buttonOneProp?.buttonTextColor}\n                        loggedInButtonText={buttonOneProp?.loggedInButtonText}\n                        isLink={false}\n                        classList={`inline-block text-center bg-white py-2 px-2 mr-2 border border-transparent rounded-full font-medium text-indigo-600 hover:bg-indigo-50 shadow`}\n                        onClick={() => {\n                          if (typeof window.gtag !== 'undefined') {\n                            window.gtag('event', 'cta_button_click', {\n                              page: 'homepage'\n                            })\n                          }\n                        }}\n                      />\n                      <LinkButton\n                        buttonColor={buttonTwoProp?.buttonColor}\n                        buttonUrl={buttonTwoProp?.buttonUrl}\n                        buttonText={buttonTwoProp?.buttonText}\n                        buttonTextColor={buttonTwoProp?.buttonTextColor}\n                        loggedInButtonText={buttonTwoProp?.loggedInButtonText}\n                        isLink={false}\n                        classList={`inline-block text-center bg-white py-2 px-2 border border-transparent rounded-full font-medium text-indigo-600 hover:bg-indigo-50 shadow`}\n                      />\n                    </div>\n                  )}\n                </div>\n              </Disclosure.Panel>\n            </div>\n          )}\n        </Disclosure>\n        <StyledHeader\n          backgroundColor={backgroundColor}\n          className={`relative mt-0 hidden min-h-[115px] md:block`}\n          style={{\n            color: fontColor,\n            transition: 'top 0.5s',\n            top: showNavBar ? '0px' : '-164px',\n            height: showNavBar ? 'auto' : '0px',\n            transform: 'translateZ(0.1)',\n            zIndex: 3\n          }}\n        >\n          <nav className=\"max-w-7 mx-auto\" aria-label=\"Top\">\n            <div className=\"flex w-full items-center py-6 px-6\">\n              <div>\n                <LinkRoute href=\"/\">\n                  <span className=\"sr-only\">Different Dog</span>\n                  <img style={{ width: '200px', maxWidth: '100%' }} src={logo} alt=\"\" />\n                </LinkRoute>\n              </div>\n              {isSignedIn ? (\n                <div className=\"flex w-full items-center justify-center\">\n                  <div className=\"flex items-center justify-center mr-28\">\n                    <div className=\"flex items-center font-serif text-sm\">{leftSideNavs}</div>\n                    <div className=\"flex items-center font-serif text-sm\">{rightSideNavs}</div>\n                  </div>\n\n                  <div className=\"absolute right-0 flex items-center\">\n                    <div\n                      className=\"ml-2 mr-2 hidden flex-shrink-0 cursor-pointer rounded-full p-4 text-sm hover:bg-[white] focus:bg-[white] sm:flex\"\n                      onClick={() => {\n                        if (typeof window.zE !== 'undefined') {\n                          window.zE('webWidget', 'show')\n                          window.zE('webWidget', 'open')\n                        } else {\n                          window.setTimeout(() => {\n                            window.zE('webWidget', 'show')\n                            window.zE('webWidget', 'open')\n                          }, 1000)\n                        }\n                      }}\n                    >\n                      <StaticImage\n                        width={35}\n                        className=\"flex flex-shrink-0\"\n                        src=\"../../../images/chat.png\"\n                        alt=\"Chat with us\"\n                      />\n                    </div>\n                    <NavbarMenu isLogin={isSignedIn} handleSignOut={handleSignOut} />\n                  </div>\n                </div>\n              ) : (\n                <div className=\"flex w-full items-center justify-end\">\n                  <div className=\"flex w-2/3 justify-end\">\n                    <div className={`flex items-center justify-end font-serif text-sm`}>{leftSideNavs}</div>\n                    <div className={`flex items-center justify-start font-serif text-sm`}>{rightSideNavs}</div>\n                  </div>\n                  <div\n                    className={`ml-2 mr-2 hidden flex-shrink-0 cursor-pointer rounded-full p-4 text-sm hover:bg-[white] focus:bg-[white] sm:flex`}\n                    onClick={() => {\n                      if (typeof window.zE !== 'undefined') {\n                        window.zE('webWidget', 'show')\n                        window.zE('webWidget', 'open')\n                      } else {\n                        window.setTimeout(() => {\n                          window.zE('webWidget', 'show')\n                          window.zE('webWidget', 'open')\n                        }, 1000)\n                      }\n                    }}\n                  >\n                    <StaticImage\n                      width={35}\n                      className=\"flex flex-shrink-0\"\n                      src=\"../../../images/chat.png\"\n                      alt=\"Chat with us\"\n                    />\n                  </div>\n                  <div className=\"flex flex-shrink-0\">\n                    <LinkButton\n                      buttonColor={buttonOneProp?.buttonColor}\n                      buttonUrl={buttonOneProp?.buttonUrl}\n                      buttonText={buttonOneProp?.buttonText}\n                      buttonTextColor={buttonOneProp?.buttonTextColor}\n                      loggedInButtonText={buttonOneProp?.loggedInButtonText}\n                      isLink={false}\n                      classList={`inline-block text-center mr-4 bg-white py-2 px-2 border border-transparent rounded-full font-medium text-indigo-600 hover:bg-indigo-50 shadow`}\n                      onClick={() => {\n                        if (typeof window.gtag !== 'undefined') {\n                          window.gtag('event', 'cta_button_click', {\n                            page: 'homepage'\n                          })\n                        }\n                      }}\n                    />\n                    <LinkButton\n                      buttonColor={'transparent'}\n                      buttonUrl={buttonTwoProp?.buttonUrl}\n                      buttonText={buttonTwoProp?.buttonText}\n                      buttonTextColor={buttonTwoProp?.buttonTextColor}\n                      loggedInButtonText={buttonTwoProp?.loggedInButtonText}\n                      isLink={false}\n                      classList={`inline-block text-center bg-white py-2 px-2 border-2 border-base rounded-full font-medium text-indigo-600 hover:bg-indigo-50 shadow`}\n                    />\n                  </div>\n                </div>\n              )}\n            </div>\n          </nav>\n        </StyledHeader>\n      </div>\n    </>\n  )\n}\n\nexport default HeaderWithWave\n","export default \"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQ0MCIgaGVpZ2h0PSIyNjciIHZpZXdCb3g9IjAgMCAxNDQwIDI2NyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEuNDEyNGUtMDcgMEwxNDQwIDBMMTQ0MCAyNTQuMzY2Qzc3NCAyODkuMTQ4IDY4MCAyMzkuNDU5IDMuNTQ0MjZlLTA3IDI1NC4zNjZMMS40MTI0ZS0wNyAwWiIgZmlsbD0iI0Y2RTlEQiIvPgo8L3N2Zz4K\""],"names":["Amplify","configure","awsconfig","StyledHeader","styled","header","_templateObject","_taggedTemplateLiteralLoose","props","backgroundColor","_ref","navigation","logo","buttonOneProp","buttonTwoProp","fontColor","_useState","useState","isSignedIn","setIsSignedIn","_useState2","showNavBar","setShowNavBar","_useState3","setVisitorId","_useState4","setCognitoId","dispatch","useDispatch","dogDetailsPage","buttonUrl","useEffect","lastScroll","controlNavbar","window","scrollY","addEventListener","removeEventListener","_document$querySelect","checkIfSignedIn","_ref2","_asyncToGenerator","_regeneratorRuntime","_callee","username","_context","prev","next","getCognitoId","sent","stop","apply","arguments","document","querySelector","_document$querySelect2","some","nav","navName","push","link","handleSignOut","_ref3","_callee2","_context2","updateSpoofMode","Auth","signOut","removeCognitoId","t0","renderDesktopHeaderNavs","side","midPoint","Math","ceil","length","slice","map","navItem","i","React","LinkRoute","key","href","className","style","color","leftSideNavs","rightSideNavs","scrollHandler","_document$querySelect3","_document$querySelect4","remove","onbeforeunload","scrollTo","callIdsForClarity","_ref4","_callee3","_context3","getVisitorId","t1","t2","t3","Disclosure","as","_ref5","open","transition","top","height","transform","WebkitMaskImage","WebkitMaskPosition","WebkitMaskSize","Helmet","bodyAttributes","class","Button","FontAwesomeIcon","icon","faX","faBars","width","maxWidth","src","alt","onClick","gtag","page","Panel","item","type","LinkButton","buttonColor","buttonText","buttonTextColor","loggedInButtonText","isLink","classList","zIndex","zE","setTimeout","StaticImage","__imageData","require","NavbarMenu","isLogin"],"sourceRoot":""}