{"version":3,"sources":["webpack:///./src/img/clickmaps/clicks.svg","webpack:///./src/img/clickmaps/3.svg","webpack:///./src/img/clickmaps/error.svg","webpack:///./src/img/clickmaps/4.svg","webpack:///./src/img/clickmaps/hero.svg","webpack:///./src/components/clickmaps/section/styled.js","webpack:///./src/components/clickmaps/section/index.js","webpack:///./src/pages/clickmaps.js","webpack:///./src/img/clickmaps/rage.svg","webpack:///./src/img/clickmaps/1.svg","webpack:///./src/img/clickmaps/2.svg","webpack:///./src/components/ui/startUsing/index.js"],"names":["module","exports","Container","styled","div","props","reversed","media","desktop","tablet","Section","children","defaultProps","ExtendHeader","Header","ContentSection","section","CustomSection","Clickmaps","canonical","metaTitle","metaDescription","className","style","marginBottom","signUp","sourceID","as","src","hero","alt","title","href","withArrow","img1","clicks","error","rage","img2","img3","img4","StartUsingLS","deleteMarginTop","setMarginTop","link","useSourceParams","useState","email","setEmail","onSubmit","e","preventDefault","navigate","htmlFor","id","type","name","placeholder","required","value","onChange","target","secondary"],"mappings":"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","file":"component---src-pages-clickmaps-js-d2b01eb51297348d24d7.js","sourcesContent":["module.exports = \"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjQiIGhlaWdodD0iNjUiIHZpZXdCb3g9IjAgMCA2NCA2NSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMS41IiB5PSIyLjIyNzA1IiB3aWR0aD0iNjEiIGhlaWdodD0iNjEiIHJ4PSIzMC41IiBmaWxsPSJ3aGl0ZSIgc3Ryb2tlPSIjRTZFNkU2IiBzdHJva2Utd2lkdGg9IjMiLz4KPHBhdGggZD0iTTI4LjM5OTQgNDguNzEzNUwyMi45MjQ1IDQxLjQxNzhDMjIuNjU0MiA0MS4wNTcgMjIuNTAyMyA0MC42MjEzIDIyLjQ4OTggNDAuMTcwN0MyMi40Nzc0IDM5LjcyMDEgMjIuNjA0OSAzOS4yNzY3IDIyLjg1NDggMzguOTAxNVYzOC45MDE1QzIzLjAxOTQgMzguNjU1MSAyMy4yMzI1IDM4LjQ0NDkgMjMuNDgxMSAzOC4yODM2QzIzLjcyOTYgMzguMTIyMiAyNC4wMDg1IDM4LjAxMzIgMjQuMzAwNSAzNy45NjMyQzI0LjU5MjYgMzcuOTEzMiAyNC44OTE5IDM3LjkyMzIgMjUuMTggMzcuOTkyNkMyNS40NjggMzguMDYyIDI1LjczOSAzOC4xODk0IDI1Ljk3NjIgMzguMzY3TDI4LjM5MzcgNDAuMTgzOFYyNi4zMjczQzI4LjM5MzcgMjUuNzYxNyAyOC42MTg0IDI1LjIxOTMgMjkuMDE4NCAyNC44MTk0QzI5LjQxODQgMjQuNDE5NSAyOS45NjEgMjQuMTk0OCAzMC41MjY3IDI0LjE5NDhDMzEuMDkyNCAyNC4xOTQ4IDMxLjYzNSAyNC40MTk1IDMyLjAzNSAyNC44MTk0QzMyLjQzNSAyNS4yMTkzIDMyLjY1OTggMjUuNzYxNyAzMi42NTk4IDI2LjMyNzNWMzQuODU3TDM4LjU5NTQgMzYuMTc2MkMzOS42MDc4IDM2LjQwMTEgNDAuNTAzNiAzNi45ODcgNDEuMTE1MiAzNy44MjQzQzQxLjcyNjkgMzguNjYxNSA0Mi4wMTI1IDM5LjY5MjkgNDEuOTE4NyA0MC43MjU0TDQxLjE5MiA0OC43MTc4TDI4LjM5OTQgNDguNzEzNVoiIHN0cm9rZT0iIzBBNEVENiIgc3Ryb2tlLXdpZHRoPSIyLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8cGF0aCBkPSJNMzAuNTMxNiAxOS45MjU1VjE2LjcyNzEiIHN0cm9rZT0iIzBBNEVENiIgc3Ryb2tlLXdpZHRoPSIyLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8cGF0aCBkPSJNMzQuNzk4NSAyMC45OTI5TDM2LjkzMTUgMTguODU5OSIgc3Ryb2tlPSIjMEE0RUQ2IiBzdHJva2Utd2lkdGg9IjIuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CjxwYXRoIGQ9Ik0yNi4yNjU5IDIwLjk5MjlMMjQuMTMyOCAxOC44NTk5IiBzdHJva2U9IiMwQTRFRDYiIHN0cm9rZS13aWR0aD0iMi41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTM1Ljg2NTIgMjQuMTkwN0gzOS4wNjQ4IiBzdHJva2U9IiMwQTRFRDYiIHN0cm9rZS13aWR0aD0iMi41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTI1LjE5OTYgMjQuMTkwN0gyMiIgc3Ryb2tlPSIjMEE0RUQ2IiBzdHJva2Utd2lkdGg9IjIuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=\"","module.exports = __webpack_public_path__ + \"static/3-c756a79f4eeca7bcccf317b08901a053.svg\";","module.exports = \"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMS41IiB5PSIxLjUiIHdpZHRoPSI2MSIgaGVpZ2h0PSI2MSIgcng9IjMwLjUiIGZpbGw9IndoaXRlIiBzdHJva2U9IiNFNkU2RTYiIHN0cm9rZS13aWR0aD0iMyIvPgo8cGF0aCBkPSJNMzEuOTk5OSA0Ny45OTFDMjguODc0MiA0Ny45OTEgMjUuODc2NSA0Ni42Njk5IDIzLjY2NjMgNDQuMzE4M0MyMS40NTYxIDQxLjk2NjggMjAuMjE0NCAzOC43Nzc0IDIwLjIxNDQgMzUuNDUxN0MyMC4yMTQ0IDMyLjEyNjEgMjEuNDU2MSAyOC45MzY3IDIzLjY2NjMgMjYuNTg1MkMyNS44NzY1IDI0LjIzMzYgMjguODc0MiAyMi45MTI1IDMxLjk5OTkgMjIuOTEyNUMzNS4xMjU2IDIyLjkxMjUgMzguMTIzMyAyNC4yMzM2IDQwLjMzMzUgMjYuNTg1MkM0Mi41NDM4IDI4LjkzNjcgNDMuNzg1NCAzMi4xMjYxIDQzLjc4NTQgMzUuNDUxN0M0My43ODU0IDM4Ljc3NzQgNDIuNTQzOCA0MS45NjY4IDQwLjMzMzUgNDQuMzE4M0MzOC4xMjMzIDQ2LjY2OTkgMzUuMTI1NiA0Ny45OTEgMzEuOTk5OSA0Ny45OTFaTTMxLjk5OTkgNDcuOTkxTDMxLjk5OTggMjkuNzUyMU0yMS41MTE3IDI5Ljc1MjFINDIuNDg4NU0yMC45ODg1IDMwLjk3MjZDMTkuNzkzNyAzMC4xNzQ0IDE4LjQxMDggMjkuNzUyOCAxNyAyOS43NTY3TTE3IDQ1LjcxMTFDMTguMDYwMSA0NS43MTIxIDE5LjEwODMgNDUuNDczNCAyMC4wNzUyIDQ1LjAxMDlDMjEuMDQyIDQ0LjU0ODUgMjEuOTA1NSA0My44NzI3IDIyLjYwODUgNDMuMDI4NU0xNyAzNi41OTE3SDIwLjI2NDJNNDMuMDEwNyAzMC45NzI2QzQ0LjIwNTUgMzAuMTc0NCA0NS41ODg0IDI5Ljc1MjggNDYuOTk5MiAyOS43NTY3TTQ2Ljk5ODcgNDUuNzExMUM0NS45Mzg2IDQ1LjcxMjEgNDQuODkwNCA0NS40NzM0IDQzLjkyMzUgNDUuMDEwOUM0Mi45NTY3IDQ0LjU0ODUgNDIuMDkzMiA0My44NzI3IDQxLjM5MDIgNDMuMDI4NU00NyAzNi41OTE3SDQzLjczNThNMjMuMzcxIDE2QzIzLjM3MSAyMC40NjQgMjMuNjk2NyAyMi4xMjA3IDI3LjIwOTUgMjMuOTkxN000MC41MTM3IDE2QzQwLjUxMzcgMjAuNDY0IDQwLjE4OCAyMi4xMjA3IDM2LjY3NTIgMjMuOTkxNyIgc3Ryb2tlPSIjMEE0RUQ2IiBzdHJva2Utd2lkdGg9IjIuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=\"","module.exports = __webpack_public_path__ + \"static/4-72847ccb4abf08c48809ca0f59be9aac.svg\";","module.exports = __webpack_public_path__ + \"static/hero-ef9e923cfca5413bd960a00b3246d80a.svg\";","import styled from 'styled-components';\nimport { media } from 'theme/breakpoints';\n\nexport const Container = styled.div`\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  grid-template-rows: repeat(1, 1fr);\n  grid-column-gap: 80px;\n  grid-template-areas: ${(props) => (props.reversed ? \"'image content'\" : \"'content image'\")};\n  align-items: center;\n  padding: 120px 0;\n  ${media.desktop} {\n    grid-template-columns: 1fr;\n    grid-template-rows: repeat(2, auto);\n    grid-template-areas:\n      'image'\n      'content';\n    justify-content: center;\n    grid-row-gap: 40px;\n    text-align: center;\n    padding: 60px 0;\n    & img {\n      margin: 0 auto;\n    }\n  }\n  & div {\n    grid-area: content;\n    & h2 {\n      margin-bottom: 40px;\n      ${media.tablet} {\n        margin-bottom: 32px;\n      }\n    }\n    & p {\n      font-size: 18px;\n      line-height: 30px;\n    }\n    & a {\n      margin-top: 14px;\n    }\n  }\n  & img {\n    grid-area: image;\n  }\n`;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport * as Styled from './styled';\n\nconst Section = ({ children, reversed }) => {\n  return <Styled.Container reversed={reversed}>{children}</Styled.Container>;\n};\n\nexport default Section;\n\nSection.propTypes = {\n  children: PropTypes.node.isRequired,\n  reversed: PropTypes.bool,\n};\n\nSection.defaultProps = {\n  reversed: false,\n};\n","import React from 'react';\nimport styled from 'styled-components';\nimport Layout from 'layout';\nimport { Header } from 'pages/integrations';\nimport Button from 'components/ui/button';\nimport Link from 'components/ui/link';\nimport Section from 'components/clickmaps/section';\nimport StartUsing from 'components/ui/startUsing';\nimport img1 from 'img/clickmaps/1.svg';\nimport img2 from 'img/clickmaps/2.svg';\nimport img3 from 'img/clickmaps/3.svg';\nimport img4 from 'img/clickmaps/4.svg';\nimport hero from 'img/clickmaps/hero.svg';\nimport error from 'img/clickmaps/error.svg';\nimport rage from 'img/clickmaps/rage.svg';\nimport clicks from 'img/clickmaps/clicks.svg';\nimport { media } from 'theme/breakpoints';\n\nconst Container = styled.div`\n  padding: 7rem 15px;\n  ${media.tablet} {\n    padding: 5rem 15px;\n  }\n`;\n\nconst ExtendHeader = styled(Header)`\n  padding-top: 64px;\n  margin: 0;\n\n  & h2 {\n    font-weight: 800;\n    font-size: 36px;\n    line-height: 45px;\n    margin-top: 80px;\n    ${media.tablet} {\n      margin-top: 40px;\n      font-size: 32px;\n      line-height: 40px;\n    }\n  }\n  & p {\n    max-width: 85%;\n    margin: 40px auto 0;\n    ${media.tablet} {\n      margin: 32px auto 0;\n      font-size: 18px;\n      line-height: 30px;\n    }\n  }\n`;\n\nconst ContentSection = styled.section`\n  padding: 0;\n`;\n\nconst CustomSection = styled.div`\n  margin-top: 48px;\n  & div.section-box {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    ${media.desktop} {\n      max-width: 80%;\n      margin: 0 auto;\n      flex-direction: column;\n    }\n    &:not(:last-child) {\n      margin-bottom: 40px;\n    }\n    & img {\n      margin-right: 32px;\n      ${media.desktop} {\n        margin-right: 0;\n        margin: 0 auto 16px;\n        display: block;\n      }\n    }\n    & div {\n      & h5 {\n        margin-bottom: 16px;\n      }\n      & p {\n        margin: 0;\n      }\n    }\n  }\n`;\n\nconst Clickmaps = () => {\n  return (\n    <Layout\n      canonical=\"/clickmaps/\"\n      metaTitle=\"Click maps | Track Most Valuable Clicks\"\n      metaDescription=\"Identify your website’s most clickable elements with LiveSession Clickmaps. Use heat maps to spot the hottest sections.\"\n    >\n      <Container className=\"container\">\n        <Header>\n          <h1>Click maps by LiveSession</h1>\n          <p style={{ marginBottom: 40 }}>Find your website’s most clickable elements.</p>\n          <Button signUp sourceID=\"hero\">\n            Start using click maps\n          </Button>\n        </Header>\n        <ExtendHeader as=\"section\">\n          <img src={hero} alt=\"Clickmaps\" title=\"Clickmaps\" className=\"img-fluid\" />\n          <h2>Instant and retroactive click maps + heat maps</h2>\n          <p>\n            We generate click maps and heat maps on the fly, showing you the most engaging sections\n            of your website. Use filters and segments to see how certain groups of users interact\n            with it. Take advantage of the data you collected.\n          </p>\n        </ExtendHeader>\n        <ContentSection>\n          <Section>\n            <div>\n              <h2>See what draws your visitors’ attention</h2>\n              <p>\n                LiveSession Clickmaps give you an instant overview of your pages’ most clickable\n                elements. See how many times users interacted with any button, link, headline or\n                paragraph.\n              </p>\n              <p>\n                Leverage data aggregated from your website’s visits. Know what attracts your users\n                and understand their behavior better with LiveSession Clickmaps.\n              </p>\n              <Link href=\"/help/how-do-the-clickmaps-work/\" withArrow>\n                Read more\n              </Link>\n            </div>\n            <img\n              src={img1}\n              alt=\"Clickmaps - example - 1\"\n              title=\"Find most engagement places\"\n              className=\"img-fluid\"\n            />\n          </Section>\n          <Section reversed>\n            <div>\n              <h2>Improve conversion rate, get rid of obstacles</h2>\n              <p>\n                Click maps allow you to improve your conversion rate by showing you which elements\n                of your website are essential on your users’ path to purchase. They also point to\n                the dead-ends.\n              </p>\n              <p>With LiveSession Clickmaps, you can group your users’ interactions by:</p>\n              <CustomSection>\n                <div className=\"section-box\">\n                  <img src={clicks} alt=\"Clicks\" title=\"Clicks\" className=\"img-fluid\" />\n                  <div>\n                    <h5>Clicks</h5>\n                    <p>\n                      Consider clicks as your customer journey to purchase. See your website’s most\n                      clickable elements. Find the most engaging sections and work on improving the\n                      click rate even more.\n                    </p>\n                  </div>\n                </div>\n                <div className=\"section-box\">\n                  <img src={error} alt=\"Error Clicks\" title=\"Error Clicks\" className=\"img-fluid\" />\n                  <div>\n                    <h5>Error Clicks</h5>\n                    <p>\n                      Error clicks are caused by JavaScript errors and can lead to users’ annoyance,\n                      which may eventually lower your conversion rate. See where Error clicks happen\n                      and get rid of them.\n                    </p>\n                  </div>\n                </div>\n                <div className=\"section-box\">\n                  <img src={rage} alt=\"Rage Clicks\" title=\"Rage Clicks\" className=\"img-fluid\" />\n                  <div>\n                    <h5>Rage Clicks</h5>\n                    <p>\n                      Rage clicks are logged when your user gets frustrated and clicks on something\n                      repeatedly. Usually, it happens when some elements of your website are unclear\n                      or misleading. Spot Rage clicks and refine your website’s UX.\n                    </p>\n                  </div>\n                </div>\n              </CustomSection>\n            </div>\n            <img\n              src={img2}\n              alt=\"Clickmaps - example - 2\"\n              title=\"Track different bahaviors\"\n              className=\"img-fluid\"\n            />\n          </Section>\n          <Section>\n            <div>\n              <h2>Find the hottest sections on your website with heat maps</h2>\n              <p>\n                Turn on LiveSession Heatmaps and see the hottest sections of your website in a blink\n                of an eye. Place important content, such as calls to action or forms, in places that\n                engage your visitors the most. Get more signups or purchases, using insights on your\n                users’ behavio\n              </p>\n\n              <Link href=\"/help/how-do-the-clickmaps-work/\" withArrow>\n                Read more\n              </Link>\n            </div>\n            <img\n              src={img3}\n              alt=\"Clickmaps - example - 3\"\n              title=\"Spot important places eaiser with engagement Heatmaps\"\n              className=\"img-fluid\"\n            />\n          </Section>\n          <Section reversed>\n            <div>\n              <h2>Use filters to get more out of your data</h2>\n              <p>\n                The data we present in click maps can be filtered to match your goal better. Whether\n                you want to improve the checkout process or get more leads, use filters to dig\n                deeper and know how particular segments of your website’s visitors act. Add layers\n                to your analysis and find new ways to boost your sales. Get the most accurate view\n                by taking advantage of the result’s segmentation.\n              </p>\n            </div>\n            <img\n              src={img4}\n              alt=\"Clickmaps - example - 3\"\n              title=\"Get more accurate view with filters\"\n              className=\"img-fluid\"\n            />\n          </Section>\n        </ContentSection>\n      </Container>\n      <StartUsing />\n    </Layout>\n  );\n};\n\nexport default Clickmaps;\n","module.exports = \"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMS41IiB5PSIxLjUiIHdpZHRoPSI2MSIgaGVpZ2h0PSI2MSIgcng9IjMwLjUiIGZpbGw9IndoaXRlIiBzdHJva2U9IiNFNkU2RTYiIHN0cm9rZS13aWR0aD0iMyIvPgo8cGF0aCBkPSJNNDAuNjAxNCA0MC41MjYyQzM5LjgwNjkgMzguOTIzNSAzOC41ODA0IDM3LjU3NDUgMzcuMDYwMSAzNi42MzE0QzM1LjUzOTggMzUuNjg4MiAzMy43ODYxIDM1LjE4ODUgMzEuOTk2OSAzNS4xODg1QzMwLjIwNzcgMzUuMTg4NSAyOC40NTQgMzUuNjg4MiAyNi45MzM3IDM2LjYzMTRDMjUuNDEzNCAzNy41NzQ1IDI0LjE4NjkgMzguOTIzNSAyMy4zOTI1IDQwLjUyNjJNMjIuMzk5OCAyNi42NjM2TDI4Ljc5OTggMjkuODYyNk00MS42MDA0IDI2LjY2MzZMMzUuMjAwNCAyOS44NjI2TTE2IDMxLjk5NTRDMTYgMzYuMjM3NiAxNy42ODU3IDQwLjMwNjEgMjAuNjg2MyA0My4zMDU4QzIzLjY4NjkgNDYuMzA1NSAyNy43NTY1IDQ3Ljk5MDcgMzIgNDcuOTkwN0MzNi4yNDM1IDQ3Ljk5MDcgNDAuMzEzMSA0Ni4zMDU1IDQzLjMxMzcgNDMuMzA1OEM0Ni4zMTQzIDQwLjMwNjEgNDggMzYuMjM3NiA0OCAzMS45OTU0QzQ4IDI3Ljc1MzEgNDYuMzE0MyAyMy42ODQ2IDQzLjMxMzcgMjAuNjg0OUM0MC4zMTMxIDE3LjY4NTIgMzYuMjQzNSAxNiAzMiAxNkMyNy43NTY1IDE2IDIzLjY4NjkgMTcuNjg1MiAyMC42ODYzIDIwLjY4NDlDMTcuNjg1NyAyMy42ODQ2IDE2IDI3Ljc1MzEgMTYgMzEuOTk1NFoiIHN0cm9rZT0iIzBBNEVENiIgc3Ryb2tlLXdpZHRoPSIyLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K\"","module.exports = __webpack_public_path__ + \"static/1-fef460a33b8cc709c1d4ec1cba65e8a2.svg\";","module.exports = __webpack_public_path__ + \"static/2-e06a8cfdeca6e63110c12f34dfc709c9.svg\";","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":""}