{"version":3,"sources":["webpack:///./node_modules/object-fit-images/dist/ofi.common-js.js","webpack:///./node_modules/gatsby-image/withIEPolyfill/index.js","webpack:///./src/components/tutorials/card/styled.js","webpack:///./src/components/tutorials/card/index.js","webpack:///./src/pages/tutorials.js","webpack:///./src/components/ui/startUsing/index.js"],"names":["OFI","propRegex","testImg","Image","style","supportsObjectFit","supportsObjectPosition","supportsOFI","supportsCurrentSrc","currentSrc","nativeGetAttribute","getAttribute","nativeSetAttribute","setAttribute","autoModeEnabled","setPlaceholder","img","width","height","placeholder","call","onImageReady","callback","naturalWidth","setTimeout","fixOne","el","parsed","getComputedStyle","fontFamily","props","exec","getStyle","ofi","skipTest","srcset","src","naturalHeight","descriptors","get","prop","set","value","Object","defineProperty","ss","keepSrcUsable","err","window","console","warn","picturefill","pf","_","ns","evaled","fillImg","reselect","curSrc","supported","polyfillCurrentSrc","backgroundImage","replace","backgroundPosition","backgroundRepeat","backgroundOrigin","test","backgroundSize","fix","imgs","opts","startAutoMode","document","getElementsByTagName","querySelectorAll","i","length","body","addEventListener","e","target","tagName","watchMQ","bind","getOfiImageMaybe","name","HTMLImageElement","prototype","this","String","hijackAttributes","module","exports","_interopRequireWildcard3","require","_interopRequireDefault","__esModule","default","_extends2","_objectWithoutPropertiesLoose2","_interopRequireWildcard2","_inheritsLoose2","_react","_propTypes","_index","ImageWithIEPolyfill","_Component","_this","_len","arguments","args","Array","_key","apply","concat","imageRef","innerRef","createRef","placeholderRef","_proto","componentDidMount","_this2","createElement","objectFit","objectPosition","Promise","resolve","then","_ref","ObjectFitImages","current","render","_this$props","polyfillStyle","ref","imgStyle","placeholderStyle","Component","propTypes","string","defaultProps","_default","forwardRef","ImageBox","styled","div","media","desktop","Card","Link","comingSoon","StyledLink","mobile","AcademyCard","title","content","link","linkContent","to","as","Tag","fluid","className","withArrow","tag","undefined","Header","header","tablet","StyledSection","section","CTASection","Tutorials","useStaticQuery","img1","img2","img3","canonical","metaTitle","metaDescription","childImageSharp","href","StartUsingLS","deleteMarginTop","setMarginTop","useSourceParams","useState","email","setEmail","onSubmit","preventDefault","navigate","htmlFor","id","type","required","onChange","secondary"],"mappings":"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","file":"component---src-pages-tutorials-js-c9b8e942950a59ff3a82.js","sourcesContent":["/*! npm.im/object-fit-images 3.2.4 */\n'use strict';\n\nvar OFI = 'bfred-it:object-fit-images';\nvar propRegex = /(object-fit|object-position)\\s*:\\s*([-.\\w\\s%]+)/g;\nvar testImg = typeof Image === 'undefined' ? {\n  style: {\n    'object-position': 1\n  }\n} : new Image();\nvar supportsObjectFit = ('object-fit' in testImg.style);\nvar supportsObjectPosition = ('object-position' in testImg.style);\nvar supportsOFI = ('background-size' in testImg.style);\nvar supportsCurrentSrc = typeof testImg.currentSrc === 'string';\nvar nativeGetAttribute = testImg.getAttribute;\nvar nativeSetAttribute = testImg.setAttribute;\nvar autoModeEnabled = false;\n\nfunction createPlaceholder(w, h) {\n  return \"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='\" + w + \"' height='\" + h + \"'%3E%3C/svg%3E\";\n}\n\nfunction polyfillCurrentSrc(el) {\n  if (el.srcset && !supportsCurrentSrc && window.picturefill) {\n    var pf = window.picturefill._; // parse srcset with picturefill where currentSrc isn't available\n\n    if (!el[pf.ns] || !el[pf.ns].evaled) {\n      // force synchronous srcset parsing\n      pf.fillImg(el, {\n        reselect: true\n      });\n    }\n\n    if (!el[pf.ns].curSrc) {\n      // force picturefill to parse srcset\n      el[pf.ns].supported = false;\n      pf.fillImg(el, {\n        reselect: true\n      });\n    } // retrieve parsed currentSrc, if any\n\n\n    el.currentSrc = el[pf.ns].curSrc || el.src;\n  }\n}\n\nfunction getStyle(el) {\n  var style = getComputedStyle(el).fontFamily;\n  var parsed;\n  var props = {};\n\n  while ((parsed = propRegex.exec(style)) !== null) {\n    props[parsed[1]] = parsed[2];\n  }\n\n  return props;\n}\n\nfunction setPlaceholder(img, width, height) {\n  // Default: fill width, no height\n  var placeholder = createPlaceholder(width || 1, height || 0); // Only set placeholder if it's different\n\n  if (nativeGetAttribute.call(img, 'src') !== placeholder) {\n    nativeSetAttribute.call(img, 'src', placeholder);\n  }\n}\n\nfunction onImageReady(img, callback) {\n  // naturalWidth is only available when the image headers are loaded,\n  // this loop will poll it every 100ms.\n  if (img.naturalWidth) {\n    callback(img);\n  } else {\n    setTimeout(onImageReady, 100, img, callback);\n  }\n}\n\nfunction fixOne(el) {\n  var style = getStyle(el);\n  var ofi = el[OFI];\n  style['object-fit'] = style['object-fit'] || 'fill'; // default value\n  // Avoid running where unnecessary, unless OFI had already done its deed\n\n  if (!ofi.img) {\n    // fill is the default behavior so no action is necessary\n    if (style['object-fit'] === 'fill') {\n      return;\n    } // Where object-fit is supported and object-position isn't (Safari < 10)\n\n\n    if (!ofi.skipTest && // unless user wants to apply regardless of browser support\n    supportsObjectFit && // if browser already supports object-fit\n    !style['object-position'] // unless object-position is used\n    ) {\n      return;\n    }\n  } // keep a clone in memory while resetting the original to a blank\n\n\n  if (!ofi.img) {\n    ofi.img = new Image(el.width, el.height);\n    ofi.img.srcset = nativeGetAttribute.call(el, \"data-ofi-srcset\") || el.srcset;\n    ofi.img.src = nativeGetAttribute.call(el, \"data-ofi-src\") || el.src; // preserve for any future cloneNode calls\n    // https://github.com/bfred-it/object-fit-images/issues/53\n\n    nativeSetAttribute.call(el, \"data-ofi-src\", el.src);\n\n    if (el.srcset) {\n      nativeSetAttribute.call(el, \"data-ofi-srcset\", el.srcset);\n    }\n\n    setPlaceholder(el, el.naturalWidth || el.width, el.naturalHeight || el.height); // remove srcset because it overrides src\n\n    if (el.srcset) {\n      el.srcset = '';\n    }\n\n    try {\n      keepSrcUsable(el);\n    } catch (err) {\n      if (window.console) {\n        console.warn('https://bit.ly/ofi-old-browser');\n      }\n    }\n  }\n\n  polyfillCurrentSrc(ofi.img);\n  el.style.backgroundImage = \"url(\\\"\" + (ofi.img.currentSrc || ofi.img.src).replace(/\"/g, '\\\\\"') + \"\\\")\";\n  el.style.backgroundPosition = style['object-position'] || 'center';\n  el.style.backgroundRepeat = 'no-repeat';\n  el.style.backgroundOrigin = 'content-box';\n\n  if (/scale-down/.test(style['object-fit'])) {\n    onImageReady(ofi.img, function () {\n      if (ofi.img.naturalWidth > el.width || ofi.img.naturalHeight > el.height) {\n        el.style.backgroundSize = 'contain';\n      } else {\n        el.style.backgroundSize = 'auto';\n      }\n    });\n  } else {\n    el.style.backgroundSize = style['object-fit'].replace('none', 'auto').replace('fill', '100% 100%');\n  }\n\n  onImageReady(ofi.img, function (img) {\n    setPlaceholder(el, img.naturalWidth, img.naturalHeight);\n  });\n}\n\nfunction keepSrcUsable(el) {\n  var descriptors = {\n    get: function get(prop) {\n      return el[OFI].img[prop ? prop : 'src'];\n    },\n    set: function set(value, prop) {\n      el[OFI].img[prop ? prop : 'src'] = value;\n      nativeSetAttribute.call(el, \"data-ofi-\" + prop, value); // preserve for any future cloneNode\n\n      fixOne(el);\n      return value;\n    }\n  };\n  Object.defineProperty(el, 'src', descriptors);\n  Object.defineProperty(el, 'currentSrc', {\n    get: function get() {\n      return descriptors.get('currentSrc');\n    }\n  });\n  Object.defineProperty(el, 'srcset', {\n    get: function get() {\n      return descriptors.get('srcset');\n    },\n    set: function set(ss) {\n      return descriptors.set(ss, 'srcset');\n    }\n  });\n}\n\nfunction hijackAttributes() {\n  function getOfiImageMaybe(el, name) {\n    return el[OFI] && el[OFI].img && (name === 'src' || name === 'srcset') ? el[OFI].img : el;\n  }\n\n  if (!supportsObjectPosition) {\n    HTMLImageElement.prototype.getAttribute = function (name) {\n      return nativeGetAttribute.call(getOfiImageMaybe(this, name), name);\n    };\n\n    HTMLImageElement.prototype.setAttribute = function (name, value) {\n      return nativeSetAttribute.call(getOfiImageMaybe(this, name), name, String(value));\n    };\n  }\n}\n\nfunction fix(imgs, opts) {\n  var startAutoMode = !autoModeEnabled && !imgs;\n  opts = opts || {};\n  imgs = imgs || 'img';\n\n  if (supportsObjectPosition && !opts.skipTest || !supportsOFI) {\n    return false;\n  } // use imgs as a selector or just select all images\n\n\n  if (imgs === 'img') {\n    imgs = document.getElementsByTagName('img');\n  } else if (typeof imgs === 'string') {\n    imgs = document.querySelectorAll(imgs);\n  } else if (!('length' in imgs)) {\n    imgs = [imgs];\n  } // apply fix to all\n\n\n  for (var i = 0; i < imgs.length; i++) {\n    imgs[i][OFI] = imgs[i][OFI] || {\n      skipTest: opts.skipTest\n    };\n    fixOne(imgs[i]);\n  }\n\n  if (startAutoMode) {\n    document.body.addEventListener('load', function (e) {\n      if (e.target.tagName === 'IMG') {\n        fix(e.target, {\n          skipTest: opts.skipTest\n        });\n      }\n    }, true);\n    autoModeEnabled = true;\n    imgs = 'img'; // reset to a generic selector for watchMQ\n  } // if requested, watch media queries for object-fit change\n\n\n  if (opts.watchMQ) {\n    window.addEventListener('resize', fix.bind(null, imgs, {\n      skipTest: opts.skipTest\n    }));\n  }\n}\n\nfix.supportsObjectFit = supportsObjectFit;\nfix.supportsObjectPosition = supportsObjectPosition;\nhijackAttributes();\nmodule.exports = fix;","\"use strict\";\n\nvar _interopRequireWildcard3 = require(\"@babel/runtime/helpers/interopRequireWildcard\");\n\nvar _interopRequireDefault = require(\"@babel/runtime/helpers/interopRequireDefault\");\n\nexports.__esModule = true;\nexports.default = void 0;\n\nvar _extends2 = _interopRequireDefault(require(\"@babel/runtime/helpers/extends\"));\n\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(require(\"@babel/runtime/helpers/objectWithoutPropertiesLoose\"));\n\nvar _interopRequireWildcard2 = _interopRequireDefault(require(\"@babel/runtime/helpers/interopRequireWildcard\"));\n\nvar _inheritsLoose2 = _interopRequireDefault(require(\"@babel/runtime/helpers/inheritsLoose\"));\n\nvar _react = _interopRequireWildcard3(require(\"react\"));\n\nvar _propTypes = _interopRequireDefault(require(\"prop-types\"));\n\nvar _index = _interopRequireDefault(require(\"../index\"));\n\nvar ImageWithIEPolyfill = /*#__PURE__*/function (_Component) {\n  (0, _inheritsLoose2.default)(ImageWithIEPolyfill, _Component);\n\n  function ImageWithIEPolyfill() {\n    var _this;\n\n    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {\n      args[_key] = arguments[_key];\n    }\n\n    _this = _Component.call.apply(_Component, [this].concat(args)) || this;\n    _this.imageRef = _this.props.innerRef || /*#__PURE__*/(0, _react.createRef)();\n    _this.placeholderRef = /*#__PURE__*/(0, _react.createRef)();\n    return _this;\n  }\n\n  var _proto = ImageWithIEPolyfill.prototype;\n\n  // Load object-fit/position polyfill if required (e.g. in IE)\n  _proto.componentDidMount = function componentDidMount() {\n    var _this2 = this;\n\n    var testImg = document.createElement(\"img\");\n\n    if (typeof testImg.style.objectFit === \"undefined\" || typeof testImg.style.objectPosition === \"undefined\") {\n      Promise.resolve().then(function () {\n        return (0, _interopRequireWildcard2.default)(require(\"object-fit-images\"));\n      }).then(function (_ref) {\n        var ObjectFitImages = _ref.default;\n        ObjectFitImages(_this2.imageRef.current.imageRef.current);\n        ObjectFitImages(_this2.placeholderRef.current);\n      });\n    }\n  };\n\n  _proto.render = function render() {\n    var _this$props = this.props,\n        objectFit = _this$props.objectFit,\n        objectPosition = _this$props.objectPosition,\n        props = (0, _objectWithoutPropertiesLoose2.default)(_this$props, [\"objectFit\", \"objectPosition\"]);\n    var polyfillStyle = {\n      objectFit: objectFit,\n      objectPosition: objectPosition,\n      fontFamily: \"\\\"object-fit: \" + objectFit + \"; object-position: \" + objectPosition + \"\\\"\"\n    };\n    return /*#__PURE__*/_react.default.createElement(_index.default, (0, _extends2.default)({\n      ref: this.imageRef,\n      placeholderRef: this.placeholderRef\n    }, props, {\n      imgStyle: (0, _extends2.default)({}, props.imgStyle, polyfillStyle),\n      placeholderStyle: (0, _extends2.default)({}, props.placeholderStyle, polyfillStyle)\n    }));\n  };\n\n  return ImageWithIEPolyfill;\n}(_react.Component); // If you modify these propTypes, please don't forget to update following files as well:\n// https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-image/withIEPolyfill/index.d.ts\n// https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-image/README.md#gatsby-image-props\n// https://github.com/gatsbyjs/gatsby/blob/master/docs/docs/gatsby-image.md#gatsby-image-props\n\n\nImageWithIEPolyfill.propTypes = {\n  objectFit: _propTypes.default.string,\n  objectPosition: _propTypes.default.string\n};\nImageWithIEPolyfill.defaultProps = {\n  objectFit: \"cover\",\n  objectPosition: \"50% 50%\"\n};\n\nvar _default = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {\n  return /*#__PURE__*/_react.default.createElement(ImageWithIEPolyfill, (0, _extends2.default)({}, props, {\n    innerRef: ref\n  }));\n});\n\nexports.default = _default;","import styled from 'styled-components';\nimport { Link } from 'gatsby';\nimport { StyledLink } from 'components/ui/link';\nimport { media } from 'theme/breakpoints';\n\nexport const ImageBox = styled.div`\n  border-radius: 4px;\n  height: 204px;\n  overflow: hidden;\n  ${media.desktop} {\n    height: fit-content;\n  }\n  & .gatsby-image-wrapper {\n    transition: transform 0.2s ease;\n  }\n`;\n\nexport const Card = styled(Link)`\n  display: flex;\n  flex-direction: column;\n  opacity: ${(props) => (props.comingSoon ? 0.5 : 1)};\n  &:hover {\n    text-decoration: none;\n    ${StyledLink} {\n      text-decoration: underline;\n      color: #0a4ed6;\n      &::after {\n        transform: translateX(8px);\n      }\n    }\n    & .gatsby-image-wrapper {\n      transform: scale(1.08);\n    }\n  }\n  & h3 {\n    font-size: 24px;\n    line-height: 34px;\n    margin-top: 24px;\n    color: #000;\n    ${media.mobile} {\n      margin-top: 16px;\n    }\n  }\n  & p {\n    font-size: 16px;\n    line-height: 26px;\n    margin: 8px 0 24px;\n    color: #000;\n    &:last-child {\n      margin: 0;\n    }\n    &.comingsoon {\n      margin: 0;\n      font-weight: 800;\n      font-size: 18px;\n      line-height: 24px;\n    }\n  }\n  ${StyledLink} {\n    color: #0a4ed6;\n  }\n`;\n","import React from 'react';\nimport Img from 'gatsby-image/withIEPolyfill';\nimport PropTypes from 'prop-types';\nimport CustomLink from 'components/ui/link';\nimport * as Styled from './styled';\n\nconst AcademyCard = ({ img, title, content, link, linkContent, comingSoon }) => {\n  return (\n    <Styled.Card comingSoon={comingSoon} to={comingSoon ? null : link} as={comingSoon && 'div'}>\n      <Styled.ImageBox>\n        <Img Tag=\"div\" fluid={img} className=\"img-fluid\" objectFit=\"cover\" />\n      </Styled.ImageBox>\n      <h3>{title}</h3>\n      <p>{content}</p>\n      {comingSoon ? (\n        <p className=\"comingsoon\">Coming soon</p>\n      ) : (\n        <CustomLink withArrow tag=\"p\">\n          {linkContent}\n        </CustomLink>\n      )}\n    </Styled.Card>\n  );\n};\n\nexport default AcademyCard;\n\nAcademyCard.propTypes = {\n  img: PropTypes.oneOfType([PropTypes.object, PropTypes.string]).isRequired,\n  title: PropTypes.string.isRequired,\n  content: PropTypes.string.isRequired,\n  link: PropTypes.string,\n  linkContent: PropTypes.string,\n  comingSoon: PropTypes.bool,\n};\n\nAcademyCard.defaultProps = {\n  comingSoon: false,\n  link: undefined,\n  linkContent: undefined,\n};\n","import React from 'react';\nimport { graphql, useStaticQuery } from 'gatsby';\nimport Layout from 'layout';\nimport styled from 'styled-components';\nimport { media } from 'theme/breakpoints';\nimport Card from 'components/tutorials/card';\nimport Button from 'components/ui/button';\nimport StartUsing from 'components/ui/startUsing';\n\nconst Header = styled.header`\n  padding: 180px 0 0;\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n  text-align: center;\n  ${media.tablet} {\n    padding: 120px 0 0;\n  }\n  ${media.mobile} {\n    padding: 6rem 15px 0;\n  }\n`;\n\nconst StyledSection = styled.section`\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  grid-column-gap: 40px;\n  padding-bottom: 0;\n  padding-top: 88px;\n  ${media.desktop} {\n    grid-template-columns: 1fr;\n    grid-template-rows: repeat(2, 1fr);\n    grid-row-gap: 60px;\n  }\n  ${media.mobile} {\n    grid-row-gap: 64px;\n    padding-top: 64px;\n  }\n`;\n\nconst CTASection = styled.section`\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n  text-align: center;\n  border-top: 1px solid #e4e5e8;\n  padding-top: 120px;\n  padding-bottom: 68px;\n  margin-top: 120px;\n  ${media.mobile} {\n    padding-top: 60px;\n    margin-top: 60px;\n  }\n  & .subtitle {\n    margin-top: 24px;\n    margin-bottom: 40px;\n  }\n`;\n\nconst Tutorials = () => {\n  const { img1, img2, img3 } = useStaticQuery(graphql`\n    query AcademyPhotos {\n      img1: file(relativePath: { eq: \"tutorials/abtest.png\" }) {\n        childImageSharp {\n          fluid(quality: 90) {\n            ...GatsbyImageSharpFluid_withWebp\n          }\n        }\n      }\n      img2: file(relativePath: { eq: \"tutorials/formanalytics.png\" }) {\n        childImageSharp {\n          fluid(quality: 90) {\n            ...GatsbyImageSharpFluid_withWebp\n          }\n        }\n      }\n      img3: file(relativePath: { eq: \"tutorials/comingSoonBlue.png\" }) {\n        childImageSharp {\n          fluid(quality: 90) {\n            ...GatsbyImageSharpFluid_withWebp\n          }\n        }\n      }\n    }\n  `);\n  return (\n    <Layout\n      canonical=\"/tutorials/\"\n      metaTitle=\"Tutorials | Learn More with Us\"\n      metaDescription=\"Learn about A/B testing, conversion optimization, customer experience, and more. LiveSession Tutorials is free forever!\"\n    >\n      <div className=\"container\">\n        <Header>\n          <h1 className=\"line\">\n            LiveSession <span>Tutorials</span>\n          </h1>\n          <p className=\"subtitle\">\n            See how you can grow your business with LiveSession. Read our Tutorials and learn from\n            the experts!\n          </p>\n        </Header>\n        <StyledSection>\n          <Card\n            img={img1.childImageSharp.fluid}\n            title=\"Guide to A/B testing with LiveSession\"\n            content=\"A/B testing is no longer a niche optimization technique. Did you know that 77% of companies run A/B tests on their websites?\"\n            link=\"/tutorials/guide-to-ab-testing-with-livesession/\"\n            linkContent=\"Read the Tutorial\"\n          />\n          <Card\n            img={img2.childImageSharp.fluid}\n            title=\"Form Analytics\"\n            content=\"Online form analytics has been proven to successfully boost lead generation. How? LiveSession's tutorial will certainly help you out now!\"\n            link=\"/tutorials/form-analytics/\"\n            linkContent=\"Read the Tutorial\"\n          />\n          <Card\n            img={img3.childImageSharp.fluid}\n            title=\"Guide to Customer Support with LiveSession\"\n            content=\"In this guide, we’re going to show you how you can improve crucial customer support factors with LiveSession.\"\n            comingSoon\n          />\n          {/* <Card\n            comingSoon\n            img={img1.childImageSharp.fluid}\n            title=\"Guide to UX Design with LiveSession\"\n            content=\"Learn about user experience design and improve your UX with LiveSession.\"\n          /> */}\n        </StyledSection>\n        <CTASection>\n          <h2>Have a tutorial idea?</h2>\n          <p className=\"subtitle\">Let us know! We&apos;ll consider every suggestion.</p>\n          <Button href=\"mailto:hello@livesession.io?subject=Tutorial%20idea\">Send your idea</Button>\n        </CTASection>\n      </div>\n      <StartUsing />\n    </Layout>\n  );\n};\n\nexport default Tutorials;\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { useSourceParams } from 'hooks/useSourceParams';\nimport { navigate } from 'gatsby';\nimport * as Styled from './styled';\n\nconst StartUsingLS = ({ deleteMarginTop, setMarginTop }) => {\n  const { link } = useSourceParams('start-using');\n  const [email, setEmail] = useState('');\n\n  const handleSubmit = (e) => {\n    e.preventDefault();\n    navigate(`${link}&email=${email}`);\n  };\n  return (\n    <Styled.StartUsing\n      className=\"container\"\n      deleteMarginTop={deleteMarginTop}\n      style={{ setMarginTop }}\n    >\n      <h2>\n        Start using LiveSession for free <span>now.</span>\n      </h2>\n      <div className=\"start\">\n        <Styled.ExtendSignUpForm onSubmit={handleSubmit}>\n          <label htmlFor=\"email-form-start-using\" className=\"sign-up-free\">\n            <input\n              id=\"email-form-start-using\"\n              type=\"email\"\n              name=\"email\"\n              placeholder=\"Your business email\"\n              required\n              value={email}\n              onChange={(e) => setEmail(e.target.value)}\n              className=\"input-email\"\n            />\n          </label>\n          <Styled.CustomButton as=\"button\" type=\"submit\" secondary>\n            Sign up free\n          </Styled.CustomButton>\n        </Styled.ExtendSignUpForm>\n        <div className=\"checkmarks\">\n          <p>Free 14-day trial</p>\n          <p>\n            No credit card <span>required</span>\n          </p>\n          <p>Easy setup</p>\n        </div>\n      </div>\n    </Styled.StartUsing>\n  );\n};\n\nexport default StartUsingLS;\n\nStartUsingLS.propTypes = {\n  deleteMarginTop: PropTypes.bool,\n  // eslint-disable-next-line react/forbid-prop-types\n  setMarginTop: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),\n};\n\nStartUsingLS.defaultProps = {\n  deleteMarginTop: false,\n  setMarginTop: false,\n};\n"],"sourceRoot":""}