{"version":3,"file":"dynamicComponents-slpImageContainer-slpImageContainer-2dfd054afc2690dc246d.js","mappings":"qOAqDA,UA9CA,SAA2B,GAAkB,IAAD,QAAfA,EAAW,EAAXA,YAkB3B,MAhBY,GACPC,EAAAA,OAAAA,gBAAwB,SAACC,GAAU,IAAD,kBAC3BC,GAAQC,EAAAA,EAAAA,GAAoBF,SAAU,QAAN,EAAJA,EAAMG,YAAI,OAAQ,QAAR,EAAV,EAAYC,cAAM,OAAK,QAAL,EAAlB,EAAoBC,WAAG,WAAnB,EAAJ,EAAyBC,IAC3D,OAAOL,SAAW,QAAN,EAALA,EAAOD,YAAI,OAAM,QAAN,EAAX,EAAaO,YAAI,OAAK,QAAL,EAAjB,EAAmBC,WAAG,OAAtB,EAAwBC,SAAS,SACtC,gBAAC,aAAiB,CAChBC,IAAKT,SAAW,QAAN,EAALA,EAAOD,YAAI,OAAM,QAAN,EAAX,EAAaO,YAAI,WAAZ,EAAL,EAAmBC,IACxBG,IAAKV,SAAW,QAAN,EAALA,EAAOD,YAAI,WAAN,EAAL,EAAaY,QAGpB,gCAEJ,EAMF,gBAAC,qBAAyB,CAACC,iBAAkBf,SAAkB,QAAP,EAAXA,EAAagB,aAAK,OAAM,QAAN,EAAlB,EAAoBP,YAAI,WAAb,EAAX,EAA0BC,KACrE,gBAAC,aAAiB,KAChB,gBAAC,IAAG,MACDV,aAAW,EAAXA,EAAaiB,iBACZ,gBAAC,YAAgB,KACdjB,SAA2B,QAAhB,EAAXA,EAAaiB,sBAAc,WAAhB,EAAX,EAA6BC,aAGjClB,aAAW,EAAXA,EAAamB,UACZnB,SAAmB,QAAR,EAAXA,EAAamB,cAAM,WAAR,EAAX,EAAqBC,KAAI,SAACjB,EAAOkB,GAAS,IAAD,EACvC,OACE,gBAAC,IAAG,CAACC,GAAI,GAAIC,IAAE,EAACC,UAAU,OAAOH,IAAKA,GACpC,gBAAC,eAAmB,CAClBT,IAAKT,SAAW,QAAN,EAALA,EAAOM,YAAI,WAAN,EAAL,EAAaC,IAClBG,IAAKV,aAAK,EAALA,EAAOW,QAEd,gBAAC,iBAAqB,KACnBX,EAAMsB,aAIf,OAKZ,C,6eClDaC,EAAaC,EAAAA,QAAAA,IAAAA,WAAU,+EAAVA,CAAU,+GAChB,SAACC,GAAK,OAAKA,EAAMC,WAAW,IAQnCC,EAAeH,EAAAA,QAAAA,IAAAA,WAAU,iFAAVA,CAAU,uEAMzBI,EAAWJ,EAAAA,QAAAA,GAAAA,WAAS,6EAATA,CAAS,2TAsBpBK,EAAWL,EAAAA,QAAAA,IAAAA,WAAU,6EAAVA,CAAU,0EAMrBM,EAAUN,EAAAA,QAAAA,GAAAA,WAAS,4EAATA,CAAS,6rBA0CnBO,EAAcP,EAAAA,QAAAA,GAAAA,WAAS,gFAATA,CAAS,6rBA0CvBQ,EAAmBR,EAAAA,QAAAA,IAAAA,WAAU,qFAAVA,CAAU,wJAa7BS,EAAkBT,EAAAA,QAAAA,IAAAA,WAAU,oFAAVA,CAAU,0OAkB5BU,EAAiBV,EAAAA,QAAAA,IAAAA,WAAU,mFAAVA,CAAU,mJAY3BW,EAAqBX,EAAAA,QAAAA,IAAAA,WAAU,uFAAVA,CAAU,ifACnB,SAACC,GAAK,OAAKA,EAAMb,gBAAgB,IAG/B,SAACa,GAAK,OAAKA,EAAMb,gBAAgB,IAIjC,SAACa,GAAK,OAAKA,EAAMb,gBAAgB,IAKjC,SAACa,GAAK,OAAKA,EAAMb,gBAAgB,IAU/CwB,EAAaZ,EAAAA,QAAAA,IAAAA,WAAU,gFAAVA,CAAU,oJAYvBa,EAAYb,EAAAA,QAAAA,GAAAA,WAAS,+EAATA,CAAS,4RAiBrBc,EAAiBd,EAAAA,QAAAA,IAAAA,WAAU,oFAAVA,CAAU,yN","sources":["webpack://bluewave-energy/./src/dynamicComponents/slpImageContainer/slpImageContainer.js","webpack://bluewave-energy/./src/dynamicComponents/slpImageContainer/slpImageContainerStyles.js"],"sourcesContent":["import React from 'react';\nimport useContentfulAssets from '../../hooks/useContentfulAssets';\nimport * as Styled from './slpImageContainerStyles';\nimport { BLOCKS } from '@contentful/rich-text-types';\nimport { documentToReactComponents } from '@contentful/rich-text-react-renderer';\nimport { Col, Row } from 'react-bootstrap';\n\nfunction SlpImageContainer({ 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  return (\n    <Styled.MainImageContainer $backgroundImage={sectionData?.image?.file?.url}>\n      <Styled.RowWrapper>\n        <Row>\n          {sectionData?.headerWithText && (\n            <Styled.TopHeader>\n              {sectionData?.headerWithText?.headerText}\n            </Styled.TopHeader>\n          )}\n          {sectionData?.assets &&\n            sectionData?.assets?.map((asset, key) => {\n              return (\n                <Col xs={12} md className=\"px-0\" key={key}>\n                  <Styled.ImgContainer\n                    src={asset?.file?.url}\n                    alt={asset?.title}\n                  />\n                  <Styled.ParaTextMiddle>\n                    {asset.description}\n                  </Styled.ParaTextMiddle>\n                </Col>\n              );\n            })}\n        </Row>\n      </Styled.RowWrapper>\n    </Styled.MainImageContainer>\n  );\n}\nexport default SlpImageContainer;\n","import styled from 'styled-components';\n\nexport const ImageStyle = styled.div`\n  background: url(${(props) => props.$background}) repeat-x bottom center;\n  \n  @media (max-width: 991px) {\n    background-size: 1200px;\n    height: 250px;\n  }\n`;\n\nexport const ImgContainer = styled.img`\n  width: 90px;\n  height: auto;\n  margin: 0 auto 25px auto;\n  text-align: center;\n`;\nexport const HeaderH2 = styled.h2`\n  text-align: center !important;\n  position: relative;\n  margin: 0 0 35px 0;\n  font-family: 'Figtree-Black', arial, 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`\nfont-size: 34px;\nline-height: 43px;\nfont-family: Figtree-Medium, arial, sans-serif;\nmargin: 0px 0px 35px;\ncolor: rgb(17, 70, 123);\ntext-align: center;\nletter-spacing: 0.02em;\npadding: 0px !important;\nfont-weight: normal !important;\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: 'Figtree-Black', arial, 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: 'Figtree-Black', arial, 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: 'Figtree-Black', arial, sans-serif;\n    }\n  }\n`;\nexport const SpanHeading = styled.h1`\nfont-size: 34px;\nline-height: 43px;\nfont-family: Figtree-Medium, arial, sans-serif;\nmargin: 0px 0px 35px;\ncolor: rgb(17, 70, 123);\ntext-align: center;\nletter-spacing: 0.02em;\npadding: 0px !important;\nfont-weight: normal !important;\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: 'Figtree-Black', arial, 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: 'Figtree-Black', arial, 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: 'Figtree-Black', arial, sans-serif;\n    }\n  }\n`;\nexport const HeadingContainer = styled.div`\n  \n  width: 100%;\n  text-align: center;\n  width: 860px;\n  height: auto;\n  margin: 0px auto;\n  padding: 50px 0px 240px;\n  text-align: center;\n  @media (max-width: 870px) {\n    top: 170px;\n  }\n`;\nexport const FloatImageStyle = styled.img`\n  width: 100%;\n  height: auto;\n  border: 0;\n  vertical-align: top;\n  width: 90px;\n  height: auto;\n  margin: 0px auto 25px;\n  text-align: center;\n  @media (max-width: 991px) {\n    display: block;\n    width: 290px;\n    height: auto;\n    padding-top: 50px;\n    padding-bottom: 30px;\n    margin: 0 auto;\n  }\n`;\nexport const ImageContainer = styled.div`\n  width: 600px;\n  height: auto;\n  margin: 0 auto;\n  padding: 60px 0px 0px 0px;\n  text-align: center;\n  @media (max-width: 991px) {\n    width: 100%;\n    padding: 0px 5% 10px 5%;\n  }\n`;\n\nexport const MainImageContainer = styled.div`\n  background: #fff url(${(props) => props.$backgroundImage}) no-repeat top;\n  background-size: contain;\n  @media (max-width: 1440px) {\n    background: #fff url(${(props) => props.$backgroundImage}) no-repeat top;\n    background-size: cover;\n  }\n  @media (max-width: 991px) {\n    background: #fff url(${(props) => props.$backgroundImage}) no-repeat top;\n    background-size: 850px 200px;\n    background-position: center -30px;\n  }\n  @media (max-width: 767px) {\n    background: #fff url(${(props) => props.$backgroundImage}) no-repeat center;\n    background-size: auto 200px;\n    background-position: center -30px;\n  }\n  @media (max-width: 424px) {\n    background-size: auto 200px;\n    background-position: center -50px;\n  }\n`;\n\nexport const RowWrapper = styled.div`\n  width: 860px;\n  height: auto;\n  margin: 0 auto;\n  padding: 50px 0 240px 0;\n  text-align: center;\n  @media (max-width: 991px) {\n    width: 100%;\n    padding: 200px 50px 0 50px;\n  }\n`;\n\nexport const TopHeader = styled.h1`\n  font-size: 34px;\n  line-height: 43px;\n  font-family: 'Figtree-Medium', arial, sans-serif;\n  margin: 0 0 35px 0;\n  padding: 0 !important;\n  font-weight: normal !important;\n  color: #11467b;\n  text-align: center;\n  letter-spacing: 0.02em;\n  @media (max-width: 991px) {\n    font-size: 20px;\n    line-height: 25px;\n    margin-bottom: 30px;\n  }\n`;\n\nexport const ParaTextMiddle = styled.div`\n  white-space: pre-wrap;\n  margin: 0 0 25px 0;\n  padding: 0 15px;\n  font-family: 'Figtree-Bold', arial, sans-serif;\n  font-size: 18px;\n  line-height: 21px;\n  text-transform: uppercase;\n  color: #11467b;\n  @media (max-width: 767px) {\n    line-height: 22px;\n  }\n`;\n"],"names":["sectionData","BLOCKS","node","asset","useContentfulAssets","data","target","sys","id","file","url","includes","src","alt","title","$backgroundImage","image","headerWithText","headerText","assets","map","key","xs","md","className","description","ImageStyle","styled","props","$background","ImgContainer","HeaderH2","TitleDiv","Heading","SpanHeading","HeadingContainer","FloatImageStyle","ImageContainer","MainImageContainer","RowWrapper","TopHeader","ParaTextMiddle"],"sourceRoot":""}