{"version":3,"sources":["webpack:///./src/components/global/imageAndText.tsx"],"names":["ImageAndText","data","text","backgroundColor","image","alignment","spacing","style","mobileImage","textAboveImage","dom","useRef","useState","className","setClass","useEffect","current","vs","vsbl","update","destroy","desktopImageIdentifier","asset","_id","_ref","mobileImageIdentifier","ref","cx","cw","flexDirection","jcs","aic","aist","imageId","alt","blocks","serializers","Serializer"],"mappings":"4FAAA,kJA+BaA,EAAe,SAAC,GAAgC,YAA9BC,EAA8B,EAA9BA,KAE3BC,EAQED,EARFC,KACAC,EAOEF,EAPFE,gBACAC,EAMEH,EANFG,MACAC,EAKEJ,EALFI,UACAC,EAIEL,EAJFK,QACAC,EAGEN,EAHFM,MACAC,EAEEP,EAFFO,YACAC,EACER,EADFQ,eAEIC,EAAMC,mBAX+C,EAY7BC,mBAAS,IAAhCC,EAZoD,KAYzCC,EAZyC,KAa3DC,qBAAU,WAAM,IACNC,EAAYN,EAAZM,QACFC,EAAKC,YAAKF,EAALE,EAAc,WACvBJ,EAAS,iBAGX,OADAG,EAAGE,SACI,WACLF,EAAGG,aAEJ,CAAC,IAEJ,IAAMC,GAAyBjB,SAAA,UAAAA,EAAOkB,aAAP,eAAcC,OAAOnB,SAArB,UAAqBA,EAAOkB,aAA5B,aAAqB,EAAcE,MAC5DC,GACJjB,SAAA,UAAAA,EAAac,aAAb,eAAoBC,OAAOf,SAA3B,UAA2BA,EAAac,aAAxC,aAA2B,EAAoBE,MAEjD,OACE,yBACEE,IAAKhB,EACLG,UAAWc,IAAG,cAAed,EAAWV,EAAiBG,EAAS,CAChEsB,GAAwB,QAApBzB,KAGN,yBACEU,UAAU,4CACVN,MAAO,CAAEsB,cAAepB,EAAiB,iBAAmB,WAE5D,yBACEI,UAAWc,IAAG,YAAatB,EAAWE,EAAO,CAC3CuB,IAAe,SAAVvB,GAAkC,SAAdF,EACzB0B,IAAe,SAAVxB,EACLyB,KAAgB,SAAVzB,KAGR,yBACEM,UAAWc,IAAG,oDAAqD,CACjE,UAAqB,SAAVpB,EACX,UAAqB,SAAVA,KAGb,yBAAKM,UAAU,iBACZQ,GACC,kBAAC,IAAD,CAAOY,QAASZ,EAAwBa,IAAI,MAGhD,yBAAKrB,UAAU,gBACZY,GACC,kBAAC,IAAD,CAAOQ,QAASR,EAAuBS,IAAI,MAE3CT,GAAyBJ,GACzB,kBAAC,IAAD,CAAOY,QAASZ,EAAwBa,IAAI,OAIlD,yBACErB,UAAWc,IACT,kEACA,CACE,aAAwB,SAAVpB,EACd,UAAqB,SAAVA,KAIf,kBAAC,IAAD,CAAc4B,OAAQjC,EAAMkC,YAAaC,QAG7C,yBACExB,UAAWc,IACT,iEACA,CACE,aAAwB,SAAVpB,EACd,UAAqB,SAAVA,KAIf,kBAAC,IAAD,CAAc4B,OAAQjC,EAAMkC,YAAaC,UAOpCrC","file":"29-d79d74a8aedf34e61f38.js","sourcesContent":["import React, { useEffect, useState, useRef } from 'react'\nimport cx from 'classnames'\nimport vsbl from 'vsbl'\nimport BlockContent from 'src/components/global/BlockContent'\n\nimport { Image } from 'src/components/image'\nimport { Serializer } from 'src/utils/serializer'\n\nexport interface ImageAndTextProps {\n  data: {\n    text: any[]\n    backgroundColor: string\n    image: {\n      asset: {\n        _id: string\n        _ref?: string\n      }\n    }\n    mobileImage: {\n      asset: {\n        _id: string\n        _ref?: string\n      }\n    }\n    textAboveImage?: boolean\n    alignment?: string\n    spacing: string\n    style: string\n  }\n}\n\nexport const ImageAndText = ({ data }: ImageAndTextProps) => {\n  const {\n    text,\n    backgroundColor,\n    image,\n    alignment,\n    spacing,\n    style,\n    mobileImage,\n    textAboveImage,\n  } = data\n  const dom = useRef()\n  const [className, setClass] = useState('')\n  useEffect(() => {\n    const { current } = dom\n    const vs = vsbl(current)(() => {\n      setClass('is-visible')\n    })\n    vs.update()\n    return () => {\n      vs.destroy()\n    }\n  }, [0])\n\n  const desktopImageIdentifier = image?.asset?._id || image?.asset?._ref\n  const mobileImageIdentifier =\n    mobileImage?.asset?._id || mobileImage?.asset?._ref\n\n  return (\n    <div\n      ref={dom}\n      className={cx('image__text', className, backgroundColor, spacing, {\n        cw: backgroundColor === 'bcb',\n      })}\n    >\n      <div\n        className=\"container--l outer mxa  al x mobile__flex\"\n        style={{ flexDirection: textAboveImage ? 'column-reverse' : 'column' }}\n      >\n        <div\n          className={cx('f jcb fw ', alignment, style, {\n            jcs: style === 'card' && alignment !== 'jcrr',\n            aic: style !== 'card',\n            aist: style === 'card',\n          })}\n        >\n          <div\n            className={cx('x rel animate opacity d2 slide-up image__text-img', {\n              'col-l-5': style === 'card',\n              'col-m-4': style !== 'card',\n            })}\n          >\n            <div className=\"show__desktop\">\n              {desktopImageIdentifier && (\n                <Image imageId={desktopImageIdentifier} alt=\"\" />\n              )}\n            </div>\n            <div className=\"show__mobile\">\n              {mobileImageIdentifier && (\n                <Image imageId={mobileImageIdentifier} alt=\"\" />\n              )}\n              {!mobileImageIdentifier && desktopImageIdentifier && (\n                <Image imageId={desktopImageIdentifier} alt=\"\" />\n              )}\n            </div>\n          </div>\n          <div\n            className={cx(\n              'x animate opacity d3 slide-up image__text-content show__desktop',\n              {\n                'col-l-4 p1': style === 'card',\n                'col-m-6': style !== 'card',\n              }\n            )}\n          >\n            <BlockContent blocks={text} serializers={Serializer} />\n          </div>\n        </div>\n        <div\n          className={cx(\n            'x animate opacity d3 slide-up image__text-content show__mobile',\n            {\n              'col-l-4 p1': style === 'card',\n              'col-m-6': style !== 'card',\n            }\n          )}\n        >\n          <BlockContent blocks={text} serializers={Serializer} />\n        </div>\n      </div>\n    </div>\n  )\n}\n\nexport default ImageAndText\n"],"sourceRoot":""}