{"version":3,"sources":["webpack:///./src/components/ImageContainer.tsx","webpack:///./src/proPages/coverage-and-pricing.tsx","webpack:///./src/components/FeatureSection.tsx","webpack:///./src/components/ContentBlock.tsx"],"names":["StyledImage","styled","Img","props","isBgImg","ImageMobile","bp","mobileMax","ImageTablet","tabletMin","tabletMax","ImageDesktop","desktopMin","ImageSet","data","mobileFluid","tabletFluid","desktopFluid","fluid","StyledSingleColumnContainer","SingleColumnContainer","Container","div","BgImagContainer","limitHeight","FloatImgContainer","ImageContainer","mobileBackgroundImage","tabletBackgroundImage","desktopBackgroundImage","mobileFloatingImage","tabletFloatingImage","desktopFloatingImage","borderRadius","showOnlyBgImage","leftSpanDesk","rightSpanDesk","leftSpanTab","rightSpanTab","CoverageAndPricingPage","sections","page","map","section","index","internal","type","contentBlock","key","proVersion","heading","description","buttonsGroup","backgroundImageDesktop","backgroundImageTablet","backgroundImageMobile","contentTheme","contentPositionMobile","contentPositionDesktop","showAllButtonsDesktop","showAllButtonsMobile","enableBackgroundColor","contentBackground","mainHeroBlock","contentAlignCenterMobile","length","heightMobile","hero","level","size","content","paragraph","className","isLarge","features","ignorePadding","heightTablet","title","metadata","pageQuery","FeatureContainer","RoundedContainer","colors","white","breakpoints","StyledParagraph","Paragraph","dark","FeatureSection","feature","featureIndex","alignLeft","isSemiLarge","ContentDescription","Column","SingleButton","Button","ButtonsList","ContentContainerInner","bgStyles","css","lightContentStyles","onlyShowFirstButtonStyle","multipleButtonsStyleMobile","multipleButtonsStyleDesktop","contentLeftDesktop","contentRightDesktop","contentAlignCenterMobileStyles","ContentContainer","wideContentColumn","ImageBackgroundColumn","ContentBlockContainer","extraMarginTop","ContentBlock","ignoreMarginBottom","pro","cta","onClick","navigate","url","data-gtm-cta","gtm"],"mappings":"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","file":"component---src-pro-pages-coverage-and-pricing-tsx-faaf69ff986f5291db45.js","sourcesContent":["import React, { useState, useEffect } from \"react\"\nimport styled from \"styled-components\"\nimport { ContentfulAsset, ContentfulFluid } from \"../../types/graphql-types\"\nimport Img, { FluidObject } from \"gatsby-image\"\nimport colors from \"../utils/colors\"\nimport { breakpoints as bp, SingleColumnContainer, Column } from \"../components/layout\"\n\ninterface StylingProps {\n  isBgImg?: boolean\n}\n\ninterface ImageSetProps extends StylingProps {\n  mobileFluid: ContentfulFluid\n  tabletFluid?: ContentfulFluid\n  desktopFluid: ContentfulFluid\n}\n\nconst StyledImage = styled(Img)<StylingProps>`\n  ${props => (props.isBgImg ? `border_radius: unset;` : `border-radius: 16px;`)}\n  min-height: inherit;\n  max-height: inherit;\n`\n\nconst ImageMobile = styled(StyledImage)`\n  width: 100%;\n  display: none;\n  @media (max-width: ${bp.mobileMax}) {\n    display: block;\n    border: none;\n  }\n`\n\nconst ImageTablet = styled(StyledImage)`\n  width: 100%;\n  display: none;\n  @media (min-width: ${bp.tabletMin}) and (max-width: ${bp.tabletMax}) {\n    display: block;\n  }\n`\n\nconst ImageDesktop = styled(StyledImage)`\n  width: 100%;\n  display: none;\n  @media (min-width: ${bp.desktopMin}) {\n    display: block;\n  }\n`\n\nconst ImageSet = (data: ImageSetProps) => {\n  const { mobileFluid, tabletFluid, desktopFluid, isBgImg } = data\n  return (\n    <>\n      <ImageMobile isBgImg={isBgImg} fluid={mobileFluid as FluidObject} />\n      {tabletFluid && <ImageTablet isBgImg={isBgImg} fluid={tabletFluid as FluidObject} />}\n      <ImageDesktop isBgImg={isBgImg} fluid={desktopFluid as FluidObject} />\n    </>\n  )\n}\n\ninterface ImageContainerProps {\n  mobileBackgroundImage?: ContentfulAsset\n  tabletBackgroundImage?: ContentfulAsset\n  desktopBackgroundImage?: ContentfulAsset\n  mobileFloatingImage?: ContentfulAsset\n  tabletFloatingImage?: ContentfulAsset\n  desktopFloatingImage?: ContentfulAsset\n  borderRadius?: boolean\n  showOnlyBgImage?: boolean\n}\n\nconst StyledSingleColumnContainer = styled(SingleColumnContainer)`\n  padding: 0 !important;\n`\nconst Container = styled.div`\n  position: relative;\n  min-height: inherit;\n  max-height: inherit;\n`\n\ninterface BgImageContainerProps {\n  limitHeight: boolean\n}\n\nconst BgImagContainer = styled.div<BgImageContainerProps>`\n  position: relative;\n\n  ${props => props.limitHeight && \"max-height: 70vh;\"}\n\n  img {\n    position: relative;\n  }\n`\nconst FloatImgContainer = styled(StyledSingleColumnContainer)`\n  overflow: hidden;\n  position: absolute;\n  top: 10%;\n  left: 10%;\n  height: 100%;\n  width: 100%;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  @media (min-width: ${bp.tabletMin}) {\n    top: 56%;\n  }\n  @media (max-width: ${bp.mobileMax}) {\n    height: 80%;\n    width: 80%;\n  }\n`\n\nconst ImageContainer = (data: ImageContainerProps) => {\n  const {\n    mobileBackgroundImage,\n    tabletBackgroundImage,\n    desktopBackgroundImage,\n    mobileFloatingImage,\n    tabletFloatingImage,\n    desktopFloatingImage,\n    borderRadius = false,\n    showOnlyBgImage = false,\n  } = data\n\n  return (\n    <Container>\n      {mobileBackgroundImage && desktopBackgroundImage ? (\n        <>\n          <BgImagContainer limitHeight={showOnlyBgImage}>\n            <ImageSet\n              isBgImg={borderRadius}\n              mobileFluid={mobileBackgroundImage.fluid!}\n              tabletFluid={tabletBackgroundImage?.fluid!}\n              desktopFluid={desktopBackgroundImage.fluid!}\n            />\n          </BgImagContainer>\n\n          {mobileFloatingImage && desktopFloatingImage && (\n            <FloatImgContainer>\n              <Column leftSpanDesk={1} rightSpanDesk={1} leftSpanTab={1} rightSpanTab={1}>\n                <ImageSet\n                  mobileFluid={mobileFloatingImage.fluid!}\n                  tabletFluid={tabletFloatingImage?.fluid!}\n                  desktopFluid={desktopFloatingImage.fluid!}\n                />\n              </Column>\n            </FloatImgContainer>\n          )}\n        </>\n      ) : (\n        <ImageSet\n          isBgImg={borderRadius}\n          mobileFluid={mobileFloatingImage.fluid!}\n          tabletFluid={tabletFloatingImage?.fluid!}\n          desktopFluid={desktopFloatingImage?.fluid!}\n        />\n      )}\n    </Container>\n  )\n}\n\nexport default ImageContainer\n","import React, { Fragment } from \"react\"\nimport { graphql } from \"gatsby\"\nimport {\n  CoverageAndPricingProQuery,\n  ContentfulContentBlock,\n  ParagraphWithRemarkFragment,\n  ContentfulLink,\n  ContentfulSimpleHero,\n  ContentfulParagraph,\n  ContentfulFeatureSection,\n  ContentfulFeature,\n} from \"../../types/graphql-types\"\n\nimport ProPage from \"../components/ProPage\"\nimport ContentBlock from \"../components/ContentBlock\"\nimport { Spacer, SingleColumnContainer, Column, DualColumnContainer } from \"../components/layout\"\nimport Heading from \"../components/heading\"\nimport Paragraph from \"../components/paragraph\"\nimport FeatureSection from \"../components/FeatureSection\"\nimport { NavSpacer } from \"../components/page\"\n\ntype CoverageAndPricingPageProps = {\n  data: CoverageAndPricingProQuery\n}\n\nconst CoverageAndPricingPage = ({ data }: CoverageAndPricingPageProps) => {\n  const sections = (data.page?.sections || []).map((section, index) => {\n    switch (section?.internal?.type) {\n      case \"ContentfulContentBlock\":\n        const contentBlock = section as ContentfulContentBlock\n        return (\n          <Fragment key={`content-block-${index}`}>\n            <ContentBlock\n              proVersion\n              heading={contentBlock.heading?.heading!}\n              description={contentBlock.description as ParagraphWithRemarkFragment}\n              buttonsGroup={contentBlock.buttonsGroup as ContentfulLink[]}\n              backgroundImageDesktop={contentBlock.backgroundImageDesktop!}\n              backgroundImageTablet={contentBlock.backgroundImageTablet!}\n              backgroundImageMobile={contentBlock.backgroundImageMobile!}\n              contentTheme={contentBlock.contentTheme!}\n              contentPositionMobile={contentBlock.contentPositionMobile!}\n              contentPositionDesktop={contentBlock.contentPositionDesktop!}\n              showAllButtonsDesktop={contentBlock.showAllButtonsDesktop!}\n              showAllButtonsMobile={contentBlock.showAllButtonsMobile!}\n              enableBackgroundColor={contentBlock.enableBackgroundColor!}\n              contentBackground={contentBlock.contentBackground ?? \"white\"}\n              mainHeroBlock={contentBlock.mainHeroBlock!}\n              contentAlignCenterMobile\n            />\n            {data.page?.sections && index !== data.page.sections.length - 1 && (\n              <Spacer heightMobile={0.5} />\n            )}\n          </Fragment>\n        )\n      case \"ContentfulSimpleHero\":\n        const hero = section as ContentfulSimpleHero\n        return (\n          <Fragment key={`contentful-simple-hero-${index}`}>\n            <SingleColumnContainer>\n              <Column leftSpanDesk={2} rightSpanDesk={2} leftSpanTab={1} rightSpanTab={1}>\n                <Heading level=\"h1\" size=\"h1\" content={hero?.heading?.heading} />\n              </Column>\n            </SingleColumnContainer>\n          </Fragment>\n        )\n      case \"ContentfulParagraph\":\n        const paragraph = section as ContentfulParagraph\n\n        return (\n          <Fragment key={`paragraph-${index}`}>\n            <SingleColumnContainer>\n              <Column leftSpanDesk={2} rightSpanDesk={2}>\n                <Paragraph className=\"gray\" isLarge content={paragraph} />\n              </Column>\n            </SingleColumnContainer>\n            <Spacer heightMobile={0.5} />\n          </Fragment>\n        )\n      case \"ContentfulFeatureSection\":\n        const features = (section as ContentfulFeatureSection).features as ContentfulFeature[]\n        return (\n          <SingleColumnContainer key={`contentful-feature-section-${index}`}>\n            <Column leftSpanDesk={1} rightSpanDesk={1}>\n              <DualColumnContainer ignorePadding>\n                <FeatureSection features={features} />\n              </DualColumnContainer>\n            </Column>\n            <Spacer heightMobile={0.5} heightTablet={0.5} />\n          </SingleColumnContainer>\n        )\n\n      default:\n        return null\n    }\n  })\n\n  return (\n    <ProPage title=\"Connectivity Hub\" metadata={data.page?.metadata}>\n      <NavSpacer />\n      <>{sections}</>\n    </ProPage>\n  )\n}\n\nexport default CoverageAndPricingPage\n\nexport const pageQuery = graphql`\n  query CoverageAndPricingPro($locale: String = \"en\") {\n    page: contentfulPage(\n      label: { eq: \"HMD ConnectPro - Coverage & Pricing\" }\n      node_locale: { eq: $locale }\n    ) {\n      metadata {\n        ...Metadata\n      }\n      sections {\n        ... on ContentfulContentBlock {\n          internal {\n            type\n          }\n          heading {\n            heading\n          }\n          description {\n            ...ParagraphWithRemark\n          }\n          buttonsGroup {\n            ...Link\n          }\n          backgroundImageMobile {\n            fluid(maxWidth: 767, quality: 80) {\n              ...GatsbyContentfulFluid_withWebp\n            }\n          }\n          backgroundImageTablet {\n            fluid(maxWidth: 991, quality: 80) {\n              ...GatsbyContentfulFluid_withWebp\n            }\n          }\n          backgroundImageDesktop {\n            fluid(maxWidth: 2000, quality: 80) {\n              ...GatsbyContentfulFluid_withWebp\n            }\n          }\n          contentTheme\n          contentPositionMobile\n          contentPositionDesktop\n          showAllButtonsDesktop\n          showAllButtonsMobile\n          enableBackgroundColor\n          contentAlignCenterMobile\n          contentBackground\n          mainHeroBlock\n        }\n        ... on ContentfulSimpleHero {\n          internal {\n            type\n          }\n          heading {\n            heading\n          }\n        }\n        ... on ContentfulParagraph {\n          internal {\n            type\n          }\n          ...ParagraphWithRemark\n        }\n        ... on ContentfulFeatureSection {\n          internal {\n            type\n          }\n          features {\n            heading {\n              heading\n            }\n            description {\n              ...ParagraphWithRemark\n            }\n          }\n        }\n      }\n    }\n  }\n`\n","import React from \"react\"\nimport styled from \"styled-components\"\n\nimport { ContentfulFeature, ContentfulParagraph } from \"../../types/graphql-types\"\nimport colors from \"../utils/colors\"\nimport { breakpoints } from \"./layout\"\n\nimport { RoundedContainer } from \"./layout\"\nimport Heading from \"./heading\"\nimport Paragraph from \"./paragraph\"\n\nconst FeatureContainer = styled(RoundedContainer)`\n  background-color: ${colors.white};\n  margin-bottom: 2em;\n  border: 2px solid #ececec;\n  box-shadow: 0 2px 63px -36px rgba(0, 0, 0, 0.38);\n  padding: 48px;\n\n  @media (min-width: ${breakpoints.tabletMin}) {\n    margin-bottom: 0;\n    padding: 48px;\n  }\n`\n\nconst StyledParagraph = styled(Paragraph)`\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n\n  h3,\n  h4,\n  h5 {\n    margin: 1.875rem 0px 0px 0px;\n\n    a {\n      color: ${colors.dark};\n    }\n  }\n  img {\n    width: 100%;\n  }\n\n  p {\n    margin-top: 0;\n  }\n`\n\ntype FeatureSectionProps = {\n  features: ContentfulFeature[]\n}\n\nconst FeatureSection: React.FC<FeatureSectionProps> = ({ features }) => {\n  return (\n    <>\n      {features.map(\n        (feature, featureIndex) =>\n          (feature?.heading || feature?.description) && (\n            <FeatureContainer key={`feature-container-${featureIndex}`} alignLeft>\n              {feature.heading && (\n                <Heading level=\"h4\" size=\"h4\" content={feature.heading?.heading} />\n              )}\n              {feature.description && (\n                <StyledParagraph isSemiLarge content={feature.description as ContentfulParagraph} />\n              )}\n            </FeatureContainer>\n          )\n      )}\n    </>\n  )\n}\n\nexport default FeatureSection\n","import React from \"react\"\nimport styled, { css } from \"styled-components\"\nimport { Large } from \"./globalStyle\"\nimport {\n  ContentfulParagraph,\n  ParagraphWithRemarkFragment,\n  ContentfulAsset,\n  ContentfulLink,\n} from \"../../types/graphql-types\"\nimport { SingleColumnContainer, Column, breakpoints as bp } from \"../components/layout\"\nimport Heading from \"./heading\"\nimport ImageContainer from \"./ImageContainer\"\nimport Paragraph from \"../components/paragraph\"\nimport Button from \"./forms/button\"\nimport { navigate } from \"gatsby\"\nimport colors from \"../utils/colors\"\n\ninterface ContentBlockProps {\n  heading?: ParagraphWithRemarkFragment | ContentfulParagraph | string\n  description?: ParagraphWithRemarkFragment | ContentfulParagraph\n  buttonsGroup?: Array<ContentfulLink>\n  backgroundImageMobile: ContentfulAsset\n  backgroundImageTablet: ContentfulAsset\n  backgroundImageDesktop: ContentfulAsset\n  proVersion?: boolean\n  contentTheme?: string\n  contentPositionMobile?: string\n  contentPositionDesktop?: string\n  showAllButtonsDesktop?: boolean\n  showAllButtonsMobile?: boolean\n  enableBackgroundColor?: boolean\n  extraMarginTop?: boolean\n  contentAlignCenterDesktop?: boolean\n  contentAlignCenterMobile?: boolean\n  contentBackground: string\n  mainHeroBlock: boolean\n  wideContentColumn?: boolean\n}\n\ninterface ContentStylingProps {\n  contentTheme: string\n  contentPositionMobile: string\n  contentPositionDesktop: string\n  showAllButtonsDesktop: boolean\n  showAllButtonsMobile: boolean\n  enableBackgroundColor: boolean\n  contentAlignCenterMobile: boolean\n  contentBackground: string\n  wideContentColumn: boolean\n}\n\nconst ContentDescription = styled(Column)``\n\nconst SingleButton = styled(Button)`\n  z-index: 1;\n  @media (min-width: ${bp.tabletMin}) {\n    margin-bottom: 1.83em;\n    width: 232px;\n  }\n  @media (max-width: ${bp.mobileMax}) {\n    width: 196px;\n    height: 56px;\n    padding: 0;\n  }\n`\n\nconst ButtonsList = styled.div`\n  display: flex;\n`\nconst ContentContainerInner = styled(Column)`\n  h1,\n  h2,\n  ${ContentDescription} {\n    width: calc(100% - 2 * 8.333%);\n  }\n  @media (max-width: ${bp.mobileMax}) {\n    h2 {\n      margin: 0;\n    }\n  }\n  @media (min-width: ${bp.tabletMin}) and (max-width: ${bp.tabletMax}) {\n    h2 {\n      margin-top: 0;\n      padding-top: 1rem;\n    }\n  }\n`\n\nconst bgStyles = css`\n  display: flex;\n  flex-direction: column;\n  height: auto;\n  justify-content: center;\n  min-height: 380px;\n\n  @media (min-width: ${bp.tabletMin}) {\n    min-height: 700px;\n  }\n`\n\nconst lightContentStyles = css`\n  h1,\n  h2,\n  p {\n    color: ${colors.white};\n  }\n`\n\nconst onlyShowFirstButtonStyle = css`\n  ${ButtonsList} {\n    ${SingleButton} {\n      display: none;\n      &:first-child {\n        display: block;\n      }\n    }\n  }\n`\n\nconst multipleButtonsStyleMobile = css`\n  ${ButtonsList} {\n    display: flex;\n    flex-direction: column;\n    ${SingleButton} {\n      margin-bottom: 1rem;\n      &:last-child {\n        margin-bottom: 0;\n      }\n    }\n  }\n`\n\nconst multipleButtonsStyleDesktop = css`\n  flex-direction: row;\n  justify-content: flex-start;\n  ${SingleButton} {\n    margin-right: 24px;\n    &:last-child {\n      margin-right: 0;\n    }\n  }\n`\n\nconst contentLeftDesktop = css`\n  left: 0;\n  transform: translate(0, -50%);\n`\n\nconst contentRightDesktop = css`\n  transform: translate(100%, -50%);\n`\n\nconst contentAlignCenterMobileStyles = css`\n  text-align: center;\n  h1 {\n    margin: 2rem auto 10px auto;\n    font-size: 2rem;\n  }\n  ${ContentDescription} {\n    margin: 0 auto;\n    p {\n      font-size: 1rem;\n    }\n  }\n  ${ButtonsList} {\n    margin: 1rem auto 2rem auto;\n  }\n`\n\nconst ContentContainer = styled.div<ContentStylingProps>`\n  position: absolute;\n  margin-left: 1rem;\n  margin-right: 1rem;\n  width: calc(100% - 2rem);\n\n  ${ContentContainerInner} {\n    ${props => props.contentTheme === \"light\" && lightContentStyles}\n    ${props => (props.enableBackgroundColor ? bgStyles : \"\")}\n    border: 2px solid  ${props =>\n      props.enableBackgroundColor ? props.contentBackground : \"transparent\"};\n    background-color: ${props =>\n      props.enableBackgroundColor ? props.contentBackground : \"transparent\"};\n\n    ${props =>\n      props.contentPositionDesktop === \"left\" &&\n      `\n      @media (min-width: ${bp.tabletMin}) and (max-width: ${bp.tabletMax}) {\n        padding: 0 48px;\n      }\n    `}\n  }\n  \n  @media (max-width: ${bp.mobileMax}) {\n    height: 100%;\n    ${props =>\n      props.showAllButtonsMobile === true ? multipleButtonsStyleMobile : onlyShowFirstButtonStyle}\n    ${ContentContainerInner} {\n      ${props => props.contentPositionMobile === \"top\" && `margin: 2rem auto 0 auto;`}\n      ${props => props.contentPositionMobile === \"center\" && `margin: auto;`}\n      ${props => props.contentPositionMobile === \"bottom\" && `position: absolute; bottom: 0;`}\n      ${props => props.contentAlignCenterMobile && contentAlignCenterMobileStyles}\n      ${props =>\n        props.contentPositionMobile === \"bottom\" &&\n        props.enableBackgroundColor &&\n        `border-top-left-radius: 40px; border-top-right-radius: 40px;`}\n    }\n  }\n\n  @media (min-width: ${bp.tabletMin}) {\n    width: ${props => (props.wideContentColumn ? \"70%\" : \"calc(50% - (1.5 * 8.333%))\")};\n    margin: 0;\n    top: 50%;\n    \n    ${ContentContainerInner} {\n      ${props => props.contentPositionDesktop === \"left\" && contentLeftDesktop}\n      ${props => props.contentPositionDesktop === \"right\" && contentRightDesktop}\n      ${props =>\n        props.contentPositionDesktop === \"left\" &&\n        props.enableBackgroundColor &&\n        `border-top-right-radius: 40px; border-bottom-right-radius: 40px;`}\n        ${props =>\n          props.contentPositionDesktop === \"right\" &&\n          props.enableBackgroundColor &&\n          `border-top-left-radius: 40px; border-bottom-left-radius: 40px;`}\n    }\n    \n      ${props =>\n        props.showAllButtonsDesktop === true\n          ? multipleButtonsStyleDesktop\n          : onlyShowFirstButtonStyle}\n  }  \n`\n\nconst ImageBackgroundColumn = styled(Column)`\n  @media (min-width: ${bp.desktopMin}) {\n    max-height: 100vh;\n  }\n`\n\nconst ContentBlockContainer = styled.div<{ extraMarginTop: boolean; mainHeroBlock: boolean }>`\n  position: relative;\n  ${props => (props.extraMarginTop ? `margin-top: 96px;` : \"\")}\n  ${SingleColumnContainer} {\n    padding: 0;\n  }\n\n  ${ImageBackgroundColumn} {\n    @media (min-width: ${bp.desktopMin}) {\n      min-height: 500px;\n      max-height: ${props => (props.mainHeroBlock ? \"600px\" : \"500px\")};\n    }\n\n    @media (min-width: ${bp.tabletMin}) and (max-width: ${bp.tabletMax}) {\n      min-height: 490px;\n      max-height: ${props => (props.mainHeroBlock ? \"600px\" : \"490px\")};\n    }\n\n    @media (max-width: ${bp.mobileMax}) {\n      max-height: ${props => (props.mainHeroBlock ? \"680px;\" : \"565px\")};\n\n      img {\n        object-position: top !important;\n      }\n    }\n  }\n\n  ${ContentContainer} {\n    ${props =>\n      props.mainHeroBlock &&\n      `\n        @media (min-width: 400px) and (max-width: ${bp.mobileMax}) {\n          margin-left: 15%;\n          margin-right: 15%;\n          width: 70%;\n        }\n    `}\n  }\n\n  ${ContentDescription} {\n    ${props =>\n      props.mainHeroBlock\n        ? `\n        @media (max-width: ${bp.mobileMax}) {\n          p {\n            margin: 0;\n          }\n        }\n      `\n        : `\n      @media (max-width: ${bp.mobileMax}) {\n        p {\n          max-width: 320px;\n        }\n      }\n    `}\n  }\n`\n\nconst ContentBlock = ({\n  heading,\n  description,\n  buttonsGroup,\n  backgroundImageMobile,\n  backgroundImageTablet,\n  backgroundImageDesktop,\n  proVersion = false,\n  contentTheme = \"dark\",\n  contentPositionMobile = \"center\",\n  contentPositionDesktop = \"left\",\n  showAllButtonsDesktop = true,\n  showAllButtonsMobile = true,\n  enableBackgroundColor = false,\n  extraMarginTop = false,\n  contentAlignCenterMobile = false,\n  mainHeroBlock = false,\n  contentBackground,\n  wideContentColumn = false,\n}: ContentBlockProps) => {\n  return (\n    <ContentBlockContainer extraMarginTop={extraMarginTop} mainHeroBlock={mainHeroBlock}>\n      {backgroundImageDesktop && backgroundImageTablet && backgroundImageMobile && (\n        <SingleColumnContainer>\n          <ImageBackgroundColumn\n            leftSpanDesk={0}\n            rightSpanDesk={0}\n            leftSpanTab={0}\n            rightSpanTab={0}\n          >\n            <ImageContainer\n              borderRadius\n              mobileFloatingImage={backgroundImageMobile}\n              tabletFloatingImage={backgroundImageTablet}\n              desktopFloatingImage={backgroundImageDesktop}\n            />\n          </ImageBackgroundColumn>\n          <ContentContainer\n            contentTheme={contentTheme}\n            contentPositionDesktop={contentPositionDesktop}\n            contentPositionMobile={contentPositionMobile}\n            showAllButtonsMobile={showAllButtonsMobile}\n            showAllButtonsDesktop={showAllButtonsDesktop}\n            enableBackgroundColor={enableBackgroundColor}\n            contentAlignCenterMobile={contentAlignCenterMobile}\n            contentBackground={contentBackground!}\n            wideContentColumn={wideContentColumn}\n          >\n            <ContentContainerInner leftSpanTab={3} rightSpanTab={1} alignLeft>\n              {heading && (\n                <Heading\n                  level={mainHeroBlock ? \"h1\" : \"h2\"}\n                  size={mainHeroBlock ? \"h1\" : \"h2\"}\n                  ignoreMarginBottom\n                  pro={proVersion}\n                  content={heading}\n                />\n              )}\n              {description && (\n                <ContentDescription>\n                  <Paragraph\n                    isSemiLarge={mainHeroBlock}\n                    isLarge={!mainHeroBlock}\n                    content={description}\n                  />\n                </ContentDescription>\n              )}\n              <ButtonsList>\n                {buttonsGroup &&\n                  buttonsGroup.map((cta, index) => {\n                    return (\n                      <SingleButton\n                        key={index}\n                        type=\"button\"\n                        pro={proVersion}\n                        onClick={() => navigate(cta.url!)}\n                        data-gtm-cta={cta.gtm || \"\"}\n                      >\n                        {cta.heading}\n                      </SingleButton>\n                    )\n                  })}\n              </ButtonsList>\n            </ContentContainerInner>\n          </ContentContainer>\n        </SingleColumnContainer>\n      )}\n    </ContentBlockContainer>\n  )\n}\n\nexport default ContentBlock\n"],"sourceRoot":""}