@folklore/ads 0.0.124 → 0.0.127

package/dist/cjs.js

@@ -1,1316 +0,0 @@
-'use strict';
-
-var PropTypes = require('prop-types');
-var classNames = require('classnames');
-var React = require('react');
-var isArray = require('lodash/isArray');
-var isObject = require('lodash/isObject');
-var sortBy = require('lodash/sortBy');
-var uniqBy = require('lodash/uniqBy');
-var debounce = require('lodash/debounce');
-var createDebug = require('debug');
-var EventEmitter = require('wolfy87-eventemitter');
-var jsxRuntime = require('react/jsx-runtime');
-var utils = require('@folklore/utils');
-var hooks = require('@folklore/hooks');
-var tracking = require('@folklore/tracking');
-
-const adPath = PropTypes.string;
-const adSize = PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.arrayOf(PropTypes.string), PropTypes.string, PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.arrayOf(PropTypes.string), PropTypes.string]))]);
-const adSizeMapping = PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), adSize])));
-const adViewports = PropTypes.objectOf(PropTypes.arrayOf(PropTypes.number));
-const adSlot = PropTypes.shape({
-  size: adSize,
-  sizeMapping: PropTypes.objectOf(adSize)
-});
-const adSlots = PropTypes.objectOf(adSlot);
-const adTargeting = PropTypes.shape({
-  domain: PropTypes.string
-});
-
-var propTypes = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    adPath: adPath,
-    adSize: adSize,
-    adSizeMapping: adSizeMapping,
-    adSlot: adSlot,
-    adSlots: adSlots,
-    adTargeting: adTargeting,
-    adViewports: adViewports
-});
-
-function normalizeAdSizes(size) {
-  if (size === null) {
-    return [];
-  }
-  if (isArray(size) && size.length > 0 && isArray(size[0])) {
-    return size;
-  }
-  return [size];
-}
-function getAdSizes(sizes) {
-  return uniqBy(sizes, size => isArray(size) ? size.join('x') : size);
-}
-function getMinimumAdSize(sizes) {
-  return getAdSizes(sizes).filter(size => size !== 'fluid').reduce((minimumSize, size) => ({
-    width: Math.min(minimumSize.width, size[0]),
-    height: Math.min(minimumSize.height, size[1])
-  }), {
-    width: Infinity,
-    height: Infinity
-  });
-}
-function sizeFitsInViewport(size, viewport) {
-  return size === 'fluid' && viewport[0] > 600 || size !== 'fluid' && (viewport[0] === 0 || size[0] <= viewport[0]) && (viewport[1] === 0 || size[1] <= viewport[1]);
-}
-function getSortedViewports(viewports) {
-  return sortBy(Object.keys(viewports).map(name => ({
-    name,
-    size: viewports[name]
-  })), [viewport => viewport.size[0]]).reverse();
-}
-function buildSizeMappingFromViewports(sizeMapping, viewports) {
-  return isObject(sizeMapping) && !isArray(sizeMapping) ? getSortedViewports(viewports).reduce((newSizeMapping, {
-    name,
-    size: viewPortSize
-  }) => typeof sizeMapping[name] !== 'undefined' ? [...newSizeMapping, [viewPortSize, sizeMapping[name]]] : newSizeMapping, []) : sizeMapping;
-}
-function buildSizeMappingFromSizes(sizes, viewports) {
-  return getSortedViewports(viewports).map(({
-    name,
-    size: viewPortSize
-  }) => [viewPortSize, sizes.filter(size => sizeFitsInViewport(size, name === 'default' ? [300, 300] : viewPortSize))]);
-}
-function getSizeMappingFromSlot({
-  size: allSizes = [],
-  sizeMapping = null
-}, viewports) {
-  if (sizeMapping === true) {
-    return buildSizeMappingFromSizes(allSizes, viewports);
-  }
-  return sizeMapping !== null ? buildSizeMappingFromViewports(sizeMapping, viewports) : null;
-}
-function getSizeFromSizeMapping(sizeMapping) {
-  if (sizeMapping === null) {
-    return null;
-  }
-  return getAdSizes(sizeMapping.reduce((allSizes, sizeMap) => [...allSizes, ...sizeMap[1]], [])).sort((a, b) => {
-    if (a === 'fluid') {
-      return 1;
-    }
-    if (b === 'fluid') {
-      return -1;
-    }
-    if (a[0] === b[0]) {
-      return a[1] > b[1] ? 1 : -1;
-    }
-    return a[0] > b[0] ? 1 : -1;
-  });
-}
-
-class AdSlot extends EventEmitter {
-  constructor(id, path, size, opts = {}) {
-    super();
-    this.options = {
-      sizeMapping: null,
-      targeting: {},
-      categoryExclusions: [],
-      visible: true,
-      ...opts
-    };
-    const {
-      visible
-    } = this.options;
-    this.elementId = id;
-    this.adPath = path;
-    this.adSize = size;
-    this.adSlot = null;
-    this.visible = visible;
-    this.wasVisible = visible;
-    this.rendered = false;
-    this.displayed = false;
-    this.viewable = false;
-    this.destroyed = false;
-    this.renderEvent = null;
-    this.refreshDisabled = false;
-  }
-  updateAdSlot() {
-    const {
-      adSlot
-    } = this;
-    const {
-      targeting = {},
-      categoryExclusions = [],
-      sizeMapping = null
-    } = this.options;
-
-    // Size mapping
-    if (sizeMapping !== null) {
-      adSlot.defineSizeMapping(sizeMapping);
-    }
-
-    // Targeting
-    const targetingKeys = targeting !== null ? Object.keys(targeting) : null;
-    if (targetingKeys !== null && targetingKeys.length > 0) {
-      targetingKeys.forEach(key => {
-        adSlot.setTargeting(key, targeting[key]);
-      });
-    } else {
-      adSlot.clearTargeting();
-    }
-
-    // Category exclusions
-    if (categoryExclusions !== null && categoryExclusions.length > 0) {
-      categoryExclusions.forEach(exclusion => {
-        adSlot.setCategoryExclusion(exclusion);
-      });
-    } else {
-      adSlot.clearCategoryExclusions();
-    }
-  }
-  setAdSlot(slot) {
-    this.adSlot = slot;
-    if (slot !== null) {
-      this.updateAdSlot();
-    }
-    return this;
-  }
-  setRenderEvent(event) {
-    this.renderEvent = event;
-    this.rendered = true;
-    this.emit('render', event, this);
-    return this;
-  }
-  setViewable(viewable) {
-    this.viewable = viewable;
-  }
-  setDisplayed(displayed) {
-    this.displayed = displayed;
-    return this;
-  }
-
-  // eslint-disable-next-line
-  setVisible(visible) {
-    this.visible = visible;
-    if (!this.wasVisible && visible) {
-      this.wasVisible = visible;
-    }
-    this.emit('visible', visible, this);
-    return this;
-  }
-  setRefreshDisabled() {
-    this.refreshDisabled = true;
-  }
-  setTargeting(targeting) {
-    if (this.adSlot !== null) {
-      this.adSlot.updateTargetingFromMap(targeting);
-    } else {
-      this.options.targeting = targeting;
-    }
-  }
-  destroy() {
-    if (this.destroyed) {
-      return;
-    }
-    this.emit('destroy', this);
-    this.removeAllListeners();
-    this.adSlot = null;
-    this.rendered = false;
-    this.displayed = false;
-    this.renderEvent = null;
-    this.destroyed = true;
-  }
-  getElementId() {
-    return this.elementId;
-  }
-  getAdSlot() {
-    return this.adSlot;
-  }
-  getAdPath() {
-    return this.adPath;
-  }
-  getAdSize() {
-    return this.adSize;
-  }
-  getTargeting() {
-    const {
-      targeting
-    } = this.options;
-    return targeting;
-  }
-  isVisible() {
-    return this.visible;
-  }
-  isDefined() {
-    return this.adSlot !== null;
-  }
-  isDisplayed() {
-    return this.displayed;
-  }
-  isViewable() {
-    return this.viewable;
-  }
-  isRendered() {
-    return this.rendered;
-  }
-  isRefreshDisabled() {
-    return this.refreshDisabled;
-  }
-  isDestroyed() {
-    return this.destroyed;
-  }
-  isEmpty() {
-    if (this.renderEvent === null) {
-      return false;
-    }
-    return this.renderEvent.isEmpty;
-  }
-  canBeDisplayed() {
-    return this.isDefined() && !this.isDisplayed();
-  }
-  getRenderedSize() {
-    if (this.renderEvent === null) {
-      return null;
-    }
-    const {
-      size = null
-    } = this.renderEvent;
-    return size !== null ? {
-      width: size[0],
-      height: size[1],
-      isFluid: size[0] === 0 && size[1] === 0
-    } : null;
-  }
-}
-
-/* globals refreshDisabledLineItems: [] */
-const debug$1 = createDebug('folklore:ads');
-class AdsManager extends EventEmitter {
-  // static index = 0;
-
-  // static createAdId() {
-  //     const newId = `div-gpt-ad-${new Date().getTime()}-${Math.round(
-  //         Math.random() * (Math.random() * 1000),
-  //     )}-${AdsManager.index}`;
-  //     AdsManager.index += 1;
-  //     return newId;
-  // }
-
-  static ID_PREFIX = 'div-gpt-ad-';
-  static getArticleTargeting(article) {
-    if (article === null) {
-      return null;
-    }
-    const {
-      id,
-      title,
-      slug,
-      metadata: {
-        categories = [],
-        authors = [],
-        sponsors = [],
-        safeForDistribution = true
-      }
-    } = article;
-    return {
-      title,
-      slug,
-      postID: id,
-      categories: categories.map(it => it.slug),
-      authors: authors.map(it => it.slug),
-      sponsors: sponsors.map(it => it.name),
-      GoogleSafeTargeting: safeForDistribution
-    };
-  }
-  static getSectionTargeting(section) {
-    return section !== null ? {
-      section: section.slug
-    } : null;
-  }
-  static getIndexTargeting(index) {
-    return index !== null ? {
-      index: index.slug
-    } : null;
-  }
-  static getIndexItemTargeting(index, item) {
-    return index !== null && item !== null ? {
-      [index.id]: [item.slug]
-    } : null;
-  }
-  constructor(opts = {}) {
-    super();
-    this.options = {
-      disabled: false,
-      disablePersonnalizedAds: false,
-      disableSingleRequest: false,
-      disableLazyLoad: false,
-      disableVideoAds: false,
-      autoInit: false,
-      ...opts
-    };
-    this.initGpt = this.initGpt.bind(this);
-    this.onSlotRenderEnded = this.onSlotRenderEnded.bind(this);
-    this.onSlotImpressionViewable = this.onSlotImpressionViewable.bind(this);
-    this.onSlotVisibleChange = this.onSlotVisibleChange.bind(this);
-    this.disabled = this.options.disabled;
-    this.personnalizedAdsDisabled = this.options.disablePersonnalizedAds;
-    this.ready = false;
-    this.enabled = false;
-    this.googletag = typeof window !== 'undefined' ? window.googletag : {
-      cmd: []
-    };
-    this.slots = [];
-    this.index = 0;
-    if (this.options.autoInit && !this.disabled) {
-      this.init();
-    }
-  }
-  createAdId() {
-    // const newId = `div-gpt-ad-${new Date().getTime()}-${Math.round(
-    //     Math.random() * (Math.random() * 1000),
-    // )}-${this.index}`;
-    const newId = `${AdsManager.ID_PREFIX}${this.index}`;
-    this.index += 1;
-    return newId;
-  }
-  init() {
-    const {
-      googletag
-    } = this;
-    googletag.cmd.push(() => {
-      if (this.disabled) {
-        return;
-      }
-      this.initGpt();
-    });
-  }
-  initGpt() {
-    const {
-      googletag
-    } = this;
-    if (this.disabled) {
-      return;
-    }
-    debug$1('Initializing GPT...');
-    const {
-      disabled,
-      personnalizedAdsDisabled
-    } = this;
-    const {
-      disableSingleRequest = false,
-      disableLazyLoad = false,
-      disableVideoAds = false,
-      mobileScaling = 1.0,
-      renderMarginPercent = 100,
-      fetchMarginPercent = 300
-    } = this.options;
-    if (disabled) {
-      debug$1('Disable initial load');
-      googletag.pubads().disableInitialLoad();
-    }
-    if (!disableSingleRequest) {
-      debug$1('Enable single request');
-      googletag.pubads().enableSingleRequest();
-    }
-    if (personnalizedAdsDisabled) {
-      debug$1('Disable personalized ads');
-      googletag.pubads().setRequestNonPersonalizedAds(1);
-    }
-    if (!disableLazyLoad) {
-      debug$1('Enable lazy loading %o', {
-        fetchMarginPercent,
-        renderMarginPercent,
-        mobileScaling
-      });
-      googletag.pubads().enableLazyLoad({
-        fetchMarginPercent,
-        renderMarginPercent,
-        mobileScaling
-      });
-    }
-    if (!disableVideoAds) {
-      debug$1('Enable video ads');
-      googletag.pubads().enableVideoAds();
-    }
-    googletag.pubads().addEventListener('slotRenderEnded', this.onSlotRenderEnded);
-    googletag.pubads().addEventListener('impressionViewable', this.onSlotImpressionViewable);
-    googletag.enableServices();
-    debug$1('GPT is ready');
-    this.enabled = true;
-    this.ready = true;
-    this.emit('ready');
-  }
-  onSlotRenderEnded(event) {
-    const {
-      slot: eventSlot,
-      lineItemId = null,
-      size = []
-    } = event;
-    const renderSlot = this.slots.find(slot => eventSlot === slot.getAdSlot()) || null;
-    if (renderSlot !== null) {
-      renderSlot.setRenderEvent(event);
-    }
-    const lineItems = typeof window !== 'undefined' ? window.refreshDisabledLineItems || [] : [];
-    if (isArray(lineItems) && lineItems.indexOf(lineItemId) > -1) {
-      renderSlot.setRefreshDisabled();
-    }
-    if (event.isEmpty) {
-      debug$1('Render ended for slot #%s(%s). Slot is empty.', eventSlot.getSlotElementId(), eventSlot.getAdUnitPath());
-    } else {
-      debug$1('Render ended for slot #%s(%s) with size %s.', eventSlot.getSlotElementId(), eventSlot.getAdUnitPath(), size !== null ? size.join('x') : '-');
-    }
-  }
-  onSlotImpressionViewable(event) {
-    const {
-      slot: eventSlot
-    } = event;
-    const impressionSlot = this.slots.find(slot => eventSlot === slot.getAdSlot()) || null;
-    if (impressionSlot !== null) {
-      impressionSlot.setViewable(true);
-    }
-    debug$1('Impression viewable for slot #%s(%s).', eventSlot.getSlotElementId(), eventSlot.getAdUnitPath());
-  }
-
-  // eslint-disable-next-line class-methods-use-this
-  onSlotVisibleChange(visible, slot) {
-    debug$1('Slot #%s(%s) visibility change to %s', slot.getElementId(), slot.getAdPath(), visible ? 'visible' : 'not visible');
-  }
-  isReady() {
-    return this.ready && this.enabled && !this.disabled;
-  }
-  isDisabled() {
-    return this.disabled;
-  }
-  setDisabled(disabled) {
-    // const shouldRefresh = this.disabled && !disabled;
-    this.disabled = disabled;
-    if (!this.enabled && !disabled) {
-      this.init();
-    }
-
-    // if (shouldRefresh) {
-    //     this.refreshAllSlots();
-    // }
-
-    // if (this.enabled && !disabled) {
-    //     this.emit('ready');
-    // }
-  }
-  disablePersonnalizedAds(disablePersonnalizedAds) {
-    const {
-      googletag
-    } = this;
-    this.personnalizedAdsDisabled = disablePersonnalizedAds;
-    googletag.cmd.push(() => {
-      googletag.pubads().setRequestNonPersonalizedAds(disablePersonnalizedAds ? 1 : 0);
-    });
-  }
-  createSlot(path, size, opts = {}) {
-    const {
-      id: providedId = null
-    } = opts;
-    const id = providedId || this.createAdId();
-    debug$1('Creating slot #%s(%s)...', id, path);
-    const slot = new AdSlot(id, path, size, {
-      ...opts
-    });
-    slot.on('visible', this.onSlotVisibleChange);
-    this.slots.push(slot);
-    return slot;
-  }
-  defineSlot(slot) {
-    const {
-      googletag
-    } = this;
-    googletag.cmd.push(() => {
-      if (slot.isDestroyed() || slot.isDefined()) {
-        return;
-      }
-      const id = slot.getElementId();
-      const path = slot.getAdPath();
-      const size = slot.getAdSize();
-      debug$1('Defining slot #%s(%s)...', id, path);
-      const adSlot = googletag.defineSlot(path, size, id).addService(googletag.pubads());
-      slot.setAdSlot(adSlot);
-    });
-  }
-  displaySlots() {
-    const slotsToDisplay = this.slots.filter(slot => slot.canBeDisplayed());
-    const slotsCount = slotsToDisplay.length;
-    if (slotsCount > 0) {
-      debug$1('Displaying %i slot(s)...', slotsCount);
-      slotsToDisplay.forEach(slot => this.callDisplaySlot(slot));
-    }
-    return true;
-  }
-  displaySlot(slot) {
-    this.callDisplaySlot(slot);
-  }
-
-  /* eslint-disable */
-  callDisplaySlot(slot) {
-    const {
-      googletag
-    } = this;
-    googletag.cmd.push(() => {
-      if (!slot.canBeDisplayed()) {
-        return;
-      }
-      const id = slot.getElementId();
-      const path = slot.getAdPath();
-      debug$1('Displaying slot #%s(%s)...', id, path);
-      googletag.display(id);
-      if (googletag.pubads().isInitialLoadDisabled()) {
-        googletag.pubads().refresh([id]);
-      }
-      slot.setDisplayed(true);
-    });
-  }
-  /* eslint-enable */
-
-  destroySlot(id) {
-    const {
-      googletag
-    } = this;
-    const slot = isObject(id) ? id : this.slots.find(it => it.getElementId() === id) || null;
-    if (slot === null || slot.isDestroyed()) {
-      return;
-    }
-    const adSlot = slot.getAdSlot();
-    slot.destroy();
-    this.slots = this.slots.filter(it => it !== slot);
-    if (adSlot !== null) {
-      debug$1('Destroying slot #%s(%s)...', adSlot.getAdUnitPath(), adSlot.getSlotElementId());
-      googletag.cmd.push(() => {
-        googletag.destroySlots([adSlot]);
-      });
-    }
-    this.emit('destroy:slot', slot);
-  }
-  refreshSlot(id) {
-    const {
-      googletag
-    } = this;
-    const slot = isObject(id) ? id : this.slots.find(it => it.getElementId() === id) || null;
-    if (slot === null || slot.isDestroyed() || slot.isRefreshDisabled()) {
-      return;
-    }
-    const adSlot = slot.getAdSlot();
-    if (adSlot !== null) {
-      debug$1('Refreshing slot #%s(%s)...', adSlot.getAdUnitPath(), slot.getElementId());
-      googletag.cmd.push(() => {
-        googletag.pubads().refresh([adSlot], {
-          changeCorrelator: false
-        });
-      });
-    }
-  }
-  refreshSlots(ids) {
-    const {
-      googletag
-    } = this;
-    const slots = ids.map(id => isObject(id) ? id : this.slots.find(it => !it.isDestroyed() && it.getElementId() === id) || null).filter(it => it !== null).map(it => it.getAdSlot());
-    if (slots.length === 0) {
-      return;
-    }
-    debug$1('Refreshing slots %o...', slots.map(slot => `#${slot.getElementId()}(${slot.getAdUnitPath()})`));
-    googletag.cmd.push(() => {
-      googletag.pubads().refresh(slots);
-    });
-  }
-  refreshAllSlots() {
-    const {
-      googletag
-    } = this;
-    debug$1('Refreshing all slots...');
-    googletag.cmd.push(() => {
-      googletag.pubads().refresh();
-    });
-  }
-}
-
-const viewports = {
-  default: [0, 0],
-  tablet: [728, 0],
-  desktop: [1024, 0],
-  laptop: [1400, 700]
-};
-const slots = {
-  top: {
-    sizeMapping: {
-      default: [[300, 100], [300, 150], [320, 50], [320, 100], [320, 180]],
-      tablet: [[300, 100], [300, 150], [320, 50], [320, 100], [320, 180], [728, 90]],
-      desktop: [[640, 350], [728, 90], [970, 90], [970, 250], [1024, 300]],
-      laptop: [[640, 350], [728, 90], [970, 90], [970, 250], [1024, 300], [1382, 300], [1382, 600]]
-    }
-  },
-  grid: {
-    size: [[250, 250], [300, 250]]
-  },
-  sidebar: {
-    sizeMapping: {
-      default: [[300, 250]],
-      laptop: [[120, 600], [160, 600], [300, 250], [300, 600]]
-    }
-  },
-  fullwidth: {
-    sizeMapping: {
-      default: [[250, 250], [300, 100], [300, 150], [300, 250], [320, 50], [320, 100], [320, 180], [336, 280]],
-      tablet: [[250, 250], [300, 100], [300, 150], [300, 250], [320, 50], [320, 100], [320, 180], [336, 280], [634, 634], [640, 350], [640, 360], [728, 90]],
-      desktop: [[634, 634], [640, 350], [640, 360], [728, 90], [960, 540], [970, 90], [970, 250], [970, 415], [1024, 300]],
-      laptop: [[634, 634], [640, 350], [640, 360], [728, 90], [960, 540], [970, 90], [970, 250], [970, 415], [1024, 300], [1382, 300], [1382, 600]]
-    }
-  },
-  content: {
-    sizeMapping: {
-      default: [[120, 600], [160, 600], [250, 250], [300, 100], [300, 150], [300, 250], [300, 600], [320, 50], [320, 100], [320, 180], [336, 280]],
-      tablet: [[120, 600], [160, 600], [250, 250], [300, 100], [300, 150], [300, 250],
-      // [300, 600],
-      [320, 50], [320, 100], [320, 180], [336, 280], [634, 634], [640, 350], [640, 360], [728, 90]],
-      desktop: [[120, 600], [160, 600],
-      // [300, 600],
-      [634, 634], [640, 350], [640, 360], [728, 90], [960, 540], [970, 90], [970, 250], [970, 415], [1024, 300]],
-      laptop: [[120, 600], [160, 600],
-      // [300, 600],
-      [634, 634], [640, 350], [640, 360], [728, 90], [960, 540], [970, 90], [970, 250], [970, 415], [1024, 300], [1382, 300], [1382, 600]]
-    }
-  }
-};
-
-/* eslint-disable react/jsx-props-no-spreading */
-const AdsContext = /*#__PURE__*/React.createContext({
-  ready: false
-});
-const useAdsContext = () => React.useContext(AdsContext);
-function AdsProvider({
-  children,
-  defaultSlotPath = null,
-  slotsPath = null,
-  disableSingleRequest = false,
-  disableVideoAds = false,
-  disableLazyLoad = false,
-  autoInit = true,
-  resizeDebounceDelay = 500,
-  refreshOnResize = false,
-  mobileScaling = 1.0,
-  renderMarginPercent = 100,
-  fetchMarginPercent = 300,
-  viewport = null,
-  viewports: viewports$1 = viewports,
-  slots: slots$1 = slots,
-  richAdComponents = null,
-  disabled = false,
-  disableTracking = false
-}) {
-  const [ready, setReady] = React.useState(false);
-  const adsRef = React.useRef(null);
-  const ads = React.useMemo(() => {
-    if (adsRef.current === null) {
-      adsRef.current = new AdsManager({
-        autoInit,
-        disabled,
-        disableSingleRequest,
-        disableVideoAds,
-        disableLazyLoad,
-        mobileScaling,
-        renderMarginPercent,
-        fetchMarginPercent
-      });
-    } else {
-      adsRef.current.setDisabled(disabled);
-    }
-    return adsRef.current;
-  }, [autoInit, disabled, disableSingleRequest, disableVideoAds, disableLazyLoad, mobileScaling, renderMarginPercent, fetchMarginPercent]);
-  React.useEffect(() => {
-    let onReady = null;
-    if (!ads.isReady()) {
-      onReady = () => setReady(true);
-      ads.on('ready', onReady);
-    } else {
-      setReady(true);
-    }
-    return () => {
-      if (onReady != null) {
-        ads.off('ready', onReady);
-      }
-    };
-  }, [ads, setReady]);
-  React.useEffect(() => {
-    if (!autoInit) {
-      ads.init();
-    }
-  }, [ads, autoInit]);
-  React.useEffect(() => {
-    const onResize = debounce(() => ads.refreshAllSlots(), resizeDebounceDelay);
-    if (refreshOnResize) {
-      window.addEventListener('resize', onResize);
-    }
-    return () => {
-      if (refreshOnResize) {
-        window.removeEventListener('resize', onResize);
-      }
-      onResize.cancel();
-    };
-  }, [ads, resizeDebounceDelay, refreshOnResize]);
-  const slotsWithSizeMapping = React.useMemo(() => Object.keys(slots$1 || {}).reduce((map, key) => {
-    const slot = slots$1[key];
-    const {
-      size
-    } = slot;
-    const sizeMapping = getSizeMappingFromSlot(slot, viewports$1);
-    return {
-      ...map,
-      [key]: {
-        ...slot,
-        size: size || getSizeFromSizeMapping(sizeMapping || null),
-        sizeMapping
-      }
-    };
-  }, {}), [slots$1, viewports$1]);
-  const finalSlotsPath = React.useMemo(() => {
-    if (defaultSlotPath !== null && slotsPath) {
-      return {
-        default: defaultSlotPath,
-        ...slotsPath
-      };
-    }
-    return slotsPath ? {
-      ...slotsPath
-    } : {};
-  }, [defaultSlotPath, slotsPath]);
-  const value = React.useMemo(() => ({
-    ready,
-    ads,
-    viewports: viewports$1,
-    viewport,
-    slots: slotsWithSizeMapping,
-    slotsPath: finalSlotsPath,
-    trackingDisabled: disableTracking,
-    richAdComponents
-  }), [ready, ads, viewports$1, viewport, slotsWithSizeMapping, finalSlotsPath, disableTracking, richAdComponents]);
-  return /*#__PURE__*/jsxRuntime.jsx(AdsContext.Provider, {
-    value: value,
-    children: children
-  });
-}
-
-const defaultTargeting = {
-  domain: typeof window !== 'undefined' ? `${window.location.protocol}//${window.location.host}` : null
-};
-const AdsTargetingContext = /*#__PURE__*/React.createContext(defaultTargeting);
-const useAdsTargeting = () => React.useContext(AdsTargetingContext);
-function AdsTargetingProvider({
-  children,
-  targeting = defaultTargeting,
-  replace = false
-}) {
-  const previousTargeting = useAdsTargeting();
-  const mergedTargeting = React.useMemo(() => replace ? targeting : {
-    ...previousTargeting,
-    ...targeting
-  }, [replace, previousTargeting, targeting]);
-  return /*#__PURE__*/jsxRuntime.jsx(AdsTargetingContext.Provider, {
-    value: mergedTargeting,
-    children: children
-  });
-}
-
-/* eslint-disable react/jsx-props-no-spreading */
-function RichAd({
-  richAd,
-  ...props
-}) {
-  const {
-    type = null,
-    ...richAdProps
-  } = richAd;
-  const {
-    richAdComponents = null
-  } = useAdsContext();
-  const RichAdComponent = utils.getComponentFromName(richAdComponents, type);
-  return RichAdComponent !== null ? /*#__PURE__*/jsxRuntime.jsx(RichAdComponent, {
-    ...props,
-    ...richAdProps
-  }) : null;
-}
-
-function useAdsTracking() {
-  const tracking$1 = tracking.useTracking() || null;
-  const trackEvent = React.useCallback((action, slot = null, renderEvent = null) => {
-    if (tracking$1 !== null && typeof tracking$1.trackAd !== 'undefined') {
-      tracking$1.trackAd(action, slot, renderEvent);
-    }
-  }, [tracking$1]);
-  return trackEvent;
-}
-
-function useAd(path, size, {
-  id,
-  sizeMapping = null,
-  viewport = null,
-  targeting = null,
-  categoryExclusions = null,
-  refreshInterval = null,
-  alwaysRender = false,
-  onRender = null,
-  onDestroy = null,
-  disabled = false,
-  disableTracking = false,
-  rootMargin = '300px'
-} = {}) {
-  const {
-    ads: adsManager,
-    viewports,
-    ready: adsReady,
-    trackingDisabled: globalTrackingDisabled = false
-  } = useAdsContext();
-  const trackAd = useAdsTracking();
-  const track = React.useCallback((action, slot = null, renderEvent = null) => {
-    if (!disableTracking && !globalTrackingDisabled) {
-      trackAd(action, slot, renderEvent);
-    }
-  }, [disableTracking, globalTrackingDisabled, trackAd]);
-
-  // Check for visibility
-  const {
-    ref: refObserver,
-    entry: {
-      isIntersecting = false
-    }
-  } = hooks.useIntersectionObserver({
-    rootMargin,
-    disabled
-  });
-
-  // Window blur
-  const [windowActive, setWindowActive] = React.useState(true); // eslint-disable-line
-  const onWindowBlur = React.useCallback(() => setWindowActive(false), [setWindowActive]);
-  const onWindowFocus = React.useCallback(() => setWindowActive(true), [setWindowActive]);
-  hooks.useWindowEvent('blur', onWindowBlur);
-  hooks.useWindowEvent('focus', onWindowFocus);
-  const isVisible = isIntersecting; /* && windowActive */
-
-  // Current render event
-  const [renderEvent, setRenderEvent] = React.useState(null);
-
-  // Create slot
-  const slotRef = React.useRef(null);
-  // const { current: slot } = slotRef;
-  // const [slot, setSlot] = useState(null);
-  const slot = React.useMemo(() => {
-    const {
-      current: currentSlot = null
-    } = slotRef;
-    if (currentSlot !== null) {
-      adsManager.destroySlot(currentSlot);
-    }
-    const viewportSize = viewport !== null ? viewports[viewport] || null : null;
-    const [, viewportFixedSize = null] = sizeMapping !== null && viewportSize !== null ? sizeMapping.find(([itViewport]) => itViewport.join('x') === viewportSize.join('x')) || [] : [];
-    const newSlot = path !== null && !disabled ? adsManager.createSlot(path, viewportFixedSize || size, {
-      id,
-      visible: isVisible,
-      sizeMapping: viewportFixedSize === null ? sizeMapping : null,
-      targeting,
-      categoryExclusions
-    }) : null;
-    slotRef.current = newSlot;
-    return newSlot;
-    // // setSlot(newSlot);
-    // // if (currentSlot.current !== null && adsReady) {
-    // //     adsManager.defineSlot(currentSlot.current);
-    // // }
-    // // return currentSlot.current;
-    // return () => {
-    //     slotRef.current = null;
-    //     if (newSlot !== null) {
-    //         adsManager.destroySlot(newSlot);
-    //     }
-    // };
-  }, [adsManager, path, disabled, size, sizeMapping, viewport, categoryExclusions, id]);
-  React.useEffect(() => {
-    if (slot !== null) {
-      slot.setTargeting(targeting);
-    }
-  }, [slot, targeting]);
-
-  // Set visibility
-  React.useEffect(() => {
-    if (slot !== null) {
-      slot.setVisible(isVisible);
-    }
-  }, [slot, isVisible]);
-
-  // Render ad when visible
-  React.useEffect(() => {
-    const slotReady = slot !== null && !slot.isDefined();
-    if (adsReady && slotReady) {
-      adsManager.defineSlot(slot);
-    }
-  }, [adsManager, adsReady, slot]);
-  React.useEffect(() => {
-    const slotReady = slot !== null && !slot.isDisplayed();
-    if (adsReady && slotReady && (alwaysRender || isVisible)) {
-      adsManager.displaySlot(slot);
-      track('Init', slot);
-    }
-  }, [adsManager, adsReady, slot, alwaysRender, isVisible, track]);
-
-  // Refresh ads slot
-  React.useEffect(() => {
-    let interval = null;
-    const slotReady = slot !== null && slot.isDefined();
-    if (adsReady && slotReady && isVisible && refreshInterval !== null) {
-      interval = setInterval(() => {
-        adsManager.refreshSlot(slot);
-        track('Refresh', slot);
-      }, refreshInterval);
-    }
-    return () => {
-      if (interval !== null) {
-        clearInterval(interval);
-      }
-    };
-  }, [adsManager, adsReady, slot, isVisible, refreshInterval, track]);
-
-  // Listen to render event
-  React.useEffect(() => {
-    if (slot === null) {
-      if (renderEvent !== null) {
-        setRenderEvent(null);
-      }
-      return () => {};
-    }
-    const onSlotRender = event => {
-      const newRenderEvent = {
-        ...event,
-        ...(slot !== null ? slot.getRenderedSize() : null),
-        slot
-      };
-      setRenderEvent(newRenderEvent);
-      if (onRender !== null) {
-        onRender(newRenderEvent);
-      }
-      const {
-        isEmpty = true
-      } = newRenderEvent || {};
-      if (isEmpty) {
-        track('Empty', slot);
-      } else {
-        track('Render', slot, newRenderEvent);
-      }
-    };
-    slot.on('render', onSlotRender);
-    return () => slot.off('render', onSlotRender);
-  }, [slot, disabled, setRenderEvent, onRender, track]);
-
-  // Listen to destroy event
-  React.useEffect(() => {
-    if (slot === null) {
-      return () => {};
-    }
-    const onSlotDestroy = destroySlot => {
-      if (onDestroy !== null) {
-        onDestroy(destroySlot);
-      }
-    };
-    slot.on('destroy', onSlotDestroy);
-    return () => slot.off('destroy', onSlotDestroy);
-  }, [slot, onDestroy]);
-
-  // Destroy slot
-  // useEffect(
-  //     () => () => {
-  //         if (slot !== null) {
-  //             // currentSlot.current = null;
-  //             adsManager.destroySlot(slot);
-  //         }
-  //     },
-  //     [],
-  // );
-
-  return {
-    refObserver,
-    slot,
-    disabled: adsManager.isDisabled(),
-    id: slot !== null ? slot.getElementId() : null,
-    isRendered: slot !== null && slot.isRendered(),
-    isEmpty: slot !== null ? slot.isEmpty() : true,
-    isVisible: slot !== null ? slot.isVisible() : true,
-    width: null,
-    height: null,
-    renderEvent,
-    ...(slot !== null ? slot.getRenderedSize() : null)
-  };
-}
-
-const debug = createDebug('folklore:ads');
-function parseRichAd(data) {
-  let richAd = null;
-  try {
-    const eventData = JSON.parse(data) || null;
-    richAd = eventData !== null ? eventData.richAd || null : null;
-  } catch (e) {}
-  return richAd;
-}
-function useRichAd(containerRef, id, opts = {}) {
-  const [richAd, setRichAd] = React.useState(null);
-  const {
-    onRichAd = null
-  } = opts || {};
-  React.useEffect(() => {
-    if (id === null) {
-      return () => {};
-    }
-    setRichAd(null);
-    function onMessage(event) {
-      if (event.origin.match(/safeframe\.googlesyndication\.com/) === null) {
-        return;
-      }
-      const container = containerRef.current || null;
-      const iframe = container !== null ? container.querySelector('iframe') || null : null;
-      if (iframe === null || iframe.contentWindow !== event.source) {
-        return;
-      }
-      const newRichAd = parseRichAd(event.data);
-      if (newRichAd === null) {
-        return;
-      }
-      debug('Received rich ad for %s %O', id, newRichAd);
-      setRichAd(newRichAd);
-      if (onRichAd !== null) {
-        onRichAd(newRichAd);
-      }
-    }
-    window.addEventListener('message', onMessage);
-    return () => {
-      window.removeEventListener('message', onMessage);
-    };
-  }, [id, onRichAd]);
-  return richAd;
-}
-
-/* eslint-disable react/require-default-props */
-function Ad({
-  slot: slotName,
-  path: providedPath = null,
-  size: providedSize = null,
-  sizeMapping: providedSizeMapping = null,
-  viewport: providedViewport = null,
-  targeting: providedTargeting = null,
-  refreshInterval: providedRefreshInterval = null,
-  alwaysRender = true,
-  disabled: providedDisabled = false,
-  disableTracking = false,
-  shouldKeepSize = false,
-  withoutStyle = false,
-  withoutMinimumSize = false,
-  withReactId = false,
-  className = null,
-  emptyClassName = null,
-  adClassName = null,
-  richAdClassName = null,
-  richAdIframeClassName = null,
-  onRender = null,
-  onDestroy = null,
-  onRichAd = null,
-  slotRef = null
-}) {
-  const {
-    slots = null,
-    slotsPath = null,
-    viewport: contextViewport = null,
-    ads
-  } = useAdsContext();
-  const {
-    default: defaultSlotPath = null
-  } = slotsPath || {};
-  const slot = slotName && slots !== null ? slots[slotName] || null : null;
-  const {
-    sizeMapping: slotSizeMapping = null,
-    size: slotSize = null,
-    path: slotPath = null
-  } = slot || {};
-  const path = providedPath || slotPath || (slotName !== null && slotsPath !== null ? slotsPath[slotName] : null) || defaultSlotPath || null;
-
-  // Size
-  const size = providedSize || slotSize;
-  const sizeMapping = providedSizeMapping || slotSizeMapping;
-  const minimumSize = React.useMemo(() => getMinimumAdSize([...(getSizeFromSizeMapping(sizeMapping) || []), ...normalizeAdSizes(size)]), [sizeMapping, size]);
-
-  // Targeting
-  const contextTargeting = useAdsTargeting();
-  const {
-    targeting,
-    refreshInterval,
-    disabled,
-    viewport
-  } = React.useMemo(() => {
-    const allTargeting = {
-      ...(slotName !== null ? {
-        slot: slotName
-      } : null),
-      ...contextTargeting,
-      ...providedTargeting
-    };
-    const {
-      refreshAds = null,
-      disabled: targetingDisabled = false,
-      viewport: targetingViewport = null,
-      ...otherProps
-    } = allTargeting || {};
-    return {
-      refreshInterval: refreshAds !== null && refreshAds === 'inactive' ? null : providedRefreshInterval,
-      disabled: providedDisabled || targetingDisabled || ads.isDisabled(),
-      viewport: providedViewport || contextViewport || targetingViewport,
-      targeting: otherProps || {}
-    };
-  }, [slotName, contextTargeting, providedTargeting, ads, providedRefreshInterval, providedDisabled, providedViewport, contextViewport]);
-  const [lastRenderedSize, setLastRenderedSize] = React.useState(null);
-  const onAdRender = React.useCallback(event => {
-    const {
-      isEmpty: newIsEmpty = true,
-      width: newWidth,
-      height: newHeight
-    } = event || {};
-    const isRendered = !newIsEmpty;
-    setLastRenderedSize(isRendered ? {
-      width: newWidth,
-      height: newHeight
-    } : null);
-    if (onRender !== null) {
-      onRender(event);
-    }
-  }, [onRender, shouldKeepSize, disabled]);
-
-  // useEffect(() => {
-  //     if (!disabled) {
-  //         return;
-  //     }
-  //     const keepSize = shouldKeepSize && lastRenderedSize.current !== null;
-  //     if (onRender !== null) {
-  //         onRender({
-  //             isEmpty: true,
-  //             keepSize,
-  //         });
-  //     }
-  // }, [disabled]);
-
-  const reactId = React.useId();
-
-  // Create ad
-  const {
-    id,
-    width,
-    height,
-    isFluid = false,
-    isEmpty,
-    isRendered,
-    refObserver,
-    slot: slotObject = null
-  } = useAd(path, size, {
-    id: withReactId ? `ad-${reactId}` : null,
-    viewport,
-    sizeMapping,
-    targeting,
-    refreshInterval,
-    alwaysRender,
-    onRender: onAdRender,
-    onDestroy,
-    disabled,
-    disableTracking
-  });
-  const adContainerRef = React.useRef(null);
-  const richAd = useRichAd(adContainerRef, id, {
-    onRichAd
-  });
-  if (slotRef !== null && typeof slotRef === 'function') {
-    slotRef(slotObject);
-  } else if (slotRef !== null && typeof slotRef === 'object') {
-    // eslint-disable-next-line no-param-reassign
-    slotRef.current = slotObject;
-  }
-  const keepSize = shouldKeepSize && lastRenderedSize !== null && !isRendered;
-  if (id === null && !keepSize) {
-    return null;
-  }
-  let adStyle = null;
-  if (isRendered) {
-    adStyle = !isFluid ? {
-      width,
-      height
-    } : null;
-  } else if (keepSize) {
-    adStyle = lastRenderedSize;
-  } else if (!withoutMinimumSize) {
-    adStyle = minimumSize;
-  }
-  let containerStyle = null;
-  if (disabled && !keepSize) {
-    containerStyle = {
-      display: 'none',
-      visibility: 'hidden'
-    };
-  } else if (isEmpty && !keepSize) {
-    containerStyle = {
-      height: 0,
-      paddingBottom: 0,
-      overflow: 'hidden',
-      opacity: 0
-    };
-  }
-  return /*#__PURE__*/jsxRuntime.jsx("div", {
-    id: id !== null ? `${id}-container` : null,
-    className: classNames([className, {
-      [emptyClassName]: emptyClassName !== null && isEmpty && !keepSize
-    }]),
-    style: !withoutStyle ? containerStyle : null,
-    suppressHydrationWarning: true,
-    ref: refObserver,
-    children: /*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: adClassName,
-      style: {
-        position: 'relative',
-        ...adStyle
-      },
-      ref: adContainerRef,
-      suppressHydrationWarning: true,
-      children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-        id: id,
-        className: classNames([{
-          [richAdIframeClassName]: richAdIframeClassName !== null && isRendered && richAd !== null
-        }]),
-        suppressHydrationWarning: true
-      }), isRendered && richAd !== null ? /*#__PURE__*/jsxRuntime.jsx(RichAd, {
-        richAd: richAd,
-        isFluid: isFluid,
-        width: width,
-        height: height,
-        className: richAdClassName
-      }) : null]
-    })
-  });
-}
-
-exports.Ad = Ad;
-exports.AdSlot = AdSlot;
-exports.AdsManager = AdsManager;
-exports.AdsProvider = AdsProvider;
-exports.AdsTargetingProvider = AdsTargetingProvider;
-exports.PropTypes = propTypes;
-exports.RichAd = RichAd;
-exports.buildSizeMappingFromSizes = buildSizeMappingFromSizes;
-exports.buildSizeMappingFromViewports = buildSizeMappingFromViewports;
-exports.getAdSizes = getAdSizes;
-exports.getMinimumAdSize = getMinimumAdSize;
-exports.getSizeFromSizeMapping = getSizeFromSizeMapping;
-exports.getSizeMappingFromSlot = getSizeMappingFromSlot;
-exports.getSortedViewports = getSortedViewports;
-exports.normalizeAdSizes = normalizeAdSizes;
-exports.sizeFitsInViewport = sizeFitsInViewport;
-exports.slots = slots;
-exports.useAd = useAd;
-exports.useAdsContext = useAdsContext;
-exports.useAdsTargeting = useAdsTargeting;
-exports.useAdsTracking = useAdsTracking;
-exports.useRichAd = useRichAd;
-exports.viewports = viewports;