{"version":3,"file":"5076-260682252f9403af58f9.js","mappings":"yJAMO,MAAMA,GAAcC,E,QAAAA,IAAG,4E,kGCA9B,MAAMC,EAAOC,EAAAA,GAAOC,IAAGC,WAAA,CAAAC,YAAA,qBAAAC,YAAA,eAAVJ,CAAU,MACjBK,GAAgBP,EAAAA,EAAAA,IAAG,2nCAEHQ,EAAAA,EAAMC,UAAUC,IAC3BF,EAAAA,EAAMG,QAAQC,QAKnBC,EAAAA,EAAAA,IAAW,aAQOL,EAAAA,EAAMG,QAAQG,SAUVN,EAAAA,EAAMG,QAAQC,OACzBJ,EAAAA,EAAMG,QAAQG,SAKDN,EAAAA,EAAMG,QAAQC,OACzBJ,EAAAA,EAAMG,QAAQG,SASLN,EAAAA,EAAMG,QAAQC,OACzBJ,EAAAA,EAAMG,QAAQG,SAKDN,EAAAA,EAAMG,QAAQC,OACzBJ,EAAAA,EAAMG,QAAQG,SAMVN,EAAAA,EAAMG,QAAQC,OAIXJ,EAAAA,EAAMG,QAAQC,OASZJ,EAAAA,EAAMG,QAAQG,SAKZN,EAAAA,EAAMG,QAAQG,SAQhBN,EAAAA,EAAMG,QAAQG,SAKZN,EAAAA,EAAMG,QAAQG,SAMrBN,EAAAA,EAAMG,QAAQG,SAIXN,EAAAA,EAAMG,QAAQG,SAMdN,EAAAA,EAAMG,QAAQG,SAWhBN,EAAAA,EAAMG,QAAQG,UAOhCC,GAAgBf,EAAAA,EAAAA,IAAG,wnDAMnBa,EAAAA,EAAAA,IAAW,aAQOL,EAAAA,EAAMG,QAAQG,SAMzBN,EAAAA,EAAMG,QAAQC,OACHJ,EAAAA,EAAMG,QAAQC,OAOdJ,EAAAA,EAAMG,QAAQC,OACVJ,EAAAA,EAAMG,QAAQC,OACzBJ,EAAAA,EAAMG,QAAQG,SAKLN,EAAAA,EAAMG,QAAQC,OACVJ,EAAAA,EAAMG,QAAQC,OACzBJ,EAAAA,EAAMG,QAAQG,SASTN,EAAAA,EAAMG,QAAQC,OACVJ,EAAAA,EAAMG,QAAQC,OACzBJ,EAAAA,EAAMG,QAAQG,SAKLN,EAAAA,EAAMG,QAAQC,OACVJ,EAAAA,EAAMG,QAAQC,OACzBJ,EAAAA,EAAMG,QAAQG,SAMVN,EAAAA,EAAMG,QAAQC,OAIXJ,EAAAA,EAAMG,QAAQC,OAK3BJ,EAAAA,EAAMG,QAAQG,SACHN,EAAAA,EAAMG,QAAQG,SAOVN,EAAAA,EAAMG,QAAQG,SACzBN,EAAAA,EAAMG,QAAQC,OAMDJ,EAAAA,EAAMG,QAAQG,SACzBN,EAAAA,EAAMG,QAAQC,OAULJ,EAAAA,EAAMG,QAAQG,SACzBN,EAAAA,EAAMG,QAAQC,OAKDJ,EAAAA,EAAMG,QAAQG,SACzBN,EAAAA,EAAMG,QAAQC,OAMVJ,EAAAA,EAAMG,QAAQG,SAIXN,EAAAA,EAAMG,QAAQG,UAgDlCE,GAAmBhB,EAAAA,EAAAA,IAAG,mwCAMtBa,EAAAA,EAAAA,IAAW,aAQOL,EAAAA,EAAMC,UAAUC,IAM3BF,EAAAA,EAAMG,QAAQC,OACHJ,EAAAA,EAAMG,QAAQC,OAGfJ,EAAAA,EAAMG,QAAQC,OAKxBJ,EAAAA,EAAMG,QAAQG,SACHN,EAAAA,EAAMG,QAAQG,SAMrBN,EAAAA,EAAMG,QAAQC,OAMZJ,EAAAA,EAAMG,QAAQC,OAShBJ,EAAAA,EAAMG,QAAQC,OAKZJ,EAAAA,EAAMG,QAAQC,OAMVJ,EAAAA,EAAMG,QAAQG,SAIXN,EAAAA,EAAMC,UAAUC,IAehBF,EAAAA,EAAMC,UAAUC,IACpBF,EAAAA,EAAMC,UAAUC,IAUVF,EAAAA,EAAMC,UAAUC,IACpBF,EAAAA,EAAMC,UAAUC,IAadF,EAAAA,EAAMC,UAAUC,IACpBF,EAAAA,EAAMC,UAAUC,IASVF,EAAAA,EAAMC,UAAUC,IACpBF,EAAAA,EAAMC,UAAUC,KASlCO,EAAOf,EAAAA,GAAOC,IAAGC,WAAA,CAAAC,YAAA,qBAAAC,YAAA,eAAVJ,CAAU,gGACnBW,EAAAA,EAAAA,IAAW,aAIJL,EAAAA,EAAMC,UAAUC,KAQrBQ,EAAQhB,EAAAA,GAAOC,IAAGC,WAAA,CAAAC,YAAA,sBAAAC,YAAA,eAAVJ,CAAU,0DACpBW,EAAAA,EAAAA,IAAW,cASTM,GAAiBnB,EAAAA,EAAAA,IAAG,6mBAKfQ,EAAAA,EAAMG,QAAQC,OAIZJ,EAAAA,EAAMG,QAAQG,SAGvBb,EAcIgB,EAIAC,EAQED,EAIAC,EAWFD,EAIAC,EAOED,EAIAC,GAOJE,EAAOlB,EAAAA,GAAOC,IAAGC,WAAA,CAAAC,YAAA,qBAAAC,YAAA,eAAVJ,CAAU,iJAejBmB,EAASnB,EAAAA,GAAOoB,OAAMlB,WAAA,CAAAC,YAAA,uBAAAC,YAAA,eAAbJ,CAAa,gcACxBW,EAAAA,EAAAA,IAAW,0CAGGU,EAAAA,EAAAA,IAAM,GAAI,KAChBA,EAAAA,EAAAA,IAAM,GAAI,IAMlBtB,EACEuB,EAAAA,EAAMC,eAAeC,QAEVH,EAAAA,EAAAA,IAAM,GAAI,KACRA,EAAAA,EAAAA,IAAM,GAAI,KAiBlBI,EAAAA,EAAAA,IAAMC,EAAAA,GAAOC,cAClBhB,EAAAA,EAAAA,IAAW,qDAgBbiB,IAAkB,IAAjB,SAAEC,GAAUD,EACb,OAAQC,GACJ,IAAK,WACD,OAAOZ,EACX,IAAK,QACD,OAAOZ,EACX,IAAK,UACD,OAAOQ,EACX,IAAK,cACD,OAAOC,EAGf,IAGEgB,EAAc9B,EAAAA,GAAOoB,OAAMlB,WAAA,CAAAC,YAAA,4BAAAC,YAAA,eAAbJ,CAAa,sXAMtBqB,EAAAA,EAAAA,IAAM,GAAI,KACTA,EAAAA,EAAAA,IAAM,GAAI,IAEKf,EAAAA,EAAMG,QAAQC,QAqB3BW,EAAAA,EAAAA,IAAM,GAAI,KAIbI,EAAAA,EAAAA,IAAMC,EAAAA,GAAOC,cAClBhB,EAAAA,EAAAA,IAAW,YAAa,MAOxBoB,EAAc/B,EAAAA,GAAOC,IAAGC,WAAA,CAAAC,YAAA,4BAAAC,YAAA,eAAVJ,CAAU,oWAC1BW,EAAAA,EAAAA,IAAW,aAEuBL,EAAAA,EAAMG,QAAQC,QAErCW,EAAAA,EAAAA,IAAM,GAAI,KACdA,EAAAA,EAAAA,IAAM,GAAI,KACTA,EAAAA,EAAAA,IAAM,GAAI,IAKlBS,EAOAA,GACaT,EAAAA,EAAAA,IAAM,GAAI,IAIrBS,GACaT,EAAAA,EAAAA,IAAM,GAAI,KAIlBI,EAAAA,EAAAA,IAAMC,EAAAA,GAAOC,cACPN,EAAAA,EAAAA,IAAM,GAAI,KAoFdW,EAAe,CACxBhB,QACAc,cACAX,SACAc,WArFejC,EAAAA,GAAOC,IAAGC,WAAA,CAAAC,YAAA,2BAAAC,YAAA,eAAVJ,CAAU,+XACzBW,EAAAA,EAAAA,IAAW,aAKXmB,EAKEA,EAKFA,EAKEA,GAKKL,EAAAA,EAAAA,IAAMC,EAAAA,GAAOC,aAGlBG,GAyDFC,cACAG,UArDclC,EAAAA,GAAOC,IAAGC,WAAA,CAAAC,YAAA,0BAAAC,YAAA,eAAVJ,CAAU,qpBACxBW,EAAAA,EAAAA,IAAW,aASuBL,EAAAA,EAAMG,QAAQC,OAEhDoB,EAOAA,EAKEA,EAKFA,EAKEA,GAKKL,EAAAA,EAAAA,IAAMC,EAAAA,GAAOC,aAGlBG,GAYFZ,OACAnB,OACAgB,O,0GChvBJ,MAAMI,EAASS,IAAuI,IAAtI,SAAEC,EAAQ,UAAEM,EAAS,SAAEC,EAAQ,MAAEC,EAAK,SAAEC,GAAW,EAAK,KAAEC,EAAO,SAAQ,QAAEC,EAAO,KAAEC,EAAI,aAAEC,EAAe,WAAYC,GAAYf,EAC7I,OAAQgB,EAAAA,cAAoBC,EAAAA,GAAW,CAAEC,eAAgB,cACrDF,EAAAA,cAAoBZ,EAAAA,EAAab,OAAQ,CAAEgB,UAAWA,EAAWN,SAAUA,EAAUO,SAAUA,EAAUG,KAAMA,EAAMC,QAASA,EAAS,iBAAkBF,EAAU,gBAAiBT,KAAac,GAChL,aAAbd,GAA4Be,EAAAA,cAAoBZ,EAAAA,EAAajB,KAAM,MAAMgC,EAAAA,EAAAA,GAAiBC,EAAAA,EAAWC,QACrGL,EAAAA,cAAoBZ,EAAAA,EAAajC,KAAM,KAAMsC,GAC7CI,EAAQG,EAAAA,cAAoBZ,EAAAA,EAAad,KAAM,CAAE,gBAAiBwB,GAAgBD,GAAsB,aAAbZ,EAA2Be,EAAAA,cAAoBZ,EAAAA,EAAahB,MAAO,MAAM+B,EAAAA,EAAAA,GAAiBC,EAAAA,EAAWE,aAAgB,MAAM,EAE5NC,EAAaC,IAAiF,IAAhF,SAAEvB,EAAQ,UAAEM,EAAS,MAAEE,EAAK,KAAEI,EAAI,aAAEC,EAAe,WAAYC,GAAYS,EAC3F,OAAQR,EAAAA,cAAoBZ,EAAAA,EAAab,OAAQ,CAAEgB,UAAWA,EAAWN,SAAUA,EAAUwB,GAAI,UAAWV,GAC3F,aAAbd,GAA4Be,EAAAA,cAAoBZ,EAAAA,EAAajB,KAAM,MAAMgC,EAAAA,EAAAA,GAAiBC,EAAAA,EAAWC,QACrGL,EAAAA,cAAoBZ,EAAAA,EAAajC,KAAM,KAAMsC,GAC7CI,EAAQG,EAAAA,cAAoBZ,EAAAA,EAAad,KAAM,CAAE,gBAAiBwB,GAAgBD,GAAsB,aAAbZ,EAA2Be,EAAAA,cAAoBZ,EAAAA,EAAahB,MAAO,MAAM+B,EAAAA,EAAAA,GAAiBC,EAAAA,EAAWE,aAAgB,KAAK,EAEvNI,EAAaC,IAAyG,IAAxG,SAAE1B,EAAQ,UAAEM,EAAS,KAAEqB,EAAI,OAAEC,EAAS,QAAO,MAAEpB,EAAK,KAAEI,EAAI,aAAEC,EAAe,WAAYC,GAAYY,EACnH,OAAQX,EAAAA,cAAoBC,EAAAA,GAAW,CAAEC,eAAgB,cACrDF,EAAAA,cAAoBZ,EAAAA,EAAab,OAAQ,CAAEgB,UAAWA,EAAWkB,GAAI,IAAKxB,SAAUA,EAAU2B,KAAMA,EAAMC,OAAQA,KAAWd,GAC5G,aAAbd,GAA4Be,EAAAA,cAAoBZ,EAAAA,EAAajB,KAAM,MAAMgC,EAAAA,EAAAA,GAAiBC,EAAAA,EAAWC,QACrGL,EAAAA,cAAoBZ,EAAAA,EAAajC,KAAM,KAAMsC,GAC7CI,EAAQG,EAAAA,cAAoBZ,EAAAA,EAAad,KAAM,CAAE,gBAAiBwB,GAAgBD,GAAsB,aAAbZ,EAA2Be,EAAAA,cAAoBZ,EAAAA,EAAahB,MAAO,MAAM+B,EAAAA,EAAAA,GAAiBC,EAAAA,EAAWE,aAAgB,MAAM,EAE5NpB,EAAc4B,IAAqD,IAApD,UAAEC,EAAS,SAAEvB,EAAQ,QAAEI,KAAYG,GAAYe,EAChE,OAAQd,EAAAA,cAAoBC,EAAAA,GAAW,CAAEC,eAAgB,cACrDF,EAAAA,cAAoBZ,EAAAA,EAAaF,YAAa,CAAE,aAAc6B,EAAWvB,SAAUA,EAAUI,QAASA,KAAYG,GAC9GC,EAAAA,cAAoBZ,EAAAA,EAAaD,YAAa,KAC1Ca,EAAAA,cAAoBZ,EAAAA,EAAaC,WAAY,MACzCc,EAAAA,EAAAA,GAAiBC,EAAAA,EAAWY,SAC5BhB,EAAAA,cAAoBZ,EAAAA,EAAaE,UAAW,SAAS,C,oEC3BzE,MAoBA,EAH4B,CACxB2B,U,QAlBc7D,GAAOC,IAAGC,WAAA,CAAAC,YAAA,iCAAAC,YAAA,gBAAVJ,CAAU,6LACxB8D,EAAAA,IAGKzC,EAAAA,EAAAA,IAAM,GAAI,KAIPA,EAAAA,EAAAA,IAAM,GAAI,MCHtB,EANuB0C,GACXnB,EAAAA,cAAoBoB,EAAEH,UAAW,KACrCjB,EAAAA,cAAoB,OAAQ,KAAMmB,EAAME,SACxCrB,EAAAA,cAAoB,OAAQ,CAAE,eAAgB,SAC9CA,EAAAA,cAAoB,OAAQ,KAAMmB,EAAMG,O,4GCChD,MAoCA,EAJuB,CACnBL,UAjCc7D,EAAAA,GAAOC,IAAGC,WAAA,CAAAC,YAAA,4BAAAC,YAAA,gBAAVJ,CAAU,gDACxBmE,EAAAA,GAGSC,EAAAA,EAAOC,eAAiB,GA8BjClD,OA3BWnB,EAAAA,GAAOoB,OAAMlB,WAAA,CAAAC,YAAA,yBAAAC,YAAA,gBAAbJ,CAAa,+UACxBH,EAAAA,GACAc,EAAAA,EAAAA,IAAW,sBACXmD,EAAAA,GAQkCxD,EAAAA,EAAMG,QAAQG,SACzBN,EAAAA,EAAMG,QAAQC,OAQJJ,EAAAA,EAAMG,QAAQG,U,8EC9BnD,MA0CA,EA1CiBgB,IAAyB,IAAxB,KAAEW,EAAO,UAAUX,EACjC,MAAM0C,EAAM1B,EAAAA,OAAa,MACzB,OAAQA,EAAAA,cAAoBoB,EAAAA,EAAEH,UAAW,KACrCjB,EAAAA,cAAoBC,EAAAA,GAAW,CAAEC,eAAgB,cAC7CF,EAAAA,cAAoBoB,EAAAA,EAAE7C,OAAQ,CAAEmD,IAAKA,EAAK9B,QAASA,KAC9B,WAATD,EAOpB,WACI,MAAMgC,EAAWC,SAASC,eAAe,QACpCF,KAGLG,EAAAA,EAAAA,IAAeH,GACfI,EAAUJ,GACd,CAboBK,GAcpB,WAAuB,IAAAC,EAAAC,EACnB,IAAIC,EAAuB,QAAdF,EAAGP,EAAIL,eAAO,IAAAY,OAAA,EAAXA,EAAaG,QAAQ,iCAErB,IAAAC,EAAXF,IACDA,EAAuB,QAAdE,EAAGX,EAAIL,eAAO,IAAAgB,OAAA,EAAXA,EAAaD,QAAQ,YAErC,IAAIT,EAAoB,QAAZO,EAAGC,SAAS,IAAAD,OAAA,EAATA,EAAWI,mBAEX,IAAAC,EAAAC,EAAVb,IACDA,EAAoB,QAAZY,EAAGJ,SAAS,IAAAI,GAAe,QAAfC,EAATD,EAAWE,qBAAa,IAAAD,OAAf,EAATA,EAA0BF,oBAEpCX,KAGLG,EAAAA,EAAAA,IAAeH,GACfI,EAAUJ,GACd,CA3BoBe,EACJ,GACU,WAAT/C,EAAoBK,EAAAA,cAAoBA,EAAAA,SAAgB,KAAM,wBAA0BA,EAAAA,cAAoBA,EAAAA,SAAgB,KAAM,2BA0BnJ,SAAS+B,EAAUY,GAAI,IAAAC,EAEP,QAAZA,EADkBD,EAAGE,iBAAiB,UAC5B,UAAE,IAAAD,GAAZA,EAAcE,OAClB,E,kGCtCJ,MAAM7B,EAAY7D,EAAAA,GAAO2F,QAAOzF,WAAA,CAAAC,YAAA,kCAAAC,YAAA,eAAdJ,CAAc,opCACPqB,EAAAA,EAAAA,IAAM,GAAI,KACPA,EAAAA,EAAAA,IAAM,GAAI,IAElBf,EAAAA,EAAMsF,KAAKhF,SACfN,EAAAA,EAAMG,QAAQC,OACVJ,EAAAA,EAAMsF,KAAKlF,OAQbJ,EAAAA,EAAMG,QAAQG,SACVN,EAAAA,EAAMsF,KAAKhF,SACfN,EAAAA,EAAMG,QAAQC,OACVJ,EAAAA,EAAMsF,KAAKlF,OAIfJ,EAAAA,EAAMG,QAAQC,OACVJ,EAAAA,EAAMsF,KAAKlF,OACfJ,EAAAA,EAAMG,QAAQG,SACVN,EAAAA,EAAMsF,KAAKhF,UAYpBiF,EAAAA,EAAAA,IAAKnE,EAAAA,GAAOoE,SAQZD,EAAAA,EAAAA,IAAKnE,EAAAA,GAAOoE,SASZD,EAAAA,EAAAA,IAAKnE,EAAAA,GAAOoE,SAoDzB,EAN6B,CACzBjC,YACAkC,MArBU/F,EAAAA,GAAOC,IAAGC,WAAA,CAAAC,YAAA,8BAAAC,YAAA,eAAVJ,CAAU,2IAMpB6D,GAgBAmC,SAZahG,EAAAA,GAAOC,IAAGC,WAAA,CAAAC,YAAA,iCAAAC,YAAA,eAAVJ,CAAU,QACvBmE,EAAAA,IAYA8B,YAVgBjG,EAAAA,GAAOoB,OAAMlB,WAAA,CAAAC,YAAA,oCAAAC,YAAA,eAAbJ,CAAa,0BAC7BH,EAAAA,G,gDCnGJ,MAAMqG,EAAmBtD,EAAAA,cAAoB,CAAC,G,wBCG9C,MAAMuD,EAAiBvD,EAAAA,YAAiB,CAACmB,EAAOO,KAC5C,MAAM,SAAE8B,EAAQ,OAAEC,EAAS,UAAS,MAAEC,EAAQ,OAAM,QAAEC,EAAU,OAAM,eAAEC,KAAmB7D,GAAeoB,EACpG0C,EDKwB7D,EAAAA,WAAiBsD,GCJ/C,OAAQtD,EAAAA,cAAoBoB,EAAAA,EAAEH,UAAW,CAAES,IAAKA,EAAKoC,GAAID,EAAUC,GAAI,6BAA8BD,EAAUC,GAAI,aAAcJ,EAAO,eAAgBC,EAAS,iBAAkBC,KAAmB7D,GAClMC,EAAAA,cAAoBoB,EAAAA,EAAE+B,MAAO,KACxBS,EAAuD5D,EAAAA,cAAoBoB,EAAAA,EAAEiC,YAAa,CAAE,aAAc,2BAAzFrD,EAAAA,cAAoB+D,EAAAA,EAAU,MAGrC,cAAXN,EACOD,EAEJxD,EAAAA,cAAoBoB,EAAAA,EAAEgC,SAAU,KAAMI,IACjD,IAEJD,EAAehG,YAAc,iBAC7B,S","sources":["webpack://royal-college-radiologists/./src/helpers/global.ts","webpack://royal-college-radiologists/./src/stories/Components/Buttons/GeneralButton/Button.styles.tsx","webpack://royal-college-radiologists/./src/stories/Components/Buttons/GeneralButton/Button.tsx","webpack://royal-college-radiologists/./src/stories/Components/General/CarouselCount/CarouselCount.styles.ts","webpack://royal-college-radiologists/./src/stories/Components/General/CarouselCount/CarouselCount.tsx","webpack://royal-college-radiologists/./src/stories/Components/General/SkipLink/SkipLink.styles.ts","webpack://royal-college-radiologists/./src/stories/Components/General/SkipLink/SkipLink.tsx","webpack://royal-college-radiologists/./src/stories/Components/Global/SectionWrapper/SectionWrapper.styles.ts","webpack://royal-college-radiologists/./src/hoc/withBaseProps.tsx","webpack://royal-college-radiologists/./src/stories/Components/Global/SectionWrapper/SectionWrapper.tsx"],"sourcesContent":["import { css } from 'styled-components';\r\nexport default {\r\n    navHeight: 107,\r\n    navHeightTablet: 80,\r\n    navHeightMobile: 59,\r\n};\r\nexport const ButtonReset = css `\r\n  border: none;\r\n  outline: none;\r\n  padding: 0px;\r\n  background: none;\r\n  border-radius: 0px;\r\n`;\r\n","import { transition } from '@helpers/animate';\r\nimport brand from '@helpers/brand';\r\nimport { fluid } from '@helpers/fluid';\r\nimport fonts from '@helpers/fonts';\r\nimport { Device, until } from '@helpers/media';\r\nimport styled, { css } from 'styled-components';\r\nconst Text = styled.div ``;\r\nconst PrimaryStyles = css `\r\n  border: 0;\r\n  background-color: ${brand.secondary.red};\r\n  color: ${brand.primary.purple};\r\n  border-radius: 1000000px;\r\n  overflow: hidden;\r\n\r\n  &:before {\r\n    ${transition('transform')};\r\n\r\n    content: '';\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    width: 100%;\r\n    height: 100%;\r\n    background-color: ${brand.primary.offWhite};\r\n    border-radius: 1000000px;\r\n    transform: translateX(calc(-100% - 2px));\r\n  }\r\n\r\n  [data-variant='light'] & {\r\n    span& {\r\n      button.focus-ring &,\r\n      button:hover &,\r\n      a.focus-ring & {\r\n        background-color: ${brand.primary.purple};\r\n        color: ${brand.primary.offWhite};\r\n      }\r\n\r\n      @media (hover: hover) {\r\n        a:hover & { \r\n          background-color: ${brand.primary.purple};\r\n          color: ${brand.primary.offWhite};\r\n        }\r\n      }\r\n    }\r\n\r\n    &:not(span) {\r\n      &.focus-ring,\r\n      &:hover,\r\n      &:active {\r\n        background-color: ${brand.primary.purple};\r\n        color: ${brand.primary.offWhite};\r\n      }\r\n\r\n      @media (hover: hover) {\r\n        &:hover { \r\n          background-color: ${brand.primary.purple};\r\n          color: ${brand.primary.offWhite};\r\n        }\r\n      }\r\n    }\r\n\r\n    &.focus-ring {\r\n      outline-color: ${brand.primary.purple};\r\n    }\r\n\r\n    &:before {\r\n      background-color: ${brand.primary.purple};\r\n    }\r\n  }\r\n\r\n  [data-variant='dark'] & {\r\n    span& {\r\n      button.focus-ring &,\r\n      button:hover &,\r\n      a.focus-ring & {\r\n        background-color: ${brand.primary.offWhite};\r\n      }\r\n\r\n      @media (hover: hover) {\r\n        a:hover & { \r\n          background-color: ${brand.primary.offWhite};\r\n        }\r\n      }\r\n    }\r\n\r\n    &:not(span) {\r\n      &.focus-ring,\r\n      &:active {\r\n        background-color: ${brand.primary.offWhite};\r\n      }\r\n\r\n      @media (hover: hover) {\r\n        &:hover { \r\n          background-color: ${brand.primary.offWhite};\r\n        }\r\n      }\r\n    }\r\n\r\n    &.focus-ring {\r\n      outline-color: ${brand.primary.offWhite};\r\n    }\r\n\r\n    &:before {\r\n      background-color: ${brand.primary.offWhite};\r\n    }\r\n  }\r\n\r\n  @media (hover: hover) {\r\n    &:hover { \r\n      background-color: ${brand.primary.offWhite};\r\n\r\n      &:before {\r\n        transform: translateX(0);\r\n      }\r\n    }\r\n  }\r\n\r\n  &.focus-ring,\r\n  &:active,\r\n  &[data-toggle-on='true'] {\r\n    background-color: ${brand.primary.offWhite};\r\n\r\n    &:before {\r\n      transform: translateX(0);\r\n    }\r\n  }\r\n`;\r\nconst OutlineStyles = css `\r\n  background-color: transparent;\r\n  border-radius: 1000000px;\r\n  overflow: hidden;\r\n\r\n  &:before {\r\n    ${transition('transform')};\r\n\r\n    content: '';\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    width: 100%;\r\n    height: 100%;\r\n    background-color: ${brand.primary.offWhite};\r\n    border-radius: 1000000px;\r\n    transform: translateX(calc(-100% - 2px));\r\n  }\r\n\r\n  [data-variant='light'] & {\r\n    color: ${brand.primary.purple};\r\n    border: 1px solid ${brand.primary.purple};\r\n\r\n    span& {\r\n      button.focus-ring &,\r\n      button:hover &,\r\n      a.focus-ring &,\r\n      a[data-toggle-on='true'] & {\r\n        border-color: ${brand.primary.purple};\r\n        background-color: ${brand.primary.purple};\r\n        color: ${brand.primary.offWhite};\r\n      }\r\n\r\n      @media (hover: hover) {\r\n        a:hover & { \r\n          border-color: ${brand.primary.purple};\r\n          background-color: ${brand.primary.purple};\r\n          color: ${brand.primary.offWhite};\r\n        }\r\n      }\r\n    }\r\n\r\n    &:not(span) {\r\n      &.focus-ring,\r\n      &:active,\r\n      &[data-toggle-on='true'] {\r\n        border-color: ${brand.primary.purple};\r\n        background-color: ${brand.primary.purple};\r\n        color: ${brand.primary.offWhite};\r\n      }\r\n\r\n      @media (hover: hover) {\r\n        &:hover { \r\n          border-color: ${brand.primary.purple};\r\n          background-color: ${brand.primary.purple};\r\n          color: ${brand.primary.offWhite};\r\n        }\r\n      }\r\n    }\r\n\r\n    &.focus-ring {\r\n      outline-color: ${brand.primary.purple};\r\n    }\r\n\r\n    &:before {\r\n      background-color: ${brand.primary.purple};\r\n    }\r\n  }\r\n\r\n  [data-variant='dark'] & {\r\n    color: ${brand.primary.offWhite};\r\n    border: 1px solid ${brand.primary.offWhite};\r\n\r\n    span& {\r\n      button.focus-ring &,\r\n      \r\n      a.focus-ring &,\r\n      a[data-toggle-on='true'] & {\r\n        background-color: ${brand.primary.offWhite};\r\n        color: ${brand.primary.purple};\r\n      }\r\n\r\n      @media (hover: hover) {\r\n        button:hover &,\r\n        a:hover & { \r\n          background-color: ${brand.primary.offWhite};\r\n          color: ${brand.primary.purple};\r\n        }\r\n      }\r\n    }\r\n\r\n    &:not(span) {\r\n      &.focus-ring,\r\n      &:hover,\r\n      &:active,\r\n      &[data-toggle-on='true'] {\r\n        background-color: ${brand.primary.offWhite};\r\n        color: ${brand.primary.purple};\r\n      }\r\n\r\n      @media (hover: hover) {\r\n        &:hover { \r\n          background-color: ${brand.primary.offWhite};\r\n          color: ${brand.primary.purple};\r\n        }\r\n      }\r\n    }\r\n\r\n    &.focus-ring {\r\n      outline-color: ${brand.primary.offWhite};\r\n    }\r\n\r\n    &:before {\r\n      background-color: ${brand.primary.offWhite};\r\n    }\r\n  }\r\n\r\n  &.focus-ring {\r\n    outline: auto;\r\n    outline-offset: 3px;\r\n    outline-style: solid;\r\n    outline-width: 2px;\r\n  }\r\n\r\n  span& {\r\n    button.focus-ring &,    \r\n    a.focus-ring &,\r\n    a[data-toggle-on='true'] & {\r\n      &::before {\r\n        transform: translateX(0);\r\n      }\r\n    }\r\n\r\n    @media (hover: hover) {\r\n      button:hover &,\r\n      a:hover & { \r\n        &::before {\r\n          transform: translateX(0);\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  &:not(span) {\r\n    &.focus-ring,\r\n    &:active,\r\n    &[data-toggle-on='true'] {\r\n      &::before {\r\n        transform: translateX(0);\r\n      }\r\n    }\r\n\r\n    @media (hover: hover) {\r\n      &:hover { \r\n        &::before {\r\n          transform: translateX(0);\r\n        }\r\n      }\r\n    }\r\n  }\r\n`;\r\nconst OutlineAltStyles = css `\r\n  background-color: transparent;\r\n  border-radius: 1000000px;\r\n  overflow: hidden;\r\n\r\n  &:before {\r\n    ${transition('transform')};\r\n\r\n    content: '';\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    width: 100%;\r\n    height: 100%;\r\n    background-color: ${brand.secondary.red};\r\n    border-radius: 1000000px;\r\n    transform: translateX(calc(-100% - 2px));\r\n  }\r\n\r\n  [data-variant='light'] & {\r\n    color: ${brand.primary.purple};\r\n    border: 1px solid ${brand.primary.purple};\r\n\r\n    &.focus-ring {\r\n      outline-color: ${brand.primary.purple};\r\n    }\r\n  }\r\n\r\n  [data-variant='dark'] & {\r\n    color: ${brand.primary.offWhite};\r\n    border: 1px solid ${brand.primary.offWhite};\r\n\r\n    span& {\r\n      button.focus-ring &,      \r\n      a.focus-ring &,\r\n      a[data-toggle-on='true'] & {\r\n        color: ${brand.primary.purple};\r\n      }\r\n\r\n      @media (hover: hover) {\r\n        button:hover &,\r\n        a:hover & { \r\n          color: ${brand.primary.purple};\r\n        }\r\n      }\r\n    }\r\n\r\n    &:not(span) {\r\n      &.focus-ring,\r\n      &:active,\r\n      &[data-toggle-on='true'] {\r\n        color: ${brand.primary.purple};\r\n      }\r\n\r\n      @media (hover: hover) {\r\n        &:hover { \r\n          color: ${brand.primary.purple};\r\n        }\r\n      }\r\n    }\r\n\r\n    &.focus-ring {\r\n      outline-color: ${brand.primary.offWhite};\r\n    }\r\n\r\n    &:before {\r\n      background-color: ${brand.secondary.red};\r\n    }\r\n  }\r\n\r\n  &.focus-ring {\r\n    outline: auto;\r\n    outline-offset: 3px;\r\n    outline-style: solid;\r\n    outline-width: 2px;\r\n  }\r\n\r\n  span& {\r\n    button.focus-ring &,    \r\n    a.focus-ring &,\r\n    a[data-toggle-on='true'] & {\r\n      background-color: ${brand.secondary.red};\r\n      border-color: ${brand.secondary.red};\r\n\r\n      &::before {\r\n        transform: translateX(0);\r\n      }\r\n    }\r\n\r\n    @media (hover: hover) {\r\n      button:hover &,\r\n      a:hover & { \r\n        background-color: ${brand.secondary.red};\r\n        border-color: ${brand.secondary.red};\r\n\r\n        &::before {\r\n          transform: translateX(0);\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  &:not(span) {\r\n    &.focus-ring,\r\n    &:active,\r\n    &[data-toggle-on='true'] {\r\n      background-color: ${brand.secondary.red};\r\n      border-color: ${brand.secondary.red};\r\n\r\n      &::before {\r\n        transform: translateX(0);\r\n      }\r\n    }\r\n\r\n    @media (hover: hover) {\r\n      &:hover { \r\n        background-color: ${brand.secondary.red};\r\n        border-color: ${brand.secondary.red};\r\n\r\n        &::before {\r\n          transform: translateX(0);\r\n        }\r\n      }\r\n    }\r\n  }\r\n`;\r\nconst Wave = styled.div `\r\n  ${transition('max-width')};\r\n\r\n  overflow: hidden;\r\n  max-width: 0;\r\n  color: ${brand.secondary.red};\r\n\r\n  svg {\r\n    display: block;\r\n    margin-right: 5px;\r\n    height: 30px;\r\n  }\r\n`;\r\nconst Arrow = styled.div `\r\n  ${transition('transform')};\r\n\r\n  margin: 0 0 0 5px;\r\n\r\n  svg {\r\n    display: block;\r\n    height: 12px;\r\n  }\r\n`;\r\nconst TextOnlyStyles = css `\r\n  display: inline-flex;\r\n  align-items: center;\r\n  border: 1px solid transparent;\r\n  background: none;\r\n  color: ${brand.primary.purple};\r\n  padding: 0;\r\n\r\n  [data-variant='dark'] & {\r\n    color: ${brand.primary.offWhite};\r\n  }\r\n\r\n  ${Text} {\r\n    margin-bottom: 2px;\r\n  }\r\n\r\n  &.focus-ring {\r\n    outline: auto;\r\n    outline-offset: 3px;\r\n    outline-style: solid;\r\n    outline-width: 2px;\r\n  }\r\n\r\n  span& {\r\n    button.focus-ring &,\r\n    a.focus-ring & {\r\n      ${Wave} {\r\n        max-width: 50px;\r\n      }\r\n\r\n      ${Arrow} {\r\n        transform: translateX(15%);\r\n      }\r\n    }\r\n\r\n    @media (hover: hover) {\r\n      button:hover &,\r\n      a:hover & { \r\n        ${Wave} {\r\n          max-width: 50px;\r\n        }\r\n\r\n        ${Arrow} {\r\n          transform: translateX(15%);\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  &:not(span) {\r\n    &:hover,\r\n    &:active,\r\n    &.focus-ring {\r\n      ${Wave} {\r\n        max-width: 50px;\r\n      }\r\n\r\n      ${Arrow} {\r\n        transform: translateX(15%);\r\n      }\r\n    }\r\n\r\n    @media (hover: hover) {\r\n      &:hover { \r\n        ${Wave} {\r\n          max-width: 50px;\r\n        }\r\n\r\n        ${Arrow} {\r\n          transform: translateX(15%);\r\n        }\r\n      }\r\n    }\r\n  }\r\n`;\r\nconst Icon = styled.div `\r\n  display: inline-flex;\r\n  align-items: center;\r\n  margin: 0 0 0 8px;\r\n\r\n  svg {\r\n    max-height: 24px;\r\n    width: 20px;\r\n  }\r\n\r\n  &[data-position='left'] {\r\n    order: -1;\r\n    margin: 0 8px 0 0;\r\n  }\r\n`;\r\nconst Button = styled.button `\r\n  ${transition('color, background-color, border-color')};\r\n\r\n  display: inline-flex;\r\n  padding: 10px ${fluid(20, 25)} 12px;\r\n  height: ${fluid(46, 48)};\r\n  user-select: none;\r\n  text-decoration: none;\r\n  position: relative;\r\n  align-items: center;\r\n\r\n  ${Text} {\r\n    ${fonts.graphikCompact.medium};\r\n\r\n    font-size: ${fluid(18, 20)};\r\n    line-height: ${fluid(24, 26)};\r\n    display: inline-block;\r\n    vertical-align: middle;\r\n    position: relative;\r\n    z-index: 2;\r\n  }\r\n\r\n  &:disabled {\r\n    opacity: 0.66;\r\n    pointer-events: none;\r\n\r\n    &:hover {\r\n      opacity: 0.66;\r\n    }\r\n  }\r\n\r\n  /* Mobile click styles - button should mimic press */\r\n  @media ${until(Device.TabletLarge)} {\r\n    ${transition('color, background-color, border-color, transform')};\r\n\r\n    span& {\r\n      button:active &,\r\n      a:active & {\r\n        transform: translateY(1.5px);\r\n      }\r\n    }\r\n\r\n    &:not(span) {\r\n      &:active {\r\n        transform: translateY(1.5px);\r\n      }\r\n    }\r\n  }\r\n\r\n  ${({ branding }) => {\r\n    switch (branding) {\r\n        case 'textOnly':\r\n            return TextOnlyStyles;\r\n        case 'solid':\r\n            return PrimaryStyles;\r\n        case 'outline':\r\n            return OutlineStyles;\r\n        case 'outline-alt':\r\n            return OutlineAltStyles;\r\n        default:\r\n            break;\r\n    }\r\n}}\r\n`;\r\nconst ArrowButton = styled.button `\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: flex-start;\r\n  background: transparent;\r\n  border: none;\r\n  width: ${fluid(58, 60)};\r\n  height: ${fluid(48, 50)};\r\n  padding: 0;\r\n  color: var(--fgColour, ${brand.primary.purple});\r\n\r\n  &:first-child {\r\n    justify-content: flex-end;\r\n\r\n    svg {\r\n      transform: scaleX(-1);\r\n    }\r\n  }\r\n\r\n  &:disabled {\r\n    opacity: 0.66;\r\n    pointer-events: none;\r\n\r\n    &:hover {\r\n      opacity: 0.66;\r\n    }\r\n  }\r\n\r\n  svg {\r\n    display: block;\r\n    height: ${fluid(12, 15)};\r\n  }\r\n\r\n  /* Mobile click styles - button should mimic press */\r\n  @media ${until(Device.TabletLarge)} {\r\n    ${transition('transform', 0.15)};\r\n\r\n    &:active {\r\n      transform: translateY(1.5px);\r\n    }\r\n  }\r\n`;\r\nconst ButtonInner = styled.div `\r\n  ${transition('max-width')};\r\n\r\n  border: 2px solid var(--fgColour, ${brand.primary.purple});\r\n  border-radius: 5000000px;\r\n  max-width: ${fluid(46, 48)};\r\n  width: ${fluid(56, 58)};\r\n  height: ${fluid(46, 48)};\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n\r\n  ${ArrowButton}.focus-ring & {\r\n    outline: auto;\r\n    outline-offset: 3px;\r\n    outline-style: solid;\r\n    outline-width: 2px;\r\n  }\r\n\r\n  ${ArrowButton}.focus-ring & {\r\n    max-width: ${fluid(56, 58)};\r\n  }\r\n\r\n  @media (hover: hover) {\r\n    ${ArrowButton}:hover & {\r\n      max-width: ${fluid(56, 58)};\r\n    }\r\n  }\r\n\r\n  @media ${until(Device.TabletLarge)} {\r\n    max-width: ${fluid(56, 58)};\r\n  }\r\n`;\r\nconst ButtonIcon = styled.div `\r\n  ${transition('transform')};\r\n  position: relative;\r\n  line-height: 0;\r\n  transform: translateX(0);\r\n\r\n  ${ArrowButton}:last-child.focus-ring &{\r\n    transform: translateX(7px);\r\n  }\r\n\r\n  @media (hover: hover) {\r\n    ${ArrowButton}:last-child:hover & {\r\n      transform: translateX(7px);\r\n    }\r\n  }\r\n\r\n  ${ArrowButton}.focus-ring & {\r\n    transform: translateX(-7px);\r\n  }\r\n\r\n  @media (hover: hover) {\r\n    ${ArrowButton}:hover & {\r\n      transform: translateX(-7px);\r\n    }\r\n  }\r\n\r\n  @media ${until(Device.TabletLarge)} {\r\n    transform: translateX(-7px);\r\n\r\n    ${ArrowButton}:last-child & {\r\n      transform: translateX(7px);\r\n    }\r\n  }\r\n`;\r\nconst HoverLine = styled.div `\r\n  ${transition('transform')};\r\n\r\n  position: absolute;\r\n  left: 0;\r\n  top: 50%;\r\n  width: 22px;\r\n  height: 3px;\r\n  transform-origin: 0;\r\n  transform: translate(2px, -50%) scaleX(0);\r\n  background-color: var(--fgColour, ${brand.primary.purple});\r\n\r\n  ${ArrowButton}:last-child & {\r\n    transform-origin: 100%;\r\n    left: auto;\r\n    right: 0;\r\n    transform: translate(-2px, -50%) scaleX(0);\r\n  }\r\n\r\n  ${ArrowButton}.focus-ring & {\r\n    transform: translate(2px, -50%) scaleX(1);\r\n  }\r\n\r\n  @media (hover: hover) {\r\n    ${ArrowButton}:hover & {\r\n      transform: translate(2px, -50%) scaleX(1);\r\n    }\r\n  }\r\n\r\n  ${ArrowButton}:last-child.focus-ring & {\r\n    transform: translate(-2px, -50%) scaleX(1);\r\n  }\r\n\r\n  @media (hover: hover) {\r\n    ${ArrowButton}:last-child:hover & {\r\n      transform: translate(-2px, -50%) scaleX(1);\r\n    }\r\n  }\r\n\r\n  @media ${until(Device.TabletLarge)} {\r\n    transform: translate(2px, -50%) scaleX(1);\r\n\r\n    ${ArrowButton}:last-child & {\r\n      transform: translate(-2px, -50%) scaleX(1);\r\n    }\r\n  }\r\n`;\r\nexport const ButtonStyles = {\r\n    Arrow,\r\n    ArrowButton,\r\n    Button,\r\n    ButtonIcon,\r\n    ButtonInner,\r\n    HoverLine,\r\n    Icon,\r\n    Text,\r\n    Wave,\r\n};\r\n","import { getSvgFromSystem, SystemIcon } from '@helpers/systemIcons';\r\nimport React from 'react';\r\nimport { FocusRing } from 'react-aria';\r\nimport { ButtonStyles } from './Button.styles';\r\nconst Button = ({ branding, className, disabled, title, toggleOn = false, type = 'button', onClick, icon, iconPosition = 'right', ...otherProps }) => {\r\n    return (React.createElement(FocusRing, { focusRingClass: \"focus-ring\" },\r\n        React.createElement(ButtonStyles.Button, { className: className, branding: branding, disabled: disabled, type: type, onClick: onClick, \"data-toggle-on\": toggleOn, \"data-branding\": branding, ...otherProps },\r\n            branding === 'textOnly' && (React.createElement(ButtonStyles.Wave, null, getSvgFromSystem(SystemIcon.Wave1))),\r\n            React.createElement(ButtonStyles.Text, null, title),\r\n            icon ? (React.createElement(ButtonStyles.Icon, { \"data-position\": iconPosition }, icon)) : branding === 'textOnly' ? (React.createElement(ButtonStyles.Arrow, null, getSvgFromSystem(SystemIcon.ArrowRight))) : null)));\r\n};\r\nconst FakeButton = ({ branding, className, title, icon, iconPosition = 'right', ...otherProps }) => {\r\n    return (React.createElement(ButtonStyles.Button, { className: className, branding: branding, as: \"span\", ...otherProps },\r\n        branding === 'textOnly' && (React.createElement(ButtonStyles.Wave, null, getSvgFromSystem(SystemIcon.Wave1))),\r\n        React.createElement(ButtonStyles.Text, null, title),\r\n        icon ? (React.createElement(ButtonStyles.Icon, { \"data-position\": iconPosition }, icon)) : branding === 'textOnly' ? (React.createElement(ButtonStyles.Arrow, null, getSvgFromSystem(SystemIcon.ArrowRight))) : null));\r\n};\r\nconst LinkButton = ({ branding, className, href, target = '_self', title, icon, iconPosition = 'right', ...otherProps }) => {\r\n    return (React.createElement(FocusRing, { focusRingClass: \"focus-ring\" },\r\n        React.createElement(ButtonStyles.Button, { className: className, as: \"a\", branding: branding, href: href, target: target, ...otherProps },\r\n            branding === 'textOnly' && (React.createElement(ButtonStyles.Wave, null, getSvgFromSystem(SystemIcon.Wave1))),\r\n            React.createElement(ButtonStyles.Text, null, title),\r\n            icon ? (React.createElement(ButtonStyles.Icon, { \"data-position\": iconPosition }, icon)) : branding === 'textOnly' ? (React.createElement(ButtonStyles.Arrow, null, getSvgFromSystem(SystemIcon.ArrowRight))) : null)));\r\n};\r\nconst ArrowButton = ({ labelText, disabled, onClick, ...otherProps }) => {\r\n    return (React.createElement(FocusRing, { focusRingClass: \"focus-ring\" },\r\n        React.createElement(ButtonStyles.ArrowButton, { \"aria-label\": labelText, disabled: disabled, onClick: onClick, ...otherProps },\r\n            React.createElement(ButtonStyles.ButtonInner, null,\r\n                React.createElement(ButtonStyles.ButtonIcon, null,\r\n                    getSvgFromSystem(SystemIcon.Chevron),\r\n                    React.createElement(ButtonStyles.HoverLine, null))))));\r\n};\r\nexport { Button as default, LinkButton, ArrowButton, FakeButton };\r\n","import { fluid } from '@helpers/fluid';\r\nimport { paragraphRegular } from '@helpers/typography';\r\nimport styled from 'styled-components';\r\nconst Container = styled.div `\r\n  ${paragraphRegular};\r\n\r\n  display: flex;\r\n  gap: ${fluid(10, 12)};\r\n  align-items: center;\r\n  color: var(--fgColour);\r\n  margin: 0;\r\n  height: ${fluid(48, 50)};\r\n\r\n  > span[data-divider='true'] {\r\n    display: block;\r\n    height: 100%;\r\n    width: 2px;\r\n    background-color: var(--fgColour);\r\n  }\r\n`;\r\nconst CarouselCountStyles = {\r\n    Container,\r\n};\r\nexport default CarouselCountStyles;\r\n","import * as React from 'react';\r\nimport S from './CarouselCount.styles';\r\nconst CarouselCount = (props) => {\r\n    return (React.createElement(S.Container, null,\r\n        React.createElement(\"span\", null, props.current),\r\n        React.createElement(\"span\", { \"data-divider\": \"true\" }),\r\n        React.createElement(\"span\", null, props.total)));\r\n};\r\nexport default CarouselCount;\r\n","import { transition } from '@helpers/animate';\r\nimport brand from '@helpers/brand';\r\nimport { ButtonReset } from '@helpers/global';\r\nimport { siteWide } from '@helpers/grid';\r\nimport { Layers } from '@helpers/layers';\r\nimport { paragraphRegular } from '@helpers/typography';\r\nimport styled from 'styled-components';\r\nconst Container = styled.div `\r\n  ${siteWide};\r\n\r\n  position: relative;\r\n  z-index: ${Layers.NavigationTray + 1};\r\n  height: 0;\r\n`;\r\nconst Button = styled.button `\r\n  ${ButtonReset};\r\n  ${transition('opacity, transform')};\r\n  ${paragraphRegular};\r\n\r\n  position: absolute;\r\n  left: 0;\r\n  top: 0;\r\n  margin: 0;\r\n  opacity: 0;\r\n  transform: translate(3px, -100%);\r\n  background-color: var(--fgColour, ${brand.primary.offWhite});\r\n  color: var(--bgColour, ${brand.primary.purple});\r\n  padding: 8px 12px;\r\n\r\n  &.focus-ring {\r\n    outline: auto;\r\n    outline-offset: 3px;\r\n    outline-style: solid;\r\n    outline-width: 2px;\r\n    outline-color: var(--fgColour, ${brand.primary.offWhite});\r\n    opacity: 1;\r\n    transform: translate(3px, 3px);\r\n  }\r\n`;\r\nconst SkipLinkStyles = {\r\n    Container,\r\n    Button,\r\n};\r\nexport default SkipLinkStyles;\r\n","import { scrollIntoView } from '@helpers/animate';\r\nimport * as React from 'react';\r\nimport { FocusRing } from 'react-aria';\r\nimport S from './SkipLink.styles';\r\nconst SkipLink = ({ type = 'inline' }) => {\r\n    const ref = React.useRef(null);\r\n    return (React.createElement(S.Container, null,\r\n        React.createElement(FocusRing, { focusRingClass: \"focus-ring\" },\r\n            React.createElement(S.Button, { ref: ref, onClick: () => {\r\n                    if (type === 'header') {\r\n                        skipToMain();\r\n                    }\r\n                    else {\r\n                        skipSection();\r\n                    }\r\n                } }, type === 'header' ? React.createElement(React.Fragment, null, \"Skip to Main Content\") : React.createElement(React.Fragment, null, \"Skip to Next Section\")))));\r\n    function skipToMain() {\r\n        const targetEl = document.getElementById('main');\r\n        if (!targetEl) {\r\n            return;\r\n        }\r\n        scrollIntoView(targetEl);\r\n        focusNext(targetEl);\r\n    }\r\n    function skipSection() {\r\n        let wrapperEl = ref.current?.closest('div[class^=react_Components_]');\r\n        // Should only ever occur in storybook\r\n        if (!wrapperEl) {\r\n            wrapperEl = ref.current?.closest('section');\r\n        }\r\n        let targetEl = wrapperEl?.nextElementSibling;\r\n        // Last element in main wrapper, next element is footer\r\n        if (!targetEl) {\r\n            targetEl = wrapperEl?.parentElement?.nextElementSibling;\r\n        }\r\n        if (!targetEl) {\r\n            return;\r\n        }\r\n        scrollIntoView(targetEl);\r\n        focusNext(targetEl);\r\n    }\r\n    function focusNext(el) {\r\n        const focusable = el.querySelectorAll('button');\r\n        focusable[0]?.focus();\r\n    }\r\n};\r\nexport default SkipLink;\r\n","import brand from '@helpers/brand';\r\nimport { fluid } from '@helpers/fluid';\r\nimport { ButtonReset } from '@helpers/global';\r\nimport { siteWide } from '@helpers/grid';\r\nimport { Device, from } from '@helpers/media';\r\nimport styled from 'styled-components';\r\nconst Container = styled.section `\r\n  --sectionSpacingTop: ${fluid(32, 80)};\r\n  --sectionSpacingBottom: ${fluid(32, 80)};\r\n  --bgColour: transparent;\r\n  --bgColourTint: ${brand.tint.offWhite};\r\n  --fgColour: ${brand.primary.purple};\r\n  --fgColourTint: ${brand.tint.purple};\r\n\r\n  position: relative;\r\n  scroll-margin: var(--stickyHeaderHeight) 0 0;\r\n  background-color: var(--bgColour);\r\n  color: var(--fgColour);\r\n\r\n  &[data-variant='light'] {\r\n    --bgColour: ${brand.primary.offWhite};\r\n    --bgColourTint: ${brand.tint.offWhite};\r\n    --fgColour: ${brand.primary.purple};\r\n    --fgColourTint: ${brand.tint.purple};\r\n  }\r\n\r\n  &[data-variant='dark'] {\r\n    --bgColour: ${brand.primary.purple};\r\n    --bgColourTint: ${brand.tint.purple};\r\n    --fgColour: ${brand.primary.offWhite};\r\n    --fgColourTint: ${brand.tint.offWhite};\r\n  }\r\n\r\n  &[data-allow-scroll-margin='true'],\r\n  &[data-has-skip='true'] {\r\n    overflow: clip;\r\n    overflow: hidden;\r\n  }\r\n\r\n  &[data-flush='top'] {\r\n    --sectionSpacingTop: 0;\r\n\r\n    @media ${from(Device.Tablet)} {\r\n      --sectionSpacingTop: 0;\r\n    }\r\n  }\r\n\r\n  &[data-flush='bottom'] {\r\n    --sectionSpacingBottom: 0;\r\n\r\n    @media ${from(Device.Tablet)} {\r\n      --sectionSpacingBottom: 0;\r\n    }\r\n  }\r\n\r\n  &[data-flush='both'] {\r\n    --sectionSpacingTop: 0;\r\n    --sectionSpacingBottom: 0;\r\n\r\n    @media ${from(Device.Tablet)} {\r\n      --sectionSpacingTop: 0;\r\n      --sectionSpacingBottom: 0;\r\n    }\r\n  }\r\n\r\n  /* Negative margin bottom to force overlap */\r\n  &[data-overlap-bottom='true'] {\r\n    margin-bottom: calc(var(--sectionSpacingBottom) * -1);\r\n  }\r\n\r\n  .equally-ai___high-saturation & {\r\n    filter: saturate(200%);\r\n  }\r\n\r\n  .equally-ai___reverse-contrast & {\r\n    filter: invert(100%);\r\n  }\r\n\r\n  .equally-ai___monochrome-contrast & {\r\n    filter: grayscale(100%);\r\n  }\r\n\r\n  .equally-ai___reverse-contrast.equally-ai___monochrome-contrast & {\r\n    filter: grayscale(100%) invert(100%);\r\n  }\r\n`;\r\nconst Inner = styled.div `\r\n  color: var(--fgColor);\r\n  padding-top: var(--sectionSpacingTop);\r\n  padding-bottom: var(--sectionSpacingBottom);\r\n\r\n  /* Don't apply background color for white backgrounds */\r\n  ${Container} & {\r\n    background: var(--bgColor);\r\n  }\r\n`;\r\nconst SiteWide = styled.div `\r\n  ${siteWide}\r\n`;\r\nconst FocusAnchor = styled.button `\r\n  ${ButtonReset};\r\n\r\n  height: 0;\r\n  width: 0;\r\n`;\r\nconst SectionWrapperStyles = {\r\n    Container,\r\n    Inner,\r\n    SiteWide,\r\n    FocusAnchor,\r\n};\r\nexport default SectionWrapperStyles;\r\n","import * as React from 'react';\r\nconst BasePropsContext = React.createContext({});\r\nexport function withBaseProps(WrappedComponent) {\r\n    const displayName = WrappedComponent.displayName || WrappedComponent.name || 'Component';\r\n    const ComponentWithBaseProps = (props) => {\r\n        return (React.createElement(BasePropsContext.Provider, { value: props },\r\n            React.createElement(WrappedComponent, { ...props })));\r\n    };\r\n    ComponentWithBaseProps.displayName = `withBaseProps(${displayName})`;\r\n    return ComponentWithBaseProps;\r\n}\r\nexport const useBaseProps = () => React.useContext(BasePropsContext);\r\n","import { useBaseProps } from '@hoc/withBaseProps';\r\nimport SkipLink from '@stories/Components/General/SkipLink/SkipLink';\r\nimport * as React from 'react';\r\nimport S from './SectionWrapper.styles';\r\nconst SectionWrapper = React.forwardRef((props, ref) => {\r\n    const { children, layout = 'default', flush = 'none', variant = 'none', removeSkipLink, ...otherProps } = props;\r\n    const baseProps = useBaseProps();\r\n    return (React.createElement(S.Container, { ref: ref, id: baseProps.id, \"data-allow-scroll-margin\": !!baseProps.id, \"data-flush\": flush, \"data-variant\": variant, \"data-has-skip\": !removeSkipLink, ...otherProps },\r\n        React.createElement(S.Inner, null,\r\n            !removeSkipLink ? React.createElement(SkipLink, null) : React.createElement(S.FocusAnchor, { \"aria-label\": \"Skip to content anchor\" }),\r\n            renderLayout())));\r\n    function renderLayout() {\r\n        if (layout === 'fullWidth') {\r\n            return children;\r\n        }\r\n        return React.createElement(S.SiteWide, null, children);\r\n    }\r\n});\r\nSectionWrapper.displayName = 'SectionWrapper';\r\nexport default SectionWrapper;\r\n"],"names":["ButtonReset","css","Text","styled","div","withConfig","displayName","componentId","PrimaryStyles","brand","secondary","red","primary","purple","transition","offWhite","OutlineStyles","OutlineAltStyles","Wave","Arrow","TextOnlyStyles","Icon","Button","button","fluid","fonts","graphikCompact","medium","until","Device","TabletLarge","_ref","branding","ArrowButton","ButtonInner","ButtonStyles","ButtonIcon","HoverLine","className","disabled","title","toggleOn","type","onClick","icon","iconPosition","otherProps","React","FocusRing","focusRingClass","getSvgFromSystem","SystemIcon","Wave1","ArrowRight","FakeButton","_ref2","as","LinkButton","_ref3","href","target","_ref4","labelText","Chevron","Container","paragraphRegular","props","S","current","total","siteWide","Layers","NavigationTray","ref","targetEl","document","getElementById","scrollIntoView","focusNext","skipToMain","_ref$current","_wrapperEl","wrapperEl","closest","_ref$current2","nextElementSibling","_wrapperEl2","_wrapperEl2$parentEle","parentElement","skipSection","el","_focusable$","querySelectorAll","focus","section","tint","from","Tablet","Inner","SiteWide","FocusAnchor","BasePropsContext","SectionWrapper","children","layout","flush","variant","removeSkipLink","baseProps","id","SkipLink"],"sourceRoot":""}