{"version":3,"sources":["webpack:///./src/components/MainHeroTitle.js","webpack:///./src/components/StackedPhonesAnimation.js","webpack:///./src/components/styles/PagePadding.js","webpack:///./src/components/brands/HeroMarketplace.js","webpack:///./src/components/sections/BrandsShopsStatic.js","webpack:///./src/components/styles/OutlinedText.js","webpack:///./src/components/brands/ShopsLanding.js","webpack:///./node_modules/react-intersection-observer/react-intersection-observer.m.js","webpack:///./src/pages/brands/shops.js","webpack:///./src/components/LinesFromRight.js","webpack:///./src/components/styles/TextHighlight.js","webpack:///./src/components/HeroLanding.js"],"names":["Wrapper","styled","div","TitleWrapper","props","theme","titleWidth","mediaMedium","MainHeroTitle","children","label","link","cleanTitle","as","Title","Headline80","attrs","Container","staticWrapper","Display","active","delay","Threshold","inject","observer","store","ui","images","useStaticQuery","ref","inView","useInView","threshold","triggerOnce","activeAnimation","allFile","edges","map","item","key","fluid","node","childImageSharp","PagePadding","paddingBottom","Decoration","Text","p","Grid","gray4","Section","image","LinesFromRight","TextHighlight","background","Image","file","HeroMarketPlace","data","BrandsShopsStatic","section","blurImage","animationComponent","ShopsLanding","to","state","from","Link","bottomMargins","blurHeightLarge","topPadding","topLargePadding","bottom","bottomPadding","imageMarginTop","bottomSize","bottomSizeBottomMedia","OutlinedText","fill","component","Outline","span","color","textBlack1","white","size","stroke","inline","Element","styles","display","style","displayPropsMobile","displayProps","displayPropsMedia","_extends","Object","assign","target","i","arguments","length","source","prototype","hasOwnProperty","call","apply","this","ObserverMap","Map","RootIds","rootId","optionsToId","options","keys","sort","filter","undefined","root","has","set","toString","get","observe","element","callback","_createObserver","id","instance","thresholds","elements","IntersectionObserver","entries","forEach","entry","_elements$get","isIntersecting","some","intersectionRatio","trackVisibility","isVisible","Array","isArray","createObserver","callbacks","push","splice","indexOf","unobserve","disconnect","isPlainChildren","InView","_React$Component","subClass","superClass","_this","_unobserveCb","handleNode","skip","setState","initialInView","observeNode","handleChange","onChange","create","constructor","__proto__","_proto","componentDidUpdate","prevProps","rootMargin","componentWillUnmount","_this$props","render","_this$state","_this$props2","tag","excluded","sourceKeys","_objectWithoutPropertiesLoose","_temp","_ref","_React$useState","setRef","current","result","displayName","defaultProps","DeferSection","loadable","SelfServeShops","title","description","static","Line1","skew","linesSkew","brandColor2","Line2","Line3","strong","black1","brandColor3","ContainerRelative","mediaDesktop","wrapperOverflow","bottomPaddingMedia","imageWidth","imageMaxWidth","mediaTransform","hasMobileImage","animationPre","keyFrames","css","imageBottom","imageTranslate","imageSize","gatsbyWidth","DesktopImage","Bottom","marginTop","Space","bottomSizeMedia","SubTitle","Eyebrows20","ImageMedia","mediaImgWidth","mediaImgHeight","mediaImgMargins","mediaCss","Blur","blurheight","blurPosition","HomeLanding","imageMobile","noBottom","setActive","useState","handleLoad","onLoad","position"],"mappings":"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","file":"component---src-pages-brands-shops-js-9712a082f40368b06402.js","sourcesContent":["import React from \"react\";\nimport { Headline80 } from \"./styles/Headings\";\nimport PrimaryButton from \"./PrimaryButton\";\nimport styled from \"styled-components\";\nimport { mediaMedium } from \"./styles/variables\";\n\nconst Wrapper = styled.div`\n  position: relative;\n  z-index: 4;\n`;\n\nconst TitleWrapper = styled.div`\n  max-width: ${(props) => props.theme.titleWidth ?? \"570px\"};\n  margin-bottom: 22px;\n  text-transform: uppercase;\n\n  @media (${mediaMedium}) {\n    margin-bottom: 40px;\n  }\n`;\n\nconst MainHeroTitle = ({ children, label, link, cleanTitle, theme, as }) => {\n  const Title = cleanTitle ? \"div\" : Headline80;\n  return (\n    <Wrapper>\n      <TitleWrapper theme={theme}>\n        <Title as=\"h1\">{children}</Title>\n      </TitleWrapper>\n\n      {label && <PrimaryButton attrs={link}>{label}</PrimaryButton>}\n    </Wrapper>\n  );\n};\n\nexport default MainHeroTitle;\n","import React from \"react\";\nimport { graphql, useStaticQuery } from \"gatsby\";\nimport styled from \"styled-components\";\nimport Image from \"./Image\";\nimport { mediaMedium } from \"./styles/variables\";\nimport { useInView } from \"react-intersection-observer\";\nimport { inject, observer } from \"mobx-react\";\n\nconst Container = styled.div`\n  position: relative;\n  ${(props) => (props.staticWrapper ? \"height: 100%;\" : \"\")}\n`;\n\nconst Wrapper = styled.div`\n  width: 110%;\n  overflow: ${(props) => (props.staticWrapper ? \"visible\" : \"hidden\")};\n  height: calc(100vw + 200px);\n  left: 10%;\n  pointer-events: none;\n\n  @media (max-width: 320px) {\n    height: calc(100vw + 100px);\n  }\n\n  @media (${mediaMedium}) {\n    position: ${(props) => (props.staticWrapper ? \"absolute\" : \"absolute\")};\n    ${(props) => (props.staticWrapper ? \"\" : \"left: -10%;\")}\n    ${(props) => (props.staticWrapper ? \"\" : \"top: -2%;\")}\n    height: ${(\n      props\n    ) => (props.staticWrapper ? \"100%\" : \"100vw;\")};\n    ${(props) => (props.staticWrapper ? \"\" : \"max-height: calc(732px + 2%);\")}\n  }\n\n  @media (min-width: 1034px) {\n    ${(props) => (props.staticWrapper ? \"\" : \"top: -12%;\")}\n    ${(props) => (props.staticWrapper ? \"\" : \"max-height: calc(732px + 12%);\")}\n  }\n`;\n\nconst Display = styled.div`\n  width: 110%;\n  margin-top: -52%;\n  position: relative;\n  z-index: 5;\n  transition: cubic-bezier(0.46, 0.03, 0.52, 0.96) 0.7s;\n  transition-property: transform;\n  transform: translateY(${(props) => (props.active ? 0 : 30)}%);\n  transition-delay: ${(props) => (props.active ? `${props.delay}ms` : `1s`)};\n\n  @media (${mediaMedium}) {\n    margin-top: ${(props) => (props.staticWrapper ? \"-35%\" : \"-42%\")};\n    width: ${(props) => (props.staticWrapper ? \"100%\" : \"110%\")};\n  }\n\n  &:nth-child(1) {\n    margin-top: 0;\n  }\n\n  &:nth-child(2) {\n    z-index: 4;\n  }\n  &:nth-child(3) {\n    z-index: 3;\n  }\n  &:nth-child(4) {\n    z-index: 2;\n  }\n  &:nth-child(5) {\n    z-index: 1;\n  }\n`;\n\nconst Threshold = [0.2, 0.3, 0.4, 1];\nconst StackedPhonesAnimation = ({ staticWrapper, store: { ui } }) => {\n  const images = useStaticQuery(graphql`\n    query {\n      allFile(\n        filter: { name: { regex: \"/50-brands-commerce-[1-5]/\" } }\n        sort: { fields: name, order: ASC }\n      ) {\n        edges {\n          node {\n            childImageSharp {\n              fluid(quality: 80) {\n                ...GatsbyImageSharpFluid_withWebp\n                ...GatsbyImageSharpFluidLimitPresentationSize\n              }\n            }\n          }\n        }\n      }\n    }\n  `);\n\n  const { ref, inView } = useInView({\n    threshold: Threshold,\n    delay: 30,\n    triggerOnce: true\n  });\n\n  const activeAnimation = inView;\n\n  return (\n    <Container staticWrapper={staticWrapper}>\n      <Wrapper staticWrapper={staticWrapper} ref={ref}>\n        {images.allFile.edges.map((item, key) => {\n          if (staticWrapper && key > 3) {\n            return \"\";\n          }\n          return (\n            <Display\n              staticWrapper={staticWrapper}\n              key={\"phone-image-\" + key}\n              delay={key * 400}\n              active={activeAnimation}\n            >\n              <Image fluid={item.node.childImageSharp.fluid} />\n            </Display>\n          );\n        })}\n      </Wrapper>\n    </Container>\n  );\n};\n\nexport default inject([\"store\"])(observer(StackedPhonesAnimation));\n","import styled from \"styled-components\";\nimport { mediaMedium } from \"./variables\";\n\nconst PagePadding = styled.div`\n  padding-left: 20px;\n  padding-right: 20px;\n\n  @media (${mediaMedium}) {\n    padding-left: 8px;\n    padding-right: 8px;\n    padding-bottom: ${(props) => props.paddingBottom ?? 0};\n  }\n`;\n\nexport default PagePadding;\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport { gray4 } from \"../styles/Colors\";\nimport PagePadding from \"../styles/PagePadding\";\nimport TextHighlight from \"../styles/TextHighlight\";\nimport Image from \"../Image\";\nimport LinesFromRight from \"../LinesFromRight\";\nimport { graphql, useStaticQuery } from \"gatsby\";\nimport { mediaMedium } from \"../styles/variables\";\nimport { Headline80 } from \"../styles/Headings\";\nimport Container from \"../styles/Container\";\nimport { Body24 } from \"../styles/BodyTypes\";\n\nconst Display = styled.div`\n  text-align: center;\n  margin-top: -60px;\n\n  .gatsby-image-wrapper {\n    margin: 0 auto;\n  }\n\n  @media (${mediaMedium}) {\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    margin-top: -52px;\n\n    .gatsby-image-wrapper {\n      flex: 1 1 100%;\n      width: 100%;\n    }\n  }\n\n  @media (min-width: 1100px) {\n    .gatsby-image-wrapper {\n      width: calc(100% + 160px);\n      max-width: none !important;\n      max-height: none !important;\n      transform: translateX(80px);\n    }\n  }\n`;\n\nconst Decoration = styled.div`\n  display: none;\n  pointer-events: none;\n\n  @media (${mediaMedium}) {\n    display: block;\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    top: -50%;\n    left: -50%;\n    transform: translate(65%, 93%);\n    padding-bottom: 0;\n  }\n`;\n\nconst Text = styled.p`\n  &:first-of-type {\n    margin-top: 56px;\n  }\n\n  @media (${mediaMedium}) {\n    &:first-of-type {\n      margin-top: 48px;\n    }\n  }\n`;\n\nconst Grid = styled.div`\n  display: grid;\n  grid-template-columns: 100%;\n  grid-gap: 24px;\n  padding: 0;\n  position: relative;\n  justify-content: space-between;\n\n  p {\n    margin-bottom: 0;\n  }\n\n  @media (${mediaMedium}) {\n    grid-template-columns: 40% 50%;\n  }\n`;\n\nconst Wrapper = styled.div`\n  background-color: ${gray4};\n  position: relative;\n  overflow: hidden;\n  padding-bottom: 38px;\n\n  @media (${mediaMedium}) {\n    padding-bottom: 120px;\n  }\n`;\n\nconst Section = ({ image }) => {\n  return (\n    <Wrapper>\n      <Container>\n        <PagePadding>\n          <Headline80>go beyond the marketplace</Headline80>\n        </PagePadding>\n\n        <Grid>\n          <Decoration>\n            <LinesFromRight />\n          </Decoration>\n\n          <PagePadding>\n            <Body24 as=\"div\">\n              <Text>\n                We believe the little guy deserves the frontpage story just as\n                much as the household name.\n              </Text>\n\n              <p>\n                With Stack, not only do your products get featured across\n                hundreds of publisher-branded shops in just a few clicks, but\n                you’ll have the opportunity to be featured in articles,\n                newsletters, and social posts across the web{\" \"}\n                <TextHighlight theme={{ background: gray4 }}>\n                  at no cost to you.\n                </TextHighlight>\n              </p>\n            </Body24>\n          </PagePadding>\n\n          <Display>\n            <Image fluid={image.file.childImageSharp.fluid} />\n          </Display>\n        </Grid>\n      </Container>\n    </Wrapper>\n  );\n};\n\nconst HeroMarketPlace = () => {\n  const data = useStaticQuery(graphql`\n    query {\n      file(relativePath: { eq: \"62-marketplace-circle.png\" }) {\n        childImageSharp {\n          fluid(maxWidth: 564, maxHeight: 564, quality: 100) {\n            ...GatsbyImageSharpFluid_withWebp\n            ...GatsbyImageSharpFluidLimitPresentationSize\n          }\n        }\n      }\n    }\n  `);\n  return <Section image={data} />;\n};\n\nexport default HeroMarketPlace;\n","import React from \"react\";\nimport { Link } from \"gatsby\";\nimport HomeLanding from \"../HeroLanding\";\nimport { gray4 } from \"../styles/Colors\";\nimport OutlinedText from \"../styles/OutlinedText\";\nimport { Headline80 } from \"../styles/Headings\";\nimport HeroMarketPlace from \"../brands/HeroMarketplace\";\nimport ShopsLanding from \"../brands/ShopsLanding\";\n\nconst BrandsShopsStatic = () => {\n  return (\n    <>\n      <HomeLanding\n        section=\"SHOPS FOR BRANDS\"\n        blurImage={true}\n        animationComponent={<ShopsLanding />}\n        link={{\n          label: \"Get Started\",\n          attrs: { to: \"/contact/?smopt=brand\", state: { from: \"brand\" }, as: Link }\n        }}\n        bottomMargins={\"-80px\"}\n        theme={{\n          blurHeightLarge: 25,\n          titleWidth: \"100%\",\n          topPadding: \"200px\",\n          topLargePadding: \"200px\",\n          bottom: gray4,\n          bottomPadding: \"272px\",\n          imageMarginTop: 0,\n          bottomSize: \"172px\",\n          bottomSizeBottomMedia: \"118px\"\n        }}\n      >\n        <OutlinedText fill=\"transparent\" component={Headline80} as=\"span\">\n          Supercharge\n        </OutlinedText>\n        Your Sales\n      </HomeLanding>\n\n      <HeroMarketPlace />\n    </>\n  );\n};\n\nexport default BrandsShopsStatic;\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport { textBlack1, white } from \"./Colors\";\nimport { mediaMedium } from \"./variables\";\n\nconst Outline = styled.span`\n  color: ${(props) => props.color ?? textBlack1};\n  -webkit-text-fill-color: ${(props) => props.fill ?? white};\n  -webkit-text-stroke-width: ${(props) => props.size ?? \"1px\"};\n  -webkit-text-stroke-color: ${(props) =>\n    props.stroke ?? props.color ?? textBlack1};\n\n  @media (${mediaMedium}) {\n    -webkit-text-stroke-width: ${(props) => props.size ?? \"2px\"};\n  }\n`;\n\nconst OutlinedText = ({\n  color,\n  fill,\n  stroke,\n  size,\n  as,\n  component,\n  children,\n  inline\n}) => {\n  const Element = component ?? \"<span />\";\n  const styles = inline ? { display: \"inline\" } : {};\n\n  return (\n    <Element style={styles} as={as}>\n      <Outline color={color} fill={fill} stroke={stroke} size={size}>\n        {children}\n      </Outline>\n    </Element>\n  );\n};\n\nexport default OutlinedText;\n","import React from \"react\";\nimport StackedPhonesAnimation from \"../StackedPhonesAnimation\";\nimport styled from \"styled-components\";\nimport { mediaMedium } from \"../styles/variables\";\n\nconst Wrapper = styled.div`\n  width: 100%;\n  z-index: 1;\n  padding: 32px 0 0;\n  max-height: 80%;\n  ${(props)=>props.theme.displayPropsMobile && props.theme.displayPropsMobile}\n\n  @media (${mediaMedium}) {\n    width: 640px;\n    position: absolute;\n    left: 50%;\n    top: 80px;\n    height: 100vw;\n    max-height: calc(732px + 2%);\n    ${(props)=>props.theme.displayProps && props.theme.displayProps}\n  };\n\n  @media (min-width: 975px) {\n    left: 45%;\n    ${(props)=>props.theme.displayPropsMedia && props.theme.displayPropsMedia}\n  };\n\n  @media (min-width: 1034px) {\n    max-height: calc(732px + 12%);\n  };\n`;\n\nconst ShopsLanding = ({theme}) => {\n  return (\n    <Wrapper theme={theme}>\n      <StackedPhonesAnimation staticWrapper={true} />\n    </Wrapper>\n  );\n};\n\nexport default ShopsLanding;\n","import { createElement, Component, useRef, useState, useCallback, useEffect } from 'react';\n\nfunction _extends() {\n  _extends = Object.assign || function (target) {\n    for (var i = 1; i < arguments.length; i++) {\n      var source = arguments[i];\n\n      for (var key in source) {\n        if (Object.prototype.hasOwnProperty.call(source, key)) {\n          target[key] = source[key];\n        }\n      }\n    }\n\n    return target;\n  };\n\n  return _extends.apply(this, arguments);\n}\n\nfunction _inheritsLoose(subClass, superClass) {\n  subClass.prototype = Object.create(superClass.prototype);\n  subClass.prototype.constructor = subClass;\n  subClass.__proto__ = superClass;\n}\n\nfunction _objectWithoutPropertiesLoose(source, excluded) {\n  if (source == null) return {};\n  var target = {};\n  var sourceKeys = Object.keys(source);\n  var key, i;\n\n  for (i = 0; i < sourceKeys.length; i++) {\n    key = sourceKeys[i];\n    if (excluded.indexOf(key) >= 0) continue;\n    target[key] = source[key];\n  }\n\n  return target;\n}\n\nvar ObserverMap = new Map();\nvar RootIds = new Map();\nvar rootId = 0;\n/**\r\n * Generate a unique ID for the root element\r\n * @param root\r\n */\n\nfunction getRootId(root) {\n  if (!root) return '0';\n  if (RootIds.has(root)) return RootIds.get(root);\n  rootId += 1;\n  RootIds.set(root, rootId.toString());\n  return RootIds.get(root);\n}\n/**\r\n * Convert the options to a string Id, based on the values.\r\n * Ensures we can reuse the same observer when observing elements with the same options.\r\n * @param options\r\n */\n\n\nfunction optionsToId(options) {\n  return Object.keys(options).sort().filter(function (key) {\n    return options[key] !== undefined;\n  }).map(function (key) {\n    return key + \"_\" + (key === 'root' ? getRootId(options.root) : options[key]);\n  }).toString();\n}\n\nfunction createObserver(options) {\n  // Create a unique ID for this observer instance, based on the root, root margin and threshold.\n  var id = optionsToId(options);\n  var instance = ObserverMap.get(id);\n\n  if (!instance) {\n    // Create a map of elements this observer is going to observe. Each element has a list of callbacks that should be triggered, once it comes into view.\n    var elements = new Map();\n    var thresholds;\n    var observer = new IntersectionObserver(function (entries) {\n      entries.forEach(function (entry) {\n        var _elements$get; // While it would be nice if you could just look at isIntersecting to determine if the component is inside the viewport, browsers can't agree on how to use it.\n        // -Firefox ignores `threshold` when considering `isIntersecting`, so it will never be false again if `threshold` is > 0\n\n\n        var inView = entry.isIntersecting && thresholds.some(function (threshold) {\n          return entry.intersectionRatio >= threshold;\n        }); // @ts-ignore support IntersectionObserver v2\n\n        if (options.trackVisibility && typeof entry.isVisible === 'undefined') {\n          // The browser doesn't support Intersection Observer v2, falling back to v1 behavior.\n          // @ts-ignore\n          entry.isVisible = inView;\n        }\n\n        (_elements$get = elements.get(entry.target)) == null ? void 0 : _elements$get.forEach(function (callback) {\n          callback(inView, entry);\n        });\n      });\n    }, options); // Ensure we have a valid thresholds array. If not, use the threshold from the options\n\n    thresholds = observer.thresholds || (Array.isArray(options.threshold) ? options.threshold : [options.threshold || 0]);\n    instance = {\n      id: id,\n      observer: observer,\n      elements: elements\n    };\n    ObserverMap.set(id, instance);\n  }\n\n  return instance;\n}\n\nfunction observe(element, callback, options) {\n  if (options === void 0) {\n    options = {};\n  }\n\n  if (!element) return function () {}; // An observer with the same options can be reused, so lets use this fact\n\n  var _createObserver = createObserver(options),\n      id = _createObserver.id,\n      observer = _createObserver.observer,\n      elements = _createObserver.elements; // Register the callback listener for this element\n\n\n  var callbacks = elements.get(element) || [];\n\n  if (!elements.has(element)) {\n    elements.set(element, callbacks);\n  }\n\n  callbacks.push(callback);\n  observer.observe(element);\n  return function unobserve() {\n    // Remove the callback from the callback list\n    callbacks.splice(callbacks.indexOf(callback), 1);\n\n    if (callbacks.length === 0) {\n      // No more callback exists for element, so destroy it\n      elements[\"delete\"](element);\n      observer.unobserve(element);\n    }\n\n    if (elements.size === 0) {\n      // No more elements are being observer by this instance, so destroy it\n      observer.disconnect();\n      ObserverMap[\"delete\"](id);\n    }\n  };\n}\n\nfunction isPlainChildren(props) {\n  return typeof props.children !== 'function';\n}\n/**\r\n * Monitors scroll, and triggers the children function with updated props\r\n */\n\n\nvar InView = /*#__PURE__*/function (_React$Component) {\n  _inheritsLoose(InView, _React$Component);\n\n  function InView(props) {\n    var _this;\n\n    _this = _React$Component.call(this, props) || this;\n    _this.node = null;\n    _this._unobserveCb = null;\n\n    _this.handleNode = function (node) {\n      if (_this.node) {\n        // Clear the old observer, before we start observing a new element\n        _this.unobserve();\n\n        if (!node && !_this.props.triggerOnce && !_this.props.skip) {\n          // Reset the state if we get a new node, and we aren't ignoring updates\n          _this.setState({\n            inView: !!_this.props.initialInView,\n            entry: undefined\n          });\n        }\n      }\n\n      _this.node = node ? node : null;\n\n      _this.observeNode();\n    };\n\n    _this.handleChange = function (inView, entry) {\n      if (inView && _this.props.triggerOnce) {\n        // If `triggerOnce` is true, we should stop observing the element.\n        _this.unobserve();\n      }\n\n      if (!isPlainChildren(_this.props)) {\n        // Store the current State, so we can pass it to the children in the next render update\n        // There's no reason to update the state for plain children, since it's not used in the rendering.\n        _this.setState({\n          inView: inView,\n          entry: entry\n        });\n      }\n\n      if (_this.props.onChange) {\n        // If the user is actively listening for onChange, always trigger it\n        _this.props.onChange(inView, entry);\n      }\n    };\n\n    _this.state = {\n      inView: !!props.initialInView,\n      entry: undefined\n    };\n    return _this;\n  }\n\n  var _proto = InView.prototype;\n\n  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {\n    // If a IntersectionObserver option changed, reinit the observer\n    if (prevProps.rootMargin !== this.props.rootMargin || prevProps.root !== this.props.root || prevProps.threshold !== this.props.threshold || prevProps.skip !== this.props.skip || prevProps.trackVisibility !== this.props.trackVisibility || prevProps.delay !== this.props.delay) {\n      this.unobserve();\n      this.observeNode();\n    }\n  };\n\n  _proto.componentWillUnmount = function componentWillUnmount() {\n    this.unobserve();\n    this.node = null;\n  };\n\n  _proto.observeNode = function observeNode() {\n    if (!this.node || this.props.skip) return;\n    var _this$props = this.props,\n        threshold = _this$props.threshold,\n        root = _this$props.root,\n        rootMargin = _this$props.rootMargin,\n        trackVisibility = _this$props.trackVisibility,\n        delay = _this$props.delay;\n    this._unobserveCb = observe(this.node, this.handleChange, {\n      threshold: threshold,\n      root: root,\n      rootMargin: rootMargin,\n      // @ts-ignore\n      trackVisibility: trackVisibility,\n      // @ts-ignore\n      delay: delay\n    });\n  };\n\n  _proto.unobserve = function unobserve() {\n    if (this._unobserveCb) {\n      this._unobserveCb();\n\n      this._unobserveCb = null;\n    }\n  };\n\n  _proto.render = function render() {\n    if (!isPlainChildren(this.props)) {\n      var _this$state = this.state,\n          inView = _this$state.inView,\n          entry = _this$state.entry;\n      return this.props.children({\n        inView: inView,\n        entry: entry,\n        ref: this.handleNode\n      });\n    }\n\n    var _this$props2 = this.props,\n        children = _this$props2.children,\n        as = _this$props2.as,\n        tag = _this$props2.tag,\n        props = _objectWithoutPropertiesLoose(_this$props2, [\"children\", \"as\", \"tag\", \"triggerOnce\", \"threshold\", \"root\", \"rootMargin\", \"onChange\", \"skip\", \"trackVisibility\", \"delay\", \"initialInView\"]);\n\n    return /*#__PURE__*/createElement(as || tag || 'div', _extends({\n      ref: this.handleNode\n    }, props), children);\n  };\n\n  return InView;\n}(Component);\n\nInView.displayName = 'InView';\nInView.defaultProps = {\n  threshold: 0,\n  triggerOnce: false,\n  initialInView: false\n};\n\nfunction useInView(_temp) {\n  var _ref = _temp === void 0 ? {} : _temp,\n      threshold = _ref.threshold,\n      delay = _ref.delay,\n      trackVisibility = _ref.trackVisibility,\n      rootMargin = _ref.rootMargin,\n      root = _ref.root,\n      triggerOnce = _ref.triggerOnce,\n      skip = _ref.skip,\n      initialInView = _ref.initialInView;\n\n  var unobserve = useRef();\n\n  var _React$useState = useState({\n    inView: !!initialInView\n  }),\n      state = _React$useState[0],\n      setState = _React$useState[1];\n\n  var setRef = useCallback(function (node) {\n    if (unobserve.current !== undefined) {\n      unobserve.current();\n      unobserve.current = undefined;\n    } // Skip creating the observer\n\n\n    if (skip) return;\n\n    if (node) {\n      unobserve.current = observe(node, function (inView, entry) {\n        setState({\n          inView: inView,\n          entry: entry\n        });\n\n        if (entry.isIntersecting && triggerOnce && unobserve.current) {\n          // If it should only trigger once, unobserve the element after it's inView\n          unobserve.current();\n          unobserve.current = undefined;\n        }\n      }, {\n        root: root,\n        rootMargin: rootMargin,\n        threshold: threshold,\n        // @ts-ignore\n        trackVisibility: trackVisibility,\n        // @ts-ignore\n        delay: delay\n      });\n    }\n  }, // We break the rule here, because we aren't including the actual `threshold` variable\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  [// If the threshold is an array, convert it to a string so it won't change between renders.\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  Array.isArray(threshold) ? threshold.toString() : threshold, root, rootMargin, triggerOnce, skip, trackVisibility, delay]);\n  /* eslint-disable-next-line */\n\n  useEffect(function () {\n    if (!unobserve.current && state.entry && !triggerOnce && !skip) {\n      // If we don't have a ref, then reset the state (unless the hook is set to only `triggerOnce` or `skip`)\n      // This ensures we correctly reflect the current state - If you aren't observing anything, then nothing is inView\n      setState({\n        inView: !!initialInView\n      });\n    }\n  });\n  var result = [setRef, state.inView, state.entry]; // Support object destructuring, by adding the specific values.\n\n  result.ref = result[0];\n  result.inView = result[1];\n  result.entry = result[2];\n  return result;\n}\n\nexport default InView;\nexport { InView, useInView };","import React from \"react\";\nimport Layout from \"../../components/Layout\";\nimport Seo from \"../../components/Seo\";\nimport loadable from \"@loadable/component\";\nimport LazyLoadSection from \"../../components/LazyLoadSection\";\nimport StaticSection from \"../../components/sections/BrandsShopsStatic\";\n\nconst DeferSection = loadable(() =>\n  import(\"../../components/sections/BrandsShopsDefer\")\n);\n\nconst SelfServeShops = () => (\n  <Layout>\n    <Seo\n      title=\"Marketplace Platform for Merchants\"\n      description=\"Instantly get listed across thousands of publisher marketplaces to sell more faster. Target customers with our network of publishers.\"\n    />\n\n    <LazyLoadSection static={<StaticSection />}>\n      <DeferSection />\n    </LazyLoadSection>\n  </Layout>\n);\n\nexport default SelfServeShops;\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport { linesSkew, mediaMedium } from \"./styles/variables\";\nimport { brandColor2 } from \"./styles/Colors\";\n\nconst Wrapper = styled.div`\n  position: relative;\n  width: 100%;\n  padding-top: 100%;\n  pointer-events: none;\n`;\n\nconst Line1 = styled.span`\n  @media (${mediaMedium}) {\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    top: 0;\n    left: 35%;\n    transform: skewX(${(props) => props.skew ?? linesSkew});\n    border-top: 1px solid;\n    border-left: 1px solid;\n    border-color: ${(props) => props.color ?? brandColor2};\n  }\n`;\n\nconst Line2 = styled(Line1)`\n  @media (${mediaMedium}) {\n    top: 18px;\n    left: calc(35% - 32px);\n  }\n`;\n\nconst Line3 = styled(Line1)`\n  @media (${mediaMedium}) {\n    top: 36px;\n    left: calc(35% - 64px);\n  }\n`;\n\nconst LinesFromRight = ({ color, skew }) => {\n  return (\n    <Wrapper>\n      <Line1 skew={skew} color={color} />\n      <Line2 skew={skew} color={color} />\n      <Line3 skew={skew} color={color} />\n    </Wrapper>\n  );\n};\n\nexport default LinesFromRight;\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport { black1, brandColor3 } from \"./Colors\";\nimport { mediaMedium } from \"./variables\";\n\nconst Text = styled.strong`\n  font-weight: 800;\n  position: relative;\n  color: ${(props) => props.theme.color ?? black1};\n  box-shadow: inset 0 -0.325em ${(props) => props.theme.background ?? \"red\"},\n    inset 0 -0.525em ${brandColor3};\n  display: inline;\n\n  span {\n    position: relative;\n    z-index: 2;\n  }\n\n  @media (${mediaMedium}) {\n    &:before {\n      height: 8px;\n      bottom: 9px;\n    }\n  }\n`;\n\nconst TextHighlight = ({ theme, children }) => {\n  return (\n    <Text theme={theme}>\n      <span>{children}</span>\n    </Text>\n  );\n};\n\nexport default TextHighlight;\n","import React, { useState } from \"react\";\nimport styled, { css } from \"styled-components\";\nimport { black1, white } from \"./styles/Colors\";\nimport { mediaDesktop, mediaMedium } from \"./styles/variables\";\nimport MainHeroTitle from \"./MainHeroTitle\";\nimport Container from \"./styles/Container\";\nimport { Eyebrows20 } from \"./styles/Eyebrows\";\nimport Image from \"./Image\";\n\nconst ContainerRelative = styled(Container)`\n  position: relative;\n  padding-top: 43px;\n\n  @media (${mediaMedium}) {\n    padding-top: ${(props) => props.theme.topPadding ?? \"38px\"};\n    padding-bottom: ${(props) => props.theme.bottomPadding ?? \"240px\"};\n  }\n\n  @media (${mediaDesktop}) {\n    padding-top: ${(props) => props.theme.topLargePadding ?? \"38px\"};\n  }\n`;\n\nconst Wrapper = styled.div`\n  position: relative;\n  z-index: 1;\n  max-width: 100vw;\n  background-color: ${white};\n  overflow: ${(props) => props.theme.wrapperOverflow ?? \"hidden\"};\n  padding-bottom: ${(props) => props.theme.bottomPaddingMedia ?? \"0px\"};\n\n  @media (${mediaMedium}) {\n    padding-bottom: 0;\n  }\n`;\n\nconst Display = styled.div`\n  width: ${(props) => props.theme.imageWidth ?? \"100vw\"};\n  max-width: ${(props) => props.theme.imageMaxWidth ?? \"100vw\"};\n  transform: ${(props) => props.theme.mediaTransform ?? \"translateX(-20px)\"};\n  margin-top: ${(props) => props.theme.imageMarginTop ?? \"64px\"};\n  ${(props) => (props.hasMobileImage ? \"display: none;\" : \"\")};\n\n  .gatsby-image-wrapper {\n    opacity: ${(props) => (props.active ? 1 : 0)};\n    ${(props) => props.theme.animationPre ?? \"\"}\n    animation: ${(props) =>\n      props.theme.keyFrames && props.active\n        ? css`\n            ${props.theme.keyFrames}\n          `\n        : \"none\"}\n      0.9s ease both 0.5s;\n  }\n\n  @media (${mediaMedium}) {\n    ${(props) => (props.theme.styles ? props.theme.styles : \"\")};\n    ${(props) => (props.hasMobileImage ? \"display: block;\" : \"\")};\n    position: absolute;\n    right: 0;\n    border: 0;\n    bottom: ${(props) => props.theme.imageBottom ?? \"0\"};\n    transform: ${(props) =>\n      props.theme.imageTranslate ??\n      \"translate(calc(100% * 4 / 12), calc(100% * 2 / 12))\"};\n    z-index: 1;\n    width: ${(props) => props.theme.imageSize ?? \"calc(100% * 10 / 12)\"};\n\n    .gatsby-image-wrapper {\n      margin-right: 0;\n      margin-left: auto;\n\n      ${(props) =>\n        props.theme.gatsbyWidth\n          ? `max-width: ${props.theme.gatsbyWidth} !important; max-height: none !important`\n          : \"\"};\n    }\n  }\n`;\n\nconst DesktopImage = styled(Image)`\n  display: block;\n  width: 100%;\n`;\n\nconst Bottom = styled.div`\n  background-color: ${(props) => props.color};\n  margin-top: ${(props) => props.marginTop ?? \"0\"};\n  position: relative;\n  z-index: 1;\n\n  @media (min-width: 720px) {\n    margin-top: ${(props) => `calc(${props.marginTop}/1.5)` ?? \"0\"};\n  }\n\n  @media (${mediaMedium}) {\n    z-index: initial;\n    margin: 0;\n  }\n`;\n\nconst Space = styled.div`\n  padding-top: ${(props) => props.theme.bottomSizeMedia ?? \"0\"};\n  padding-bottom: ${(props) => props.theme.bottomSizeBottomMedia ?? \"93px\"};\n\n  @media (${mediaMedium}) {\n    display: block;\n    width: 100%;\n    padding-top: ${(props) => props.theme.bottomSize ?? \"104px\"};\n  }\n`;\n\nconst SubTitle = styled(Eyebrows20)`\n  margin: 0 0 28px;\n`;\n\nconst ImageMedia = styled(Image)`\n  pointer-events: none;\n  max-width: ${(props) => props.theme.mediaImgWidth ?? \"100%\"} !important;\n  max-height: ${(props) => props.theme.mediaImgHeight ?? \"100%\"} !important;\n  width: 100%;\n  margin: ${(props) => props.theme.mediaImgMargins ?? \"40px 0 0\"};\n  ${(props) => props.theme.mediaCss ?? \"\"};\n  z-index: 2;\n  transform: ${(props) => props.theme.mediaTransform ?? \"none\"};\n\n  opacity: ${(props) => (props.active ? 1 : 0)};\n  ${(props) => props.theme.animationPre ?? \"\"}\n  animation: ${(props) =>\n    props.theme.keyFrames && props.active\n      ? css`\n          ${props.theme.keyFrames}\n        `\n      : \"none\"}\n      0.9s ease both 0.5s;\n\n  @media (${mediaMedium}) {\n    max-width: 90% !important;\n    max-height: none !important;\n    display: none;\n  }\n`;\n\nconst Blur = styled.div`\n  z-index: 2;\n  width: 100%;\n  height: ${(props) => props.theme.blurheight ?? 30}px;\n  position: absolute;\n  bottom: ${(props) => props.theme.blurPosition ?? 0};\n  right: -25%;\n  background: linear-gradient(\n    0deg,\n    rgba(245, 245, 245, 0.95) 0%,\n    rgba(245, 245, 245, 0.9) 20%,\n    rgba(245, 245, 245, 0) 100%\n  );\n\n  @media (${mediaMedium}) {\n    height: ${(props) => props.theme.blurHeightLarge ?? 110}px;\n  }\n`;\n\nconst HomeLanding = ({\n  animationComponent,\n  link,\n  image,\n  imageMobile,\n  theme,\n  cleanTitle,\n  children,\n  section,\n  bottomMargins,\n  noBottom,\n  blurImage\n}) => {\n  const hasMobileImage = !!imageMobile;\n\n  const [active, setActive] = useState(false);\n\n  const handleLoad = () => {\n    setActive(true);\n  };\n\n  return (\n    <Wrapper theme={theme}>\n      <ContainerRelative theme={theme}>\n        {section && <SubTitle as=\"span\">{section}</SubTitle>}\n        <MainHeroTitle\n          cleanTitle={cleanTitle}\n          theme={theme}\n          link={link.attrs ?? null}\n          label={link.label}\n        >\n          {children}\n        </MainHeroTitle>\n        {!animationComponent && image && (\n          <Display\n            theme={theme}\n            active={active}\n            hasMobileImage={hasMobileImage}\n          >\n            <DesktopImage\n              onLoad={handleLoad}\n              theme={theme}\n              fluid={image.childImageSharp.fluid}\n            />\n          </Display>\n        )}\n\n        {animationComponent && animationComponent}\n      </ContainerRelative>\n\n      {!animationComponent && imageMobile && (\n        <ImageMedia\n          active={active}\n          onLoad={handleLoad}\n          theme={theme}\n          fluid={image.childImageSharp.fluid}\n        />\n      )}\n\n      {!noBottom && (\n        <Bottom\n          marginTop={bottomMargins}\n          color={theme && theme.bottom ? theme.bottom : black1}\n        >\n          <Container>\n            <Space theme={theme} />\n          </Container>\n        </Bottom>\n      )}\n      {blurImage && (\n        <Container style={{ position: \"relative\" }}>\n          <Blur theme={theme} />\n        </Container>\n      )}\n    </Wrapper>\n  );\n};\n\nexport default HomeLanding;\n"],"sourceRoot":""}