{"version":3,"file":"668-6850ae19376588449e24.js","mappings":"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","sources":["webpack://royal-college-radiologists/./src/img/branding-graphics/curves-wheel.svg","webpack://royal-college-radiologists/./src/stories/Widgets/HomepageHeroBanner/HomepageHeroBanner.styles.ts","webpack://royal-college-radiologists/./src/stories/Widgets/HomepageHeroBanner/HomepageHeroBanner.tsx"],"sourcesContent":["var _path, _path2;\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }\nimport * as React from \"react\";\nfunction SvgCurvesWheel(props) {\n  return /*#__PURE__*/React.createElement(\"svg\", _extends({\n    xmlns: \"http://www.w3.org/2000/svg\",\n    viewBox: \"0 0 136.3 136.3\"\n  }, props), _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n    className: \"curves-wheel_svg__st3\",\n    d: \"M115.2 115.2c6.3-6.3 7.2-16 2.7-23.3l-8.6-13.8c-1.8-2.9-2.8-6.3-2.8-9.9s1-7 2.8-9.9l8.6-13.8c4.5-7.3 3.6-17-2.7-23.3-6.3-6.3-16-7.2-23.3-2.7L78.1 27c-2.9 1.8-6.3 2.8-9.9 2.8-3.6 0-7-1-9.9-2.8l-13.8-8.6c-7.3-4.5-17-3.6-23.3 2.7-6.3 6.3-7.2 16-2.7 23.3L27 58.2c1.8 2.9 2.8 6.3 2.8 9.9s-1 7-2.8 9.9l-8.6 13.8c-4.5 7.3-3.6 17 2.7 23.3 6.3 6.3 16 7.2 23.3 2.7l13.8-8.6c2.9-1.8 6.3-2.8 9.9-2.8s7 1 9.9 2.8l13.8 8.6c7.4 4.6 17.1 3.7 23.4-2.6z\",\n    fill: \"none\",\n    stroke: \"currentColor\",\n    strokeWidth: 0.25,\n    strokeMiterlimit: 10,\n    strokeDasharray: \"0.9992,0.9992\"\n  })), _path2 || (_path2 = /*#__PURE__*/React.createElement(\"path\", {\n    className: \"curves-wheel_svg__st0\",\n    d: \"M68.2 134.6c8.9 0 16.4-6.2 18.4-14.5l3.7-15.8c.8-3.3 2.5-6.4 5-9 2.6-2.6 5.7-4.2 9-5l15.8-3.7c8.3-2 14.5-9.4 14.5-18.4s-6.2-16.4-14.5-18.4l-15.8-3.7c-3.3-.8-6.4-2.5-9-5-2.6-2.6-4.2-5.7-5-9l-3.7-15.8C84.6 8 77.2 1.8 68.2 1.8c-8.9 0-16.4 6.2-18.4 14.5L46.1 32c-.8 3.3-2.5 6.4-5 9-2.6 2.6-5.7 4.2-9 5l-15.8 3.7C8 51.7 1.8 59.1 1.8 68.1 1.8 77 8 84.5 16.3 86.5L32 90.3c3.3.8 6.4 2.5 9 5 2.6 2.6 4.2 5.7 5 9l3.7 15.8c2 8.3 9.5 14.5 18.5 14.5z\",\n    fill: \"none\",\n    stroke: \"currentColor\",\n    strokeWidth: 0.25,\n    strokeMiterlimit: 10\n  })));\n}\nexport default SvgCurvesWheel;","import { transition } from '@helpers/animate';\r\nimport { imageCoverContainer } from '@helpers/aspectRatio';\r\nimport brand from '@helpers/brand';\r\nimport { fluid } from '@helpers/fluid';\r\nimport { ButtonReset } from '@helpers/global';\r\nimport { baseGrid, siteWide } from '@helpers/grid';\r\nimport { Device, from, until } from '@helpers/media';\r\nimport { headingStyles, paragraphSmall } from '@helpers/typography';\r\nimport { ButtonStyles } from '@stories/Components/Buttons/GeneralButton/Button.styles';\r\nimport SkipLinkStyles from '@stories/Components/General/SkipLink/SkipLink.styles';\r\nimport styled, { css } from 'styled-components';\r\nconst Container = styled.section `\r\n  --bgColour: ${brand.primary.purple};\r\n  --fgColour: ${brand.primary.offWhite};\r\n\r\n  position: relative;\r\n  display: flex;\r\n  min-height: 100vh;\r\n  background-color: var(--bgColour);\r\n\r\n  ${SkipLinkStyles.Container} {\r\n    position: absolute;\r\n    top: var(--headerHeight, 0px);\r\n    left: 50%;\r\n    transform: translateX(-50%);\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  ${siteWide};\r\n  ${baseGrid};\r\n\r\n  grid-template-rows: 1.15fr 1fr;\r\n\r\n  @media ${from(Device.TabletLarge)} {\r\n    grid-template-rows: auto 1fr;\r\n    row-gap: ${fluid(20, 40)};\r\n  }\r\n`;\r\nconst Image = styled.img `\r\n  ${transition('opacity', 1)};\r\n  ${imageCoverContainer()};\r\n\r\n  &[data-active='false'] {\r\n    opacity: 0;\r\n    pointer-events: none;\r\n    visibility: hidden;\r\n  }\r\n`;\r\nconst ContentWrapper = styled.div `\r\n  ${transition('opacity, transform')};\r\n\r\n  grid-column: 1 / span 12;\r\n  grid-row: 1 / span 1;\r\n\r\n  display: flex;\r\n  align-items: flex-start;\r\n  justify-content: flex-end;\r\n  flex-direction: column;\r\n  padding: var(--headerHeight, 0px) 0 0;\r\n  position: relative;\r\n  z-index: 1;\r\n\r\n  &[data-active='false'] {\r\n    pointer-events: none;\r\n    opacity: 0;\r\n    transform: translateY(15%);\r\n\r\n    ${ButtonStyles.Button} {\r\n      opacity: 0;\r\n      transform: translateX(-15%);\r\n    }\r\n  }\r\n\r\n  ${ButtonStyles.Button} {\r\n    ${transition('opacity, transform')};\r\n\r\n    order: 3;\r\n    transition-delay: 600ms;\r\n  }\r\n\r\n  @media ${from(Device.TabletLarge)} {\r\n    grid-column: 7 / span 6;\r\n  }\r\n\r\n  @media ${from(Device.Desktop)} {\r\n    grid-column: 7 / span 5;\r\n  }\r\n`;\r\nconst titleStyles = css `\r\n  ${headingStyles};\r\n\r\n  font-size: ${fluid(40, 86)};\r\n  line-height: ${fluid(46, 98)};\r\n  color: var(--fgColour);\r\n`;\r\nconst Title = styled.h1 `\r\n  ${transition('opacity, transform')};\r\n  ${titleStyles};\r\n\r\n  order: 2;\r\n  transition-delay: 300ms;\r\n\r\n  ${ContentWrapper}[data-active='false'] & {\r\n    opacity: 0;\r\n    transform: translateX(-15%);\r\n  }\r\n`;\r\nconst Subtitle = styled.span `\r\n  ${transition('background-size', 1)};\r\n  ${titleStyles};\r\n\r\n  order: 1;\r\n  color: transparent;\r\n  background: transparent;\r\n  background-image: linear-gradient(to right, var(--highlightColour), var(--highlightColour));\r\n  background-repeat: no-repeat;\r\n  background-size: 100% 100%;\r\n  -webkit-background-clip: text;\r\n  background-clip: text;\r\n  transition-delay: 0.05s;\r\n\r\n  ${ContentWrapper}[data-animate='false'] & {\r\n    background-size: 0% 100%;\r\n  }\r\n\r\n  @media ${from(Device.TabletLarge)} {\r\n    transition-delay: 550ms;\r\n    transition-duration: 1.5s;\r\n  }\r\n\r\n  @media ${from(Device.Desktop)} {\r\n    transition-delay: 0.75s;\r\n    transition-duration: 2.3s;\r\n  }\r\n`;\r\nconst TabsWrapper = styled.div `\r\n  grid-column: 1 / span 12;\r\n  grid-row: 2 / span 1;\r\n\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: flex-end;\r\n  justify-content: flex-end;\r\n  gap: ${fluid(14, 28)};\r\n  padding: ${fluid(10, 20)} 0 ${fluid(30, 50)};\r\n\r\n  @media ${from(Device.TabletLarge)} {\r\n    flex-direction: row;\r\n  }\r\n`;\r\nconst TabButton = styled.button `\r\n  ${ButtonReset};\r\n  ${paragraphSmall};\r\n  ${transition('color')};\r\n\r\n  position: relative;\r\n  text-decoration: none;\r\n  padding: ${fluid(8, 12)} 0 ${fluid(4, 6)};\r\n  display: inline-flex;\r\n  align-items: flex-start;\r\n  color: var(--fgColour);\r\n  text-transform: uppercase;\r\n  margin: 0;\r\n\r\n  &::after {\r\n    ${transition('background-size')};\r\n\r\n    content: '';\r\n    display: block;\r\n    position: absolute;\r\n    bottom: 0;\r\n    left: 0;\r\n    height: 2px;\r\n    width: 100%;\r\n    background: transparent;\r\n    background-image: linear-gradient(to right, var(--fgColour), var(--fgColour));\r\n    background-repeat: no-repeat;\r\n    background-size: 0% 100%;\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  &:not([data-active='true']) {\r\n    &.focus-ring,\r\n    &:hover {\r\n      color: var(--highlightColour);\r\n    }\r\n  }\r\n\r\n  &[data-active='true']::after {\r\n    background-size: 100% 100%;\r\n  }\r\n`;\r\nconst FallbackIcon = styled.div `\r\n  ${transition('opacity', 1)};\r\n\r\n  position: absolute;\r\n  left: 1%;\r\n  bottom: 3%;\r\n  width: 60%;\r\n  overflow: hidden;\r\n\r\n  &[data-active='false'] {\r\n    opacity: 0;\r\n    pointer-events: none;\r\n\r\n    > svg {\r\n      transform: none;\r\n    }\r\n  }\r\n\r\n  > svg {\r\n    ${transition('transform', 0.5)};\r\n\r\n    display: block;\r\n    width: 100%;\r\n    color: var(--fgColour);\r\n    transform: rotate(13deg);\r\n    transition-delay: 200ms;\r\n\r\n    path:last-of-type {\r\n      stroke: var(--highlightColour);\r\n    }\r\n  }\r\n\r\n  @media ${from(Device.TabletLarge)} {\r\n    width: 37.5%;\r\n  }\r\n`;\r\nconst BeamWrapper = styled.div `\r\n  ${transition('opacity', 0.5)};\r\n\r\n  grid-column: 1 / span 12;\r\n  grid-row: 1 / span 2;\r\n  pointer-events: none;\r\n\r\n  &[data-animate='false'] {\r\n    opacity: 0;\r\n    transition-duration: 0ms;\r\n  }\r\n\r\n  @media ${from(Device.Desktop)} {\r\n    grid-column: 2 / span 10;\r\n  }\r\n`;\r\nconst LightBeam = styled.div `\r\n  ${transition('transform', 1)};\r\n\r\n  height: 100%;\r\n  width: 100%;\r\n  background: transparent;\r\n  background-image: linear-gradient(\r\n    to right,\r\n    transparent calc(100% - 54px),\r\n    hsla(var(--highlightColour) / 0.33) calc(100% - 16px),\r\n    hsla(var(--highlightColour) / 0.6) calc(100% - 1px),\r\n    hsla(var(--highlightColour) / 0.8) 100%\r\n  );\r\n  background-repeat: no-repeat;\r\n  background-size: 100% 100%;\r\n\r\n  ${BeamWrapper}[data-animate='false'] & {\r\n    transform: translateX(calc((100% - 4px) * -1));\r\n  }\r\n\r\n  @media ${until(Device.Desktop)} {\r\n    width: calc(100% + (var(--sitePadding) * 2));\r\n    margin-left: calc(var(--sitePadding) * -1);\r\n  }\r\n\r\n  @media ${from(Device.Desktop)} {\r\n    transition-duration: 2.6s;\r\n  }\r\n`;\r\nconst HomepageHeroBannerStyles = {\r\n    BeamWrapper,\r\n    Container,\r\n    ContentWrapper,\r\n    FallbackIcon,\r\n    Image,\r\n    Inner,\r\n    LightBeam,\r\n    Subtitle,\r\n    TabButton,\r\n    TabsWrapper,\r\n    Title,\r\n};\r\nexport default HomepageHeroBannerStyles;\r\n","import brand from '@helpers/brand';\r\nimport { getRetinaSrcs, imageUrl } from '@helpers/image';\r\nimport { Device, from } from '@helpers/media';\r\nimport SvgWheel from '@img/branding-graphics/curves-wheel.svg';\r\nimport { LinkButton } from '@stories/Components/Buttons/GeneralButton/Button';\r\nimport ScrollIndictator from '@stories/Components/General/ScrollIndictator/ScrollIndictator';\r\nimport SkipLink from '@stories/Components/General/SkipLink/SkipLink';\r\nimport { parseToHsl } from 'polished';\r\nimport * as React from 'react';\r\nimport { FocusRing } from 'react-aria';\r\nimport S from './HomepageHeroBanner.styles';\r\nconst HomepageHeroBanner = ({ initial = 0, ...props }) => {\r\n    const initialId = props.items[initial].id;\r\n    const [active, setActive] = React.useState(initialId);\r\n    const [animate, setAnimate] = React.useState(false);\r\n    React.useEffect(() => setAnimate(true), []);\r\n    return (React.createElement(S.Container, { \"data-variant\": \"dark\" },\r\n        React.createElement(SkipLink, null),\r\n        props.items.map((item, i) => (React.createElement(React.Fragment, { key: `${item.id}-image` }, item.image ? (renderImage(item.image, item.id === active, i)) : (React.createElement(S.FallbackIcon, { \"data-active\": item.id === active, style: {\r\n                '--highlightColour': brand.tertiary[item.highlightColour],\r\n            } },\r\n            React.createElement(SvgWheel, null)))))),\r\n        React.createElement(S.Inner, null,\r\n            renderContent(props.items[initial], true),\r\n            props.items.map((item, i) => (React.createElement(React.Fragment, null, i === initial ? null : renderContent(item, false)))),\r\n            React.createElement(S.TabsWrapper, null,\r\n                props.items.map((item) => (React.createElement(FocusRing, { key: `${item.id}-tab`, focusRingClass: \"focus-ring\" },\r\n                    React.createElement(S.TabButton, { onClick: () => setActive(item.id), \"data-active\": item.id === active, style: {\r\n                            '--highlightColour': brand.tertiary[item.highlightColour],\r\n                        } }, item.tabLabel ?? item.title)))),\r\n                React.createElement(ScrollIndictator, null)))));\r\n    function renderImage(image, active, index) {\r\n        return (React.createElement(\"picture\", null,\r\n            React.createElement(\"source\", { media: from(Device.ActualDesktop + 1), srcSet: getRetinaSrcs(image, 2560, 1440).join(',') }),\r\n            React.createElement(\"source\", { media: from(Device.DesktopLarge), srcSet: getRetinaSrcs(image, 1920, 1080).join(',') }),\r\n            React.createElement(\"source\", { media: from(Device.Desktop), srcSet: getRetinaSrcs(image, 1600, 1200).join(',') }),\r\n            React.createElement(\"source\", { media: from(Device.TabletLarge), srcSet: getRetinaSrcs(image, 1366, 768).join(',') }),\r\n            React.createElement(\"source\", { media: from(Device.Tablet), srcSet: getRetinaSrcs(image, 1024, 768).join(',') }),\r\n            React.createElement(\"source\", { media: from(Device.MobileLarge), srcSet: getRetinaSrcs(image, 768, 1024).join(',') }),\r\n            React.createElement(S.Image, { src: imageUrl(image, { width: 479, height: 989 }), srcSet: getRetinaSrcs(image, 479, 989).join(','), alt: image.altText, role: !image.altText ? 'presentation' : undefined, \"data-active\": active, loading: index === 0 ? 'eager' : 'lazy' })));\r\n    }\r\n    function renderContent(item, isFirst) {\r\n        const hsl = parseToHsl(brand.tertiary[item.highlightColour]);\r\n        const hslString = `${hsl.hue} ${hsl.saturation * 100}% ${hsl.lightness * 100}%`;\r\n        return (React.createElement(React.Fragment, { key: `${item.id}-content` },\r\n            React.createElement(S.ContentWrapper, { \"data-active\": item.id === active, \"data-animate\": item.id === active && animate, style: {\r\n                    '--highlightColour': brand.tertiary[item.highlightColour],\r\n                } },\r\n                React.createElement(S.Title, { as: isFirst ? 'h1' : 'h2' }, item.title),\r\n                React.createElement(S.Subtitle, null, item.subtitle),\r\n                item.cta && (React.createElement(LinkButton, { branding: \"outline\", href: item.cta.url, target: item.cta.target, title: item.cta.text ?? `Discover ${item.tabLabel ?? item.title}`, tabIndex: item.id !== active ? -1 : undefined }))),\r\n            React.createElement(S.BeamWrapper, { \"data-active\": item.id === active, \"data-animate\": item.id === active && animate, style: {\r\n                    '--highlightColour': hslString,\r\n                } },\r\n                React.createElement(S.LightBeam, null))));\r\n    }\r\n};\r\nexport default HomepageHeroBanner;\r\n"],"names":["_path","_path2","_extends","Object","assign","bind","target","i","arguments","length","source","key","prototype","hasOwnProperty","call","apply","this","props","xmlns","viewBox","className","d","fill","stroke","strokeWidth","strokeMiterlimit","strokeDasharray","Container","styled","section","withConfig","displayName","componentId","brand","primary","purple","offWhite","SkipLinkStyles","Inner","div","siteWide","baseGrid","from","Device","TabletLarge","fluid","Image","img","transition","imageCoverContainer","ContentWrapper","ButtonStyles","Button","Desktop","titleStyles","css","headingStyles","Title","h1","Subtitle","span","TabsWrapper","TabButton","button","ButtonReset","paragraphSmall","FallbackIcon","BeamWrapper","LightBeam","until","_ref","initial","initialId","items","id","active","setActive","React","animate","setAnimate","S","SkipLink","map","item","image","index","media","ActualDesktop","srcSet","getRetinaSrcs","join","DesktopLarge","Tablet","MobileLarge","src","imageUrl","width","height","alt","altText","role","undefined","loading","renderImage","style","tertiary","highlightColour","SvgWheel","renderContent","_item$tabLabel","FocusRing","focusRingClass","onClick","tabLabel","title","ScrollIndictator","isFirst","_item$cta$text","_item$tabLabel2","hsl","parseToHsl","hslString","hue","saturation","lightness","as","subtitle","cta","LinkButton","branding","href","url","text","tabIndex"],"sourceRoot":""}