{"version":3,"sources":["webpack:///./src/components/core/faqs-tags/index.js","webpack:///./src/components/atomic-design/atoms/expert-page-header/styles.js","webpack:///./src/components/atomic-design/atoms/expert-page-header/index.js","webpack:///./node_modules/use-reading-time/dist/index.es.js","webpack:///./src/styles/pages/expert-guides-styles.js","webpack:///./src/components/atomic-design/atoms/chevronButtonIcon/styles.js","webpack:///./src/components/atomic-design/atoms/chevronButtonIcon/index.js","webpack:///./src/components/atomic-design/organisms/guide-sidebar/sidebar-menu/styles.js","webpack:///./src/components/atomic-design/organisms/guide-sidebar/sidebar-menu/sidebar-item/styles.js","webpack:///./src/components/atomic-design/organisms/guide-sidebar/sidebar-menu/sidebar-item/index.js","webpack:///./src/components/atomic-design/organisms/guide-sidebar/sidebar-menu/index.js","webpack:///./src/components/atomic-design/organisms/guide-sidebar/styles.js","webpack:///./src/components/atomic-design/organisms/guide-sidebar/index.js","webpack:///./src/templates/expert-guides.js","webpack:///./src/components/atomic-design/organisms/faq-section/styles.js","webpack:///./src/components/atomic-design/organisms/faq-section/index.js"],"names":["FaqsTag","props","faqList","list","faqScript","mainEntity","map","item","name","title","acceptedAnswer","text","ReactDOMServer","renderToString","documentToReactComponents","description","json","type","JSON","stringify","ContainerPageHeader","styled","div","theme","newTheme","spacing","breakpoints","tablet","mobile","ImgContainer","tabletLandscape","desktop","ContainerTitle","PageHeaderTitle","h1","font","title1","size","lineHeight","weight","regular","color","white","title3","PageHeaderDescription","p","text1","PageHeaderReadingTime","secondary","ExpertPageHeader","subtitle","readingTime","backgroundImage","alt","fromContentful","contentful_id","fluid","width","height","defaultProps","_slicedToArray","arr","i","Array","isArray","_arrayWithHoles","Symbol","iterator","Object","_arr","_n","_d","_e","undefined","_s","_i","next","done","push","value","length","err","_iterableToArrayLimit","o","minLen","_arrayLikeToArray","n","prototype","toString","call","slice","constructor","from","test","_unsupportedIterableToArray","TypeError","_nonIterableRest","len","arr2","ref","wordsPerMinute","arguments","_useState","_useState2","wordsCount","setWordsCount","words","current","innerText","match","Math","ceil","GlobalExpertGuideStyle","createGlobalStyle","ExpertGuidePageSection","PageSection","PillarContent","SidebarContainer","RichTextContainer","Diagonal","NavigationTitle","h3","black","IconContainer","openClose","transition","ChevronButtonIcon","onClick","Content","ul","li","Header","primary","main","HeaderTitle","a","grey","text2","text3","Container","Body","show","BodyDesc","fade","small","fonts","sizes","large","SidebarItem","toggle","open","submenu","setShowMenu","isMobile","useIsMobile","useState","hover","setHover","key","onMouseEnter","onMouseLeave","href","link","submenuItem","recursiveMapperOfItems","parent","children","childrenItem","SidebarMenu","content","openKey","setOpenKey","handleToggle","guideItem","Title","semiBold","TitleContainer","ListDivider","GuideSidebar","MappedContent","recursiveSidebarMenu","reduce","acc","x","buildContentLinks","nodeType","node","element","data","uri","setShow","useEffect","query","ExpertGuides","pageContext","location","previous","guidePage","contentfulGuide","guideContent","useRef","useReadingTime","mockedCategory","slug","faQs","parseFaqsList","items","path","pathname","withReadingProgress","charSet","image","hero","file","url","viewport","margin","mobileMargin","containerSize","padding","mobilePadding","tableOfContents","body","options","richTextOptions","background","light","category","previousTo","nextTo","withArrow","FaqsTitle","h2","title4","title5","FaqSection","id"],"mappings":"8FAAA,sEAoCeA,IA9BC,SAAAC,GAAU,IAGLC,EAFXC,EAASF,EAATE,KAYFC,EAAY,CAChB,WAAY,qBACZ,QAAS,UACTC,YAbiBH,EAaMC,EAZvBD,EAAQI,KAAI,SAAAC,GAAI,MAAK,CACnB,QAAS,WACTC,KAAMD,EAAKE,MACXC,eAAgB,CACd,QAAS,SACTC,KAAMC,IAAeC,eAAeC,oCAA0BP,EAAKQ,YAAYC,cAUrF,OACE,kBAAC,SAAD,KACE,4BAAQC,KAAK,uBAAuBC,KAAKC,UAAUf,O,2LCzB5CgB,EAAsBC,IAAOC,IAAV,kFAAGD,CAAH,+OACnB,qBAAGE,MAAqBC,SAASC,QAAQ,IAAzC,QAWe,qBAAGF,MAAkBC,SAASE,YAAYC,UACvD,gBAAGJ,EAAH,EAAGA,MAAH,OAAkBA,EAAMC,SAASC,QAAQ,IAAzC,MAAkDF,EAAMC,SAASC,QAAQ,IAAzE,QAGa,qBAAGF,MAAkBC,SAASE,YAAYE,UACvD,gBAAGL,EAAH,EAAGA,MAAH,OAAkBA,EAAMC,SAASC,QAAQ,IAAzC,MAAkDF,EAAMC,SAASC,QAAQ,IAAzE,QAIFI,EAAeR,IAAOC,IAAV,2EAAGD,CAAH,oeAUK,qBAAGE,MAAkBC,SAASE,YAAYI,mBAyB5C,qBAAGP,MAAkBC,SAASE,YAAYK,WAK1C,qBAAGR,MAAkBC,SAASE,YAAYI,mBAQzDE,EAAiBX,IAAOC,IAAV,6EAAGD,CAAH,oGAQdY,EAAkBZ,IAAOa,GAAV,8EAAGb,CAAH,oUACb,qBAAGE,MAAkBC,SAASW,KAAKC,OAAOC,QACxC,qBAAGd,MAAkBC,SAASW,KAAKC,OAAOE,cAC1C,qBAAGf,MAAkBC,SAASW,KAAKI,OAAOC,WAC/C,qBAAGjB,MAAqBC,SAASC,QAAQ,IAAzC,YACD,qBAAGF,MAAkBC,SAASiB,MAAMC,SAU7B,qBAAGD,SASO,qBAAGlB,MAAkBC,SAASE,YAAYC,UAErD,qBAAGJ,MAAkBC,SAASW,KAAKQ,OAAON,QACxC,qBAAGd,MAAkBC,SAASW,KAAKQ,OAAOL,cAC1C,qBAAGf,MAAkBC,SAASW,KAAKI,OAAOC,WAIhDI,EAAwBvB,IAAOwB,EAAV,oFAAGxB,CAAH,oHACnB,qBAAGE,MAAkBC,SAASW,KAAKW,MAAMT,QACvC,qBAAGd,MAAkBC,SAASW,KAAKW,MAAMR,cAE/C,qBAAGf,MAAkBC,SAASiB,MAAMC,SAGnB,qBAAGnB,MAAkBC,SAASE,YAAYC,UAKzDoB,EAAwB1B,IAAOwB,EAAV,oFAAGxB,CAAH,sIACnB,qBAAGE,MAAkBC,SAASW,KAAKW,MAAMT,QACvC,qBAAGd,MAAkBC,SAASW,KAAKW,MAAMR,cAC/C,qBAAGf,MAAkBC,SAASiB,MAAMC,SAInB,qBAAGnB,MAAkBC,SAASE,YAAYC,UAEnD,qBAAGJ,MAAkBe,WAAWU,aCtH7CC,EAAmB,SAAC,GAAuD,IAArDxC,EAAoD,EAApDA,MAAOyC,EAA6C,EAA7CA,SAAUC,EAAmC,EAAnCA,YAAaC,EAAsB,EAAtBA,gBACxD,OACE,kBAAChC,EAAD,KACGgC,GACC,kBAACvB,EAAD,KACE,kBAAC,IAAD,CACEwB,IAAQ5C,EAAL,SACH6C,gBAAc,EACdC,cAAeH,EACfI,OAAK,EACLC,MAAM,OACNC,OAAO,UAIb,kBAAC,IAAD,KACE,kBAAC1B,EAAD,KACE,kBAACC,EAAD,KAAkBxB,GACjByC,GAAY,kBAACN,EAAD,KAAwBM,GACpCC,GACC,kBAACJ,EAAD,KAA2BI,EAA3B,iBAcZF,EAAiBU,aAAe,GAEjBV,Q,0HCrCf,SAASW,EAAeC,EAAKC,GAC3B,OAGF,SAAyBD,GACvB,GAAIE,MAAMC,QAAQH,GAAM,OAAOA,EAJxBI,CAAgBJ,IAOzB,SAA+BA,EAAKC,GAClC,GAAsB,oBAAXI,UAA4BA,OAAOC,YAAYC,OAAOP,IAAO,OACxE,IAAIQ,EAAO,GACPC,GAAK,EACLC,GAAK,EACLC,OAAKC,EAET,IACE,IAAK,IAAiCC,EAA7BC,EAAKd,EAAIK,OAAOC,cAAmBG,GAAMI,EAAKC,EAAGC,QAAQC,QAChER,EAAKS,KAAKJ,EAAGK,QAETjB,GAAKO,EAAKW,SAAWlB,GAH8CQ,GAAK,IAK9E,MAAOW,GACPV,GAAK,EACLC,EAAKS,EACL,QACA,IACOX,GAAsB,MAAhBK,EAAW,QAAWA,EAAW,SAC5C,QACA,GAAIJ,EAAI,MAAMC,GAIlB,OAAOH,EA/BwBa,CAAsBrB,EAAKC,IAkC5D,SAAqCqB,EAAGC,GACtC,IAAKD,EAAG,OACR,GAAiB,iBAANA,EAAgB,OAAOE,EAAkBF,EAAGC,GACvD,IAAIE,EAAIlB,OAAOmB,UAAUC,SAASC,KAAKN,GAAGO,MAAM,GAAI,GAC1C,WAANJ,GAAkBH,EAAEQ,cAAaL,EAAIH,EAAEQ,YAAYnF,MACvD,GAAU,QAAN8E,GAAqB,QAANA,EAAa,OAAOvB,MAAM6B,KAAKT,GAClD,GAAU,cAANG,GAAqB,2CAA2CO,KAAKP,GAAI,OAAOD,EAAkBF,EAAGC,GAxCzCU,CAA4BjC,EAAKC,IAqDnG,WACE,MAAM,IAAIiC,UAAU,6IAtDmFC,GA2CzG,SAASX,EAAkBxB,EAAKoC,IACnB,MAAPA,GAAeA,EAAMpC,EAAImB,UAAQiB,EAAMpC,EAAImB,QAE/C,IAAK,IAAIlB,EAAI,EAAGoC,EAAO,IAAInC,MAAMkC,GAAMnC,EAAImC,EAAKnC,IAC9CoC,EAAKpC,GAAKD,EAAIC,GAGhB,OAAOoC,EA0BM,MAnBf,SAAwBC,GACtB,IAAIC,EAAiBC,UAAUrB,OAAS,QAAsBP,IAAjB4B,UAAU,GAAmBA,UAAU,GAAK,IAErFC,EAAY,mBAAS,GACrBC,EAAa3C,EAAe0C,EAAW,GACvCE,EAAaD,EAAW,GACxBE,EAAgBF,EAAW,GAO/B,OALA,qBAAU,WACR,IACIG,EADOP,EAAIQ,QACEC,UAAUC,MAAM,QAAQ7B,OACzCyB,EAAcC,KACb,CAACP,IACG,CACLhD,YAAa2D,KAAKC,KAAKP,EAAaJ,GACpCI,WAAYA,I,kyBCnFT,IAAMQ,EAAyBC,YAAH,KAyBX,qBAAG1F,MAAkBC,SAASC,QAAQ,MAGhC,qBAAGF,MAAkBC,SAASE,YAAYE,UAc3DsF,EAAyB7F,YAAO8F,KAAV,mGAAG9F,CAAH,uBAItB+F,EAAgB/F,IAAOC,IAAV,0FAAGD,CAAH,sMAQE,qBAAGE,MAAkBC,SAASE,YAAYC,UAI1C,qBAAGJ,MAAkBC,SAASE,YAAYE,UAMzDyF,EAAmBhG,IAAOC,IAAV,6FAAGD,CAAH,8MAOb,qBAAGE,MAAkBC,SAASC,QAAQ,MAE1B,qBAAGF,MAAkBC,SAASE,YAAYC,UAI1C,qBAAGJ,MAAkBC,SAASE,YAAYE,UAQzD0F,EAAoBjG,IAAOC,IAAV,8FAAGD,CAAH,yGACd,uBAAGE,MAAqBC,SAASC,QAAQ,MAK7B,qBAAGF,MAAkBC,SAASE,YAAYC,UACvD,qBAAGJ,MAAqBC,SAASC,QAAQ,GAAzC,WAIF8F,EAAWlG,IAAOC,IAAV,qFAAGD,CAAH,0IAIL,qBAAGE,MAAqBC,SAASC,QAAQ,IAAzC,kBAGY,qBAAGF,MAAkBC,SAASE,YAAYE,UACpD,qBAAGL,MAAqBC,SAASC,QAAQ,IAAzC,kBAIL+F,EAAkBnG,IAAOoG,GAAV,4FAAGpG,CAAH,8JACb,qBAAGE,MAAkBC,SAASW,KAAKQ,OAAON,QACxC,qBAAGd,MAAkBC,SAASW,KAAKQ,OAAOL,cAC1C,qBAAGf,MAAkBC,SAASW,KAAKI,OAAOC,WAChD,qBAAGjB,MAAkBC,SAASiB,MAAMiF,SACnC,2BAAGnG,MAAyBC,SAASC,QAAQ,IAA7C,QACC,qBAAGF,MAAqBC,SAASC,QAAQ,IAAzC,YAEe,qBAAGF,MAAkBC,SAASE,YAAYI,mBACrD,qBAAGP,MAAkBC,SAASW,KAAKQ,OAAON,QACxC,qBAAGd,MAAkBC,SAASW,KAAKQ,OAAOL,c,oCCvHhDqF,EAAgBtG,IAAOC,IAAV,wEAAGD,CAAH,6HAQtB,qBAAGuG,UAA6B,4BAA8B,6BAClD,qBAAGrG,MAAkBsG,cCOtBC,EAZW,SAAC,GAA0D,IAAxDF,EAAuD,EAAvDA,UAAWG,EAA4C,EAA5CA,QAA4C,IAAnC1F,YAAmC,MAA5B,GAA4B,MAAxBI,aAAwB,MAAhB,UAAgB,EAClF,OACE,kBAACkF,EAAD,CAAeC,UAAWA,EAAWG,QAASA,GAC5C,kBAAC,IAAD,CAAc1F,KAAMA,EAAMI,MAAOA,MCP1BuF,EAAU3G,IAAO4G,GAAV,sEAAG5G,CAAH,qIAQX,qBAAGE,MAAkBC,SAASC,QAAQ,MAEnB,qBAAGF,MAAkBC,SAASE,YAAYE,UAC3D,qBAAGL,MAAkBC,SAASC,QAAQ,MCXpCuG,G,oBAAU3G,IAAO6G,GAAV,sEAAG7G,CAAH,qDAOP8G,EAAS9G,IAAOC,IAAV,qEAAGD,CAAH,iMAcJ,qBAAGE,MAAkBC,SAASiB,MAAM2F,QAAQC,QAI/B,qBAAG9G,MAAkBC,SAASE,YAAYE,UAGrD,qBAAGL,MAAkBC,SAASiB,MAAMC,SAMxC4F,EAAcjH,IAAOkH,EAAV,0EAAGlH,CAAH,8OAGb,qBAAGE,MAAkBC,SAASiB,MAAM+F,KAAKH,QACrC,qBAAG9G,MAAkBC,SAASW,KAAKsG,MAAMpG,QACvC,qBAAGd,MAAkBC,SAASW,KAAKsG,MAAMnG,cACzC,qBAAGf,MAAkBC,SAASW,KAAKI,OAAOC,WAE3C,qBAAGjB,MAAkBsG,cAET,qBAAGtG,MAAkBG,YAAYC,UAC5C,qBAAGJ,MAAkBC,SAASW,KAAKuG,MAAMrG,QACvC,qBAAGd,MAAkBC,SAASW,KAAKuG,MAAMpG,cACzC,qBAAGf,MAAkBC,SAASW,KAAKI,OAAOC,WAGjC,qBAAGjB,MAAkBG,YAAYE,UAC5C,qBAAGL,MAAkBC,SAASW,KAAKsG,MAAMpG,QACvC,qBAAGd,MAAkBC,SAASW,KAAKsG,MAAMnG,cACzC,qBAAGf,MAAkBC,SAASW,KAAKI,OAAOC,WAIhDmG,EAAYtH,IAAOC,IAAV,wEAAGD,CAAH,oCAKTuH,EAAOvH,IAAOC,IAAV,mEAAGD,CAAH,4CAEJ,qBAAGwH,KAAmB,GAAK,UACxB,qBAAGtH,MAAkBsG,cAGxBiB,EAAWzH,IAAO4G,GAAV,uEAAG5G,CAAH,6jBAGH,qBAAGE,MAAkBC,SAASC,QAAQ,OAEzC,qBAAGsH,KAAmB,wBAA0B,yBAE/C,qBAAGxH,MAAkBsG,cAElB,qBAAGtG,MAAkBC,SAASC,QAAQ,MAK5C,qBAAGF,MAAkBC,SAASiB,MAAM+F,KAAKH,QACpC,qBAAG9G,MAAkBsG,cAGxB,qBAAGtG,MAAkBC,SAASiB,MAAM2F,QAAQC,QAKzC,qBAAG9G,MAAkBC,SAASC,QAAQ,MA2B5B,qBAAGF,MAAkBG,YAAYE,UACvD,gCAAGL,MAA8BE,QAAQuH,MAAzC,QACW,qBAAGzH,MAAkB0H,MAAMC,MAAMF,SAC7B,qBAAGzH,MAAkBC,SAASC,QAAQ,MAGpC,qBAAGF,MAAkBC,SAASC,QAAQ,MAI9C,qBAAGF,MAAkBC,SAASiB,MAAMC,SAC9B,qBAAGnB,MAAkBE,QAAQ0H,SAC5B,qBAAG5H,MAAkBC,SAASC,QAAQ,MAG3C,qBAAGF,MAAkBC,SAASiB,MAAMC,SC/DtC0G,EAlEK,SAAC,GAAyD,IAAvD5I,EAAsD,EAAtDA,KAAM6I,EAAgD,EAAhDA,OAAQC,EAAwC,EAAxCA,KAAM7I,EAAkC,EAAlCA,MAAO8I,EAA2B,EAA3BA,QAASC,EAAkB,EAAlBA,YACnDC,EAAWC,YAAY,UAD8C,EAEjDC,oBAAS,GAA5BC,EAFoE,KAE7DC,EAF6D,KAqC3E,OACE,kBAAC,EAAD,CAASC,IAAKtJ,GACZ,kBAAC2H,EAAD,CACEJ,QAAS,kBAAMsB,EAAO7I,IACtBuJ,aAAc,kBAAMF,GAAS,IAC7BG,aAAc,kBAAMH,GAAS,KAE7B,kBAACvB,EAAD,CAAaP,QAAS,kBAAMyB,GAAY,IAAQS,KAAMxJ,EAAMyJ,MAAQzJ,EAAMyJ,MACvEzJ,GAASA,EAAMA,OAGjB8I,GAAW,kBAAC,EAAD,CAAmB3B,WAAY0B,EAAM7G,MA3CjDgH,EACK,UAEFG,EAAQrI,IAAMC,SAASiB,MAAM2F,QAAQC,KAAO9G,IAAMC,SAASiB,MAAM+F,KAAKH,QA2C1EkB,GACC,kBAACX,EAAD,CAAMC,KAAMS,GACV,kBAACX,EAAD,KACE,kBAACG,EAAD,CAAUC,KAAMO,GACbC,GACCA,EAAQjJ,KAAI,SAAA6J,GACV,OA9Ce,SAAzBC,EAAyBD,GAAgB,IAAD,QAC5C,OAAIpG,MAAMC,QAAQmG,GACTC,EAAuB,CAAEC,OAAQF,EAAY,GAAIG,SAAUH,EAAY,KAI9E,oCACE,wBAAIL,IAAKK,SAAF,UAAEA,EAAaE,cAAf,aAAE,EAAqB5J,OAC5B,uBAAGsH,QAAS,kBAAMyB,GAAY,IAAQS,MAAME,SAAA,UAAAA,EAAaE,cAAb,eAAqBH,OAAQ,MACtEC,SAAA,UAAAA,EAAaE,cAAb,eAAqB5J,QAAS,aAGlC0J,SANH,UAMGA,EAAaG,gBANhB,aAMG,EAAuBhK,KAAI,SAAAiK,GAC1B,OAAIxG,MAAMC,QAAQuG,GACTH,EAAuBG,GAGzBH,EAAuB,CAC5BC,OAAQE,EAAaF,OACrBC,SAAUC,EAAaD,eA2BVF,CAAuBD,WClCjCK,EAzBK,SAAC,GAA8B,IAA5BC,EAA2B,EAA3BA,QAASjB,EAAkB,EAAlBA,YAAkB,EAClBG,qBAAvBe,EADyC,KAChCC,EADgC,KAG1CC,EAAe,SAAAd,GACnBa,EAAWD,IAAYZ,EAAMA,EAAM,KAGrC,OACE,kBAAC9B,EAAD,KACGyC,EAAQnK,KAAI,SAAAuK,GACX,OACE,kBAAC,EAAD,CACEf,IAAKe,EAAUR,OAAO5J,MACtBD,KAAMqK,EAAUR,OAAO5J,MACvB4I,OAAQuB,EACRtB,KAAMoB,IAAYG,EAAUR,OAAO5J,MACnCA,MAAOoK,EAAUR,OACjBd,QAASsB,EAAUP,SACnBd,YAAaA,SCpBZnC,EAAmBhG,IAAOC,IAAV,+EAAGD,CAAH,wWAMf,qBAAGiI,KAAmB,QAAU,MACrC,qBAAGA,KAAmB,OAAS,MAC9B,qBAAGA,KAAmB,IAAM,MAC3B,qBAAGA,KAAmB,OAAS,MAE7B,qBAAG/H,MAAkBC,SAASC,QAAQ,MACvC,yBAAGF,MAAuBC,SAASC,QAAQ,GAA3C,UAOU,qBAAGF,MAAkBC,SAASiB,MAAM2F,QAAQC,QAGtC,qBAAG9G,MAAkBC,SAASE,YAAYE,UAGpD,qBAAGL,MAAkBC,SAASiB,MAAM2F,QAAQC,QAG/C,yBAAG9G,MAAuBC,SAASC,QAAQ,MAa7CqJ,EAAQzJ,IAAOwB,EAAV,oEAAGxB,CAAH,wLACH,qBAAGE,MAAkBC,SAASW,KAAKW,MAAMT,QACvC,qBAAGd,MAAkBC,SAASW,KAAKW,MAAMR,cACzC,qBAAGf,MAAkBC,SAASW,KAAKI,OAAOwI,YAChD,qBAAGxJ,MAAkBC,SAASiB,MAAM2F,QAAQC,QACpC,qBAAG9G,MAAkBC,SAASC,QAAQ,MAG7B,qBAAGF,MAAkBC,SAASE,YAAYE,UACrD,qBAAGL,MAAkBC,SAASW,KAAKsG,MAAMpG,QACvC,qBAAGd,MAAkBC,SAASW,KAAKsG,MAAMnG,cACzC,qBAAGf,MAAkBC,SAASW,KAAKI,OAAOC,WAC3C,qBAAGjB,MAAkBC,SAASC,QAAQ,MAI3CuJ,EAAiB3J,IAAOC,IAAV,6EAAGD,CAAH,gHAYdyH,EAAWzH,IAAOC,IAAV,uEAAGD,CAAH,sWACR,qBAAGwH,KAAmB,GAAK,UAGrB,qBAAGtH,MAAkBC,SAASC,QAAQ,MAE1C,qBAAGsH,KAAmB,wBAA0B,yBAE/C,qBAAGxH,MAAkBsG,cAET,qBAAGtG,MAAkBC,SAASE,YAAYE,UA6BzDqJ,EAAc5J,IAAOC,IAAV,0EAAGD,CAAH,yEAGR,qBAAGE,MAAkBC,SAASiB,MAAMC,SACvC,qBAAGmG,KAAmB,QAAU,UAC1B,qBAAGtH,MAAkBC,SAASC,QAAQ,M,kwBC7GzD,IAsEeyJ,GAnCM,SAAC,GAAiB,IAAfT,EAAc,EAAdA,QAChBU,EAjBuB,SAAvBC,EAAuBX,GAC3B,OAAOA,EAAQY,QAAO,SAACC,EAAKC,GAC1B,OAAIA,EAAEvG,OAAS,EACTuG,EAAE,GAAGvG,OAAS,EACV,GAAN,UAAWsG,GAAX,CAAgB,CAAEjB,OAAQkB,EAAE,GAAIjB,SAAUc,EAAqBG,EAAE,OAE7D,GAAN,UAAWD,GAAX,CAAgB,CAAEjB,OAAQkB,EAAE,GAAIjB,SAAUiB,EAAE,MAExC,GAAN,UAAWD,GAAX,CAAgB,CAAEjB,OAAQkB,EAAE,QAC3B,IAIEH,CA/BmB,SAApBI,EAAoBxK,GAAI,OAC5BA,EAAKyJ,QAAQY,QAAO,SAACC,EAAKC,GACxB,GAAmB,cAAfA,EAAEE,SAA0B,CAC9B,GAAyB,IAArBF,EAAEd,QAAQzF,OACZ,MAAM,GAAN,UAAWsG,GAAX,CAAgB,CAAE7K,MAAO8K,EAAEd,QAAQ,GAAG1F,SAGxC,IAAM2G,EAAOH,EAAEd,QAAQ,GACjBkB,EAAU,CACdlL,MAAOiL,EAAKjB,QAAQ,GAAG1F,MACvBmF,KAAMwB,EAAKE,KAAKC,KAGlB,MAAM,GAAN,UAAWP,GAAX,CAAgBK,IAElB,MAAM,GAAN,UAAWL,GAAX,CAAgBE,EAAkBD,OACjC,IAcQC,CAK4Bf,EApCbA,QA+BW,KAOjChB,EAAWC,YAAY,UAHO,EAIZC,oBAAS,GAA1Bd,EAJ6B,KAIvBiD,EAJuB,KAcpC,OANAC,qBAAU,WACHtC,GACHqC,GAAQ,KAET,CAACrC,IAGF,kBAAC,EAAD,CAAkBH,KAAMT,GACrBY,EACC,oCACE,kBAACuB,EAAD,CAAgBjD,QAZJ,kBAAM+D,GAASjD,KAazB,kBAACiC,EAAD,sCACA,kBAAC,EAAD,CAAmBlD,WAAYiB,KAEjC,kBAACoC,EAAD,CAAapC,KAAMA,KAGrB,kBAACiC,EAAD,sCAGF,kBAAC,EAAD,CAAUjC,MAAMY,GAAWZ,EAAaE,MAAI,GAC1C,kBAAC,EAAD,CAAa0B,QAASU,EAAe3B,YAAasC,O,aC1C7CE,GAAK,YA+GHC,UA9EM,SAAC,GAAqC,IAAnCC,EAAkC,EAAlCA,YAAaN,EAAqB,EAArBA,KAAMO,EAAe,EAAfA,SACjCC,EAAmBF,EAAnBE,SAAUxH,EAASsH,EAATtH,KACZ6E,EAAWC,YAAY,UACvB2C,EAAYT,EAAKU,gBACjBC,EAAeC,mBACbrJ,EAAgBsJ,EAAeF,GAA/BpJ,YACFuJ,EAAiB,CAAElM,KAAM,QAASmM,KAAM,SAExCzM,EAAUmM,EAAUO,MAAQC,YAAcR,EAAUO,KAAKE,OAC/D,OACE,kBAAC,IAAD,CAAQC,KAAMZ,EAASa,SAAUC,qBAAmB,GAClD,kBAACjG,EAAD,MACA,kBAAC,IAAD,CACEvG,MAAO4L,EAAU5L,MACjBM,YAAasL,EAAUnJ,SACvBgK,QAAQ,QACRC,MAAOd,EAAUe,KAAKC,KAAKC,IAC3BC,SAAS,sCACTtM,KAAK,YAENoL,EAAUO,MAAQ,kBAAC,IAAD,CAASzM,KAAMD,IAClC,kBAACgH,EAAD,CACEsG,OAAWjM,IAAMC,SAASC,QAAQ,MAA5B,SACNgM,aAAa,UACbC,cAAc,SAEd,kBAAC,EAAD,CACEjN,MAAO4L,EAAU5L,MACjByC,SAAUmJ,EAAUnJ,SACpBC,YAAaA,EACbC,gBAAiBiJ,EAAUe,KAAK7J,iBAGpC,kBAAC2D,EAAD,CACEyG,QAAO,OAASpM,IAAMC,SAASC,QAAQ,IAAhC,KACPmM,cAAc,UACdH,aAAa,UACbC,cAAejE,EAAW,QAAU,MAEpC,kBAACrC,EAAD,KACE,kBAACC,EAAD,KACE,kBAAC,GAAD,CAAcoD,QAAS4B,EAAUwB,gBAAgB7M,QAEnD,kBAACsG,EAAD,CAAmBnB,IAAKoG,GACtB,kBAAC,IAAD,CACE9J,MAAOlB,IAAMC,SAASiB,MAAM2F,QAAQC,KACpCrH,KAAM,CACJ4K,KAAMS,EAAUyB,KAAK9M,KAAK4K,KAC1BnB,QAAS4B,EAAUyB,KAAK9M,KAAKyJ,QAC7BgB,SAAUY,EAAUyB,KAAK9M,KAAKyK,UAEhCsC,QAASC,MAEV3B,EAAUO,MAAQ,kBAAC,IAAD,CAAY1M,QAASA,EAASO,MAAO4L,EAAUO,KAAKnM,WAI7E,kBAAC,IAAD,CACEwN,WAAe1M,IAAMC,SAASiB,MAAM2F,QAAQ8F,MAAlC,KACVV,OAAWjM,IAAMC,SAASC,QAAQ,IAA5B,SACNkM,QAAO,OAASpM,IAAMC,SAASC,QAAQ,IAAhC,KACPmM,cAAa,OAASrM,IAAMC,SAASC,QAAQ,GAAhC,MAEb,kBAAC8F,EAAD,MACA,kBAACC,EAAD,4BACA,kBAAC,KAAD,CACE4E,SAAQ,iBAAOA,EAASV,KAAhB,CAAsByC,SAAUzB,IACxC0B,WAAU,kBAAoBhC,EAASV,KAAKiB,KAC5C/H,KAAMA,EAAI,iBAAQA,EAAK8G,KAAb,CAAmByC,SAAUzB,SAAmBjI,EAC1D4J,OAAM,kBAAoBzJ,EAAK8G,KAAKiB,KACpC/G,KAAK,QACL0I,WAAS,Q,uECnGJC,E,UA/BUlN,EAAOmN,GAAV,wEAAGnN,CAAH,iSACP,qBAAGE,MAAkBC,SAASW,KAAKsM,OAAOpM,QACxC,qBAAGd,MAAkBC,SAASW,KAAKsM,OAAOnM,cAC1C,qBAAGf,MAAkBC,SAASW,KAAKI,OAAOC,WAC/C,qBAAGjB,MAAkBC,SAASC,QAAQ,OACvC,qBAAGF,MAAkBC,SAASiB,MAAMiF,SAU7B,qBAAGjF,SASO,qBAAGlB,MAAkBC,SAASE,YAAYC,UAErD,qBAAGJ,MAAkBC,SAASW,KAAKuM,OAAOrM,QACxC,qBAAGd,MAAkBC,SAASW,KAAKuM,OAAOpM,cCV9CqM,IAdI,SAAC,GAAwB,IAAtBzO,EAAqB,EAArBA,QAASO,EAAY,EAAZA,MAC7B,OACE,yBAAKmO,GAAG,QACN,kBAAC,EAAD,KAAYnO,GACZ,kBAAC,IAAD,CAAW4B,KAAK,QAAQlC,KAAMD","file":"component---src-templates-expert-guides-js-d1d9e4af88e1eb1ecd05.js","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { documentToReactComponents } from '@contentful/rich-text-react-renderer';\nimport { Helmet } from 'react-helmet';\nimport ReactDOMServer from 'react-dom/server';\n\nconst FaqsTag = props => {\n  const { list } = props;\n\n  const mapFaqList = faqList =>\n    faqList.map(item => ({\n      '@type': 'Question',\n      name: item.title,\n      acceptedAnswer: {\n        '@type': 'Answer',\n        text: ReactDOMServer.renderToString(documentToReactComponents(item.description.json)),\n      },\n    }));\n\n  const faqScript = {\n    '@context': 'https://schema.org',\n    '@type': 'FAQPage',\n    mainEntity: mapFaqList(list),\n  };\n\n  return (\n    <Helmet>\n      <script type=\"application/ld+json\">{JSON.stringify(faqScript)}</script>\n    </Helmet>\n  );\n};\n\nFaqsTag.propTypes = {\n  list: PropTypes.array.isRequired,\n};\n\nexport default FaqsTag;\n","import styled from 'styled-components';\n\nexport const ContainerPageHeader = styled.div`\n  padding: ${({ theme }) => `${theme.newTheme.spacing(40)} 0`};\n  position: relative;\n  width: 100%;\n  z-index: 9;\n\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  align-content: center;\n\n  @media only screen and (${({ theme }) => theme.newTheme.breakpoints.tablet}) {\n    padding: ${({ theme }) => `${theme.newTheme.spacing(10)} 0 ${theme.newTheme.spacing(20)} 0`};\n  }\n\n  @media only screen and (${({ theme }) => theme.newTheme.breakpoints.mobile}) {\n    padding: ${({ theme }) => `${theme.newTheme.spacing(10)} 0 ${theme.newTheme.spacing(10)} 0`};\n  }\n`;\n\nexport const ImgContainer = styled.div`\n  position: absolute;\n  left: 0;\n  z-index: -1;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n\n  div {\n    width: 100%;\n    @media only screen and (${({ theme }) => theme.newTheme.breakpoints.tabletLandscape}) {\n      height: 100%;\n    }\n  }\n\n  :after {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background: linear-gradient(\n      80.88deg,\n      #3f3f3f 1.15%,\n      rgba(63, 63, 63, 0.9375) 63.81%,\n      rgba(63, 63, 63, 0) 137.9%\n    );\n    opacity: 0.6;\n  }\n\n  img {\n    top: -35% !important;\n  }\n\n  @media only screen and (${({ theme }) => theme.newTheme.breakpoints.desktop}) {\n    img {\n      height: 120% !important;\n    }\n  }\n  @media only screen and (${({ theme }) => theme.newTheme.breakpoints.tabletLandscape}) {\n    img {\n      top: 0px !important;\n      height: 100% !important;\n    }\n  }\n`;\n\nexport const ContainerTitle = styled.div`\n  max-width: 1156px;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n`;\n\nexport const PageHeaderTitle = styled.h1`\n  font-size: ${({ theme }) => theme.newTheme.font.title1.size};\n  line-height: ${({ theme }) => theme.newTheme.font.title1.lineHeight};\n  font-weight: ${({ theme }) => theme.newTheme.font.weight.regular};\n  margin: ${({ theme }) => `${theme.newTheme.spacing(10)} 0 0 0`};\n  color: ${({ theme }) => theme.newTheme.color.white};\n  text-align: center;\n  hyphens: auto;\n\n  u {\n    text-decoration: none;\n    display: block;\n  }\n\n  b {\n    background: ${({ color }) => color};\n    -webkit-background-clip: text;\n    -webkit-text-fill-color: transparent;\n  }\n\n  p {\n    margin: 0;\n  }\n\n  @media only screen and (${({ theme }) => theme.newTheme.breakpoints.tablet}) {\n    width: 100%;\n    font-size: ${({ theme }) => theme.newTheme.font.title3.size};\n    line-height: ${({ theme }) => theme.newTheme.font.title3.lineHeight};\n    font-weight: ${({ theme }) => theme.newTheme.font.weight.regular};\n  }\n`;\n\nexport const PageHeaderDescription = styled.p`\n  font-size: ${({ theme }) => theme.newTheme.font.text1.size};\n  line-height: ${({ theme }) => theme.newTheme.font.text1.lineHeight};\n  width: 100%;\n  color: ${({ theme }) => theme.newTheme.color.white};\n  text-align: center;\n\n  @media only screen and (${({ theme }) => theme.newTheme.breakpoints.tablet}) {\n    width: 100%;\n  }\n`;\n\nexport const PageHeaderReadingTime = styled.p`\n  font-size: ${({ theme }) => theme.newTheme.font.text1.size};\n  line-height: ${({ theme }) => theme.newTheme.font.text1.lineHeight};\n  color: ${({ theme }) => theme.newTheme.color.white};\n  width: 100%;\n  text-align: center;\n\n  @media only screen and (${({ theme }) => theme.newTheme.breakpoints.tablet}) {\n    margin-top: 0;\n    line-height: ${({ theme }) => theme.lineHeight.secondary};\n  }\n`;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport Image from 'core/image';\nimport MainContainer from '../main-container';\n\nimport {\n  ContainerPageHeader,\n  PageHeaderTitle,\n  PageHeaderDescription,\n  ImgContainer,\n  PageHeaderReadingTime,\n  ContainerTitle,\n} from './styles';\n\nconst ExpertPageHeader = ({ title, subtitle, readingTime, backgroundImage }) => {\n  return (\n    <ContainerPageHeader>\n      {backgroundImage && (\n        <ImgContainer>\n          <Image\n            alt={`${title} image`}\n            fromContentful\n            contentful_id={backgroundImage}\n            fluid\n            width=\"100%\"\n            height=\"100%\"\n          />\n        </ImgContainer>\n      )}\n      <MainContainer>\n        <ContainerTitle>\n          <PageHeaderTitle>{title}</PageHeaderTitle>\n          {subtitle && <PageHeaderDescription>{subtitle}</PageHeaderDescription>}\n          {readingTime && (\n            <PageHeaderReadingTime>{`${readingTime} min read`}</PageHeaderReadingTime>\n          )}\n        </ContainerTitle>\n      </MainContainer>\n    </ContainerPageHeader>\n  );\n};\n\nExpertPageHeader.propTypes = {\n  title: PropTypes.string.isRequired,\n  subtitle: PropTypes.string,\n  readingTime: PropTypes.number,\n};\n\nExpertPageHeader.defaultProps = {};\n\nexport default ExpertPageHeader;\n","import \"core-js/modules/es6.regexp.match\";\nimport \"core-js/modules/es6.string.iterator\";\nimport \"core-js/modules/es6.array.from\";\nimport \"core-js/modules/es6.function.name\";\nimport \"core-js/modules/es6.regexp.to-string\";\nimport \"core-js/modules/es6.date.to-string\";\nimport \"core-js/modules/es6.object.to-string\";\nimport \"core-js/modules/web.dom.iterable\";\nimport \"core-js/modules/es7.symbol.async-iterator\";\nimport \"core-js/modules/es6.symbol\";\nimport \"core-js/modules/es6.array.is-array\";\nimport { useState, useEffect } from 'react';\n\nfunction _slicedToArray(arr, i) {\n  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();\n}\n\nfunction _arrayWithHoles(arr) {\n  if (Array.isArray(arr)) return arr;\n}\n\nfunction _iterableToArrayLimit(arr, i) {\n  if (typeof Symbol === \"undefined\" || !(Symbol.iterator in Object(arr))) return;\n  var _arr = [];\n  var _n = true;\n  var _d = false;\n  var _e = undefined;\n\n  try {\n    for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {\n      _arr.push(_s.value);\n\n      if (i && _arr.length === i) break;\n    }\n  } catch (err) {\n    _d = true;\n    _e = err;\n  } finally {\n    try {\n      if (!_n && _i[\"return\"] != null) _i[\"return\"]();\n    } finally {\n      if (_d) throw _e;\n    }\n  }\n\n  return _arr;\n}\n\nfunction _unsupportedIterableToArray(o, minLen) {\n  if (!o) return;\n  if (typeof o === \"string\") return _arrayLikeToArray(o, minLen);\n  var n = Object.prototype.toString.call(o).slice(8, -1);\n  if (n === \"Object\" && o.constructor) n = o.constructor.name;\n  if (n === \"Map\" || n === \"Set\") return Array.from(o);\n  if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);\n}\n\nfunction _arrayLikeToArray(arr, len) {\n  if (len == null || len > arr.length) len = arr.length;\n\n  for (var i = 0, arr2 = new Array(len); i < len; i++) {\n    arr2[i] = arr[i];\n  }\n\n  return arr2;\n}\n\nfunction _nonIterableRest() {\n  throw new TypeError(\"Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\");\n}\n\nfunction useReadingTime(ref) {\n  var wordsPerMinute = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 260;\n\n  var _useState = useState(1),\n      _useState2 = _slicedToArray(_useState, 2),\n      wordsCount = _useState2[0],\n      setWordsCount = _useState2[1];\n\n  useEffect(function () {\n    var elem = ref.current;\n    var words = elem.innerText.match(/\\w+/g).length;\n    setWordsCount(words);\n  }, [ref]);\n  return {\n    readingTime: Math.ceil(wordsCount / wordsPerMinute),\n    wordsCount: wordsCount\n  };\n}\n\nexport default useReadingTime;","import styled, { createGlobalStyle } from 'styled-components';\nimport PageSection from 'atomic-design/atoms/page-section';\n\nexport const GlobalExpertGuideStyle = createGlobalStyle`\n  body, html {\n    overflow: initial;\n    scroll-behavior: smooth;\n\n    h2 {\n      scroll-margin-top: 100px;\n    }\n    h3 {\n      scroll-margin-top: 100px;\n    }\n    h4 {\n      scroll-margin-top: 100px;\n    }\n    h5 {\n      scroll-margin-top: 80px;\n    }\n    h6 {\n      scroll-margin-top: 80px;\n    }\n    p {\n      scroll-margin-top: 80px;\n    }\n\n    h2:first-child {\n      padding-bottom: ${({ theme }) => theme.newTheme.spacing(6)};\n    }\n\n    @media only screen and (${({ theme }) => theme.newTheme.breakpoints.mobile}) {\n      h2 {\n        scroll-margin-top: 100px;\n      }\n      h3 {\n        scroll-margin-top: 100px;\n      }\n      h4 {\n        scroll-margin-top: 130px;\n      }\n    }\n  }\n`;\n\nexport const ExpertGuidePageSection = styled(PageSection)`\n  overflow: initial;\n`;\n\nexport const PillarContent = styled.div`\n  display: flex;\n  alignItems: \"flex-start\"\n  flex-direction: row;\n  align-items: flex-start;\n \n  width: 100%;\n\n  @media only screen and (${({ theme }) => theme.newTheme.breakpoints.tablet}) {\n    padding: 0;\n  }\n\n  @media only screen and (${({ theme }) => theme.newTheme.breakpoints.mobile}) {\n    flex-direction: column;\n    padding: 0;\n  }\n`;\n\nexport const SidebarContainer = styled.div`\n  display: flex;\n  flex-direction: column;\n  width: 36%;\n  position: sticky;\n  top: 100px;\n\n  margin-top: ${({ theme }) => theme.newTheme.spacing(6)};\n\n  @media only screen and (${({ theme }) => theme.newTheme.breakpoints.tablet}) {\n    width: 40%;\n  }\n\n  @media only screen and (${({ theme }) => theme.newTheme.breakpoints.mobile}) {\n    margin-top: 0;\n    width: 100%;\n    top: 53px;\n    z-index: 11;\n  }\n`;\n\nexport const RichTextContainer = styled.div`\n  margin-top: ${({ theme }) => `${theme.newTheme.spacing(6)}`};\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n\n  @media only screen and (${({ theme }) => theme.newTheme.breakpoints.tablet}) {\n    padding: ${({ theme }) => `${theme.newTheme.spacing(5)} 27px`};\n  }\n`;\n\nexport const Diagonal = styled.div`\n  position: absolute;\n  z-index: 0;\n  right: 0;\n  border-top: ${({ theme }) => `${theme.newTheme.spacing(20)} solid white`};\n  border-left: 100vw solid transparent;\n\n  @media only screen and (${({ theme }) => theme.newTheme.breakpoints.mobile}) {\n    border-top: ${({ theme }) => `${theme.newTheme.spacing(10)} solid white`};\n  }\n`;\n\nexport const NavigationTitle = styled.h3`\n  font-size: ${({ theme }) => theme.newTheme.font.title3.size};\n  line-height: ${({ theme }) => theme.newTheme.font.title3.lineHeight};\n  font-weight: ${({ theme }) => theme.newTheme.font.weight.regular};\n  color: ${({ theme }) => theme.newTheme.color.black};\n  margin: ${({ theme }) => `0 0 ${theme.newTheme.spacing(20)} 0`};\n  padding: ${({ theme }) => `${theme.newTheme.spacing(20)} 0 0 0`};\n\n  @media only screen and (${({ theme }) => theme.newTheme.breakpoints.tabletLandscape}) {\n    font-size: ${({ theme }) => theme.newTheme.font.title3.size};\n    line-height: ${({ theme }) => theme.newTheme.font.title3.lineHeight};\n    display: none;\n  }\n`;\n","import styled from 'styled-components';\n\nexport const IconContainer = styled.div`\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  border: none;\n\n  ${({ openClose }) => (openClose ? 'transform: rotate(-90deg)' : 'transform: rotate(0deg)')};\n  transition: ${({ theme }) => theme.transition};\n`;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { ChevronArrow } from 'ui/svg';\n\nimport { IconContainer } from './styles';\n\nconst ChevronButtonIcon = ({ openClose, onClick, size = 25, color = '#ffffff' }) => {\n  return (\n    <IconContainer openClose={openClose} onClick={onClick}>\n      <ChevronArrow size={size} color={color} />\n    </IconContainer>\n  );\n};\n\nChevronButtonIcon.propTypes = {\n  openClose: PropTypes.bool.isRequired,\n};\n\nexport default ChevronButtonIcon;\n","import styled from 'styled-components';\n\nexport const Content = styled.ul`\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n\n  gap: ${({ theme }) => theme.newTheme.spacing(4)};\n\n  @media only screen and (${({ theme }) => theme.newTheme.breakpoints.mobile}) {\n    gap: ${({ theme }) => theme.newTheme.spacing(4)};\n  }\n`;\n","import styled from 'styled-components';\n\nexport const Content = styled.li`\n  width: 100%;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n`;\n\nexport const Header = styled.div`\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n\n  flex-direction: row;\n  justify-content: space-between;\n\n  button {\n    padding: 0;\n  }\n\n  &:hover {\n    a {\n      color: ${({ theme }) => theme.newTheme.color.primary.main};\n    }\n  }\n\n  @media only screen and (${({ theme }) => theme.newTheme.breakpoints.mobile}) {\n    &:hover {\n      a {\n        color: ${({ theme }) => theme.newTheme.color.white};\n      }\n    }\n\n`;\n\nexport const HeaderTitle = styled.a`\n  margin: 0;\n\n  color: ${({ theme }) => theme.newTheme.color.grey.main};\n  font-size: ${({ theme }) => theme.newTheme.font.text2.size};\n  line-height: ${({ theme }) => theme.newTheme.font.text2.lineHeight};\n  font-weight: ${({ theme }) => theme.newTheme.font.weight.regular};\n\n  transition: ${({ theme }) => theme.transition};\n\n  @media only screen and (${({ theme }) => theme.breakpoints.tablet}) {\n    font-size: ${({ theme }) => theme.newTheme.font.text3.size};\n    line-height: ${({ theme }) => theme.newTheme.font.text3.lineHeight};\n    font-weight: ${({ theme }) => theme.newTheme.font.weight.regular};\n  }\n\n  @media only screen and (${({ theme }) => theme.breakpoints.mobile}) {\n    font-size: ${({ theme }) => theme.newTheme.font.text2.size};\n    line-height: ${({ theme }) => theme.newTheme.font.text2.lineHeight};\n    font-weight: ${({ theme }) => theme.newTheme.font.weight.regular};\n  }\n`;\n\nexport const Container = styled.div`\n  height: 100%;\n  position: relative;\n`;\n\nexport const Body = styled.div`\n  width: 100%;\n  display: ${({ show }) => (show ? '' : 'none')};\n  transition: ${({ theme }) => theme.transition};\n`;\n\nexport const BodyDesc = styled.ul`\n  display: flex;\n  flex-direction: column;\n  padding-left: ${({ theme }) => theme.newTheme.spacing(10)};\n\n  animation: ${({ fade }) => (fade ? 'fadeInDown .2s linear' : 'fadeInUp .2s linear')};\n\n  transition: ${({ theme }) => theme.transition};\n  margin-top: 0;\n  margin-bottom: ${({ theme }) => theme.newTheme.spacing(6)};\n\n  a {\n    padding: 0;\n    margin: 0;\n    color: ${({ theme }) => theme.newTheme.color.grey.main};\n    transition: ${({ theme }) => theme.transition};\n\n    &:hover {\n      color: ${({ theme }) => theme.newTheme.color.primary.main};\n    }\n  }\n\n  li {\n    margin-top: ${({ theme }) => theme.newTheme.spacing(4)};\n  }\n\n  @keyframes fadeInDown {\n    0% {\n      opacity: 0;\n      transform: translateY(-40px);\n    }\n    50% {\n      transform: translateY(-20px);\n    }\n    100% {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n\n  @keyframes fadeInUp {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      transform: translateY(-40px);\n    }\n  }\n\n  @media only screen and (${({ theme }) => theme.breakpoints.mobile}) {\n    ${({ theme }) => `padding: ${theme.spacing.small} 0`};\n    font-size: ${({ theme }) => theme.fonts.sizes.small};\n    margin-bottom: ${({ theme }) => theme.newTheme.spacing(0)};\n\n    li {\n      margin-bottom: ${({ theme }) => theme.newTheme.spacing(4)};\n    }\n\n    a {\n      color: ${({ theme }) => theme.newTheme.color.white};\n      line-height: ${({ theme }) => theme.spacing.large};\n      padding-left: ${({ theme }) => theme.newTheme.spacing(5)};\n\n      &:hover {\n        color: ${({ theme }) => theme.newTheme.color.white};\n      }\n    }\n  }\n`;\n","import React, { useState } from 'react';\nimport ChevronButtonIcon from 'atomic-design/atoms/chevronButtonIcon';\nimport { Content, Header, Body, HeaderTitle, BodyDesc, Container } from './styles';\nimport useIsMobile from 'hooks/useIsMobile';\nimport theme from 'styles/theme';\n\nconst SidebarItem = ({ name, toggle, open, title, submenu, setShowMenu }) => {\n  const isMobile = useIsMobile('mobile');\n  const [hover, setHover] = useState(false);\n\n  const colorChevron = () => {\n    if (isMobile) {\n      return '#ffffff';\n    }\n    return hover ? theme.newTheme.color.primary.main : theme.newTheme.color.grey.main;\n  };\n\n  const recursiveMapperOfItems = submenuItem => {\n    if (Array.isArray(submenuItem)) {\n      return recursiveMapperOfItems({ parent: submenuItem[0], children: submenuItem[1] });\n    }\n\n    return (\n      <>\n        <li key={submenuItem?.parent?.title}>\n          <a onClick={() => setShowMenu(false)} href={submenuItem?.parent?.link || '#'}>\n            {submenuItem?.parent?.title || 'Untitled'}\n          </a>\n        </li>\n        {submenuItem?.children?.map(childrenItem => {\n          if (Array.isArray(childrenItem)) {\n            return recursiveMapperOfItems(childrenItem);\n          }\n\n          return recursiveMapperOfItems({\n            parent: childrenItem.parent,\n            children: childrenItem.children,\n          });\n        })}\n      </>\n    );\n  };\n\n  return (\n    <Content key={name}>\n      <Header\n        onClick={() => toggle(name)}\n        onMouseEnter={() => setHover(true)}\n        onMouseLeave={() => setHover(false)}\n      >\n        <HeaderTitle onClick={() => setShowMenu(false)} href={title.link && title.link}>\n          {title && title.title}\n        </HeaderTitle>\n\n        {submenu && <ChevronButtonIcon openClose={!open} color={colorChevron()} />}\n      </Header>\n\n      {submenu && (\n        <Body show={open}>\n          <Container>\n            <BodyDesc fade={open}>\n              {submenu &&\n                submenu.map(submenuItem => {\n                  return recursiveMapperOfItems(submenuItem);\n                })}\n            </BodyDesc>\n          </Container>\n        </Body>\n      )}\n    </Content>\n  );\n};\nexport default SidebarItem;\n","import React, { useState } from 'react';\nimport { Content } from './styles';\nimport SidebarItem from './sidebar-item';\n\nconst SidebarMenu = ({ content, setShowMenu }) => {\n  const [openKey, setOpenKey] = useState();\n\n  const handleToggle = key => {\n    setOpenKey(openKey !== key ? key : '');\n  };\n\n  return (\n    <Content>\n      {content.map(guideItem => {\n        return (\n          <SidebarItem\n            key={guideItem.parent.title}\n            name={guideItem.parent.title}\n            toggle={handleToggle}\n            open={openKey === guideItem.parent.title}\n            title={guideItem.parent}\n            submenu={guideItem.children}\n            setShowMenu={setShowMenu}\n          />\n        );\n      })}\n    </Content>\n  );\n};\nexport default SidebarMenu;\n","import styled from 'styled-components';\n\nexport const SidebarContainer = styled.div`\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: flex-start;\n\n  position: ${({ open }) => (open ? 'fixed' : '')};\n  top: ${({ open }) => (open ? '53px' : '')};\n  left: ${({ open }) => (open ? '0' : '')};\n  width: ${({ open }) => (open ? '100%' : '')};\n  \n  padding: ${({ theme }) => theme.newTheme.spacing(5)};\n  margin: ${({ theme }) => `0 ${theme.newTheme.spacing(9)} 0 0`};\n\n  width: 100%\n  height: 100%;\n\n  background: #ffffff;\n  border-radius: 15px;\n  border: 1px solid ${({ theme }) => theme.newTheme.color.primary.main};\n\n\n  @media only screen and (${({ theme }) => theme.newTheme.breakpoints.mobile}) {\n    border: none;\n    border-radius: 0;\n    background: ${({ theme }) => theme.newTheme.color.primary.main};\n\n    margin: 0;\n    padding: ${({ theme }) => `0 ${theme.newTheme.spacing(7)}`};\n    \n    \n    p {\n      color: white;\n    }\n    a {\n      color: white;\n    }\n  }\n  \n`;\n\nexport const Title = styled.p`\n  font-size: ${({ theme }) => theme.newTheme.font.text1.size};\n  line-height: ${({ theme }) => theme.newTheme.font.text1.lineHeight};\n  font-weight: ${({ theme }) => theme.newTheme.font.weight.semiBold};\n  color: ${({ theme }) => theme.newTheme.color.primary.main};\n  margin-bottom: ${({ theme }) => theme.newTheme.spacing(5)};\n  margin-top: 0;\n\n  @media only screen and (${({ theme }) => theme.newTheme.breakpoints.mobile}) {\n    font-size: ${({ theme }) => theme.newTheme.font.text2.size};\n    line-height: ${({ theme }) => theme.newTheme.font.text2.lineHeight};\n    font-weight: ${({ theme }) => theme.newTheme.font.weight.regular};\n    margin-top: ${({ theme }) => theme.newTheme.spacing(5)};\n  }\n`;\n\nexport const TitleContainer = styled.div`\n  display: flex;\n  width: 100%;\n  align-items: center;\n  justify-content: space-between;\n  cursor: pointer;\n\n  button {\n    padding: 0;\n  }\n`;\n\nexport const BodyDesc = styled.div`\n  display: ${({ show }) => (show ? '' : 'none')};\n  width: 100%;\n  flex-direction: column;\n  margin-bottom: ${({ theme }) => theme.newTheme.spacing(5)};\n\n  animation: ${({ fade }) => (fade ? 'fadeInDown .2s linear' : 'fadeInUp .2s linear')};\n\n  transition: ${({ theme }) => theme.transition};\n\n  @media only screen and (${({ theme }) => theme.newTheme.breakpoints.mobile}) {\n    height: 100vh;\n  }\n\n  @keyframes fadeInDown {\n    0% {\n      opacity: 0;\n      transform: translateY(-40px);\n    }\n    50% {\n      transform: translateY(-20px);\n    }\n    100% {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n\n  @keyframes fadeInUp {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      transform: translateY(-40px);\n    }\n  }\n`;\n\nexport const ListDivider = styled.div`\n  width: 100%;\n  height: 1px;\n  background: ${({ theme }) => theme.newTheme.color.white};\n  display: ${({ show }) => (show ? 'block' : 'none')};\n  margin-bottom: ${({ theme }) => theme.newTheme.spacing(5)};\n`;\n","import React, { useState, useEffect } from 'react';\nimport useIsMobile from 'hooks/useIsMobile';\nimport ChevronButtonIcon from 'atomic-design/atoms/chevronButtonIcon';\nimport SidebarMenu from './sidebar-menu';\nimport { SidebarContainer, Title, BodyDesc, TitleContainer, ListDivider } from './styles';\n\nconst guideSidebarMapper = ({ content }) => {\n  const buildContentLinks = json =>\n    json.content.reduce((acc, x) => {\n      if (x.nodeType === 'paragraph') {\n        if (x.content.length === 1) {\n          return [...acc, { title: x.content[0].value }];\n        }\n\n        const node = x.content[1];\n        const element = {\n          title: node.content[0].value,\n          link: node.data.uri,\n        };\n\n        return [...acc, element];\n      }\n      return [...acc, buildContentLinks(x)];\n    }, []);\n\n  const recursiveSidebarMenu = content => {\n    return content.reduce((acc, x) => {\n      if (x.length > 1) {\n        if (x[1].length > 1) {\n          return [...acc, { parent: x[0], children: recursiveSidebarMenu(x[1]) }];\n        }\n        return [...acc, { parent: x[0], children: x[1] }];\n      }\n      return [...acc, { parent: x[0] }];\n    }, []);\n  };\n\n  const data = buildContentLinks(content[0]);\n  return recursiveSidebarMenu(data);\n};\n\nconst GuideSidebar = ({ content }) => {\n  const MappedContent = guideSidebarMapper(content);\n\n  const isMobile = useIsMobile('mobile');\n  const [show, setShow] = useState(false);\n\n  const handleClick = () => setShow(!show);\n\n  useEffect(() => {\n    if (!isMobile) {\n      setShow(false);\n    }\n  }, [isMobile]);\n\n  return (\n    <SidebarContainer open={show}>\n      {isMobile ? (\n        <>\n          <TitleContainer onClick={handleClick}>\n            <Title>What’s included in this guide</Title>\n            <ChevronButtonIcon openClose={!show} />\n          </TitleContainer>\n          <ListDivider show={show} />\n        </>\n      ) : (\n        <Title>What’s included in this guide</Title>\n      )}\n\n      <BodyDesc show={isMobile ? show : true} fade>\n        <SidebarMenu content={MappedContent} setShowMenu={setShow} />\n      </BodyDesc>\n    </SidebarContainer>\n  );\n};\n\nexport default GuideSidebar;\n","import React, { useRef } from 'react';\nimport { parseFaqsList } from 'common/transformers';\nimport MetaTags from 'core/meta-tags/index';\nimport { graphql } from 'gatsby';\nimport Layout from 'core/layout';\nimport ExpertPageHeader from 'atomic-design/atoms/expert-page-header';\nimport theme from 'styles/theme';\nimport useReadingTime from 'use-reading-time';\nimport useIsMobile from 'hooks/useIsMobile';\nimport FaqsTag from '../components/core/faqs-tags';\nimport FaqSection from 'atomic-design/organisms/faq-section';\n\nimport {\n  GlobalExpertGuideStyle,\n  PillarContent,\n  SidebarContainer,\n  RichTextContainer,\n  ExpertGuidePageSection,\n  Diagonal,\n  NavigationTitle,\n} from 'styles/pages/expert-guides-styles';\n\nimport RichTextWrapper from 'atomic-design/organisms/rich-text-wrapper';\nimport richTextOptions from 'common/rich-text-options';\nimport GuideSidebar from 'components/atomic-design/organisms/guide-sidebar';\nimport NavigationCards from 'atomic-design/molecules/navigation-cards';\nimport PageSection from '../components/atomic-design/atoms/page-section';\n\nexport const query = graphql`\n  query ($slug: String!) {\n    contentfulGuide(slug: { eq: $slug }) {\n      title\n      subtitle\n      slug\n      publishedDate\n      hero {\n        contentful_id\n        title\n        file {\n          url\n        }\n      }\n      tableOfContents {\n        json\n      }\n      body {\n        json\n      }\n      faQs {\n        title\n        items {\n          answer {\n            json\n          }\n          question\n        }\n      }\n    }\n  }\n`;\n\nconst ExpertGuides = ({ pageContext, data, location }) => {\n  const { previous, next } = pageContext;\n  const isMobile = useIsMobile('mobile');\n  const guidePage = data.contentfulGuide;\n  const guideContent = useRef();\n  const { readingTime } = useReadingTime(guideContent);\n  const mockedCategory = { name: 'Guide', slug: 'guide' };\n\n  const faqList = guidePage.faQs && parseFaqsList(guidePage.faQs.items);\n  return (\n    <Layout path={location.pathname} withReadingProgress>\n      <GlobalExpertGuideStyle />\n      <MetaTags\n        title={guidePage.title}\n        description={guidePage.subtitle}\n        charSet=\"utf-8\"\n        image={guidePage.hero.file.url}\n        viewport=\"width=device-width, initial-scale=1\"\n        type=\"website\"\n      />\n      {guidePage.faQs && <FaqsTag list={faqList} />}\n      <ExpertGuidePageSection\n        margin={`${theme.newTheme.spacing(13.5)} 0 0 0`}\n        mobileMargin=\"0 0 0 0\"\n        containerSize=\"fluid\"\n      >\n        <ExpertPageHeader\n          title={guidePage.title}\n          subtitle={guidePage.subtitle}\n          readingTime={readingTime}\n          backgroundImage={guidePage.hero.contentful_id}\n        />\n      </ExpertGuidePageSection>\n      <ExpertGuidePageSection\n        padding={`0 0 ${theme.newTheme.spacing(20)} 0`}\n        mobilePadding=\"0 0 0 0\"\n        mobileMargin=\"0 0 0 0\"\n        containerSize={isMobile ? 'fluid' : 'sm'}\n      >\n        <PillarContent>\n          <SidebarContainer>\n            <GuideSidebar content={guidePage.tableOfContents.json} />\n          </SidebarContainer>\n          <RichTextContainer ref={guideContent}>\n            <RichTextWrapper\n              color={theme.newTheme.color.primary.main}\n              json={{\n                data: guidePage.body.json.data,\n                content: guidePage.body.json.content,\n                nodeType: guidePage.body.json.nodeType,\n              }}\n              options={richTextOptions}\n            />\n            {guidePage.faQs && <FaqSection faqList={faqList} title={guidePage.faQs.title} />}\n          </RichTextContainer>\n        </PillarContent>\n      </ExpertGuidePageSection>\n      <PageSection\n        background={`${theme.newTheme.color.primary.light}20`}\n        margin={`${theme.newTheme.spacing(25)} 0 0 0`}\n        padding={`0 0 ${theme.newTheme.spacing(25)} 0`}\n        mobilePadding={`0 0 ${theme.newTheme.spacing(1)} 0`}\n      >\n        <Diagonal />\n        <NavigationTitle>More guides to read</NavigationTitle>\n        <NavigationCards\n          previous={{ ...previous.node, category: mockedCategory }}\n          previousTo={`/expert-guides/${previous.node.slug}`}\n          next={next ? { ...next.node, category: mockedCategory } : undefined}\n          nextTo={`/expert-guides/${next.node.slug}`}\n          from=\"Guide\"\n          withArrow\n        />\n      </PageSection>\n    </Layout>\n  );\n};\n\nexport default ExpertGuides;\n","import styled from 'styled-components';\n\nexport const FaqsTitle = styled.h2`\n  font-size: ${({ theme }) => theme.newTheme.font.title4.size};\n  line-height: ${({ theme }) => theme.newTheme.font.title4.lineHeight};\n  font-weight: ${({ theme }) => theme.newTheme.font.weight.regular};\n  margin: ${({ theme }) => theme.newTheme.spacing(10)} 0;\n  color: ${({ theme }) => theme.newTheme.color.black};\n\n  width: 80%;\n\n  u {\n    text-decoration: none;\n    display: block;\n  }\n\n  b {\n    background: ${({ color }) => color};\n    -webkit-background-clip: text;\n    -webkit-text-fill-color: transparent;\n  }\n\n  p {\n    margin: 0;\n  }\n\n  @media only screen and (${({ theme }) => theme.newTheme.breakpoints.tablet}) {\n    width: 100%;\n    font-size: ${({ theme }) => theme.newTheme.font.title5.size};\n    line-height: ${({ theme }) => theme.newTheme.font.title5.lineHeight};\n  }\n`;\n\nexport default FaqsTitle;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport Accordion from 'atomic-design/molecules/accordion';\nimport FaqsTitle from './styles';\n\nconst FaqSection = ({ faqList, title }) => {\n  return (\n    <div id=\"faqs\">\n      <FaqsTitle>{title}</FaqsTitle>\n      <Accordion size=\"small\" list={faqList} />\n    </div>\n  );\n};\n\nFaqSection.propTypes = {\n  faqList: PropTypes.array.isRequired,\n  title: PropTypes.string.isRequired,\n};\n\nexport default FaqSection;\n"],"sourceRoot":""}