{"version":3,"file":"MediaCarousel-7c57aa12bbe3ee0df0cf.js","mappings":"0NAMA,MAAMA,EAAYC,EAAAA,GAAAA,QAAAA,WAAH,sEAAGA,CAAH,gCAITC,EAAOD,EAAAA,GAAAA,EAAAA,WAAH,iEAAGA,CAAH,sJASJE,EAAeF,EAAAA,GAAAA,IAAAA,WAAH,yEAAGA,CAAH,0BACdG,EAAAA,EAAAA,IAA0B,IAAK,MAG7BC,GAAQJ,EAAAA,EAAAA,IAAOK,EAAAA,GAAV,6EAAGL,CAAH,uGACPM,EAAAA,EAAAA,MAEyBC,EAAAA,GAEzBN,EAAiBA,GAIfO,EAAMR,EAAAA,GAAAA,MAAAA,WAAH,gEAAGA,CAAH,gEACLS,EAAAA,IAKEC,EAAQV,EAAAA,GAAAA,GAAAA,WAAH,kEAAGA,CAAH,+HACPW,EAAAA,GAKAV,EACAA,GAwCJ,EAVwB,CACpBF,YACAa,QA5BYZ,EAAAA,GAAAA,EAAAA,WAAH,oEAAGA,CAAH,gFACTa,EAAAA,EAAAA,UAAAA,SA4BAC,WAtBed,EAAAA,GAAAA,IAAAA,WAAH,uEAAGA,CAAH,2NAGZa,EAAAA,EAAAA,UAAAA,OAQ8BN,EAAAA,GAE5BN,EACAA,GASFG,QACAF,eACAD,OACAO,MACAE,SCnEJ,EAZkB,IAAsD,IAArD,YAAEK,EAAF,QAAeC,EAAf,MAAwBC,EAAxB,IAA+BR,EAA/B,MAAoCS,EAApC,IAA2CC,GAAU,EACpE,OAAQC,EAAAA,cAAoBC,EAAAA,UAAa,CAAEC,MAAO,CAAE,gBAAiBP,IACjEK,EAAAA,cAAoBC,EAAAA,KAAQ,CAAEE,WAAW,EAAOC,KAAML,GAClDC,EAAAA,cAAoBC,EAAAA,aAAgB,KAChCD,EAAAA,cAAoBC,EAAAA,MAAS,CAAEI,IAAK,GAAIF,WAAW,EAAOG,QAAS,OAAQC,KAAM,eAAgBC,KAAKC,EAAAA,EAAAA,IAASZ,EAAO,CAAEa,MAAO,IAAKC,OAAQ,SAChJX,EAAAA,cAAoBC,EAAAA,IAAO,KAAMZ,GACjCW,EAAAA,cAAoBC,EAAAA,MAAS,CAAEW,GAAId,EAAMe,WAAW,UAAW,KAAKC,eAAiBhB,GACrFF,GAAWI,EAAAA,cAAoBC,EAAAA,QAAW,KAAML,GAChDI,EAAAA,cAAoBC,EAAAA,WAAc,KAC9BD,EAAAA,cAAoB,OAAQ,KAAM,gBAClCA,EAAAA,cAAoBe,EAAAA,EAAU,W,oHCX9C,MAgBA,EAH4B,CACxBC,Q,SAdYpC,GAAAA,IAAAA,WAAH,uEAAGA,CAAH,qFACTqC,EAAAA,EAAAA,WAGSC,EAAAA,EAAAA,IAAKC,EAAAA,GAAAA,SAILD,EAAAA,EAAAA,IAAKC,EAAAA,GAAAA,gBCFlB,GAAeC,EAAAA,EAAAA,IAJO,IAAuB,OAAjBC,GAAiB,EACzC,OAAQrB,EAAAA,cAAoBC,EAAAA,QAAW,KACnCD,EAAAA,cAAoBsB,EAAAA,EAAc,IAAKD,EAAYE,WAAaC,GAASxB,EAAAA,cAAoByB,EAAAA,EAAW,IAAKD","sources":["webpack://james-fisher/./src/stories/Components/MediaCard/MediaCard.styles.ts","webpack://james-fisher/./src/stories/Components/MediaCard/MediaCard.tsx","webpack://james-fisher/./src/stories/Widgets/MediaCarousel/MediaCarousel.styles.ts","webpack://james-fisher/./src/stories/Widgets/MediaCarousel/MediaCarousel.tsx"],"sourcesContent":["import { cubicEaseOut } from '@helpers/animate';\r\nimport { imageWrapperPreserveRatio, imageCoverContainer } from '@helpers/image';\r\nimport fonts from '@helpers/fonts';\r\nimport { h6, tag } from '@helpers/typography';\r\nimport styled from 'styled-components';\r\nimport SimpleImage from '../SimpleImage/SimpleImage';\r\nconst Container = styled.article `\r\n  display: block;\r\n  height: 100%;\r\n`;\r\nconst Link = styled.a `\r\n  display: flex;\r\n  border-bottom: 1px solid currentColor;\r\n  color: currentColor;\r\n  flex-direction: column;\r\n  height: 100%;\r\n  padding-bottom: 28px;\r\n  text-decoration: none;\r\n`;\r\nconst ImageWrapper = styled.div `\r\n  ${imageWrapperPreserveRatio(340, 195)}\r\n  margin: 0 0 36px;\r\n`;\r\nconst Image = styled(SimpleImage) `\r\n  ${imageCoverContainer()}\r\n  transform: scale(1);\r\n  transition: transform 1s ${cubicEaseOut};\r\n\r\n  ${Link}:focus &, ${Link}:hover & {\r\n    transform: scale(1.1);\r\n  }\r\n`;\r\nconst Tag = styled.small `\r\n  ${tag};\r\n  display: block;\r\n  color: var(--accentColor);\r\n  margin: 0 0 20px;\r\n`;\r\nconst Title = styled.h3 `\r\n  ${h6};\r\n  margin: 0 0 20px;\r\n  text-decoration: none;\r\n  text-underline-position: under;\r\n\r\n  ${Link}:focus &,\r\n  ${Link}:hover & {\r\n    text-decoration: underline;\r\n  }\r\n`;\r\nconst Content = styled.p `\r\n  ${fonts.helvetica.regular};\r\n  font-size: 18px;\r\n  letter-spacing: -0.01em;\r\n  line-height: 30px;\r\n  margin: 0 0 48px;\r\n`;\r\nconst CtaWrapper = styled.div `\r\n  display: flex;\r\n  align-items: center;\r\n  ${fonts.helvetica.medium};\r\n  font-size: 16px;\r\n  line-height: 1em;\r\n  margin-top: auto;\r\n\r\n  svg {\r\n    margin-left: 76px;\r\n    transform: translateX(0px);\r\n    transition: transform 0.15s ${cubicEaseOut};\r\n\r\n    ${Link}:focus &,\r\n    ${Link}:hover & {\r\n      transform: translateX(10px);\r\n    }\r\n  }\r\n`;\r\nconst MediaCardStyles = {\r\n    Container,\r\n    Content,\r\n    CtaWrapper,\r\n    Image,\r\n    ImageWrapper,\r\n    Link,\r\n    Tag,\r\n    Title,\r\n};\r\nexport default MediaCardStyles;\r\n","import { imageUrl } from '@helpers/image';\r\nimport SvgArrow from '@img/icons/article-cta-arrow.svg';\r\nimport * as React from 'react';\r\nimport S from './MediaCard.styles';\r\nconst MediaCard = ({ accentColor, content, image, tag, title, url }) => {\r\n    return (React.createElement(S.Container, { style: { '--accentColor': accentColor } },\r\n        React.createElement(S.Link, { draggable: false, href: url },\r\n            React.createElement(S.ImageWrapper, null,\r\n                React.createElement(S.Image, { alt: \"\", draggable: false, loading: \"lazy\", role: \"presentation\", src: imageUrl(image, { width: 340, height: 195 }) })),\r\n            React.createElement(S.Tag, null, tag),\r\n            React.createElement(S.Title, { id: title.replaceAll(/[\\W_]+/g, '-').toLowerCase() }, title),\r\n            content && React.createElement(S.Content, null, content),\r\n            React.createElement(S.CtaWrapper, null,\r\n                React.createElement(\"span\", null, \"Read article\"),\r\n                React.createElement(SvgArrow, null)))));\r\n};\r\nexport default MediaCard;\r\n","import { Device, from } from '@helpers/media';\r\nimport CardCarouselStyles from '@stories/Components/CardCarousel/CardCarousel.styles';\r\nimport styled from 'styled-components';\r\nconst Wrapper = styled.div `\r\n  ${CardCarouselStyles.Container} {\r\n    --visibleItems: 1;\r\n\r\n    @media ${from(Device.Tablet)} {\r\n      --visibleItems: 2;\r\n    }\r\n\r\n    @media ${from(Device.DesktopSmall)} {\r\n      --visibleItems: 3;\r\n    }\r\n  }\r\n`;\r\nconst MediaCarouselStyles = {\r\n    Wrapper,\r\n};\r\nexport default MediaCarouselStyles;\r\n","import { withMotionMax } from '@hoc/withMotionMax';\r\nimport CardCarousel from '@stories/Components/CardCarousel/CardCarousel';\r\nimport MediaCard from '@stories/Components/MediaCard/MediaCard';\r\nimport * as React from 'react';\r\nimport S from './MediaCarousel.styles';\r\nconst MediaCarousel = ({ ...otherProps }) => {\r\n    return (React.createElement(S.Wrapper, null,\r\n        React.createElement(CardCarousel, { ...otherProps, renderItem: (item) => React.createElement(MediaCard, { ...item }) })));\r\n};\r\nexport default withMotionMax(MediaCarousel);\r\n"],"names":["Container","styled","Link","ImageWrapper","imageWrapperPreserveRatio","Image","SimpleImage","imageCoverContainer","cubicEaseOut","Tag","tag","Title","h6","Content","fonts","CtaWrapper","accentColor","content","image","title","url","React","S","style","draggable","href","alt","loading","role","src","imageUrl","width","height","id","replaceAll","toLowerCase","SvgArrow","Wrapper","CardCarouselStyles","from","Device","withMotionMax","otherProps","CardCarousel","renderItem","item","MediaCard"],"sourceRoot":""}