{"version":3,"sources":["webpack:///./src/img/ui/sliderArrow.svg","webpack:///./src/hoc/withIntegrationCardContext/styled.js","webpack:///./src/hoc/withIntegrationCardContext/index.js","webpack:///./node_modules/gatsby-plugin-google-analytics/index.js","webpack:///./src/img/ui/checkmarkBlue.svg","webpack:///./src/api/index.js","webpack:///./src/img/ui/arrow_black.svg","webpack:///./node_modules/lodash/compact.js"],"names":["module","exports","ContentStyles","styled","main","media","tablet","desktop","arrowSlider","checkmark","ExtendGridBox","div","mobile","MoreApps","section","desktopWide","CardColumn","Categories","FixedButton","StyledButton","CardContext","render","links","useStaticQuery","useState","showMoreCards","setShowMoreCards","fixedButton","useRef","listenToScroll","useCallback","window","pageYOffset","current","classList","add","remove","useEffect","addEventListener","removeEventListener","location","useLocation","card","frontmatter","items","filter","link","pathname","context","compact","split","pop","handleIntegrationBtnClick","e","integrationTitle","trackCustomEvent","category","action","label","post","name","number","Math","random","length","moreCards","title","slice","renderMoreCards","arr","map","item","key","activeCategory","categories","filterInstallLink","edges","node","integrationLink","canonical","currentInt","includes","externalInstallLink","metaTitle","metaDescription","desc","image","cover","className","to","src","arrow","alt","toLowerCase","replace","integrationPage","as","linkTag","madeBy","cat","href","data","flatMap","list","mouseTrackingEnabled","buttonsDisabled","ref","process","onClick","withIntegrationCardContext","Component","props","sliderSettings","photos","customPaging","i","style","backgroundImage","img","dots","dotsClass","infinite","speed","slidesToShow","slidesToScroll","_interopRequireDefault","require","__esModule","OutboundLink","_ref","value","_ref$nonInteraction","nonInteraction","transport","hitCallback","_ref$callbackTimeout","callbackTimeout","ga","trackingEventOptions","eventCategory","eventAction","eventLabel","eventValue","callback","opt_timeout","called","raceCallback","setTimeout","createFunctionWithTimeout","_extends2","_objectWithoutPropertiesLoose2","_react","_propTypes","rest","default","createElement","redirect","button","altKey","ctrlKey","metaKey","shiftKey","defaultPrevented","target","document","propTypes","string","func","a","axios","create","baseURL","url","body","array","index","resIndex","result"],"mappings":"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","file":"4fe3ea9fb83bd99323ae37c850e3e5a707a0d41a-15b4220b3f37df28de99.js","sourcesContent":["module.exports = \"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMzQiIHZpZXdCb3g9IjAgMCAxOCAzNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE2LjU4NjMgMzJMMi4yOTMwMSAxNy43MDY3QzIuMjAwMTIgMTcuNjEzOSAyLjEyNjQzIDE3LjUwMzggMi4wNzYxNiAxNy4zODI1QzIuMDI1ODggMTcuMjYxMiAyIDE3LjEzMTMgMiAxN0MyIDE2Ljg2ODcgMi4wMjU4OCAxNi43Mzg4IDIuMDc2MTYgMTYuNjE3NUMyLjEyNjQzIDE2LjQ5NjIgMi4yMDAxMiAxNi4zODYxIDIuMjkzMDEgMTYuMjkzM0wxNi41ODYzIDIiIHN0cm9rZT0iYmxhY2siIHN0cm9rZS13aWR0aD0iMi43NSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=\"","import styled from 'styled-components';\nimport { media } from 'theme/breakpoints';\nimport arrowSlider from 'img/ui/sliderArrow.svg';\nimport { StyledButton } from 'components/ui/button';\nimport checkmark from 'img/ui/checkmarkBlue.svg';\n\nexport const ContentStyles = styled.main`\n  grid-area: content;\n  overflow: hidden;\n  ${media.tablet} {\n    margin-top: 16px;\n  }\n  & .slick-slider {\n    max-width: 100%;\n    margin-bottom: 210px;\n    &.without-dots {\n      margin-bottom: 60px;\n    }\n    ${media.desktop} {\n      margin-bottom: 130px;\n    }\n    .slick-slide {\n      img {\n        max-width: 100%;\n        border: 2px solid #f2f2f2;\n        border-radius: 4px;\n      }\n    }\n  }\n  & .slick-dots {\n    bottom: -140px;\n    margin-bottom: 0;\n    display: flex !important;\n    ${media.desktop} {\n      bottom: -75px;\n    }\n    li {\n      width: auto;\n      height: auto;\n      margin-bottom: 0;\n      &:not(:last-child) {\n        margin-right: 28px;\n        ${media.desktop} {\n          margin-right: 24px;\n        }\n      }\n      a {\n        width: 84px;\n        height: 84px;\n        border-radius: 4px;\n        border: 1px solid #000000;\n        background-position: center center;\n        background-repeat: no-repeat;\n        background-size: cover;\n        ${media.desktop} {\n          width: 48px;\n          height: 50px;\n        }\n      }\n    }\n  }\n  & .slick-arrow {\n    background: rgba(255, 255, 255, 0.7);\n    border-radius: 4px;\n    padding: 9px 16px;\n    width: 48px;\n    height: 48px;\n    &:hover {\n      background: rgba(255, 255, 255, 1);\n    }\n    ${media.desktop} {\n      width: 24px;\n      height: 24px;\n    }\n    &.slick-next {\n      right: 32px;\n      &::before {\n        content: '';\n        background-image: url(${arrowSlider});\n        background-size: contain;\n        background-repeat: no-repeat;\n        background-position: center center;\n        width: 15px;\n        height: 30px;\n        position: absolute;\n        transform: rotate(180deg) translate(-25%, 0%);\n        position: absolute;\n        top: 25%;\n        left: 25%;\n      }\n      ${media.desktop} {\n        right: 16px;\n        &::before {\n          width: 7px;\n          height: 15px;\n        }\n      }\n    }\n    &.slick-prev {\n      left: 32px;\n      z-index: 55;\n      &::before {\n        content: '';\n        background-image: url(${arrowSlider});\n        background-size: contain;\n        background-repeat: no-repeat;\n        background-position: center center;\n        width: 15px;\n        height: 30px;\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%, -50%);\n      }\n      ${media.desktop} {\n        left: 16px;\n        &::before {\n          width: 7px;\n          height: 15px;\n        }\n      }\n    }\n  }\n  & div.section {\n    margin-bottom: 48px;\n  }\n  & h2 {\n    font-weight: 800;\n    font-size: 22px;\n    line-height: 28px;\n    margin-bottom: 24px;\n  }\n  & p {\n    font-size: 18px;\n    line-height: 28px;\n    margin-bottom: 20px;\n    ${media.desktop} {\n      font-size: 16px;\n      line-height: 28px;\n    }\n    a {\n      &:hover {\n        text-decoration: underline;\n      }\n    }\n    strong {\n      font-weight: 800;\n    }\n  }\n  & ul {\n    margin-bottom: 2rem;\n    list-style: none;\n    li {\n      font-size: 18px;\n      line-height: 28px;\n      ${media.desktop} {\n        font-size: 16px;\n        line-height: 28px;\n      }\n    }\n  }\n  & ul.checkmarks {\n    padding-left: 42px;\n    li {\n      margin-bottom: 24px;\n      position: relative;\n      &::before {\n        content: '';\n        background-image: url(${checkmark});\n        background-repeat: no-repeat;\n        background-size: contain;\n        background-position: center center;\n        position: absolute;\n        left: 0;\n        top: 50%;\n        transform: translate(-42px, -50%);\n        width: 18px;\n        height: 14px;\n      }\n    }\n  }\n`;\n\nexport const ExtendGridBox = styled.div`\n  display: grid;\n  grid-template-columns: 270px 1fr;\n  grid-column-gap: 28px;\n  padding-bottom: 168px;\n  margin-top: 144px;\n  grid-row-gap: 56px;\n  grid-template-areas:\n    'breadcrumbs breadcrumbs'\n    'card content';\n  ${media.tablet} {\n    grid-row-gap: 40px;\n    grid-template-columns: 1fr;\n    grid-template-rows: repeat(3, auto);\n    grid-template-areas:\n      'breadcrumbs'\n      'card'\n      'content';\n    padding-bottom: 120px;\n  }\n  ${media.mobile} {\n    margin-top: 110px;\n  }\n  .breadcrumbs {\n    grid-area: breadcrumbs;\n    display: flex;\n    align-items: center;\n    & img {\n      margin: 0 16px;\n      ${media.mobile} {\n        max-width: 8px;\n      }\n    }\n    & p {\n      margin: 0;\n      ${media.mobile} {\n        line-height: normal;\n      }\n      & a {\n        color: #000;\n        font-size: 14px;\n        line-height: 24px;\n        ${media.mobile} {\n          font-size: 12px;\n          line-height: 24px;\n        }\n      }\n    }\n  }\n`;\n\nexport const MoreApps = styled.section`\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  padding-top: 0;\n  & .alice-carousel {\n    display: none;\n    margin-bottom: 30px;\n    & .alice-carousel__stage {\n      & .alice-carousel__stage-item {\n        transform: translateX(15px);\n        & a {\n          width: calc(100% - 30px);\n        }\n      }\n    }\n\n    & .alice-carousel__dots {\n      margin-top: 37px;\n    }\n    ${media.mobile} {\n      display: block;\n    }\n  }\n  & h2 {\n    font-size: 36px;\n    line-height: 45px;\n    font-weight: 800;\n    margin-bottom: 64px;\n    text-align: center;\n    ${media.tablet} {\n      font-size: 32px;\n      line-height: 40px;\n      margin-bottom: 36px;\n    }\n  }\n  & .card-box {\n    display: grid;\n    grid-template-columns: repeat(4, 1fr);\n    grid-column-gap: 40px;\n    ${media.desktopWide} {\n      grid-column-gap: 28px;\n    }\n    ${media.desktop} {\n      grid-template-columns: repeat(2, 1fr);\n      grid-gap: 32px;\n    }\n    ${media.mobile} {\n      display: none;\n    }\n  }\n`;\n\nexport const CardColumn = styled.div`\n  display: flex;\n  flex-direction: column;\n  grid-area: card;\n  height: 100%;\n  & .sticky-box {\n    position: sticky;\n    top: 120px;\n  }\n  & p.madeby {\n    margin: 24px 0;\n    font-size: 14px;\n    line-height: 18px;\n    ${media.mobile} {\n      display: none;\n    }\n  }\n  & p.title {\n    font-size: 14px;\n    line-height: 18px;\n    margin-bottom: 8px;\n    & span {\n      display: none;\n      ${media.mobile} {\n        display: inline;\n        font-size: 14px;\n        line-height: 18px;\n        color: #808080;\n      }\n    }\n    ${media.mobile} {\n      display: flex;\n      justify-content: space-between;\n      margin: 24px 0 16px;\n    }\n  }\n`;\n\nexport const Categories = styled.div`\n  display: flex;\n  flex-wrap: wrap;\n  & .category {\n    border-radius: 4px;\n    border: 1px solid #000000;\n    padding: 3px 8px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: fit-content;\n    margin-right: 8px;\n    margin-bottom: 8px;\n    display: block;\n    text-decoration: none;\n    color: #000;\n    font-size: 12px;\n    line-height: 14px;\n    &:hover {\n      background-color: #000;\n      cursor: pointer;\n      & span {\n        color: #fff;\n      }\n    }\n    & span {\n      margin: 0;\n      font-weight: 700;\n      white-space: nowrap;\n    }\n  }\n`;\n\nexport const FixedButton = styled.div`\n  background: rgba(248, 248, 248, 0.9);\n  width: 100%;\n  position: fixed;\n  bottom: 0;\n  left: 0;\n  padding: 19px 15px 16px;\n  z-index: 999;\n  transform: translateY(100%);\n  transition: transform 0.2s ease;\n  display: none;\n  ${media.mobile} {\n    display: block;\n  }\n  &.active {\n    transform: translateY(0);\n  }\n  & ${StyledButton} {\n    max-width: 100%;\n    width: 100%;\n  }\n`;\n","/* eslint-disable jsx-a11y/anchor-has-content */\n/* eslint-disable array-callback-return */\n/* eslint-disable consistent-return */\n/* eslint-disable jsx-a11y/anchor-is-valid */\nimport React, { useEffect, useState, useCallback, useRef } from 'react';\nimport Layout from 'layout';\nimport { useStaticQuery, graphql, Link } from 'gatsby';\nimport { frontmatter } from 'data/marketplace/integrations';\nimport { useLocation } from '@reach/router';\nimport AliceCarousel from 'react-alice-carousel';\nimport arrow from 'img/ui/arrow_black.svg';\nimport PropTypes from 'prop-types';\nimport Card from 'components/marketplace/card';\nimport Button from 'components/ui/button';\nimport OwnAppSection from 'components/marketplace/ownAppSection';\nimport { data } from 'data/marketplace/sidebar';\nimport { post } from 'api';\nimport { trackCustomEvent } from 'gatsby-plugin-google-analytics';\nimport compact from 'lodash/compact';\nimport * as Styled from './styled';\nimport 'slick-carousel/slick/slick.css';\nimport 'slick-carousel/slick/slick-theme.css';\n\nexport const CardContext = ({ render }) => {\n  const { links } = useStaticQuery(graphql`\n    {\n      links: allJavascriptFrontmatter(\n        filter: {\n          frontmatter: {\n            canonical: {\n              regex: \"/help/\"\n              nin: [\n                \"/help/how-to-assign-and-edit-user-roles/\"\n                \"/help/how-to-track-users-across-multiple-subdomains/\"\n                \"/help/user-identification-custom-properties/\"\n                \"/help/how-to-set-segment-summary-email/\"\n              ]\n            }\n          }\n        }\n      ) {\n        edges {\n          node {\n            frontmatter {\n              canonical\n              integrationLink\n              externalInstallLink\n            }\n          }\n        }\n      }\n    }\n  `);\n\n  const [showMoreCards, setShowMoreCards] = useState(false);\n  const fixedButton = useRef(null);\n\n  const listenToScroll = useCallback(() => {\n    const position = window.pageYOffset;\n    if (position > 400) {\n      fixedButton.current.classList.add('active');\n    } else {\n      fixedButton.current.classList.remove('active');\n    }\n  }, []);\n\n  useEffect(() => {\n    window.addEventListener('scroll', listenToScroll);\n    setShowMoreCards(true);\n    return () => window.removeEventListener('scroll', listenToScroll);\n  }, [listenToScroll]);\n\n  const location = useLocation();\n  const [card] = frontmatter.items.filter(({ link }) => link === location.pathname);\n  const context = compact(location.pathname.split('/')).pop();\n\n  const handleIntegrationBtnClick = (e, integrationTitle) => {\n    trackCustomEvent({\n      category: 'Integration - Install now',\n      action: 'Click',\n      label: integrationTitle,\n    });\n    post('/marketplace/event', {\n      context,\n      name: 'marketplace.clicked.install',\n    });\n  };\n\n  useEffect(() => {\n    post('/marketplace/event', {\n      context,\n      name: 'marketplace.visit',\n    });\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  const number = Math.random() * (frontmatter.items.length - 5);\n  const moreCards = frontmatter.items\n    .filter(({ title }) => title !== card.title)\n    .slice(number, number + 4);\n  const renderMoreCards = (arr) =>\n    arr.map((item) => <Card {...item} key={item.link} activeCategory={item.categories[0]} />);\n\n  const checkCategory = (category) => {\n    const [getCurrentCat] = data.flatMap(({ list }) =>\n      list.filter(({ title }) => title === category),\n    );\n    return getCurrentCat.link;\n  };\n\n  const [filterInstallLink] = links.edges.filter((item) => {\n    const { integrationLink, canonical } = item.node.frontmatter;\n    const currentInt = location.pathname.split('/')[2];\n    if (canonical.includes(currentInt)) {\n      return integrationLink || canonical;\n    }\n  });\n  const { canonical, integrationLink, externalInstallLink } = filterInstallLink?.node?.frontmatter;\n\n  return (\n    <Layout\n      canonical={location.pathname}\n      metaTitle={`${card.title} - ${card.categories[0]} | Integrations`}\n      metaDescription={card.desc}\n      image={card.cover}\n    >\n      <div className=\"container\">\n        <Styled.ExtendGridBox>\n          <div className=\"breadcrumbs\">\n            <p>\n              <Link to=\"/integrations/\">Integrations</Link>\n            </p>\n            <img src={arrow} alt=\"arrow\" title=\"Arrow\" />\n            <p>\n              <Link to={`/integrations/${card.categories[0].toLowerCase().replace(' ', '-')}/`}>\n                {card.categories[0]}\n              </Link>\n            </p>\n            <img src={arrow} alt=\"arrow\" title=\"Arrow\" />\n            <p>\n              <Link to={location.pathname}>\n                <strong>{card.title}</strong>\n              </Link>\n            </p>\n          </div>\n          <Styled.CardColumn>\n            <div className=\"sticky-box\">\n              <Card\n                {...card}\n                integrationLink={integrationLink}\n                externalInstallLink={externalInstallLink}\n                link={canonical}\n                integrationPage\n                as=\"div\"\n                linkTag=\"a\"\n                handleIntegrationBtnClick={handleIntegrationBtnClick}\n              />\n              <p className=\"madeby\">\n                Made by: <strong>{card.madeBy}</strong>\n              </p>\n              <p className=\"title\">\n                <strong>Categories</strong>\n                <span>\n                  Made by: <strong>{card.madeBy}</strong>\n                </span>\n              </p>\n              <Styled.Categories>\n                {card.categories.map((cat) => (\n                  <a className=\"category\" key={cat} href={checkCategory(cat)}>\n                    <span>{cat}</span>\n                  </a>\n                ))}\n              </Styled.Categories>\n            </div>\n          </Styled.CardColumn>\n          <Styled.ContentStyles>{render(card)}</Styled.ContentStyles>\n        </Styled.ExtendGridBox>\n        <Styled.MoreApps>\n          <h2>Discover more apps</h2>\n          <div className=\"card-box\">{showMoreCards && renderMoreCards(moreCards)}</div>\n          <AliceCarousel mouseTrackingEnabled buttonsDisabled>\n            {renderMoreCards(moreCards)}\n          </AliceCarousel>\n        </Styled.MoreApps>\n        <OwnAppSection />\n      </div>\n      <Styled.FixedButton ref={fixedButton}>\n        <Button\n          href={\n            filterInstallLink?.node?.frontmatter?.integrationLink\n              ? `${process.env.GATSBY_APP_URL}${filterInstallLink?.node?.frontmatter?.integrationLink}`\n              : filterInstallLink?.node?.frontmatter?.canonical\n          }\n          onClick={(e) => handleIntegrationBtnClick(e, card.title)}\n        >\n          Install now\n        </Button>\n      </Styled.FixedButton>\n    </Layout>\n  );\n};\n\nCardContext.propTypes = {\n  render: PropTypes.func.isRequired,\n};\n\nconst withIntegrationCardContext = (Component) => (props) => {\n  const sliderSettings = (photos) => {\n    const settings = {\n      customPaging: (i) => {\n        return (\n          <a\n            style={{\n              backgroundImage: `url(${\n                typeof photos[i].img === 'string' ? photos[i].img : photos[i].img.src\n              })`,\n            }}\n          />\n        );\n      },\n      dots: photos.length > 1,\n      dotsClass: 'slick-dots',\n      infinite: true,\n      speed: 500,\n      slidesToShow: 1,\n      slidesToScroll: 1,\n    };\n    return settings;\n  };\n  return (\n    <CardContext\n      render={(card) => <Component {...props} card={card} sliderSettings={sliderSettings} />}\n    />\n  );\n};\n\nexport default withIntegrationCardContext;\n","\"use strict\";\n\nvar _interopRequireDefault = require(\"@babel/runtime/helpers/interopRequireDefault\");\n\nexports.__esModule = true;\nexports.OutboundLink = OutboundLink;\nexports.trackCustomEvent = trackCustomEvent;\n\nvar _extends2 = _interopRequireDefault(require(\"@babel/runtime/helpers/extends\"));\n\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(require(\"@babel/runtime/helpers/objectWithoutPropertiesLoose\"));\n\nvar _react = _interopRequireDefault(require(\"react\"));\n\nvar _propTypes = _interopRequireDefault(require(\"prop-types\"));\n\nvar createFunctionWithTimeout = function createFunctionWithTimeout(callback, opt_timeout) {\n  if (opt_timeout === void 0) {\n    opt_timeout = 1000;\n  }\n\n  var called = false;\n\n  var raceCallback = function raceCallback() {\n    if (!called) {\n      called = true;\n      callback();\n    }\n  };\n\n  setTimeout(raceCallback, opt_timeout);\n  return raceCallback;\n};\n\nfunction OutboundLink(props) {\n  var eventCategory = props.eventCategory,\n      eventAction = props.eventAction,\n      eventLabel = props.eventLabel,\n      eventValue = props.eventValue,\n      rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"eventCategory\", \"eventAction\", \"eventLabel\", \"eventValue\"]);\n  return /*#__PURE__*/_react.default.createElement(\"a\", (0, _extends2.default)({}, rest, {\n    onClick: function onClick(e) {\n      if (typeof props.onClick === \"function\") {\n        props.onClick(e);\n      }\n\n      var redirect = true;\n\n      if (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey || e.shiftKey || e.defaultPrevented) {\n        redirect = false;\n      }\n\n      if (props.target && props.target.toLowerCase() !== \"_self\") {\n        redirect = false;\n      }\n\n      if (window.ga) {\n        window.ga(\"send\", \"event\", {\n          eventCategory: eventCategory || \"Outbound Link\",\n          eventAction: eventAction || \"click\",\n          eventLabel: eventLabel || props.href,\n          eventValue: eventValue,\n          transport: redirect ? \"beacon\" : \"\",\n          hitCallback: function hitCallback() {\n            if (redirect) {\n              document.location = props.href;\n            }\n          }\n        });\n      } else {\n        if (redirect) {\n          document.location = props.href;\n        }\n      }\n\n      return false;\n    }\n  }));\n}\n\nOutboundLink.propTypes = {\n  href: _propTypes.default.string,\n  target: _propTypes.default.string,\n  eventCategory: _propTypes.default.string,\n  eventAction: _propTypes.default.string,\n  eventLabel: _propTypes.default.string,\n  eventValue: _propTypes.default.number,\n  onClick: _propTypes.default.func\n};\n/**\n * This allows the user to create custom events within their Gatsby projects.\n *\n * @param {import('gatsby-plugin-google-analytics').CustomEventArgs} args\n * @see https://developers.google.com/analytics/devguides/collection/analyticsjs/field-reference#events\n */\n\nfunction trackCustomEvent(_ref) {\n  var category = _ref.category,\n      action = _ref.action,\n      label = _ref.label,\n      value = _ref.value,\n      _ref$nonInteraction = _ref.nonInteraction,\n      nonInteraction = _ref$nonInteraction === void 0 ? false : _ref$nonInteraction,\n      transport = _ref.transport,\n      hitCallback = _ref.hitCallback,\n      _ref$callbackTimeout = _ref.callbackTimeout,\n      callbackTimeout = _ref$callbackTimeout === void 0 ? 1000 : _ref$callbackTimeout;\n\n  if (typeof window !== \"undefined\" && window.ga) {\n    var trackingEventOptions = {\n      eventCategory: category,\n      eventAction: action,\n      eventLabel: label,\n      eventValue: value,\n      nonInteraction: nonInteraction,\n      transport: transport\n    };\n\n    if (hitCallback && typeof hitCallback === \"function\") {\n      trackingEventOptions.hitCallback = createFunctionWithTimeout(hitCallback, callbackTimeout);\n    }\n\n    window.ga(\"send\", \"event\", trackingEventOptions);\n  }\n}","module.exports = \"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjIiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAyMiAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIxLjE5NDMgMC4zNzg2MzJDMjAuOTg2MSAwLjIyNzMwOSAyMC43NDk4IDAuMTE3OTIxIDIwLjQ5ODggMC4wNTY3MjA3QzIwLjI0NzcgLTAuMDA0NDc5ODcgMTkuOTg2OSAtMC4wMTYyOTM3IDE5LjczMTMgMC4wMjE5NTQzQzE5LjQ3NTYgMC4wNjAyMDIzIDE5LjIzMDEgMC4xNDc3NjIgMTkuMDA4OCAwLjI3OTYzQzE4Ljc4NzQgMC40MTE0OTkgMTguNTk0NiAwLjU4NTA5MSAxOC40NDEzIDAuNzkwNDg2TDkuMTA2MjMgMTMuMjg2TDMuMTcwMTQgOC42MDE3MUMyLjc2MDg1IDguMjkyNDkgMi4yNDUwMiA4LjE1MzcyIDEuNzMzMjEgOC4yMTUxNEMxLjIyMTQxIDguMjc2NTcgMC43NTQzNzQgOC41MzMzIDAuNDMyMjE5IDguOTMwMzFDMC4xMTAwNjQgOS4zMjczMiAtMC4wNDE1Njg5IDkuODMzIDAuMDA5ODIzODUgMTAuMzM5QzAuMDYxMjE2NiAxMC44NDQ5IDAuMzExNTQ1IDExLjMxMDkgMC43MDcxNDggMTEuNjM3TDguMjQ0MjYgMTcuNTgzMkM4LjQ1MjU0IDE3Ljc0MzkgOC42OTExOSAxNy44NjIgOC45NDYyOCAxNy45MzA3QzkuMjAxMzYgMTcuOTk5NCA5LjQ2Nzc3IDE4LjAxNzIgOS43Mjk5MyAxNy45ODMyQzkuOTkyMSAxNy45NDkyIDEwLjI0NDggMTcuODY0MSAxMC40NzMyIDE3LjczMjdDMTAuNzAxNiAxNy42MDEzIDEwLjkwMTIgMTcuNDI2MyAxMS4wNjAyIDE3LjIxOEwyMS42MTgyIDMuMDk1MzFDMjEuNzcxMyAyLjg4OTUyIDIxLjg4MTggMi42NTU5OCAyMS45NDM0IDIuNDA4MDVDMjIuMDA1IDIuMTYwMTEgMjIuMDE2NCAxLjkwMjYzIDIxLjk3NzEgMS42NTAzM0MyMS45Mzc3IDEuMzk4MDMgMjEuODQ4MyAxLjE1NTg2IDIxLjcxNCAwLjkzNzY1MUMyMS41Nzk3IDAuNzE5NDQ1IDIxLjQwMzEgMC41Mjk0ODYgMjEuMTk0MyAwLjM3ODYzMloiIGZpbGw9IiMwNDQ2Q0EiLz4KPC9zdmc+Cg==\"","import axios from 'axios';\n\nconst a = axios.create({\n  baseURL: `${process.env.GATSBY_API_URL}`,\n});\n\nexport const post = (url, body) => a.post(url, body);\n","module.exports = \"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDEyIDEyIj48ZGVmcz48c3R5bGU+LmF7ZmlsbDojMDAwMDAwO308L3N0eWxlPjwvZGVmcz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtODUgLTg1KSI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoODUgODUpIj48cGF0aCBjbGFzcz0iYSIgZD0iTTg1LDkxLjc1aDkuMTEybC00LjIsNC4yTDkxLDk3bDYtNi02LTYtMS4wNSwxLjA1LDQuMTYyLDQuMkg4NVoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC04NSAtODUpIi8+PC9nPjwvZz48L3N2Zz4=\"","/**\n * Creates an array with all falsey values removed. The values `false`, `null`,\n * `0`, `\"\"`, `undefined`, and `NaN` are falsey.\n *\n * @static\n * @memberOf _\n * @since 0.1.0\n * @category Array\n * @param {Array} array The array to compact.\n * @returns {Array} Returns the new array of filtered values.\n * @example\n *\n * _.compact([0, 1, false, 2, '', 3]);\n * // => [1, 2, 3]\n */\nfunction compact(array) {\n  var index = -1,\n      length = array == null ? 0 : array.length,\n      resIndex = 0,\n      result = [];\n\n  while (++index < length) {\n    var value = array[index];\n    if (value) {\n      result[resIndex++] = value;\n    }\n  }\n  return result;\n}\n\nmodule.exports = compact;\n"],"sourceRoot":""}