{"version":3,"sources":["webpack:///./src/stories/Widgets/Header/Header.styles.ts","webpack:///./src/stories/Widgets/Header/Header.tsx"],"names":["Container","styled","header","setCssVar","brand","greyVeryLight","white","black","hortHouse","greyMid","grey","greyLight","cssVar","until","Device","TabletLarge","Grid","div","from","hasTopLinks","css","SearchArea","ShowSearch","button","SearchIcon","SvgSearch","HomeLink","a","LogoArea","Logo","img","CtaArea","CtaInner","CtaHolder","LinkButtonStyles","Button","TopLinkHolder","TopLinkList","TopLinkItem","fonts","sourceSansPro","regular","MobileBtnBar","span","MobileMenuBtn","openMenu","MobileNavHolder","m","withMotion","logInCta","logo","navigation","personalisedNavigation","searchResultsPlaceholder","searchResultsUrl","signUpCta","topLinks","isCampaignPage","ref","React","useRef","showSearchMobile","setShowSearchMobile","useState","setOpenMenu","usePersonalisedMenu","setUsePersonalisedMenu","activeMobileNavigationId","setActiveMobileNavigationId","useScrollLock","current","createElement","HeaderStyles","SiteWide","type","onClick","SearchField","onClose","href","url","alt","title","loading","src","icon","length","map","link","key","text","target","LinkButton","themeOption","Navigation","items","canPersonalise","isPersonalised","onPersonalise","active","initial","animate","variants","hidden","opacity","transitionEnd","visibility","transform","transition","ease","visible","NavigationMobile","activeId","onItemClick","id"],"mappings":"2OAQA,MAAMA,EAAYC,IAAOC,OAAV,6EAAGD,CAAH,+KACXE,YAAU,cAAeC,IAAMC,eAC/BF,YAAU,UAAWC,IAAME,OAC3BH,YAAU,UAAWC,IAAMG,OAGzBJ,YAAU,cAAeC,IAAMC,eAC/BF,YAAU,UAAWC,IAAME,OAC3BH,YAAU,UAAWC,IAAMG,OAI3BJ,YAAU,cAAeC,IAAMI,UAAUC,SACzCN,YAAU,UAAWC,IAAMM,MAC3BP,YAAU,UAAWC,IAAME,OAI3BH,YAAU,cAAeC,IAAMO,WAC/BR,YAAU,UAAWC,IAAMG,OAC3BJ,YAAU,UAAWC,IAAME,OAGtBM,YAAO,WACIA,YAAO,WAGlBC,YAAMC,IAAOC,cAIlBC,EAAOf,IAAOgB,IAAV,wEAAGhB,CAAH,+KAKCiB,YAAKJ,IAAOC,aAQnB,EAAGI,iBAAkBA,GACrBC,YADgC,0DAErBF,YAAKJ,IAAOC,eAMrBM,EAAapB,IAAOgB,IAAV,8EAAGhB,CAAH,gEAGLiB,YAAKJ,IAAOC,cAIjBO,EAAarB,IAAOsB,OAAV,8EAAGtB,CAAH,iEAILiB,YAAKJ,IAAOC,cAIjBS,EAAavB,YAAOwB,KAAV,8EAAGxB,CAAH,sCAGLW,YAAO,YAEZc,EAAWzB,IAAO0B,EAAV,4EAAG1B,CAAH,MACR2B,EAAW3B,IAAOgB,IAAV,4EAAGhB,CAAH,kFAIHiB,YAAKJ,IAAOC,cAIjBc,EAAO5B,IAAO6B,IAAV,wEAAG7B,CAAH,wOAICiB,YAAKJ,IAAOC,aAUVG,YAAKJ,IAAOC,aAUZG,YAAKJ,IAAOC,cAMnBgB,EAAU9B,IAAOgB,IAAV,2EAAGhB,CAAH,uGAKFiB,YAAKJ,IAAOC,cAIjBiB,EAAW/B,IAAOgB,IAAV,4EAAGhB,CAAH,8BACHY,YAAMC,IAAOC,cAIlBkB,EAAYhC,IAAOgB,IAAV,8EAAGhB,CAAH,mGAIXiC,IAAiBC,QAQfC,EAAgBnC,IAAOgB,IAAV,kFAAGhB,CAAH,qFAMGW,YAAO,gBAEvByB,EAAcpC,IAAOgB,IAAV,gFAAGhB,CAAH,6DAKXqC,EAAcrC,IAAO0B,EAAV,gFAAG1B,CAAH,wEACbsC,IAAMC,cAAcC,QAIb7B,YAAO,YAEZ8B,EAAezC,IAAO0C,KAAV,iFAAG1C,CAAH,qiBAIIW,YAAO,WAoBHA,YAAO,WAWPA,YAAO,YAU3BgC,EAAgB3C,IAAOsB,OAAV,kFAAGtB,CAAH,iHAGRW,YAAO,WAIPM,YAAKJ,IAAOC,aAInB,EAAG8B,cAAeA,GAClBzB,YAD0B,sKAEtBsB,IAkBFI,EAAkB7C,YAAO8C,IAAE9B,KAAZ,oFAAGhB,CAAH,0QAMVY,YAAMC,IAAOC,aAYbG,YAAKJ,IAAOC,aAKVF,YAAMC,IAAOC,cAKX,OACXf,YACA+B,UACAE,YACAD,WACAhB,OACAU,WACAG,OACAD,WACAc,eACAE,gBACAE,kBACAzB,aACAG,aACAF,aACAc,gBACAC,cACAC,eC/NWU,sBAtDA,EAAGC,WAAsBC,OAAMC,aAAa,GAAIC,yBAAyB,GAAIC,2BAA0BC,mBAAmB,IAAKC,YAAWC,WAAsBC,kBAAiB,MAC5L,MAAMC,EAAMC,IAAMC,OAAO,OAClBC,EAAkBC,GAAuBC,oBAAS,IAClDlB,EAAUmB,GAAeD,oBAAS,IAClCE,EAAqBC,GAA0BH,qBAAWX,IAC1De,EAA0BC,GAA+BL,mBAAS,IAEzE,OADAM,YAAcX,EAAIY,QAASzB,GACnBc,IAAMY,cAAcC,EAAaxE,UAAW,KAChD2D,IAAMY,cAAcE,IAAU,KAC1Bd,IAAMY,cAAcC,EAAaxD,KAAM,CAAEG,cAAaqC,GAClDF,GAAqBK,IAAMY,cAAcC,EAAanD,WAAY,KAC9DsC,IAAMY,cAAcC,EAAalD,WAAY,CAAEoD,KAAM,SAAUC,QAAS,IAAMb,GAAoB,IAC9FH,IAAMY,cAAcC,EAAahD,WAAY,OACjDmC,IAAMY,cAAcK,IAAa,CAAEvB,yBAA0BA,EAA0BC,iBAAkBA,EAAkBO,iBAAkBA,EAAkBgB,QAAS,KAChKf,GAAoB,OAEhCH,IAAMY,cAAcC,EAAa5C,SAAU,KAAMsB,GAASS,IAAMY,cAAcC,EAAa9C,SAAU,CAAEoD,KAAM5B,EAAK6B,KAC9GpB,IAAMY,cAAcC,EAAa3C,KAAM,CAAEmD,IAAK9B,EAAK+B,MAAOC,QAAS,OAAQC,IAAKjC,EAAKkC,SACzFzB,IAAMY,cAAcC,EAAazC,QAAS,KACtC4B,IAAMY,cAAcC,EAAaxC,SAAU,KACvCwB,IAAYA,aAAA,EAAAA,EAAU6B,QAAS,GAAM1B,IAAMY,cAAcC,EAAapC,cAAe,KACjFuB,IAAMY,cAAcC,EAAanC,YAAa,KAAMmB,EAAS8B,IAAIC,GAAS5B,IAAMY,cAAcC,EAAalC,YAAa,CAAEkD,IAAKD,EAAKE,KAAMX,KAAMS,EAAKR,IAAKW,OAAQH,EAAKG,QAAUH,EAAKE,SAC1L9B,IAAMY,cAAcC,EAAavC,UAAW,KACxCgB,GAAaU,IAAMY,cAAcoB,IAAY,CAAEC,YAAa3C,aAAF,EAAEA,EAAU2C,YAAaX,MAAOhC,aAAF,EAAEA,EAAUwC,KAAMX,KAAM7B,aAAF,EAAEA,EAAU8B,IAAKW,OAAQzC,aAAF,EAAEA,EAAUyC,SACjJnC,GAAcI,IAAMY,cAAcoB,IAAY,CAAEC,YAAarC,aAAF,EAAEA,EAAWqC,YAAaX,MAAO1B,aAAF,EAAEA,EAAWkC,KAAMX,KAAMvB,aAAF,EAAEA,EAAWwB,IAAKW,OAAQnC,aAAF,EAAEA,EAAWmC,WAC9J/B,IAAMY,cAAcC,EAAa5B,cAAe,CAAE8B,KAAM,SAAU7B,SAAUA,EAAU8B,QAAS,IAAMX,GAAanB,IAC9Gc,IAAMY,cAAcC,EAAa9B,aAAc,MAC/CiB,IAAMY,cAAcC,EAAa9B,aAAc,MAC/CiB,IAAMY,cAAcC,EAAa9B,aAAc,WAC9De,GAAmBE,IAAMY,cAAcsB,IAAY,CAAEC,MAAO7B,EAAsBb,EAAyBD,EAAY4C,iBAAkB3C,EAAwB4C,eAAgB/B,EAAqBgC,cAAe,IAAM/B,GAAwBD,MACnPR,GAAmBE,IAAMY,cAAcC,EAAa1B,gBAAiB,CAAEY,IAAKA,EAAKwC,OAAQrD,EAAUsD,QAAS,SAAUC,QAASvD,EAAW,UAAY,SAAUwD,SAAU,CACnKC,OAAQ,CACJC,QAAS,EACTC,cAAe,CACXC,WAAY,SACZC,UAAW,qBAEfC,WAAY,CACRjC,KAAM,QACNkC,KAAM,YAGdC,QAAS,CACLN,QAAS,EACTE,WAAY,UACZC,UAAW,gBACXC,WAAY,CACRjC,KAAM,QACNkC,KAAM,cAIlBjD,IAAMY,cAAcuC,IAAkB,CAAEC,SAAU5C,EAA0B2B,MAAO7B,EAAsBb,EAAyBD,EAAYF,SAAUA,EAAU+D,YAAaC,GAAM7C,EAA4B6C,GAAK1D,UAAWA,EAAWC,SAAUA,EAAUuC,iBAAkB3C,EAAwB4C,eAAgB/B,EAAqBgC,cAAe,IAAM/B,GAAwBD","file":"Header-a62e33a48b81805dfbcf.js","sourcesContent":["import brand from '@helpers/brand';\r\nimport { cssVar, setCssVar } from '@helpers/cssVar';\r\nimport fonts from '@helpers/fonts';\r\nimport { Device, from, until } from '@helpers/media';\r\nimport { ReactComponent as SvgSearch } from '@img/icons/search.svg';\r\nimport LinkButtonStyles from '@stories/Components/Buttons/LinkButton/LinkButton.styles';\r\nimport { m } from 'framer-motion';\r\nimport styled, { css } from 'styled-components';\r\nconst Container = styled.header `\r\n  ${setCssVar('accentColor', brand.greyVeryLight)};\r\n  ${setCssVar('bgColor', brand.white)};\r\n  ${setCssVar('fgColor', brand.black)};\r\n\r\n  .theme-apl & {\r\n    ${setCssVar('accentColor', brand.greyVeryLight)};\r\n    ${setCssVar('bgColor', brand.white)};\r\n    ${setCssVar('fgColor', brand.black)};\r\n  }\r\n\r\n  .theme-hh & {\r\n    ${setCssVar('accentColor', brand.hortHouse.greyMid)};\r\n    ${setCssVar('bgColor', brand.grey)};\r\n    ${setCssVar('fgColor', brand.white)};\r\n  }\r\n\r\n  .theme-rss & {\r\n    ${setCssVar('accentColor', brand.greyLight)};\r\n    ${setCssVar('bgColor', brand.black)};\r\n    ${setCssVar('fgColor', brand.white)};\r\n  }\r\n\r\n  color: ${cssVar('fgColor')};\r\n  background-color: ${cssVar('bgColor')};\r\n  position: relative;\r\n\r\n  @media ${until(Device.TabletLarge)} {\r\n    padding: 10px 0 11px;\r\n  }\r\n`;\r\nconst Grid = styled.div `\r\n  display: grid;\r\n  grid-template-columns: repeat(12, 1fr);\r\n  gap: 16px;\r\n\r\n  @media ${from(Device.TabletLarge)} {\r\n    grid-template-columns: repeat(24, 1fr);\r\n    gap: 32px;\r\n    align-items: center;\r\n    height: 155px;\r\n    position: relative;\r\n  }\r\n\r\n  ${({ hasTopLinks }) => hasTopLinks &&\r\n    css `\r\n      @media ${from(Device.TabletLarge)} {\r\n        align-items: flex-end;\r\n        padding-bottom: 30px;\r\n      }\r\n    `}\r\n`;\r\nconst SearchArea = styled.div `\r\n  grid-column: 1 / span 4;\r\n\r\n  @media ${from(Device.TabletLarge)} {\r\n    grid-column: 1 / span 10;\r\n  }\r\n`;\r\nconst ShowSearch = styled.button `\r\n  background: transparent;\r\n  border: none;\r\n\r\n  @media ${from(Device.TabletLarge)} {\r\n    display: none;\r\n  }\r\n`;\r\nconst SearchIcon = styled(SvgSearch) `\r\n  width: 30px;\r\n  height: 30px;\r\n  color: ${cssVar('fgColor')};\r\n`;\r\nconst HomeLink = styled.a ``;\r\nconst LogoArea = styled.div `\r\n  grid-column: 5 / span 4;\r\n  text-align: center;\r\n\r\n  @media ${from(Device.TabletLarge)} {\r\n    grid-column: 11 / span 4;\r\n  }\r\n`;\r\nconst Logo = styled.img `\r\n  width: 59px;\r\n  height: 45px;\r\n\r\n  @media ${from(Device.TabletLarge)} {\r\n    width: 122px;\r\n    height: 94px;\r\n    justify-self: center;\r\n  }\r\n\r\n  .theme-apl & {\r\n    width: 130px;\r\n    height: 44px;\r\n\r\n    @media ${from(Device.TabletLarge)} {\r\n      width: 232px;\r\n      height: 78px;\r\n    }\r\n  }\r\n\r\n  .theme-rss & {\r\n    width: 61px;\r\n    height: 52px;\r\n\r\n    @media ${from(Device.TabletLarge)} {\r\n      width: 140px;\r\n      height: 120px;\r\n    }\r\n  }\r\n`;\r\nconst CtaArea = styled.div `\r\n  grid-column: 9 / span 4;\r\n  display: flex;\r\n  justify-content: flex-end;\r\n\r\n  @media ${from(Device.TabletLarge)} {\r\n    grid-column: 15 / span 10;\r\n  }\r\n`;\r\nconst CtaInner = styled.div `\r\n  @media ${until(Device.TabletLarge)} {\r\n    display: none;\r\n  }\r\n`;\r\nconst CtaHolder = styled.div `\r\n  display: flex;\r\n  justify-content: space-between;\r\n\r\n  ${LinkButtonStyles.Button} {\r\n    margin-left: 20px;\r\n\r\n    &:first-child {\r\n      margin-left: 0;\r\n    }\r\n  }\r\n`;\r\nconst TopLinkHolder = styled.div `\r\n  position: absolute;\r\n  top: 0;\r\n  right: 0;\r\n  width: auto;\r\n  min-width: 344px;\r\n  background-color: ${cssVar('accentColor')};\r\n`;\r\nconst TopLinkList = styled.div `\r\n  display: flex;\r\n  justify-content: space-around;\r\n  padding: 10px;\r\n`;\r\nconst TopLinkItem = styled.a `\r\n  ${fonts.sourceSansPro.regular};\r\n  font-size: 16px;\r\n  line-height: 22px;\r\n  text-decoration: none;\r\n  color: ${cssVar('fgColor')};\r\n`;\r\nconst MobileBtnBar = styled.span `\r\n  display: block;\r\n  width: 28px;\r\n  height: 2px;\r\n  background-color: ${cssVar('fgColor')};\r\n  position: absolute;\r\n  top: 50%;\r\n  transform-origin: center;\r\n\r\n  &:first-child {\r\n    transform: translateY(-50%);\r\n    transition: transform 0.3s;\r\n  }\r\n\r\n  &:nth-child(2) {\r\n    background-color: transparent;\r\n\r\n    &:before {\r\n      content: '';\r\n      position: absolute;\r\n      top: -10px;\r\n      display: block;\r\n      width: 28px;\r\n      height: 2px;\r\n      background-color: ${cssVar('fgColor')};\r\n      transition: opacity 0.3s;\r\n    }\r\n\r\n    &:after {\r\n      content: '';\r\n      position: absolute;\r\n      top: 8px;\r\n      display: block;\r\n      width: 28px;\r\n      height: 2px;\r\n      background-color: ${cssVar('fgColor')};\r\n      transition: opacity 0.3s;\r\n    }\r\n  }\r\n\r\n  &:last-child {\r\n    transition: transform 0.3s;\r\n    transform: translateY(-50%);\r\n  }\r\n`;\r\nconst MobileMenuBtn = styled.button `\r\n  background-color: transparent;\r\n  border: none;\r\n  color: ${cssVar('fgColor')};\r\n  width: 40px;\r\n  position: relative;\r\n\r\n  @media ${from(Device.TabletLarge)} {\r\n    display: none;\r\n  }\r\n\r\n  ${({ openMenu }) => openMenu &&\r\n    css `\r\n      ${MobileBtnBar} {\r\n        &:first-child {\r\n          transform: translateY(-50%) rotate(-45deg);\r\n        }\r\n\r\n        &:nth-child(2) {\r\n          &:before,\r\n          &:after {\r\n            opacity: 0;\r\n          }\r\n        }\r\n\r\n        &:last-child {\r\n          transform: translateY(-50%) rotate(45deg);\r\n        }\r\n      }\r\n    `}\r\n`;\r\nconst MobileNavHolder = styled(m.div) `\r\n  position: relative;\r\n  display: flex;\r\n  background: #f6f6f6;\r\n  height: 45px;\r\n\r\n  @media ${until(Device.TabletLarge)} {\r\n    position: fixed;\r\n    top: 65px;\r\n    left: 0;\r\n    display: block;\r\n    background: #fff;\r\n    height: calc(100vh - 65px);\r\n    overflow-y: auto;\r\n    width: 100%;\r\n    z-index: 8001;\r\n  }\r\n\r\n  @media ${from(Device.TabletLarge)} {\r\n    display: none;\r\n  }\r\n\r\n  .theme-rss & {\r\n    @media ${until(Device.TabletLarge)} {\r\n      top: 73px;\r\n    }\r\n  }\r\n`;\r\nexport default {\r\n    Container,\r\n    CtaArea,\r\n    CtaHolder,\r\n    CtaInner,\r\n    Grid,\r\n    HomeLink,\r\n    Logo,\r\n    LogoArea,\r\n    MobileBtnBar,\r\n    MobileMenuBtn,\r\n    MobileNavHolder,\r\n    SearchArea,\r\n    SearchIcon,\r\n    ShowSearch,\r\n    TopLinkHolder,\r\n    TopLinkList,\r\n    TopLinkItem,\r\n};\r\n","import { withMotion } from '@hoc/withMotion';\r\nimport useScrollLock from '@hooks/useBodyScrollLock';\r\nimport LinkButton from '@stories/Components/Buttons/LinkButton/LinkButton';\r\nimport SiteWide from '@stories/Components/Global/SiteWide/SiteWide';\r\nimport SearchField from '@stories/Components/Header/SearchField/SearchField';\r\nimport Navigation from '@stories/Components/Navigation/Navigation';\r\nimport NavigationMobile from '@stories/Components/Navigation/NavigationMobile/NavigationMobile';\r\nimport React, { useState } from 'react';\r\nimport HeaderStyles from './Header.styles';\r\nconst Header = ({ logInCta = undefined, logo, navigation = [], personalisedNavigation = [], searchResultsPlaceholder, searchResultsUrl = '/', signUpCta, topLinks = undefined, isCampaignPage = false, }) => {\r\n    const ref = React.useRef(null);\r\n    const [showSearchMobile, setShowSearchMobile] = useState(false);\r\n    const [openMenu, setOpenMenu] = useState(false);\r\n    const [usePersonalisedMenu, setUsePersonalisedMenu] = useState(!!personalisedNavigation);\r\n    const [activeMobileNavigationId, setActiveMobileNavigationId] = useState('');\r\n    useScrollLock(ref.current, openMenu);\r\n    return (React.createElement(HeaderStyles.Container, null,\r\n        React.createElement(SiteWide, null,\r\n            React.createElement(HeaderStyles.Grid, { hasTopLinks: topLinks ? true : false },\r\n                searchResultsUrl && (React.createElement(HeaderStyles.SearchArea, null,\r\n                    React.createElement(HeaderStyles.ShowSearch, { type: 'button', onClick: () => setShowSearchMobile(true) },\r\n                        React.createElement(HeaderStyles.SearchIcon, null)),\r\n                    React.createElement(SearchField, { searchResultsPlaceholder: searchResultsPlaceholder, searchResultsUrl: searchResultsUrl, showSearchMobile: showSearchMobile, onClose: () => {\r\n                            setShowSearchMobile(false);\r\n                        } }))),\r\n                React.createElement(HeaderStyles.LogoArea, null, logo && (React.createElement(HeaderStyles.HomeLink, { href: logo.url },\r\n                    React.createElement(HeaderStyles.Logo, { alt: logo.title, loading: 'lazy', src: logo.icon })))),\r\n                React.createElement(HeaderStyles.CtaArea, null,\r\n                    React.createElement(HeaderStyles.CtaInner, null,\r\n                        topLinks && topLinks?.length > 0 && (React.createElement(HeaderStyles.TopLinkHolder, null,\r\n                            React.createElement(HeaderStyles.TopLinkList, null, topLinks.map(link => (React.createElement(HeaderStyles.TopLinkItem, { key: link.text, href: link.url, target: link.target }, link.text)))))),\r\n                        React.createElement(HeaderStyles.CtaHolder, null,\r\n                            logInCta && (React.createElement(LinkButton, { themeOption: logInCta?.themeOption, title: logInCta?.text, href: logInCta?.url, target: logInCta?.target })),\r\n                            signUpCta && (React.createElement(LinkButton, { themeOption: signUpCta?.themeOption, title: signUpCta?.text, href: signUpCta?.url, target: signUpCta?.target })))),\r\n                    React.createElement(HeaderStyles.MobileMenuBtn, { type: 'button', openMenu: openMenu, onClick: () => setOpenMenu(!openMenu) },\r\n                        React.createElement(HeaderStyles.MobileBtnBar, null),\r\n                        React.createElement(HeaderStyles.MobileBtnBar, null),\r\n                        React.createElement(HeaderStyles.MobileBtnBar, null))))),\r\n        !isCampaignPage && (React.createElement(Navigation, { items: usePersonalisedMenu ? personalisedNavigation : navigation, canPersonalise: !!personalisedNavigation, isPersonalised: usePersonalisedMenu, onPersonalise: () => setUsePersonalisedMenu(!usePersonalisedMenu) })),\r\n        !isCampaignPage && (React.createElement(HeaderStyles.MobileNavHolder, { ref: ref, active: openMenu, initial: 'hidden', animate: openMenu ? 'visible' : 'hidden', variants: {\r\n                hidden: {\r\n                    opacity: 0,\r\n                    transitionEnd: {\r\n                        visibility: 'hidden',\r\n                        transform: 'translateX(-100%)',\r\n                    },\r\n                    transition: {\r\n                        type: 'tween',\r\n                        ease: 'easeOut',\r\n                    },\r\n                },\r\n                visible: {\r\n                    opacity: 1,\r\n                    visibility: 'visible',\r\n                    transform: 'translateX(0)',\r\n                    transition: {\r\n                        type: 'tween',\r\n                        ease: 'easeOut',\r\n                    },\r\n                },\r\n            } },\r\n            React.createElement(NavigationMobile, { activeId: activeMobileNavigationId, items: usePersonalisedMenu ? personalisedNavigation : navigation, logInCta: logInCta, onItemClick: id => setActiveMobileNavigationId(id), signUpCta: signUpCta, topLinks: topLinks, canPersonalise: !!personalisedNavigation, isPersonalised: usePersonalisedMenu, onPersonalise: () => setUsePersonalisedMenu(!usePersonalisedMenu) })))));\r\n};\r\nexport default withMotion(Header);\r\n"],"sourceRoot":""}