{"version":3,"file":"components-slpSFOImage-slpSFOImage-2b8486dfa2c8776072fd.js","mappings":"+MA0DA,UApDA,YAAuC,IAAD,sBAAfA,EAAe,EAAfA,YACfC,EAAmB,CACvBC,YAAU,OACPC,EAAAA,OAAAA,gBAAwB,SAACC,GAAU,IAAD,kBAC3BC,GAAQC,EAAAA,EAAAA,GAAoBF,MAAAA,GAAD,UAACA,EAAMG,YAAP,iBAAC,EAAYC,cAAb,iBAAC,EAAoBC,WAArB,aAAC,EAAyBC,IAC3D,OAAOL,MAAAA,GAAA,UAAAA,EAAOD,YAAP,mBAAaO,YAAb,mBAAmBC,WAAnB,SAAwBC,SAAS,SACtC,gBAAC,aAAD,CACEC,IAAKT,MAAAA,GAAF,UAAEA,EAAOD,YAAT,iBAAE,EAAaO,YAAf,aAAE,EAAmBC,IACxBG,IAAKV,MAAAA,GAAF,UAAEA,EAAOD,YAAT,aAAE,EAAaY,QAGpB,kCATI,GAaVC,WAAY,SAACC,GAAD,aACVA,MAAAA,GADU,UACVA,EAAMC,MAAM,aADF,aACV,EAAmBC,SAAQ,SAACF,EAAMG,GAAP,MAAa,CAACA,EAAI,GAAK,sBAAIC,IAAKD,UAG/D,OACE,gBAAC,aAAD,CAAmBE,YAAavB,MAAAA,GAAF,UAAEA,EAAawB,aAAf,iBAAE,EAAoBb,YAAtB,aAAE,EAA0BC,MACvDZ,MAAAA,OAAA,EAAAA,EAAayB,iBACZ,gBAAC,mBAAD,MACGzB,MAAAA,OAAA,EAAAA,EAAayB,iBACZ,2BACE,gBAAC,UAAD,KACGzB,MAAAA,GADH,UACGA,EAAayB,sBADhB,aACG,EAA6BC,YAEhC,gBAAC,cAAD,KACG1B,MAAAA,GADH,UACGA,EAAayB,sBADhB,iBACG,EAA6BP,YADhC,aACG,EAAmCA,SAM7ClB,MAAAA,OAAA,EAAAA,EAAa2B,UAAU3B,MAAAA,OAAvB,EAAuBA,EAAa2B,OAAO,KAC1C,gBAAC,iBAAD,MACG3B,MAAAA,GAAA,UAAAA,EAAa2B,OAAO,UAApB,mBAAwBhB,YAAxB,eAA8BC,MAC7B,gBAAC,kBAAD,CACEE,IAAKd,MAAAA,GAAF,UAAEA,EAAa2B,OAAO,UAAtB,iBAAE,EAAwBhB,YAA1B,aAAE,EAA8BC,QAK1CZ,MAAAA,OAAA,EAAAA,EAAa4B,kBACZC,EAAAA,EAAAA,GACEC,KAAKC,MAAM/B,MAAAA,GAAX,UAAWA,EAAa4B,sBAAxB,aAAW,EAA6BI,KACxC/B,M,8TCnDGgC,EAAaC,EAAAA,QAAAA,IAAAA,WAAH,yEAAGA,CAAH,wHACH,SAACC,GAAD,OAAWA,EAAMZ,eAQxBa,EAAWF,EAAAA,QAAAA,GAAAA,WAAH,uEAAGA,CAAH,8SAsBRG,EAAWH,EAAAA,QAAAA,IAAAA,WAAH,uEAAGA,CAAH,0EAMRI,EAAUJ,EAAAA,QAAAA,GAAAA,WAAH,sEAAGA,CAAH,kpBA8CPK,EAAcL,EAAAA,QAAAA,GAAAA,WAAH,0EAAGA,CAAH,qpBA8CXM,EAAmBN,EAAAA,QAAAA,IAAAA,WAAH,+EAAGA,CAAH,mGAShBO,EAAkBP,EAAAA,QAAAA,IAAAA,WAAH,8EAAGA,CAAH,mKAafQ,EAAiBR,EAAAA,QAAAA,IAAAA,WAAH,6EAAGA,CAAH","sources":["webpack://commercial-ultramar/./src/components/slpSFOImage/slpSFOImage.js","webpack://commercial-ultramar/./src/components/slpSFOImage/slpSFOImageStyles.js"],"sourcesContent":["import React from 'react';\nimport useContentfulAssets from '../../hooks/useContentfulAssets';\nimport * as Styled from './slpSFOImageStyles';\nimport { BLOCKS } from '@contentful/rich-text-types';\nimport { documentToReactComponents } from '@contentful/rich-text-react-renderer';\n\nfunction SlpSFOImage({ sectionData }) {\n  const optionsMainStyle = {\n    renderNode: {\n      [BLOCKS.EMBEDDED_ASSET]: (node) => {\n        const asset = useContentfulAssets(node?.data?.target?.sys?.id);\n        return asset?.node?.file?.url?.includes('image') ? (\n          <Styled.ImageStyle\n            src={asset?.node?.file?.url}\n            alt={asset?.node?.title}\n          />\n        ) : (\n          <></>\n        );\n      },\n    },\n    renderText: (text) =>\n      text?.split('\\n')?.flatMap((text, i) => [i > 0 && <br key={i} />]),\n  };\n\n  return (\n    <Styled.ImageStyle $background={sectionData?.image?.file?.url}>\n      {sectionData?.headerWithText && (\n        <Styled.HeadingContainer>\n          {sectionData?.headerWithText && (\n            <div>\n              <Styled.Heading>\n                {sectionData?.headerWithText?.headerText}\n              </Styled.Heading>\n              <Styled.SpanHeading>\n                {sectionData?.headerWithText?.text?.text}\n              </Styled.SpanHeading>\n            </div>\n          )}\n        </Styled.HeadingContainer>\n      )}\n      {sectionData?.assets && sectionData?.assets[0] && (\n        <Styled.ImageContainer>\n          {sectionData?.assets[0]?.file?.url && (\n            <Styled.FloatImageStyle\n              src={sectionData?.assets[0]?.file?.url}\n            ></Styled.FloatImageStyle>\n          )}\n        </Styled.ImageContainer>\n      )}\n      {sectionData?.contentDetails &&\n        documentToReactComponents(\n          JSON.parse(sectionData?.contentDetails?.raw),\n          optionsMainStyle\n        )}\n    </Styled.ImageStyle>\n  );\n}\nexport default SlpSFOImage;\n","import styled from 'styled-components';\n\nexport const ImageStyle = styled.div`\n  background: url(${(props) => props.$background}) repeat-x top center;\n  height: 850px;\n\n  @media (max-width: 870px) {\n    background-size: 900px;\n    height: 400px;\n  }\n`;\nexport const HeaderH2 = styled.h2`\n  text-align: center !important;\n  position: relative;\n  margin: 0 0 35px 0;\n  font-family: 'MrAlex', sans-serif;\n  font-size: 45px;\n  line-height: 50px;\n  color: #fff;\n  span {\n    color: #fec119;\n  }\n  @media (max-width: 1399px) {\n    font-size: 40px;\n    line-height: 45px;\n    margin-bottom: 30px;\n  }\n  @media (max-width: 767px) {\n    font-size: 30px;\n    line-height: 35px;\n  }\n`;\n\nexport const TitleDiv = styled.div`\n  position: absolute;\n  text-align: center !important;\n  width: 100%;\n  top: 280px;\n`;\nexport const Heading = styled.h1`\n  text-align: center;\n  position: relative;\n  font-family: 'MrAlex', sans-serif;\n  font-size: 4vw;\n  line-height: 4vw;\n  color: #fff;\n  display: inline;\n  code {\n    color: #ffc905;\n    font-family: 'MrAlex', sans-serif;\n    font-size: 4vw;\n    line-height: 4vw;\n  }\n  @media (max-width: 1199px) {\n    font-size: 74px;\n    line-height: 74px;\n    code {\n      font-size: 74px;\n      line-height: 74px;\n      color: #ffc905;\n      font-family: 'MrAlex', sans-serif;\n    }\n  }\n  @media (max-width: 991px) {\n    font-size: 45px;\n    line-height: 45px;\n    margin-bottom: 30px;\n    code {\n      font-size: 45px;\n      line-height: 45px;\n      color: #ffc905;\n      font-family: 'MrAlex', sans-serif;\n    }\n  }\n  @media (max-width: 767px) {\n    font-size: 45px;\n    line-height: 45px;\n    code {\n      font-size: 45px;\n      line-height: 45px;\n      color: #ffc905;\n      font-family: 'MrAlex', sans-serif;\n    }\n  }\n`;\nexport const SpanHeading = styled.h1`\n  text-align: center;\n  position: relative;\n  font-family: 'MrAlex', sans-serif;\n  font-size: 4vw;\n  line-height: 4vw;\n  color: #ffc905;\n  display: inline;\n  code {\n    color: #ffc905;\n    font-family: 'MrAlex', sans-serif;\n    font-size: 4vw;\n    line-height: 4vw;\n  }\n  @media (max-width: 1199px) {\n    font-size: 74px;\n    line-height: 74px;\n    code {\n      font-size: 74px;\n      line-height: 74px;\n      color: #ffc905;\n      font-family: 'MrAlex', sans-serif;\n    }\n  }\n  @media (max-width: 991px) {\n    font-size: 45px;\n    line-height: 45px;\n    margin-bottom: 30px;\n    code {\n      font-size: 45px;\n      line-height: 45px;\n      color: #ffc905;\n      font-family: 'MrAlex', sans-serif;\n    }\n  }\n  @media (max-width: 767px) {\n    font-size: 45px;\n    line-height: 45px;\n    code {\n      font-size: 45px;\n      line-height: 45px;\n      color: #ffc905;\n      font-family: 'MrAlex', sans-serif;\n    }\n  }\n`;\nexport const HeadingContainer = styled.div`\n  position: absolute;\n  width: 100%;\n  text-align: center;\n  top: 320px;\n  @media (max-width: 870px) {\n    top: 170px;\n  }\n`;\nexport const FloatImageStyle = styled.img`\n  max-width: 500px;\n  height: auto;\n  @media (max-width: 870px) {\n    display: block;\n    max-width: 250px;\n    width: 100%;\n    height: auto;\n    padding-top: 0px;\n    padding-bottom: 30px;\n    margin: 0 auto;\n  }\n`;\nexport const ImageContainer = styled.div`\n  width: 100%;\n  height: auto;\n  margin: 0 auto;\n  padding: 20px 0px 0px 0px;\n  text-align: center;\n  @media (max-width: 870px) {\n    width: 100%;\n    height: auto;\n    padding: 0px 35px 10px 35px;\n    text-align: center;\n  }\n`;\n"],"names":["sectionData","optionsMainStyle","renderNode","BLOCKS","node","asset","useContentfulAssets","data","target","sys","id","file","url","includes","src","alt","title","renderText","text","split","flatMap","i","key","$background","image","headerWithText","headerText","assets","contentDetails","documentToReactComponents","JSON","parse","raw","ImageStyle","styled","props","HeaderH2","TitleDiv","Heading","SpanHeading","HeadingContainer","FloatImageStyle","ImageContainer"],"sourceRoot":""}