{"version":3,"sources":["webpack:///./src/helpers/media.ts","webpack:///./src/stories/Components/TopLinks/TopLinks.styles.ts","webpack:///./src/stories/Widgets/Header/Header.styles.ts","webpack:///./src/stories/Components/Link/Link.tsx","webpack:///./src/hoc/withMotion.tsx","webpack:///./src/helpers/fluid.ts","webpack:///./src/helpers/animation.ts","webpack:///./src/img/logos/the-shard.svg","webpack:///./src/stories/Components/Navicon/Navicon.styles.ts","webpack:///./src/stories/Components/Navicon/Navicon.tsx","webpack:///./src/stories/Components/TopLinks/TopLinks.tsx","webpack:///./src/stories/Components/Navigation/Navigation.styles.ts","webpack:///./src/stories/Components/Navigation/Navigation.tsx","webpack:///./src/stories/Components/NavigationDropdown/NavigationDropdown.styles.ts","webpack:///./src/stories/Components/NavigationDropdown/NavigationDropdown.tsx","webpack:///./src/stories/Widgets/Header/Header.tsx","webpack:///./src/img/icons/chevron-right.svg","webpack:///./src/helpers/brand.ts","webpack:///./src/helpers/grey.ts","webpack:///./src/helpers/cssVar.ts","webpack:///./src/helpers/fonts.ts","webpack:///./src/img/icons/chevron-down.svg","webpack:///./src/helpers/image.ts"],"names":["Device","from","size","until","between","start","end","Container","styled","nav","darkTheme","cssVar","Desktop","List","ul","Item","li","brand","orange","StyledLink","Link","fonts","brown","regular","multicolouredTextBright","transition","header","visible","css","Inner","div","rgba","white","grey","grey96","TopLinksStyles","LogoLink","Logo","span","black","Overlay","React","children","href","rel","initialRel","disableNofollow","otherProps","ref","getRel","replace","includes","startsWith","trim","displayName","withMotion","WrappedComponent","name","ComponentWithMotion","props","createElement","LazyMotion","features","domAnimation","strict","DEFAULT_MIN_VALUE","Tablet","DEFAULT_MAX_VALUE","ActualDesktop","fluid","min","max","minWidth","maxWidth","minRem","maxRem","minWidthRem","slope","yAxisIntersection","round","fluidUnit","unit","num","Math","inView","threshold","rootMargin","earlyRootMargin","globalThreshold","easeInOutCubic","slideInUpInitial","slideInUp","animate","duration","delay","easingFunc","fadeInUp","amount","fadeIn","backgroundAnimation","textClip","multicolouredBackground","multicolouredAnimatedText","light","multicolouredBackgroundBright","choirInTheSpireBackground","choirInTheSpireText","properties","timing","innerCss","_path","_extends","Object","assign","target","i","arguments","length","source","key","prototype","hasOwnProperty","call","apply","this","SvgTheShard","xmlns","viewBox","fill","d","Button","button","isActive","TextOpen","TextClose","Navicon","onClick","S","TopLinks","items","map","item","id","url","title","DesktopLarge","grey90","Icon","Navigation","topLinks","event","preventDefault","isLightsLink","as","SvgChevronDown","m","ImageWrapper","Image","img","LinksWrapper","LinksInner","BackWrapper","BackButton","BackIcon","BackText","ListHeading","LinkIcon","LinkText","SummaryWrapper","Summary","p","heading","headingLink","image","summary","onClose","activeItemId","setActiveItemId","useState","activeItem","find","activeImage","AnimatePresence","initial","exit","variants","hidden","opacity","translateY","translateX","transformOrigin","exitBeforeEnter","alt","loading","role","src","imageUrl","rmode","width","height","SvgChevronRight","onMouseEnter","onMouseLeave","onFocus","onBlur","Header","autoHide","navigation","theme","y","scrollY","useWindowScroll","previousScrollY","usePrevious","activeNavigationItemId","setActiveNavigationItemId","isMobileNavigationActive","setIsMobileNavigationActive","isDesktopNavigationActive","setIsDesktopNavigationActive","isHeaderPeeking","setIsHeaderPeeking","headerRef","useRef","activeNavigationItem","useEffect","handleClickOutside","current","contains","document","addEventListener","removeEventListener","useIsomorphicLayoutEffect","undefined","Fragment","SvgLogo","NavigationDropdown","blue","blueGrey","blueTint","reduce","previous","value","hsl","validation","invalid","valid","lightTheme","setCssVar","grey10","themes","dark","thin","thinItalic","lightItalic","regularItalic","bold","boldItalic","stroke","strokeWidth","imageParams","imageSource","split","params","rxy","focalPoint","left","top","quality","heightratio","queryString","stringify","getSrcs","upper","lower","steps","ratio","increment","Array","_","index","ceil","getRange"],"mappings":"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","file":"87-eabfe4d2620d100b70e0.js","sourcesContent":["export var Device;\r\n(function (Device) {\r\n    Device[Device[\"MobileSmall\"] = 320] = \"MobileSmall\";\r\n    Device[Device[\"Mobile\"] = 375] = \"Mobile\";\r\n    Device[Device[\"MobileLarge\"] = 480] = \"MobileLarge\";\r\n    Device[Device[\"TabletSmall\"] = 568] = \"TabletSmall\";\r\n    Device[Device[\"Tablet\"] = 768] = \"Tablet\";\r\n    Device[Device[\"TabletLarge\"] = 1024] = \"TabletLarge\";\r\n    Device[Device[\"DesktopSmall\"] = 1280] = \"DesktopSmall\";\r\n    Device[Device[\"Desktop\"] = 1366] = \"Desktop\";\r\n    Device[Device[\"DesktopLarge\"] = 1600] = \"DesktopLarge\";\r\n    Device[Device[\"ActualDesktop\"] = 1920] = \"ActualDesktop\";\r\n    Device[Device[\"DesktopXL\"] = 2560] = \"DesktopXL\";\r\n})(Device || (Device = {}));\r\nexport function from(size) {\r\n    return `(min-width: ${size}px)`;\r\n}\r\nexport function until(size) {\r\n    return `(max-width: ${size - 1}px)`;\r\n}\r\nexport function between(start, end) {\r\n    return `${from(start)} and ${until(end)}`;\r\n}\r\n","import { multicolouredTextBright, transition } from '@helpers/animation';\r\nimport brand, { darkTheme } from '@helpers/brand';\r\nimport { cssVar } from '@helpers/cssVar';\r\nimport fonts from '@helpers/fonts';\r\nimport { Device, until } from '@helpers/media';\r\nimport Link from '@stories/Components/Link/Link';\r\nimport styled from 'styled-components';\r\nconst Container = styled.nav `\r\n  ${darkTheme};\r\n\r\n  display: flex;\r\n  align-items: center;\r\n  background: ${cssVar('bgColor')};\r\n  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 12px 100%);\r\n  color: ${cssVar('fgColor')};\r\n  height: 44px;\r\n  padding: 0 32px 4px 36px;\r\n\r\n  @media ${until(Device.Desktop)} {\r\n    display: none;\r\n  }\r\n`;\r\nconst List = styled.ul `\r\n  display: flex;\r\n  margin: 0 -20px;\r\n`;\r\nconst Item = styled.li `\r\n  display: block;\r\n  margin: 0 20px;\r\n  transition: color 0.15s ease-out;\r\n\r\n  &:focus-within,\r\n  &:hover {\r\n    color: ${brand.orange};\r\n  }\r\n\r\n  [data-header-theme='shard-lights'] & {\r\n    &:focus,\r\n    &:hover {\r\n      transition-delay: 0.1s;\r\n      color: transparent;\r\n\r\n      > a::before {\r\n        opacity: 1;\r\n      }\r\n    }\r\n  }\r\n`;\r\nconst StyledLink = styled(Link) `\r\n  display: flex;\r\n  align-items: center;\r\n  color: currentColor;\r\n  ${fonts.brown.regular};\r\n  font-size: 16px;\r\n  justify-content: flex-start;\r\n  line-height: 22px;\r\n  outline: none;\r\n  text-decoration: none;\r\n\r\n  &:focus {\r\n    outline: none;\r\n  }\r\n\r\n  [data-header-theme='shard-lights'] & {\r\n    position: relative;\r\n\r\n    &::before {\r\n      ${multicolouredTextBright};\r\n      ${transition('opacity')};\r\n\r\n      content: attr(data-text);\r\n      opacity: 0;\r\n      position: absolute;\r\n      top: 0;\r\n      left: 0;\r\n    }\r\n  }\r\n`;\r\nexport default {\r\n    Container,\r\n    Item,\r\n    Link: StyledLink,\r\n    List,\r\n};\r\n","import brand from '@helpers/brand';\r\nimport { Device, until } from '@helpers/media';\r\nimport Link from '@stories/Components/Link/Link';\r\nimport TopLinksStyles from '@stories/Components/TopLinks/TopLinks.styles';\r\nimport { rgba } from 'polished';\r\nimport styled, { css } from 'styled-components';\r\nconst Container = styled.header `\r\n  position: fixed;\r\n  top: 0;\r\n  left: 0;\r\n  display: block;\r\n  transform: translateY(-120px);\r\n  transition: transform 0.3s ease-out;\r\n  width: 100%;\r\n  z-index: 200;\r\n\r\n  ${({ visible }) => visible &&\r\n    css `\r\n      transform: translateY(0px);\r\n    `}\r\n`;\r\nconst Inner = styled.div `\r\n  position: relative;\r\n  display: flex;\r\n  backdrop-filter: blur(4px);\r\n  background: ${rgba(brand.white, 0.95)};\r\n  border-bottom: 1px solid ${brand.grey.grey96};\r\n  height: 104px;\r\n  z-index: 2;\r\n\r\n  ${TopLinksStyles.Container} {\r\n    position: absolute;\r\n    top: 0;\r\n    right: 0;\r\n  }\r\n\r\n  @media ${until(Device.Desktop)} {\r\n    background: ${brand.white};\r\n    height: 46px;\r\n  }\r\n`;\r\nconst LogoLink = styled(Link) `\r\n  position: relative;\r\n  display: flex;\r\n  align-items: center;\r\n  background: ${brand.grey.grey96};\r\n  clip-path: polygon(0% 0%, 100% 0%, calc(100% - 32px) 100%, 0% 100%);\r\n  height: 120px;\r\n  justify-content: flex-start;\r\n  padding: 0 56px 0 32px;\r\n  outline: none;\r\n  z-index: 2;\r\n\r\n  &:focus {\r\n    outline: none;\r\n  }\r\n\r\n  &::before {\r\n    content: '';\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    background: ${brand.white};\r\n    clip-path: polygon(0% 0%, 100% 0%, calc(100% - 32px) 100%, 0% 100%);\r\n    height: calc(100% - 1px);\r\n    width: calc(100% - 1px);\r\n    z-index: 1;\r\n  }\r\n\r\n  @media ${until(Device.Desktop)} {\r\n    clip-path: polygon(0% 0%, 100% 0%, calc(100% - 20px) 100%, 0% 100%);\r\n    height: 68px;\r\n    padding: 0 30px 0 18px;\r\n    z-index: 2;\r\n\r\n    &::before {\r\n      clip-path: polygon(0% 0%, 100% 0%, calc(100% - 20px) 100%, 0% 100%);\r\n    }\r\n  }\r\n`;\r\nconst Logo = styled.span `\r\n  position: relative;\r\n  z-index: 1;\r\n  display: block;\r\n  color: ${brand.black};\r\n  height: 42px;\r\n  width: 224px;\r\n\r\n  @media ${until(Device.Desktop)} {\r\n    height: 24px;\r\n    width: 124px;\r\n  }\r\n`;\r\nconst Overlay = styled.div `\r\n  position: fixed;\r\n  top: 0;\r\n  left: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  background: rgba(0, 0, 0, 0.85);\r\n  opacity: 0;\r\n  pointer-events: none;\r\n  transition: opacity 0.3s ease-out;\r\n  z-index: 199;\r\n\r\n  &[data-active='true'] {\r\n    opacity: 1;\r\n    pointer-events: all;\r\n  }\r\n\r\n  @media ${until(Device.Desktop)} {\r\n    display: none;\r\n  }\r\n`;\r\nexport default {\r\n    Container,\r\n    Inner,\r\n    Logo,\r\n    LogoLink,\r\n    Overlay,\r\n};\r\n","import * as React from 'react';\r\nconst Link = React.forwardRef(({ children, href, rel: initialRel, disableNofollow = false, ...otherProps }, ref) => {\r\n    return (React.createElement(\"a\", { ref: ref, href: href, rel: getRel(href, initialRel, disableNofollow), ...otherProps }, children));\r\n});\r\nLink.displayName = 'Link';\r\nexport default Link;\r\n/**\r\n * Get the rel value for the href, handle nofollow on external links unless noFollowDisabled is true.\r\n */\r\nfunction getRel(href = '', initialRel = '', disableNofollow) {\r\n    // If disableNofollow is true, remove 'nofollow' from initialRel\r\n    if (disableNofollow) {\r\n        return initialRel.replace('nofollow', '');\r\n    }\r\n    // Skip if rel already includes 'nofollow' or href is a relative URL\r\n    if (initialRel.includes('nofollow') || href.startsWith('/')) {\r\n        return initialRel;\r\n    }\r\n    // Otherwise, append 'nofollow' to existing rel value\r\n    return `${initialRel} nofollow`.trim();\r\n}\r\n","import { domAnimation, LazyMotion } from 'framer-motion';\r\nimport React from 'react';\r\nexport function withMotion(WrappedComponent) {\r\n    const displayName = WrappedComponent.displayName || WrappedComponent.name || 'Component';\r\n    const ComponentWithMotion = (props) => {\r\n        return (React.createElement(LazyMotion, { features: domAnimation, strict: true },\r\n            React.createElement(WrappedComponent, { ...props })));\r\n    };\r\n    ComponentWithMotion.displayName = `withMotion(${displayName})`;\r\n    return ComponentWithMotion;\r\n}\r\n","import { Device } from './media';\r\n/**\r\n * Base pixel value for the \"rem\" unit.\r\n */\r\nexport const PIXELS_PER_REM = 16;\r\n/**\r\n * Default pixel value for the min width.\r\n */\r\nexport const DEFAULT_MIN_VALUE = Device.Tablet;\r\n/**\r\n * Default pixel value for the max width.\r\n */\r\nexport const DEFAULT_MAX_VALUE = Device.ActualDesktop;\r\n/**\r\n * Define a fluid value between the min/max values at the min/max widths.\r\n */\r\nexport function fluid(min, max, minWidth = DEFAULT_MIN_VALUE, maxWidth = DEFAULT_MAX_VALUE) {\r\n    const minRem = min / PIXELS_PER_REM;\r\n    const maxRem = max / PIXELS_PER_REM;\r\n    const minWidthRem = minWidth / PIXELS_PER_REM;\r\n    const maxWidthRem = maxWidth / PIXELS_PER_REM;\r\n    const slope = (maxRem - minRem) / (maxWidthRem - minWidthRem);\r\n    const yAxisIntersection = -minWidthRem * slope + minRem;\r\n    const clampMin = `${round(minRem)}rem`;\r\n    const clampVal = `${round(yAxisIntersection)}rem + ${round(slope * 100)}vw`;\r\n    const clampMax = `${round(maxRem)}rem`;\r\n    return `clamp(${clampMin}, ${clampVal}, ${clampMax})`;\r\n}\r\n/**\r\n * Define a fluid value between the min/max values at the min/max widths.\r\n */\r\nexport function fluidUnit(min, max, unit = '', minWidth = DEFAULT_MIN_VALUE, maxWidth = DEFAULT_MAX_VALUE) {\r\n    const slope = (max - min) / (maxWidth - minWidth);\r\n    const yAxisIntersection = -minWidth * slope + min;\r\n    const clampMin = `${round(min)}`;\r\n    const clampVal = `${round(yAxisIntersection)}${unit} + ${round(slope * 100)}vw`;\r\n    const clampMax = `${round(max)}`;\r\n    return `clamp(${clampMin}${unit}, ${clampVal}, ${clampMax}${unit})`;\r\n}\r\n/**\r\n * Round to nearest hundredth.\r\n */\r\nfunction round(num) {\r\n    return Math.round(num * 100) / 100;\r\n}\r\n","import { css } from 'styled-components';\r\nimport fonts from './fonts';\r\nexport default {\r\n    inView: {\r\n        threshold: 0.25,\r\n        rootMargin: '0px 0px -25% 0px',\r\n        earlyRootMargin: '0px 0px -10% 0px',\r\n    },\r\n    globalThreshold: 0.25,\r\n    easeInOutCubic: 'cubic-bezier(0.645, 0.045, 0.355, 1)',\r\n};\r\nexport const slideInUpInitial = css `\r\n  > span {\r\n    opacity: 0;\r\n    transform: translateY(100%);\r\n  }\r\n`;\r\nexport function slideInUp(animate, duration, delay, easingFunc) {\r\n    return css `\r\n    overflow: hidden;\r\n\r\n    > span {\r\n      display: inline-block;\r\n      transition: transform ${duration}ms ${delay}ms ${easingFunc},\r\n        opacity ${duration}ms ${delay}ms ${easingFunc};\r\n    }\r\n\r\n    ${animate\r\n        ? css `\r\n          > span {\r\n            opacity: 1;\r\n            transform: translateY(0px);\r\n          }\r\n        `\r\n        : css `\r\n          ${slideInUpInitial};\r\n        `}\r\n  `;\r\n}\r\nexport function fadeInUp(animate, amount, duration, delay, easingFunc) {\r\n    return css `\r\n    transition: transform ${duration}ms ${delay}ms ${easingFunc},\r\n      opacity ${duration}ms ${delay}ms ${easingFunc};\r\n\r\n    ${animate\r\n        ? css `\r\n          opacity: 1;\r\n          transform: translateY(0px);\r\n        `\r\n        : css `\r\n          opacity: 0;\r\n          transform: translateY(${amount}px);\r\n        `}\r\n  `;\r\n}\r\nexport function fadeIn(animate, duration, delay, easingFunc) {\r\n    return css `\r\n    transition: opacity ${duration}ms ${delay}ms ${easingFunc};\r\n\r\n    ${animate\r\n        ? css `\r\n          opacity: 1;\r\n        `\r\n        : css `\r\n          opacity: 0;\r\n        `}\r\n  `;\r\n}\r\nconst backgroundAnimation = css `\r\n  background-size: 200% auto;\r\n  animation: multicoloured 5s linear infinite;\r\n\r\n  @keyframes multicoloured {\r\n    to {\r\n      background-position: 200% center;\r\n    }\r\n  }\r\n`;\r\nconst textClip = css `\r\n  background-clip: text;\r\n  -webkit-text-fill-color: transparent;\r\n  width: fit-content;\r\n`;\r\nexport const multicolouredBackground = css `\r\n  background: linear-gradient(\r\n    90deg,\r\n    rgba(213, 149, 91, 1) 0%,\r\n    rgba(213, 118, 86, 1) 20%,\r\n    rgba(100, 202, 185, 1) 40%,\r\n    rgba(150, 145, 204, 1) 60%,\r\n    rgba(182, 103, 202, 1) 80%,\r\n    rgba(174, 90, 188, 1) 100%\r\n  );\r\n\r\n  ${backgroundAnimation}\r\n`;\r\nexport const multicolouredAnimatedText = css `\r\n  ${fonts.brown.light}\r\n  ${multicolouredBackground};\r\n  ${textClip};\r\n`;\r\nexport const multicolouredBackgroundBright = css `\r\n  background: linear-gradient(\r\n    90deg,\r\n    #ed4141,\r\n    #ef523d,\r\n    #f0623a,\r\n    #f17138,\r\n    #f07e37,\r\n    #f08b39,\r\n    #ef983c,\r\n    #eda441,\r\n    #d8a936,\r\n    #c2ae30,\r\n    #aab231,\r\n    #90b439,\r\n    #73b645,\r\n    #50b754,\r\n    #08b766,\r\n    #50b754,\r\n    #73b645,\r\n    #90b439,\r\n    #aab231,\r\n    #c2ae30,\r\n    #d8a936,\r\n    #eda441,\r\n    #ef983c,\r\n    #f08b39,\r\n    #f07e37,\r\n    #f17138,\r\n    #f0623a,\r\n    #ef523d,\r\n    #ed4141\r\n  );\r\n\r\n  ${backgroundAnimation}\r\n`;\r\nexport const multicolouredTextBright = css `\r\n  ${fonts.brown.light}\r\n  ${multicolouredBackgroundBright};\r\n  ${textClip};\r\n`;\r\nexport const choirInTheSpireBackground = css `\r\n  background: linear-gradient(\r\n    90deg,\r\n    #f1563c 9%,\r\n    #e65352 10%,\r\n    #d34e79 11%,\r\n    #c74c92 12%,\r\n    #c34b9b 13%,\r\n    #00b3c1 40%,\r\n    #c34b9b 45%,\r\n    #f1563c 50%,\r\n    #f1563c 59%,\r\n    #e65352 60%,\r\n    #d34e79 61%,\r\n    #d34e79 62%,\r\n    #c74c92 63%,\r\n    #00b3c1 90%,\r\n    #c34b9b 95%,\r\n    #f1563c 100%\r\n  );\r\n\r\n  ${backgroundAnimation}\r\n`;\r\nexport const choirInTheSpireText = css `\r\n  ${choirInTheSpireBackground};\r\n  ${textClip};\r\n`;\r\nexport const cubicEaseOut = `cubic-bezier(0.33, 1, 0.68, 1)`;\r\nexport const shouldAnimate = (innerCss) => {\r\n    return css `\r\n    @media (prefers-reduced-motion: no-preference) {\r\n      ${innerCss}\r\n    }\r\n  `;\r\n};\r\nexport const transition = (properties, duration = 0.35, timing = cubicEaseOut) => {\r\n    return shouldAnimate(css `\r\n    transition-duration: ${typeof duration === 'string' ? duration : `${duration}s`};\r\n    transition-property: ${properties};\r\n    transition-timing-function: ${timing};\r\n    will-change: ${properties};\r\n  `);\r\n};\r\n","var _path;\n\nfunction _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nimport * as React from \"react\";\n\nfunction SvgTheShard(props) {\n  return /*#__PURE__*/React.createElement(\"svg\", _extends({\n    xmlns: \"http://www.w3.org/2000/svg\",\n    viewBox: \"0 0 223.58 41.818\"\n  }, props), _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n    fill: \"currentColor\",\n    d: \"M208.275 40.122c3.818 0 6.641-.769 8.884-2.421a12.767 12.767 0 000-20.293c-2.245-1.653-5.067-2.422-8.885-2.422h-6.283v25.136zm-7.689 1.308V13.678h7.767c4.154 0 7.117.807 9.605 2.618a14.082 14.082 0 010 22.514c-2.491 1.812-5.453 2.62-9.606 2.62zM183.385 26.834a6.1 6.1 0 004.2-1.247 5.947 5.947 0 001.81-4.153v-.907a6 6 0 00-1.817-4.3 6.1 6.1 0 00-4.2-1.243h-7.9v11.85zm9.161 14.593l-11.345-13.285h-5.711v13.292h-1.4V13.677h9.378a7.5 7.5 0 014.945 1.465 7.157 7.157 0 012.391 5.387v.921a7.081 7.081 0 01-2.391 5.231 7.5 7.5 0 01-4.944 1.464h-.512l11.345 13.285zM135.615 41.434V28.145h-19.4v13.289h-1.4V13.678h1.4v13.156h19.4V13.678h1.4v27.756zM98.314 41.817a10.128 10.128 0 01-8.969-4.784l-.17-.242 1.133-.839.179.278a8.868 8.868 0 007.866 4.279c4.359 0 6.639-3.045 6.639-6.054 0-2.595-1.326-4.375-4.3-5.774-.807-.365-1.7-.7-2.563-1.028-3.729-1.409-7.584-2.865-7.584-7.351 0-5.109 4.716-7.013 7.689-7.013a9.481 9.481 0 016.892 2.8l.211.208-.936 1-.226-.234a7.973 7.973 0 00-5.941-2.465 5.881 5.881 0 00-6.286 5.705c0 3.636 3.226 4.839 6.641 6.113.853.318 1.735.647 2.56 1.016 2.25.97 5.246 2.755 5.246 7.025s-3.4 7.362-8.082 7.362M57.317 41.434V13.678h14.751v1.308H58.72v11.848h10.6v1.308h-10.6v11.976h13.741v1.316zM47.7 41.434V28.145H28.3v13.289h-1.4V13.678h1.4v13.156h19.4V13.678h1.4v27.756zM8.637 41.433V14.986H0v-1.308h18.676v1.308h-8.637v26.447zM165.622 41.43l-3.424-13.283h-12.88l-3.426 13.283h-1.447L155.137 0h1.442l-6.9 26.766h12.169l-5.1-19.808h1.447l8.879 34.471z\"\n  })));\n}\n\nexport default __webpack_public_path__ + \"the-shard-c509e0fc5b7c4b709491bd6e4ce06b97.svg\";\nexport { SvgTheShard as ReactComponent };","import brand from '@helpers/brand';\r\nimport fonts from '@helpers/fonts';\r\nimport { Device, from } from '@helpers/media';\r\nimport styled, { css } from 'styled-components';\r\nconst Button = styled.button `\r\n  position: relative;\r\n  display: grid;\r\n  background: none;\r\n  border: 0;\r\n  ${fonts.brown.light};\r\n  font-size: 16px;\r\n  height: 22px;\r\n  line-height: 22px;\r\n  margin: auto 18px auto auto;\r\n  overflow: hidden;\r\n  padding: 0 26px 0 0;\r\n  text-align: left;\r\n\r\n  &::after,\r\n  &::before {\r\n    content: '';\r\n    position: absolute;\r\n    top: 50%;\r\n    right: 0;\r\n    display: block;\r\n    background: ${brand.black};\r\n    height: 1px;\r\n    transform-origin: 50% 50%;\r\n    transition: transform 0.15s ease-out, width 0.15s ease-out;\r\n  }\r\n\r\n  &::after {\r\n    transform: translateY(-50%) rotate(-76deg);\r\n    width: 22px;\r\n  }\r\n\r\n  &::before {\r\n    transform: translateY(-50%) translateY(2px) translateX(5px) rotate(-103deg);\r\n    width: 18px;\r\n  }\r\n\r\n  ${({ isActive }) => isActive &&\r\n    css `\r\n      &::after {\r\n        transform: translateY(-50%) rotate(-45deg);\r\n        width: 18px;\r\n      }\r\n\r\n      &::before {\r\n        transform: translateY(-50%) rotate(-135deg);\r\n        width: 18px;\r\n      }\r\n\r\n      ${TextOpen} {\r\n        opacity: 0;\r\n        transform: translateY(-22px);\r\n      }\r\n\r\n      ${TextClose} {\r\n        opacity: 1;\r\n        transform: translateY(-22px);\r\n      }\r\n    `}\r\n\r\n  @media ${from(Device.Desktop)} {\r\n    display: none;\r\n  }\r\n`;\r\nconst TextOpen = styled.span `\r\n  grid-column: 1;\r\n  grid-row: 1;\r\n  height: 22px;\r\n  opacity: 1;\r\n  transition: opacity ease-out 0.15s, transform ease-out 0.15s;\r\n`;\r\nconst TextClose = styled.span `\r\n  grid-column: 1;\r\n  grid-row: 2;\r\n  height: 22px;\r\n  opacity: 0;\r\n  transition: opacity ease-out 0.15s, transform ease-out 0.15s;\r\n`;\r\nexport default {\r\n    Button,\r\n    TextClose,\r\n    TextOpen,\r\n};\r\n","import React from 'react';\r\nimport S from './Navicon.styles';\r\nconst Navicon = ({ isActive, onClick }) => {\r\n    return (React.createElement(S.Button, { isActive: isActive, onClick: onClick },\r\n        React.createElement(S.TextOpen, { \"aria-hidden\": isActive }, \"Menu\"),\r\n        React.createElement(S.TextClose, { \"aria-hidden\": !isActive }, \"Close\")));\r\n};\r\nexport default Navicon;\r\n","import React from 'react';\r\nimport S from './TopLinks.styles';\r\nconst TopLinks = ({ items }) => {\r\n    return (React.createElement(S.Container, { \"aria-label\": \"Top Links\" },\r\n        React.createElement(S.List, null, items.map((item) => (React.createElement(S.Item, { key: item.id },\r\n            React.createElement(S.Link, { href: item.url, target: item.target, \"data-text\": item.title }, item.title)))))));\r\n};\r\nexport default TopLinks;\r\n","import { multicolouredTextBright, transition } from '@helpers/animation';\r\nimport brand from '@helpers/brand';\r\nimport { fluid } from '@helpers/fluid';\r\nimport fonts from '@helpers/fonts';\r\nimport { between, Device, until } from '@helpers/media';\r\nimport Link from '@stories/Components/Link/Link';\r\nimport styled, { css } from 'styled-components';\r\nimport TopLinksStyles from '../TopLinks/TopLinks.styles';\r\nconst Container = styled.nav `\r\n  display: block;\r\n  margin: auto 0 0 auto;\r\n  padding: 0 32px;\r\n\r\n  @media ${until(Device.Desktop)} {\r\n    position: fixed;\r\n    top: 46px;\r\n    left: 0;\r\n    display: none;\r\n    background: ${brand.white};\r\n    height: calc(100vh - 46px);\r\n    padding: 26px 0 0;\r\n    width: 100%;\r\n    z-index: 1;\r\n\r\n    ${({ isActive }) => isActive &&\r\n    css `\r\n        display: block;\r\n      `}\r\n\r\n    ${TopLinksStyles.Container} {\r\n      position: unset;\r\n      height: unset;\r\n      display: block;\r\n      background: unset;\r\n      padding: 57px 18px 0 18px;\r\n    }\r\n\r\n    ${TopLinksStyles.List} {\r\n      margin: unset;\r\n      flex-direction: column;\r\n    }\r\n\r\n    ${TopLinksStyles.Item} {\r\n      margin: 0 0 17px;\r\n    }\r\n\r\n    ${TopLinksStyles.Link} {\r\n      ${fonts.brown.light};\r\n      font-size: 16px;\r\n      line-height: 22px;\r\n      color: ${brand.black};\r\n    }\r\n  }\r\n`;\r\nconst List = styled.ul `\r\n  display: flex;\r\n  margin: 0 calc(${fluid(14, 20)} * -1);\r\n\r\n  @media ${until(Device.Desktop)} {\r\n    flex-direction: column;\r\n  }\r\n`;\r\nconst Item = styled.li `\r\n  display: flex;\r\n  align-items: center;\r\n  color: ${brand.black};\r\n  justify-content: flex-start;\r\n  margin: 0 ${fluid(16, 20)};\r\n  transition: color 0.15s ease-out;\r\n\r\n  &:focus-within,\r\n  &:hover {\r\n    color: ${brand.orange};\r\n  }\r\n\r\n  @media ${between(Device.Desktop, Device.DesktopLarge)} {\r\n    ${Container}[data-many-items='true'] & {\r\n      margin: 0 13px;\r\n    }\r\n  }\r\n`;\r\nconst StyledLink = styled(Link) `\r\n  display: flex;\r\n  align-items: center;\r\n  color: currentColor;\r\n  ${fonts.brown.regular};\r\n  font-size: ${fluid(16, 18)};\r\n  justify-content: flex-start;\r\n  line-height: 25px;\r\n  margin: 0 0 -1px;\r\n  outline: none;\r\n  padding: 0 0 21px;\r\n  text-decoration: none;\r\n\r\n  &:focus {\r\n    outline: none;\r\n  }\r\n\r\n  @media ${until(Device.Desktop)} {\r\n    border-bottom: 1px solid ${brand.grey.grey90};\r\n    flex: 1 1 auto;\r\n    ${fonts.brown.light};\r\n    font-size: 21px;\r\n    line-height: 23px;\r\n    margin: 0;\r\n    padding: 18px;\r\n  }\r\n\r\n  &[data-lights-link='true'] {\r\n    ${multicolouredTextBright};\r\n    ${transition('filter')};\r\n\r\n    font-weight: 600;\r\n\r\n    &:focus,\r\n    &:hover {\r\n      filter: grayscale(1);\r\n    }\r\n  }\r\n\r\n  &[data-lights-link='true']:focus,\r\n  &[data-lights-link='true']:hover {\r\n    color: ${brand.black};\r\n  }\r\n`;\r\nconst Icon = styled.span `\r\n  display: block;\r\n  height: 9px;\r\n  margin: 0 0 0 ${fluid(4, 6)};\r\n  transform: translateY(2px);\r\n  width: ${fluid(12, 14)};\r\n\r\n  @media ${until(Device.Desktop)} {\r\n    margin: 0 0 0 auto;\r\n    transform: rotate(-90deg);\r\n  }\r\n`;\r\nexport default {\r\n    Container,\r\n    Icon,\r\n    Item,\r\n    Link: StyledLink,\r\n    List,\r\n};\r\n","import { ReactComponent as SvgChevronDown } from '@img/icons/chevron-down.svg';\r\nimport React from 'react';\r\nimport TopLinks from '../TopLinks/TopLinks';\r\nimport S from './Navigation.styles';\r\nconst Navigation = ({ isActive, items, topLinks, onClick }) => {\r\n    return (React.createElement(S.Container, { isActive: isActive, \"aria-label\": \"Main Navigation\", \"data-many-items\": items.length > 6 },\r\n        React.createElement(S.List, null, items.map((item) => (React.createElement(S.Item, { key: item.id },\r\n            React.createElement(S.Link, { href: item.url, target: item.target, onClick: (event) => {\r\n                    if (item.children?.length) {\r\n                        event.preventDefault();\r\n                    }\r\n                    onClick(item.id);\r\n                }, \"data-lights-link\": item.isLightsLink },\r\n                React.createElement(\"span\", null, item.title),\r\n                !!item.children?.length && React.createElement(S.Icon, { as: SvgChevronDown })))))),\r\n        isActive && React.createElement(TopLinks, { items: topLinks })));\r\n};\r\nexport default Navigation;\r\n","import brand from '@helpers/brand';\r\nimport { fluid } from '@helpers/fluid';\r\nimport fonts from '@helpers/fonts';\r\nimport { Device, from, until } from '@helpers/media';\r\nimport Link from '@stories/Components/Link/Link';\r\nimport { m } from 'framer-motion';\r\nimport styled from 'styled-components';\r\nconst Container = styled(m.div) `\r\n  position: absolute;\r\n  top: 100%;\r\n  left: 0;\r\n  display: flex;\r\n  height: 456px;\r\n  width: 100%;\r\n  z-index: 1;\r\n\r\n  @media ${until(Device.Desktop)} {\r\n    position: fixed;\r\n    top: 46px;\r\n    left: 0;\r\n    display: block;\r\n    background: ${brand.grey.grey96};\r\n    height: calc(100vh - 46px);\r\n    padding: 0;\r\n    width: 100%;\r\n    z-index: 3;\r\n    opacity: unset !important;\r\n    transform: unset !important;\r\n  }\r\n`;\r\nconst ImageWrapper = styled.div `\r\n  position: relative;\r\n  display: flex;\r\n  flex: 1 1 50%;\r\n  filter: drop-shadow(0px 0px 12px rgba(0, 0, 0, 0.24));\r\n  clip-path: polygon(0% 0%, 100% 0%, calc(100% - 137px) 100%, 0% 100%);\r\n  background: ${brand.grey.grey90};\r\n  height: 522px;\r\n  z-index: 1;\r\n\r\n  @media ${until(Device.Desktop)} {\r\n    display: none;\r\n  }\r\n`;\r\nconst Image = styled(m.img) `\r\n  display: block;\r\n  background: ${brand.grey.grey96};\r\n  height: 100%;\r\n  object-fit: cover;\r\n  object-position: center left;\r\n  width: 100%;\r\n`;\r\nconst LinksWrapper = styled(m.div) `\r\n  position: relative;\r\n  display: flex;\r\n  flex: 1 1 50%;\r\n  padding: 51px 16px 51px 77px;\r\n  background: ${brand.grey.grey96};\r\n\r\n  height: fit-content;\r\n  max-height: 522px;\r\n\r\n  &:before {\r\n    content: '';\r\n    position: absolute;\r\n    top: 0;\r\n    left: -137px;\r\n    height: 100%;\r\n    width: 137px;\r\n    background: ${brand.grey.grey96};\r\n  }\r\n\r\n  &:after {\r\n    content: '';\r\n    position: absolute;\r\n    top: 0;\r\n    right: -137px;\r\n    height: 100%;\r\n    width: 138px;\r\n    clip-path: polygon(0% 0%, 100% 0%, 0 100%, 0% 100%);\r\n    background: ${brand.grey.grey96};\r\n  }\r\n\r\n  @media ${from(Device.DesktopLarge)} {\r\n    padding-left: 156px;\r\n  }\r\n\r\n  @media ${until(Device.Desktop)} {\r\n    flex: 1 1 auto;\r\n    padding: 0;\r\n    background: unset;\r\n    position: unset;\r\n    opacity: unset !important;\r\n    transform: unset !important;\r\n\r\n    &:before,\r\n    &:after {\r\n      display: none;\r\n    }\r\n  }\r\n`;\r\nconst LinksInner = styled(m.div) `\r\n  display: flex;\r\n  width: 100%;\r\n\r\n  @media ${until(Device.Desktop)} {\r\n    flex-direction: column;\r\n    opacity: unset !important;\r\n    transform: unset !important;\r\n  }\r\n`;\r\nconst BackWrapper = styled.div `\r\n  background: ${brand.white};\r\n  padding: 26px 0 0;\r\n\r\n  @media ${from(Device.Desktop)} {\r\n    display: none;\r\n  }\r\n`;\r\nconst BackButton = styled.button `\r\n  display: flex;\r\n  align-items: center;\r\n  background: none;\r\n  border: 0;\r\n  color: ${brand.black};\r\n  ${fonts.brown.regular};\r\n  font-size: 16px;\r\n  line-height: 18px;\r\n  padding: 14px 18px;\r\n  text-align: left;\r\n  width: 100%;\r\n\r\n  @media ${from(Device.Desktop)} {\r\n    display: none;\r\n  }\r\n`;\r\nconst BackIcon = styled.span `\r\n  display: block;\r\n  height: 11px;\r\n  margin: 0 10px 0 0;\r\n  transform: rotate(180deg);\r\n  width: 7px;\r\n`;\r\nconst BackText = styled.span ``;\r\nconst List = styled.ul `\r\n  display: flex;\r\n  flex: 0 0 auto;\r\n  flex-direction: column;\r\n  padding: 0 64px 0 0;\r\n\r\n  @media ${until(Device.Desktop)} {\r\n    padding: 0;\r\n    width: 100%;\r\n  }\r\n\r\n  @media ${from(Device.DesktopLarge)} {\r\n    padding-right: 128px;\r\n  }\r\n`;\r\nconst ListHeading = styled(Link) `\r\n  ${fonts.brown.light}\r\n  color: ${brand.black};\r\n  font-size: ${fluid(16, 32)};\r\n  margin-bottom: 40px;\r\n  text-decoration: none;\r\n\r\n  @media ${until(Device.Desktop)} {\r\n    ${fonts.brown.regular}\r\n    margin-bottom: 0;\r\n    padding: 18px;\r\n  }\r\n`;\r\nconst Item = styled.li `\r\n  display: flex;\r\n  margin: 0 0 16px;\r\n\r\n  &:focus-within,\r\n  &:hover {\r\n    ${() => StyledLink} {\r\n      text-decoration: underline;\r\n    }\r\n  }\r\n\r\n  @media ${until(Device.Desktop)} {\r\n    margin: 0;\r\n\r\n    &:focus-within,\r\n    &:hover {\r\n      ${() => StyledLink} {\r\n        text-decoration: none;\r\n      }\r\n    }\r\n  }\r\n`;\r\nconst StyledLink = styled(Link) `\r\n  display: flex;\r\n  align-items: center;\r\n  color: currentColor;\r\n  ${fonts.brown.light};\r\n  font-size: ${fluid(18, 24)};\r\n  line-height: ${fluid(23, 32)};\r\n  outline: none;\r\n  text-decoration: none;\r\n  text-underline-position: under;\r\n\r\n  &:focus {\r\n    outline: none;\r\n  }\r\n\r\n  @media ${until(Device.Desktop)} {\r\n    border-bottom: 1px solid ${brand.grey.grey90};\r\n    flex: 1 1 auto;\r\n    ${fonts.brown.light};\r\n    margin: 0;\r\n    padding: 18px;\r\n  }\r\n`;\r\nconst LinkIcon = styled.span `\r\n  display: block;\r\n  height: 14px;\r\n  margin: 0 10px 0 0;\r\n  transform: translateY(2px);\r\n  width: 9px;\r\n\r\n  @media ${until(Device.Desktop)} {\r\n    margin: 0 0 0 auto;\r\n    order: 2;\r\n  }\r\n`;\r\nconst LinkText = styled.span `\r\n  @media ${until(Device.Desktop)} {\r\n    order: 1;\r\n  }\r\n`;\r\nconst SummaryWrapper = styled.div `\r\n  display: block;\r\n  max-width: 387px;\r\n  padding: 10px 0;\r\n\r\n  @media ${until(Device.Desktop)} {\r\n    display: none;\r\n  }\r\n`;\r\nconst Summary = styled.p `\r\n  display: block;\r\n  ${fonts.brown.light};\r\n  font-size: 20px;\r\n  letter-spacing: normal;\r\n  line-height: 32px;\r\n`;\r\nexport default {\r\n    BackButton,\r\n    BackIcon,\r\n    BackText,\r\n    BackWrapper,\r\n    Container,\r\n    Image,\r\n    ImageWrapper,\r\n    Item,\r\n    Link: StyledLink,\r\n    LinkIcon,\r\n    LinkText,\r\n    LinksWrapper,\r\n    LinksInner,\r\n    List,\r\n    ListHeading,\r\n    Summary,\r\n    SummaryWrapper,\r\n};\r\n","import { imageUrl } from '@helpers/image';\r\nimport { withMotion } from '@hoc/withMotion';\r\nimport { ReactComponent as SvgChevronRight } from '@img/icons/chevron-right.svg';\r\nimport { AnimatePresence } from 'framer-motion';\r\nimport React, { useState } from 'react';\r\nimport S from './NavigationDropdown.styles';\r\nconst NavigationDropdown = ({ isActive, heading, headingLink, image, items = [], summary, onClose, }) => {\r\n    const [activeItemId, setActiveItemId] = useState('');\r\n    if (items.length === 0) {\r\n        return null;\r\n    }\r\n    const activeItem = items.find((item) => item.id === activeItemId);\r\n    const activeImage = activeItem?.image ?? image;\r\n    return (React.createElement(AnimatePresence, null, isActive && (React.createElement(S.Container, { initial: 'hidden', animate: 'visible', exit: 'hidden', variants: {\r\n            hidden: {\r\n                opacity: 0,\r\n                translateY: '-100%',\r\n                translateX: '137px',\r\n                transformOrigin: 'right',\r\n            },\r\n            visible: {\r\n                opacity: 1,\r\n                translateY: '0%',\r\n                translateX: '0px',\r\n            },\r\n        }, transition: { duration: 0.3 } },\r\n        React.createElement(S.ImageWrapper, null,\r\n            React.createElement(AnimatePresence, { exitBeforeEnter: true }, activeImage && (React.createElement(S.Image, { key: activeItemId, alt: \"\", loading: \"lazy\", role: \"presentation\", src: imageUrl(activeImage, { rmode: 'crop', width: 960, height: 540 }), initial: 'hidden', animate: 'visible', exit: 'hidden', variants: {\r\n                    hidden: {\r\n                        opacity: 0,\r\n                    },\r\n                    visible: {\r\n                        opacity: 1,\r\n                    },\r\n                }, transition: { duration: 0.15 } })))),\r\n        React.createElement(S.LinksWrapper, { initial: 'hidden', animate: 'visible', exit: 'hidden', variants: {\r\n                hidden: {\r\n                    opacity: 0,\r\n                    translateX: '-120%',\r\n                },\r\n                visible: {\r\n                    opacity: 1,\r\n                    translateX: '0%',\r\n                },\r\n            }, transition: { duration: 0.3, delay: 0.32 } },\r\n            React.createElement(S.LinksInner, { initial: 'hidden', animate: 'visible', exit: 'hidden', variants: {\r\n                    hidden: {\r\n                        opacity: 0,\r\n                        translateX: '40px',\r\n                    },\r\n                    visible: {\r\n                        opacity: 1,\r\n                        translateX: '0px',\r\n                    },\r\n                }, transition: { duration: 0.3, delay: 0.6 } },\r\n                React.createElement(S.BackWrapper, null,\r\n                    React.createElement(S.BackButton, { onClick: (event) => {\r\n                            event.preventDefault();\r\n                            onClose();\r\n                        } },\r\n                        React.createElement(S.BackIcon, { as: SvgChevronRight }),\r\n                        React.createElement(S.BackText, null, \"Go Back\"))),\r\n                React.createElement(S.List, null,\r\n                    heading && React.createElement(S.ListHeading, { href: headingLink }, heading),\r\n                    items.map((item) => (React.createElement(S.Item, { key: item.id, onMouseEnter: () => setActiveItemId(item.id), onMouseLeave: () => setActiveItemId(''), onFocus: () => setActiveItemId(item.id), onBlur: () => setActiveItemId('') },\r\n                        React.createElement(S.Link, { href: item.url, target: item.target },\r\n                            React.createElement(S.LinkIcon, { as: SvgChevronRight }),\r\n                            React.createElement(S.LinkText, null, item.title)))))),\r\n                React.createElement(S.SummaryWrapper, null,\r\n                    React.createElement(S.Summary, { key: activeItemId }, activeItem?.summary ?? summary))))))));\r\n};\r\nexport default withMotion(NavigationDropdown);\r\n","import { ReactComponent as SvgLogo } from '@img/logos/the-shard.svg';\r\nimport Navicon from '@stories/Components/Navicon/Navicon';\r\nimport Navigation from '@stories/Components/Navigation/Navigation';\r\nimport NavigationDropdown from '@stories/Components/NavigationDropdown/NavigationDropdown';\r\nimport TopLinks from '@stories/Components/TopLinks/TopLinks';\r\nimport React, { useRef, useState } from 'react';\r\nimport { useIsomorphicLayoutEffect, usePrevious, useWindowScroll } from 'react-use';\r\nimport S from './Header.styles';\r\nconst Header = ({ id, autoHide = false, navigation, topLinks, theme }) => {\r\n    const { y: scrollY } = useWindowScroll();\r\n    const previousScrollY = usePrevious(scrollY);\r\n    const [activeNavigationItemId, setActiveNavigationItemId] = useState('');\r\n    const [isMobileNavigationActive, setIsMobileNavigationActive] = useState(false);\r\n    const [isDesktopNavigationActive, setIsDesktopNavigationActive] = useState(false);\r\n    const [isHeaderPeeking, setIsHeaderPeeking] = useState(false);\r\n    const headerRef = useRef(null);\r\n    const activeNavigationItem = navigation.find((item) => item.id === activeNavigationItemId);\r\n    const hidden = autoHide && scrollY > 300 && !isHeaderPeeking;\r\n    React.useEffect(() => {\r\n        // use of any is fine here, as we'd expect this function to always run\r\n        // eslint-disable-next-line\r\n        function handleClickOutside(event) {\r\n            if (headerRef.current && !headerRef.current.contains(event.target)) {\r\n                setIsDesktopNavigationActive(false);\r\n                setActiveNavigationItemId('');\r\n            }\r\n        }\r\n        document.addEventListener('mousedown', handleClickOutside);\r\n        return () => {\r\n            document.removeEventListener('mousedown', handleClickOutside);\r\n        };\r\n    }, [headerRef]);\r\n    useIsomorphicLayoutEffect(() => {\r\n        if (previousScrollY === undefined) {\r\n            return;\r\n        }\r\n        if (previousScrollY > scrollY) {\r\n            setIsHeaderPeeking(true);\r\n        }\r\n        else if (previousScrollY < scrollY) {\r\n            setIsHeaderPeeking(false);\r\n        }\r\n    }, [previousScrollY]);\r\n    return (React.createElement(React.Fragment, null,\r\n        React.createElement(S.Container, { ref: headerRef, id: id, visible: !hidden, \"data-header-theme\": theme },\r\n            React.createElement(S.Inner, null,\r\n                React.createElement(S.LogoLink, { href: \"/\", \"aria-label\": \"The Shard\" },\r\n                    React.createElement(S.Logo, { as: SvgLogo })),\r\n                React.createElement(Navicon, { isActive: isMobileNavigationActive, onClick: (event) => {\r\n                        event.preventDefault();\r\n                        setIsMobileNavigationActive(!isMobileNavigationActive);\r\n                        setActiveNavigationItemId('');\r\n                    } }),\r\n                React.createElement(TopLinks, { items: topLinks }),\r\n                React.createElement(Navigation, { isActive: isMobileNavigationActive, items: navigation, topLinks: topLinks, onClick: (id) => {\r\n                        setIsDesktopNavigationActive(true);\r\n                        if (id === activeNavigationItemId) {\r\n                            setIsDesktopNavigationActive(false);\r\n                            setActiveNavigationItemId('');\r\n                        }\r\n                        else {\r\n                            setActiveNavigationItemId(id);\r\n                        }\r\n                    } })),\r\n            React.createElement(NavigationDropdown, { isActive: isDesktopNavigationActive, image: activeNavigationItem?.image, items: activeNavigationItem?.children, heading: activeNavigationItem?.title, headingLink: activeNavigationItem?.url, summary: activeNavigationItem?.summary, onClose: () => setActiveNavigationItemId('') })),\r\n        React.createElement(S.Overlay, { \"aria-hidden\": true, \"data-active\": isDesktopNavigationActive })));\r\n};\r\nexport default Header;\r\n","var _path;\n\nfunction _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nimport * as React from \"react\";\n\nfunction SvgChevronRight(props) {\n  return /*#__PURE__*/React.createElement(\"svg\", _extends({\n    xmlns: \"http://www.w3.org/2000/svg\",\n    viewBox: \"0 0 8.645 14\"\n  }, props), _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n    d: \"M0 1.645L5.343 7 0 12.355 1.645 14l7-7-7-7z\",\n    fill: \"currentColor\"\n  })));\n}\n\nexport default __webpack_public_path__ + \"chevron-right-07c634cda3d4efe11cdbaf3aa05807ac.svg\";\nexport { SvgChevronRight as ReactComponent };","import { css } from 'styled-components';\r\nimport { setCssVar } from './cssVar';\r\nimport greyscale from './grey';\r\nconst brand = {\r\n    black: '#000000',\r\n    blue: '#b7cbeb',\r\n    blueGrey: '#eff1f1',\r\n    blueTint: '#eef1f8',\r\n    grey: greyscale,\r\n    orange: '#f96a1d',\r\n    white: '#fff',\r\n    validation: {\r\n        invalid: '#da291c',\r\n        valid: '#008c15',\r\n    },\r\n};\r\nexport const lightTheme = css `\r\n  ${setCssVar('fgColor', brand.black)};\r\n  ${setCssVar('bgColor', brand.white)};\r\n  ${setCssVar('bgColorAlt', brand.grey.grey90)};\r\n  ${setCssVar('bgColorAlt2', brand.grey.grey96)};\r\n  ${setCssVar('accentColor', brand.orange)};\r\n  ${setCssVar('colorScheme', 'light')};\r\n`;\r\nexport const darkTheme = css `\r\n  ${setCssVar('fgColor', brand.white)};\r\n  ${setCssVar('bgColor', brand.black)};\r\n  ${setCssVar('bgColorAlt', brand.grey.grey10)};\r\n  ${setCssVar('bgColorAlt2', brand.black)};\r\n  ${setCssVar('accentColor', brand.orange)};\r\n  ${setCssVar('colorScheme', 'dark')};\r\n`;\r\nexport const themes = {\r\n    dark: darkTheme,\r\n    light: lightTheme,\r\n};\r\nexport default brand;\r\n","import { hsl } from 'polished';\r\nconst greyscaleValues = [10, 18, 46, 73, 90, 96];\r\nconst greyscale = greyscaleValues.reduce((previous, current) => ({\r\n    ...previous,\r\n    [`grey${current}`]: grey(current),\r\n}), {});\r\nfunction grey(value) {\r\n    return hsl(0, 0, value / 100);\r\n}\r\nexport { greyscale as default, grey };\r\n","const variables = [\r\n    'fgColor',\r\n    'bgColor',\r\n    'bgColorAlt',\r\n    'bgColorAlt2',\r\n    'accentColor',\r\n    'siteWidth',\r\n    'sitePadding',\r\n    'sectionMargin',\r\n    'colorScheme',\r\n];\r\nfunction cssVar(name) {\r\n    return `var(--${name})`;\r\n}\r\nfunction setCssVar(name, value) {\r\n    return `--${name}: ${value}`;\r\n}\r\nexport { cssVar, setCssVar };\r\n","import { css } from 'styled-components';\r\nexport default {\r\n    brown: {\r\n        thin: css `\r\n      font-family: 'Brown', sans-serif;\r\n      font-style: normal;\r\n      font-weight: 100;\r\n    `,\r\n        thinItalic: css `\r\n      font-family: 'Brown', sans-serif;\r\n      font-weight: 100;\r\n      font-style: italic;\r\n    `,\r\n        light: css `\r\n      font-family: 'Brown', sans-serif;\r\n      font-style: normal;\r\n      font-weight: 300;\r\n    `,\r\n        lightItalic: css `\r\n      font-family: 'Brown', sans-serif;\r\n      font-weight: 300;\r\n      font-style: italic;\r\n    `,\r\n        regular: css `\r\n      font-family: 'Brown', sans-serif;\r\n      font-style: normal;\r\n      font-weight: 400;\r\n    `,\r\n        regularItalic: css `\r\n      font-family: 'Brown', sans-serif;\r\n      font-weight: 400;\r\n      font-style: italic;\r\n    `,\r\n        bold: css `\r\n      font-family: 'Brown', sans-serif;\r\n      font-style: normal;\r\n      font-weight: 700;\r\n    `,\r\n        boldItalic: css `\r\n      font-family: 'Brown', sans-serif;\r\n      font-weight: 700;\r\n      font-style: italic;\r\n    `,\r\n    },\r\n};\r\n","var _path;\n\nfunction _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nimport * as React from \"react\";\n\nfunction SvgChevronDown(props) {\n  return /*#__PURE__*/React.createElement(\"svg\", _extends({\n    xmlns: \"http://www.w3.org/2000/svg\",\n    viewBox: \"0 0 14 8.645\"\n  }, props), _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n    d: \"M1 1.645L7 7l6-5.355\",\n    fill: \"none\",\n    stroke: \"currentColor\",\n    strokeWidth: 2\n  })));\n}\n\nexport default __webpack_public_path__ + \"chevron-down-e4e3060b9c3f390a0e95d31e18b67fb3.svg\";\nexport { SvgChevronDown as ReactComponent };","import queryString from 'query-string';\r\n/**\r\n * Create an image URL for ImageSharp\r\n * @param image The image model\r\n * @param imageParams The image parameters\r\n * @returns The image URL\r\n */\r\nexport function imageUrl(image, imageParams) {\r\n    if (!image || !image.src) {\r\n        return '';\r\n    }\r\n    /**\r\n     * Remove any query param string to ensure paramsString is applied correctly and\r\n     * there are no double definitions (setting a param twice prevents any tranformations)\r\n     */\r\n    const imageSource = image.src.split('?')[0];\r\n    const params = {\r\n        rxy: image.focalPoint ? `${image.focalPoint.left},${image.focalPoint.top}` : undefined,\r\n        rmode: 'crop',\r\n        // Define default quality as 95 to ensure some reduction in size for all but the smallest images\r\n        quality: imageParams.width && imageParams.width > 400 ? 95 : undefined,\r\n        ...imageParams,\r\n    };\r\n    // Imagesharp doesn't support heightratio parameter. Convert to height parameter for compatibility.\r\n    if (imageParams.heightratio !== undefined && imageParams.width !== undefined) {\r\n        params.height = imageParams.width * imageParams.heightratio;\r\n    }\r\n    const paramsString = queryString.stringify(params);\r\n    return `${imageSource}${paramsString ? `?${queryString.stringify(params)}` : ''}`;\r\n}\r\nexport function getSrcs(image, upper, lower, steps, ratio) {\r\n    const sizes = getRange(upper, lower, steps);\r\n    return sizes.map((size) => `${imageUrl(image, { width: size, heightratio: ratio })} ${size}w`);\r\n}\r\nexport function getRetinaSrcs(image, width, ratio) {\r\n    const dprs = [1, 1.5, 2, 2.5, 3];\r\n    return dprs.map((dpr) => `${imageUrl(image, { width: width * dpr, heightratio: ratio })} ${dpr}x`);\r\n}\r\nfunction getRange(upper, lower, steps) {\r\n    const difference = upper - lower;\r\n    const increment = difference / (steps - 1);\r\n    return [\r\n        lower,\r\n        ...Array(steps - 2)\r\n            .fill('')\r\n            .map((_, index) => Math.ceil(lower + increment * (index + 1))),\r\n        upper,\r\n    ];\r\n}\r\n"],"sourceRoot":""}