{"version":3,"sources":["webpack:///./src/stories/Widgets/BlogHero/BlogHero.styles.ts","webpack:///./src/stories/Widgets/BlogHero/BlogHero.tsx"],"names":["Container","styled","article","Inner","div","siteWide","from","Device","TabletLarge","BackgroundLogo","span","brand","grey","fluid","BreadcrumbWrapper","HeroWrapper","TitleWrapper","TitleInner","DesktopSmall","Desktop","DesktopLarge","Title","h1","headingStyles","Intro","p","paragraphLarge","BlogHeroStyles","Image","img","Video","video","BlogHero","props","React","S","id","as","SvgBg","breadcrumbs","Breadcrumbs","items","theme","ArticleMeta","date","tag","title","intro","image","alt","altText","draggable","loading","role","undefined","sizes","until","src","imageUrl","width","srcSet","getSrcs","join","autoPlay","loop","muted","playsInline","type","videoUrl","audio","format"],"mappings":"4LAMA,MAAMA,EAAYC,IAAOC,QAAV,+EAAGD,CAAH,sBAGTE,EAAQF,IAAOG,IAAV,2EAAGH,CAAH,uEACPI,IAEOC,YAAKC,IAAOC,cAKjBC,EAAiBR,IAAOS,KAAV,oFAAGT,CAAH,uPAGTU,IAAMC,KAKmBC,YAAM,GAAI,IAKnCP,YAAKC,IAAOC,cAIjBM,EAAoBb,IAAOG,IAAV,uFAAGH,CAAH,mEAIJY,YAAM,GAAI,KAEvBE,EAAcd,IAAOG,IAAV,iFAAGH,CAAH,8BAGXe,EAAef,IAAOG,IAAV,kFAAGH,CAAH,mEACPK,YAAKC,IAAOC,cAKjBS,EAAahB,IAAOG,IAAV,gFAAGH,CAAH,kJACLK,YAAKC,IAAOC,aAIZF,YAAKC,IAAOW,cAIZZ,YAAKC,IAAOY,SAIZb,YAAKC,IAAOa,eAIjBC,EAAQpB,IAAOqB,GAAV,2EAAGrB,CAAH,uCACPsB,IAEWV,YAAM,GAAI,IACRA,YAAM,GAAI,KAErBW,EAAQvB,IAAOwB,EAAV,2EAAGxB,CAAH,2BACPyB,IAEeb,YAAM,GAAI,KAuBdc,MAbQ,CACnBlB,iBACAK,oBACAd,YACAe,cACAa,MAbU3B,IAAO4B,IAAV,2EAAG5B,CAAH,kCAEQY,YAAM,GAAI,KAYzBV,QACAqB,QACAH,QACAJ,aACAD,eACAc,MAfU7B,IAAO8B,MAAV,4EAAG9B,CAAH,2BCxDI+B,UAjBGC,IAAU,MACxB,OAAQC,gBAAoBC,EAAEnC,UAAW,CAAEoC,GAAIH,EAAMG,IACjDF,gBAAoBC,EAAE1B,eAAgB,CAAE4B,GAAIC,MAC5CJ,gBAAoBC,EAAEhC,MAAO,KAAM8B,EAAMM,aAAgBL,gBAAoBC,EAAErB,kBAAmB,KAC9FoB,gBAAoBM,UAAa,CAAEC,MAAOR,EAAMM,YAAaG,MAAO,YACxER,gBAAoBC,EAAEhC,MAAO,KACzB+B,gBAAoBC,EAAEpB,YAAa,KAC/BmB,gBAAoBS,IAAa,CAAEC,KAAMX,EAAMW,KAAMC,IAAKZ,EAAMY,IAAKH,MAAO,UAC5ER,gBAAoBC,EAAEnB,aAAc,KAChCkB,gBAAoBC,EAAElB,WAAY,KAC9BiB,gBAAoBC,EAAEd,MAAO,KAAMY,EAAMa,OACzCb,EAAMc,OAASb,gBAAoBC,EAAEX,MAAO,KAAMS,EAAMc,UAC/Dd,EAAMF,OAASE,EAAMe,OAAUd,gBAAoBC,EAAEP,MAAO,CAAEqB,IAAG,UAAEhB,EAAMe,MAAME,eAAd,QAAyB,GAAIC,UAAW,QAASC,QAAS,QAASC,KAAOpB,EAAMe,MAAME,aAA2BI,EAAjB,eAA4BC,MAAUC,YAAMjD,IAAOC,aAAf,iBAA6CiD,IAAKC,YAASzB,EAAMe,MAAO,CAAEW,MAAO,OAASC,OAAQC,YAAQ5B,EAAMe,MAAO,KAAM,IAAK,IAAIc,KAAK,OACjV7B,EAAMF,OAAUG,gBAAoBC,EAAEL,MAAO,CAAEiC,UAAU,EAAMC,MAAM,EAAMC,OAAO,EAAMC,aAAa,GACjGhC,gBAAoB,SAAU,CAAEiC,KAAM,aAAcV,IAAKW,YAASnC,EAAMF,MAAO,CAAEsC,MAAO,OAAQC,OAAQ,WACxGpC,gBAAoB,SAAU,CAAEiC,KAAM,YAAaV,IAAKW,YAASnC,EAAMF,MAAO,CAAEsC,MAAO,OAAQC,OAAQ","file":"BlogHero-c2eb9677988ad01f7011.js","sourcesContent":["import 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 styled from 'styled-components';\r\nconst Container = styled.article `\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\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\nconst HeroWrapper = styled.div `\r\n  grid-column: 2 / span 10;\r\n`;\r\nconst TitleWrapper = styled.div `\r\n  @media ${from(Device.TabletLarge)} {\r\n    display: grid;\r\n    grid-template-columns: repeat(10, 1fr);\r\n  }\r\n`;\r\nconst TitleInner = styled.div `\r\n  @media ${from(Device.TabletLarge)} {\r\n    grid-column: 1 / span 10;\r\n  }\r\n\r\n  @media ${from(Device.DesktopSmall)} {\r\n    grid-column: 1 / span 9;\r\n  }\r\n\r\n  @media ${from(Device.Desktop)} {\r\n    grid-column: 1 / span 8;\r\n  }\r\n\r\n  @media ${from(Device.DesktopLarge)} {\r\n    grid-column: 1 / span 7;\r\n  }\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  width: 100%;\r\n  margin-bottom: ${fluid(28, 42)};\r\n`;\r\nconst Video = styled.video `\r\n  aspect-ratio: 16 / 9;\r\n\r\n`;\r\nconst BlogHeroStyles = {\r\n    BackgroundLogo,\r\n    BreadcrumbWrapper,\r\n    Container,\r\n    HeroWrapper,\r\n    Image,\r\n    Inner,\r\n    Intro,\r\n    Title,\r\n    TitleInner,\r\n    TitleWrapper,\r\n    Video\r\n};\r\nexport default BlogHeroStyles;\r\n","import { getSrcs, imageUrl } from '@helpers/image';\r\nimport { Device, until } from '@helpers/media';\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 './BlogHero.styles';\r\nconst BlogHero = (props) => {\r\n    return (React.createElement(S.Container, { id: props.id },\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: \"light\" })))),\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: \"light\" }),\r\n                React.createElement(S.TitleWrapper, null,\r\n                    React.createElement(S.TitleInner, 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(S.Image, { alt: props.image.altText ?? '', draggable: \"false\", loading: \"eager\", role: !props.image.altText ? 'presentation' : undefined, sizes: `${until(Device.TabletLarge)} 100vw, 1500px`, src: imageUrl(props.image, { width: 1500 }), srcSet: getSrcs(props.image, 1500, 400, 10).join(',') })),\r\n                props.video && (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 BlogHero;\r\n"],"sourceRoot":""}