{"version":3,"sources":["webpack:///./src/helpers/aspectRatio.ts","webpack:///./src/stories/Widgets/InsightHero/InsightHero.styles.ts","webpack:///./src/stories/Widgets/InsightHero/InsightHero.tsx"],"names":["imageWrapperPreserveRatio","width","height","css","aspectRatio","imageCoverContainer","relative","Container","styled","article","brand","black","Inner","div","siteWide","from","Device","TabletLarge","BackgroundLogo","span","grey","fluid","yellow","BreadcrumbWrapper","BreadcrumbStyles","HeroWrapper","DesktopSmall","DesktopLarge","TitleWrapper","white","Title","h1","headingStyles","Intro","p","paragraphLarge","BlogHeroStyles","Image","img","ImageViewer","Video","video","InsightHero","props","React","S","id","as","SvgBg","breadcrumbs","Breadcrumbs","items","theme","ArticleMeta","date","tag","title","intro","image","media","sizes","srcSet","getSrcs","join","alt","altText","draggable","loading","role","undefined","src","imageUrl","heightratio","autoPlay","loop","muted","playsInline","type","videoUrl","audio","format"],"mappings":"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","file":"InsightHero-0a007fa1565135a060f9.js","sourcesContent":["import { css } from 'styled-components';\r\n/**\r\n * Returns the aspect ratio of the given width and height as a percentage.\r\n */\r\nexport function aspectRatio(width, height) {\r\n    return (height / width) * 100;\r\n}\r\n/**\r\n * Re-usable styles for image container where the\r\n * image needs to maintain it's aspect ratio\r\n *\r\n * @param width\r\n * @param height\r\n * @returns\r\n */\r\nexport function imageWrapperPreserveRatio(width, height) {\r\n    if (!width && !height) {\r\n        return null;\r\n    }\r\n    return css `\r\n    position: relative;\r\n    height: 0;\r\n    width: 100%;\r\n    overflow: hidden;\r\n    overflow: clip;\r\n    padding-bottom: ${aspectRatio(width, height)}%;\r\n  `;\r\n}\r\n/**\r\n * Re-usable styles for an image placed within\r\n * a container maintaining aspect ratio\r\n */\r\nexport const imageCoverContainer = (relative) => css `\r\n  display: block;\r\n  width: 100%;\r\n  height: 100%;\r\n  object-fit: cover;\r\n  object-position: center;\r\n  ${!relative && 'position: absolute; top: 0;left: 0;'}\r\n`;\r\n","import { imageCoverContainer, imageWrapperPreserveRatio } from '@helpers/aspectRatio';\r\nimport brand from '@helpers/brand';\r\nimport { fluid } from '@helpers/fluid';\r\nimport { siteWide } from '@helpers/grid';\r\nimport { Device, from } from '@helpers/media';\r\nimport { headingStyles, paragraphLarge } from '@helpers/typography';\r\nimport BreadcrumbStyles from '@stories/Components/Breadcrumbs/Breadcrumbs.styles';\r\nimport styled from 'styled-components';\r\nconst Container = styled.article `\r\n  background-color: ${brand.black};\r\n  overflow: hidden;\r\n`;\r\nconst Inner = styled.div `\r\n  ${siteWide};\r\n\r\n  @media ${from(Device.TabletLarge)} {\r\n    display: grid;\r\n    grid-template-columns: repeat(12, 1fr);\r\n  }\r\n`;\r\nconst BackgroundLogo = styled.span `\r\n  --iconSize: calc(670 / 1920 * 100vw);\r\n\r\n  color: ${brand.grey};\r\n  display: none;\r\n  position: fixed;\r\n  z-index: 1;\r\n  right: 0;\r\n  top: calc(var(--headerHeight) + ${fluid(35, 70)});\r\n  width: var(--iconSize);\r\n  height: var(--iconSize);\r\n  transform: translateX(50%) rotate(-150deg);\r\n  color: ${brand.yellow};\r\n\r\n  @media ${from(Device.TabletLarge)} {\r\n    display: block;\r\n  }\r\n`;\r\nconst BreadcrumbWrapper = styled.div `\r\n  height: 45px;\r\n  display: flex;\r\n  align-items: center;\r\n  margin-bottom: ${fluid(12, 32)};\r\n\r\n  @media ${from(Device.TabletLarge)} {\r\n    ${BreadcrumbStyles.Container} {\r\n      display: none;\r\n    }\r\n  }\r\n`;\r\nconst HeroWrapper = styled.div `\r\n  grid-column: 2 / span 8;\r\n\r\n  @media ${from(Device.DesktopSmall)} {\r\n    grid-column: 2 / span 6;\r\n  }\r\n\r\n  @media ${from(Device.DesktopLarge)} {\r\n    grid-column: 2 / span 5;\r\n  }\r\n`;\r\nconst TitleWrapper = styled.div `\r\n  color: ${brand.white};\r\n`;\r\nconst Title = styled.h1 `\r\n  ${headingStyles};\r\n\r\n  font-size: ${fluid(30, 96)};\r\n  line-height: ${fluid(30, 96)};\r\n`;\r\nconst Intro = styled.p `\r\n  ${paragraphLarge};\r\n\r\n  margin-bottom: ${fluid(28, 42)};\r\n`;\r\nconst Image = styled.img `\r\n  ${imageCoverContainer()};\r\n\r\n  position: fixed;\r\n  z-index: -1;\r\n`;\r\nconst ImageViewer = styled.div `\r\n  ${imageWrapperPreserveRatio(1920, 832)};\r\n`;\r\nconst Video = styled.video `\r\n  ${imageCoverContainer()};\r\n  position: fixed;\r\n  z-index: -1;\r\n\r\n`;\r\nconst BlogHeroStyles = {\r\n    BackgroundLogo,\r\n    BreadcrumbWrapper,\r\n    Container,\r\n    HeroWrapper,\r\n    Image,\r\n    ImageViewer,\r\n    Inner,\r\n    Intro,\r\n    Title,\r\n    TitleWrapper,\r\n    Video\r\n};\r\nexport default BlogHeroStyles;\r\n","import { getSrcs, imageUrl } from '@helpers/image';\r\nimport { ReactComponent as SvgBg } from '@img/misc/cta-section-bg.svg';\r\nimport Breadcrumbs from '@stories/Components/Breadcrumbs/Breadcrumbs';\r\nimport ArticleMeta from '@stories/Components/Content/ArticleMeta/ArticleMeta';\r\nimport { videoUrl } from '@helpers/video';\r\nimport * as React from 'react';\r\nimport S from './InsightHero.styles';\r\nconst InsightHero = (props) => {\r\n    return (React.createElement(React.Fragment, null,\r\n        React.createElement(S.Container, { id: props.id, \"data-theme\": \"dark\" },\r\n            React.createElement(S.BackgroundLogo, { as: SvgBg }),\r\n            React.createElement(S.Inner, null, props.breadcrumbs && (React.createElement(S.BreadcrumbWrapper, null,\r\n                React.createElement(Breadcrumbs, { items: props.breadcrumbs, theme: \"dark\" })))),\r\n            React.createElement(S.Inner, null,\r\n                React.createElement(S.HeroWrapper, null,\r\n                    React.createElement(ArticleMeta, { date: props.date, tag: props.tag, theme: \"dark\" }),\r\n                    React.createElement(S.TitleWrapper, null,\r\n                        React.createElement(S.Title, null, props.title),\r\n                        props.intro && React.createElement(S.Intro, null, props.intro))))),\r\n        !props.video && props.image && (React.createElement(React.Fragment, null,\r\n            React.createElement(S.ImageViewer, null),\r\n            React.createElement(\"picture\", null,\r\n                React.createElement(\"source\", { media: \"(orientation: landscape)\", sizes: \"100vw\", srcSet: getSrcs(props.image, 1920, 400, 10, 16 / 9).join(',') }),\r\n                React.createElement(S.Image, { alt: props.image.altText ?? '', draggable: \"false\", loading: \"eager\", role: !props.image.altText ? 'presentation' : undefined, sizes: \"100vw\", src: imageUrl(props.image, { width: 1920, heightratio: 9 / 16 }), srcSet: getSrcs(props.image, 1920, 400, 10, 9 / 16).join(',') })))),\r\n        props.video && (React.createElement(React.Fragment, null,\r\n            React.createElement(S.ImageViewer, null),\r\n            React.createElement(S.Video, { autoPlay: true, loop: true, muted: true, playsInline: true },\r\n                React.createElement(\"source\", { type: \"video/webm\", src: videoUrl(props.video, { audio: 'none', format: 'webm' }) }),\r\n                React.createElement(\"source\", { type: \"video/mp4\", src: videoUrl(props.video, { audio: 'none', format: 'mp4' }) }))))));\r\n};\r\nexport default InsightHero;\r\n"],"sourceRoot":""}