@gravatar-com/hovercards/dist/index.react.mjs

Add profile hovercards to Gravatar images.

import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
/******/ var __webpack_modules__ = ({

/***/ 169:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

var __webpack_unused_export__;
/**
 * @license React
 * react-jsx-runtime.production.min.js
 *
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */


var f = __webpack_require__(649),
  k = Symbol["for"]("react.element"),
  l = Symbol["for"]("react.fragment"),
  m = Object.prototype.hasOwnProperty,
  n = f.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,
  p = {
    key: !0,
    ref: !0,
    __self: !0,
    __source: !0
  };
function q(c, a, g) {
  var b,
    d = {},
    e = null,
    h = null;
  void 0 !== g && (e = "" + g);
  void 0 !== a.key && (e = "" + a.key);
  void 0 !== a.ref && (h = a.ref);
  for (b in a) m.call(a, b) && !p.hasOwnProperty(b) && (d[b] = a[b]);
  if (c && c.defaultProps) for (b in a = c.defaultProps, a) void 0 === d[b] && (d[b] = a[b]);
  return {
    $$typeof: k,
    type: c,
    key: e,
    ref: h,
    props: d,
    _owner: n.current
  };
}
__webpack_unused_export__ = l;
exports.jsx = q;
__webpack_unused_export__ = q;

/***/ }),

/***/ 867:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {



if (true) {
  module.exports = __webpack_require__(169);
} else {}

/***/ }),

/***/ 649:
/***/ ((module) => {

var x = (y) => {
	var x = {}; __webpack_require__.d(x, y); return x
} 
var y = (x) => (() => (x))
module.exports = __WEBPACK_EXTERNAL_MODULE_react__;

/***/ })

/******/ });
/************************************************************************/
/******/ // The module cache
/******/ var __webpack_module_cache__ = {};
/******/ 
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/ 	// Check if module is in cache
/******/ 	var cachedModule = __webpack_module_cache__[moduleId];
/******/ 	if (cachedModule !== undefined) {
/******/ 		return cachedModule.exports;
/******/ 	}
/******/ 	// Create a new module (and put it into the cache)
/******/ 	var module = __webpack_module_cache__[moduleId] = {
/******/ 		// no module.id needed
/******/ 		// no module.loaded needed
/******/ 		exports: {}
/******/ 	};
/******/ 
/******/ 	// Execute the module function
/******/ 	__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
/******/ 
/******/ 	// Return the exports of the module
/******/ 	return module.exports;
/******/ }
/******/ 
/************************************************************************/
/******/ /* webpack/runtime/define property getters */
/******/ (() => {
/******/ 	// define getter functions for harmony exports
/******/ 	__webpack_require__.d = (exports, definition) => {
/******/ 		for(var key in definition) {
/******/ 			if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
/******/ 				Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
/******/ 			}
/******/ 		}
/******/ 	};
/******/ })();
/******/ 
/******/ /* webpack/runtime/hasOwnProperty shorthand */
/******/ (() => {
/******/ 	__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
/******/ })();
/******/ 
/************************************************************************/
var __webpack_exports__ = {};
// This entry need to be wrapped in an IIFE because it need to be isolated against other modules in the chunk.
(() => {

// EXPORTS
__webpack_require__.d(__webpack_exports__, {
  S: () => (/* reexport */ hovercards_Hovercards),
  n: () => (/* reexport */ useHovercards)
});

// EXTERNAL MODULE: external "react"
var external_react_ = __webpack_require__(649);
;// CONCATENATED MODULE: ./src/use-latest.ts


/**
 * A custom React hook to persist a mutable value.
 *
 * @template T The type of the value.
 * @param {T} val The value to persist.
 * @return {MutableRefObject<T>} Mutable reference object initialized to `val`.
 * @internal
 */
/* harmony default export */ const use_latest = (function (val) {
  var ref = (0,external_react_.useRef)(val);
  ref.current = val;
  return ref;
});
;// CONCATENATED MODULE: ./src/assign-position.ts
var paddingMap = {
  top: 'paddingBottom',
  bottom: 'paddingTop',
  left: 'paddingRight',
  right: 'paddingLeft'
};

/**
 * Computes and assigns the position of the card element.
 *
 * @param {HTMLElement}    ref          - The ref element.
 * @param {HTMLDivElement} card         - The card element.
 * @param {Options}        [options={}] - The placement, offset, auto-flip, and auto-shift options.
 * @return {void}
 */
function assignPosition(ref, card, _temp) {
  var _ref = _temp === void 0 ? {} : _temp,
    _ref$placement = _ref.placement,
    placement = _ref$placement === void 0 ? 'right-start' : _ref$placement,
    _ref$offset = _ref.offset,
    offset = _ref$offset === void 0 ? 0 : _ref$offset,
    _ref$autoFlip = _ref.autoFlip,
    autoFlip = _ref$autoFlip === void 0 ? true : _ref$autoFlip,
    _ref$autoShift = _ref.autoShift,
    autoShift = _ref$autoShift === void 0 ? true : _ref$autoShift;
  // Reset the card's padding for re-calculation
  card.style.padding = '0';
  var refRect = ref.getBoundingClientRect();
  var cardRect = card.getBoundingClientRect();
  var refScrollT = refRect.top + scrollY;
  var refScrollB = refRect.bottom + scrollY;
  var refScrollR = refRect.right + scrollX;
  var refScrollL = refRect.left + scrollX;
  var topSpace = refRect.top;
  var bottomSpace = innerHeight - refRect.bottom;
  var leftSpace = refRect.left;
  var rightSpace = innerWidth - refRect.right;
  var x = 0;
  var y = 0;
  var _placement$split = placement.split('-'),
    dir = _placement$split[0],
    align = _placement$split[1];
  offset = Math.max(0, offset);

  // Auto flip the card when there's not enough space
  if (autoFlip) {
    var dirSpaceV = cardRect.height + offset;
    var dirSpaceH = cardRect.width + offset;
    if (dir === 'top' && topSpace < dirSpaceV && bottomSpace > topSpace) {
      dir = 'bottom';
    } else if (dir === 'bottom' && bottomSpace < dirSpaceV && topSpace > bottomSpace) {
      dir = 'top';
    } else if (dir === 'left' && leftSpace < dirSpaceH && rightSpace > leftSpace) {
      dir = 'right';
    } else if (dir === 'right' && rightSpace < dirSpaceH && leftSpace > rightSpace) {
      dir = 'left';
    }
  }

  // Auto shift the card when there's not enough space
  if (autoShift) {
    var alignSpaceV = cardRect.height - refRect.height;
    var alignSpaceH = cardRect.width - refRect.width;
    var halfAlignSpaceV = alignSpaceV / 2;
    var halfAlignSpaceH = alignSpaceH / 2;
    if (dir === 'top' || dir === 'bottom') {
      if (align === 'start' && rightSpace < alignSpaceH) {
        if (rightSpace < halfAlignSpaceH) {
          align = 'end';
        } else {
          align = undefined;
        }
      } else if (align === 'end' && leftSpace < alignSpaceH) {
        if (leftSpace < halfAlignSpaceH) {
          align = 'start';
        } else {
          align = undefined;
        }
      } else if (align === undefined && (rightSpace < halfAlignSpaceH || leftSpace < halfAlignSpaceH)) {
        if (rightSpace > leftSpace) {
          align = 'start';
        } else {
          align = 'end';
        }
      }
    }
    if (dir === 'right' || dir === 'left') {
      if (align === 'start' && bottomSpace < alignSpaceV) {
        if (bottomSpace < halfAlignSpaceV) {
          align = 'end';
        } else {
          align = undefined;
        }
      } else if (align === 'end' && topSpace < alignSpaceV) {
        if (topSpace < halfAlignSpaceV) {
          align = 'start';
        } else {
          align = undefined;
        }
      } else if (align === undefined && (bottomSpace < halfAlignSpaceV || topSpace < halfAlignSpaceV)) {
        if (bottomSpace > topSpace) {
          align = 'start';
        } else {
          align = 'end';
        }
      }
    }
  }

  // Calculate the position of the card
  if (dir === 'top' || dir === 'bottom') {
    x = refScrollL + refRect.width / 2 - cardRect.width / 2;
    // The bottom offset will be filled with the card's padding
    y = dir === 'top' ? refScrollT - cardRect.height - offset : refScrollB;
    if (align === 'start') {
      x = refScrollL;
    }
    if (align === 'end') {
      x = refScrollR - cardRect.width;
    }
  } else {
    // The right offset will be filled with the card's padding
    x = dir === 'right' ? refScrollR : refScrollL - cardRect.width - offset;
    y = refScrollT + refRect.height / 2 - cardRect.height / 2;
    if (align === 'start') {
      y = refScrollT;
    }
    if (align === 'end') {
      y = refScrollB - cardRect.height;
    }
  }
  card.style.position = 'absolute';
  card.style.left = x + "px";
  card.style.top = y + "px";
  // To bridge the gap between the ref and the hovercard,
  // ensuring that the hovercard remains visible when the mouse hovers over the gap
  card.style[paddingMap[dir]] = offset + "px";
}
;// CONCATENATED MODULE: ./src/sanitizer.ts
function escHtml(str) {
  var htmlEntities = {
    '&': '&amp;',
    '<': '&lt;',
    '>': '&gt;',
    '"': '&quot;',
    "'": '&#39;',
    '`': '&#x60;'
  };

  // Don't escape if already escaped.
  return str.replace(/&(amp|lt|gt|quot|#39|x60);|[\&<>"'`]/g, function (match) {
    return match[0] === '&' ? match : htmlEntities[match];
  });
}
function escUrl(url) {
  return encodeURI(url);
}
;// CONCATENATED MODULE: ./src/add-query-arg.ts
/**
 * Adds or updates a query parameter to the given URL.
 *
 * @param {string} url   - The URL to which the query parameter will be added.
 * @param {string} key   - The query parameter key to add or update.
 * @param {string} value - The value of the query parameter to add or update.
 * @return {string}      - The updated URL with the new or updated query parameter, or an empty string if the URL is invalid.
 */
function addQueryArg(url, key, value) {
  var _url$split = url.split('?'),
    baseUrl = _url$split[0],
    queryStr = _url$split[1];
  var queryParams = new URLSearchParams(queryStr || '');
  queryParams.set(key, value);
  return baseUrl + "?" + queryParams.toString();
}
;// CONCATENATED MODULE: ./src/i18n.ts
function __t(i18n, key) {
  return i18n[key] || key;
}
;// CONCATENATED MODULE: ./src/core.ts
var _Hovercards;
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }




var BASE_API_URL = 'https://api.gravatar.com/v3/profiles';
var dc = document;
var Hovercards = /*#__PURE__*/function () {
  function Hovercards(_temp) {
    var _this = this;
    var _ref = _temp === void 0 ? {} : _temp,
      _ref$placement = _ref.placement,
      placement = _ref$placement === void 0 ? 'right-start' : _ref$placement,
      _ref$offset = _ref.offset,
      offset = _ref$offset === void 0 ? 10 : _ref$offset,
      _ref$autoFlip = _ref.autoFlip,
      autoFlip = _ref$autoFlip === void 0 ? true : _ref$autoFlip,
      _ref$autoShift = _ref.autoShift,
      autoShift = _ref$autoShift === void 0 ? true : _ref$autoShift,
      _ref$hideOnTargetClic = _ref.hideOnTargetClick,
      hideOnTargetClick = _ref$hideOnTargetClic === void 0 ? false : _ref$hideOnTargetClic,
      _ref$delayToShow = _ref.delayToShow,
      delayToShow = _ref$delayToShow === void 0 ? 500 : _ref$delayToShow,
      _ref$delayToHide = _ref.delayToHide,
      delayToHide = _ref$delayToHide === void 0 ? 300 : _ref$delayToHide,
      _ref$additionalClass = _ref.additionalClass,
      additionalClass = _ref$additionalClass === void 0 ? '' : _ref$additionalClass,
      _ref$myHash = _ref.myHash,
      myHash = _ref$myHash === void 0 ? '' : _ref$myHash,
      _ref$onQueryHovercard = _ref.onQueryHovercardRef,
      onQueryHovercardRef = _ref$onQueryHovercard === void 0 ? function (ref) {
        return ref;
      } : _ref$onQueryHovercard,
      _ref$onFetchProfileSt = _ref.onFetchProfileStart,
      onFetchProfileStart = _ref$onFetchProfileSt === void 0 ? function () {} : _ref$onFetchProfileSt,
      _ref$onFetchProfileSu = _ref.onFetchProfileSuccess,
      onFetchProfileSuccess = _ref$onFetchProfileSu === void 0 ? function () {} : _ref$onFetchProfileSu,
      _ref$onFetchProfileFa = _ref.onFetchProfileFailure,
      onFetchProfileFailure = _ref$onFetchProfileFa === void 0 ? function () {} : _ref$onFetchProfileFa,
      _ref$onHovercardShown = _ref.onHovercardShown,
      onHovercardShown = _ref$onHovercardShown === void 0 ? function () {} : _ref$onHovercardShown,
      _ref$onHovercardHidde = _ref.onHovercardHidden,
      onHovercardHidden = _ref$onHovercardHidde === void 0 ? function () {} : _ref$onHovercardHidde,
      _ref$onCanShowHoverca = _ref.onCanShowHovercard,
      onCanShowHovercard = _ref$onCanShowHoverca === void 0 ? function () {
        return true;
      } : _ref$onCanShowHoverca,
      _ref$i18n = _ref.i18n,
      i18n = _ref$i18n === void 0 ? {} : _ref$i18n;
    // Options
    this._i18n = {};
    // Variables
    this._hovercardRefs = [];
    this._showHovercardTimeoutIds = new Map();
    this._hideHovercardTimeoutIds = new Map();
    this._cachedProfiles = new Map();
    /**
     * Attaches event listeners on or within the target element.
     *
     * @param {HTMLElement} target                    - The target element to set.
     * @param {Object}      [options={}]              - The optional parameters.
     * @param {string}      options.dataAttributeName - Data attribute name associated with Gravatar hashes.
     * @param {string}      options.ignoreSelector    - The selector to ignore certain elements.
     * @return {void}
     */
    this.attach = function (target, _temp2) {
      var _ref2 = _temp2 === void 0 ? {} : _temp2,
        _ref2$dataAttributeNa = _ref2.dataAttributeName,
        dataAttributeName = _ref2$dataAttributeNa === void 0 ? 'gravatar-hash' : _ref2$dataAttributeNa,
        ignoreSelector = _ref2.ignoreSelector;
      if (!target) {
        return;
      }
      _this.detach();
      _this._queryHovercardRefs(target, dataAttributeName, ignoreSelector).forEach(function (hovercardRef) {
        hovercardRef.ref.addEventListener('mouseenter', hovercardRef.onEnter);
        hovercardRef.ref.addEventListener('mouseleave', hovercardRef.onLeave);
        hovercardRef.ref.addEventListener('click', hovercardRef.onClick);
      });
    };
    /**
     * Removes event listeners from hovercard refs and resets the stored list of these refs.
     *
     * @return {void}
     */
    this.detach = function () {
      if (!_this._hovercardRefs.length) {
        return;
      }
      _this._hovercardRefs.forEach(function (hovercardRef) {
        var _dc$getElementById;
        hovercardRef.ref.removeEventListener('mouseenter', hovercardRef.onEnter);
        hovercardRef.ref.removeEventListener('mouseleave', hovercardRef.onLeave);
        hovercardRef.ref.removeEventListener('click', hovercardRef.onClick);

        // Clear the hovercard show timeout and remove the hovercard element.
        clearInterval(_this._showHovercardTimeoutIds.get(hovercardRef.id));
        (_dc$getElementById = dc.getElementById(hovercardRef.id)) == null || _dc$getElementById.remove();
      });
      _this._hovercardRefs = [];
    };
    this._placement = placement;
    this._offset = offset;
    this._autoFlip = autoFlip;
    this._autoShift = autoShift;
    this._hideOnTargetClick = hideOnTargetClick;
    this._delayToShow = delayToShow;
    this._delayToHide = delayToHide;
    this._additionalClass = additionalClass;
    this._myHash = myHash;
    this._onQueryHovercardRef = onQueryHovercardRef;
    this._onFetchProfileStart = onFetchProfileStart;
    this._onFetchProfileSuccess = onFetchProfileSuccess;
    this._onFetchProfileFailure = onFetchProfileFailure;
    this._onHovercardShown = onHovercardShown;
    this._onHovercardHidden = onHovercardHidden;
    this._canShowHovercard = onCanShowHovercard;
    this._i18n = i18n;
  }

  /**
   * Queries hovercard refs on or within the target element.
   *
   * @param {HTMLElement} target            - The element to query.
   * @param {string}      dataAttributeName - Data attribute name associated with Gravatar hashes.
   * @param {string}      [ignoreSelector]  - The selector to ignore certain elements.
   * @return {HovercardRef[]}               - The queried hovercard refs.
   * @private
   */
  var _proto = Hovercards.prototype;
  _proto._queryHovercardRefs = function _queryHovercardRefs(target, dataAttributeName, ignoreSelector) {
    var _this2 = this;
    var refs = [];
    var camelAttrName = dataAttributeName.replace(/-([a-z])/g, function (g) {
      return g[1].toUpperCase();
    });
    var ignoreRefs = ignoreSelector ? Array.from(dc.querySelectorAll(ignoreSelector)) : [];
    var matchPath = 'gravatar.com/avatar/';
    if (camelAttrName && target.dataset[camelAttrName] || target.tagName === 'IMG' && target.src.includes(matchPath)) {
      refs = [target];
    } else {
      refs = Array.from(target.querySelectorAll("img[src*=\"" + matchPath + "\"]"));
      if (dataAttributeName) {
        refs = [].concat(refs.filter(function (img) {
          return !img.hasAttribute("data-" + dataAttributeName);
        }), Array.from(target.querySelectorAll("[data-" + dataAttributeName + "]")));
      }
    }
    this._hovercardRefs = refs.map(function (ref, idx) {
      if (ignoreRefs.includes(ref)) {
        return null;
      }
      var hash;
      var params;
      var dataAttrValue = ref.dataset[camelAttrName];
      if (dataAttrValue) {
        var part = dataAttrValue.split('?');
        hash = part[0];
        params = part.length > 1 ? part[1] : '';
      } else if (ref.tagName === 'IMG') {
        var _part = ref.src.split('/').pop().split('?');
        hash = _part[0];
        params = _part.length > 1 ? _part[1] : '';
      }
      if (!hash) {
        return null;
      }
      var p = new URLSearchParams(params);
      var d = p.get('d') || p.get('default');
      var f = p.get('f') || p.get('forcedefault');
      var r = p.get('r') || p.get('rating');
      var initials = p.get('initials');
      var name = p.get('name');
      var txtColor = p.get('txt_color');
      var bgColor = p.get('bg_color');
      params = [d && "d=" + d, f && "f=" + f, r && "r=" + r, initials && "initials=" + initials, name && "name=" + name, txtColor && "txt_color=" + txtColor, bgColor && "bg_color=" + bgColor].filter(Boolean).join('&');
      return {
        id: "gravatar-hovercard-" + hash + "-" + idx,
        hash: hash,
        params: params ? "?" + params : '',
        ref: _this2._onQueryHovercardRef(ref) || ref
      };
    }).filter(Boolean).map(function (hovercardRef) {
      return _extends({}, hovercardRef, {
        onEnter: function onEnter(e) {
          return _this2._handleMouseEnter(e, hovercardRef);
        },
        onLeave: function onLeave(e) {
          return _this2._handleMouseLeave(e, hovercardRef);
        },
        onClick: function onClick() {
          return _this2._handleMouseClick(hovercardRef);
        }
      });
    });
    return this._hovercardRefs;
  }

  /**
   * Creates a hovercard element with the provided profile data.
   *
   * @param {ProfileData} profileData               - The profile data to populate the hovercard.
   * @param {Object}      [options]                 - Optional parameters for the hovercard.
   * @param {string}      [options.additionalClass] - Additional CSS class for the hovercard.
   * @param {string}      [options.myHash]          - The hash of the current user.
   * @param {Object}      [options.i18n]            - The i18n object.
   * @return {HTMLDivElement}                       - The created hovercard element.
   */;
  /**
   * Creates a hovercard drawer.
   *
   * @param {string} name      - The drawer name.
   * @param {string} titleText - The title shown at the drawer's header.
   * @param {string} content   - The drawer inner content.
   * @return {string}          - The drawer HTML string.
   * @private
   */
  Hovercards._createDrawer = function _createDrawer(name, titleText, content) {
    return "\n\t\t\t<div class=\"gravatar-hovercard__drawer\" data-drawer-name=\"" + name + "\">\n\t\t\t\t<div class=\"gravatar-hovercard__drawer-backdrop\" data-target-drawer=\"" + name + "\"></div>\n\t\t\t\t<div class=\"gravatar-hovercard__drawer-card\">\n\t\t\t\t\t<div class=\"gravatar-hovercard__drawer-header\">\n\t\t\t\t\t\t<h2 class=\"gravatar-hovercard__drawer-title\">" + titleText + "</h2>\n\t\t\t\t\t\t<button class=\"gravatar-hovercard__drawer-close\" data-target-drawer=\"" + name + "\">\n\t\t\t\t\t\t\t<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t\t\t\t\t\t<path d=\"M12 13.0607L15.7123 16.773L16.773 15.7123L13.0607 12L16.773 8.28772L15.7123 7.22706L12 10.9394L8.28771 7.22705L7.22705 8.28771L10.9394 12L7.22706 15.7123L8.28772 16.773L12 13.0607Z\" fill=\"#101517\"></path>\n\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</div>\n\t\t\t\t\t<ul class=\"gravatar-hovercard__drawer-items\">\n\t\t\t\t\t\t" + content + "\n\t\t\t\t\t</ul>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t";
  }

  /**
   * Opens a hovercard drawer.
   *
   * @param {HTMLElement} target    - The target drawer.
   * @param {HTMLElement} container - The container context to search for the drawer.
   * @return {void}
   * @private
   */;
  Hovercards._openDrawer = function _openDrawer(target, container) {
    var drawer = container.querySelector(".gravatar-hovercard__drawer[data-drawer-name=\"" + target.dataset.targetDrawer + "\"]");
    if (!drawer) {
      return;
    }
    drawer.classList.add('gravatar-hovercard__drawer--open');
  }

  /**
   * Closes a hovercard drawer.
   *
   * @param {HTMLElement} target    - The drawer selector.
   * @param {HTMLElement} container - The container context to search for the drawer.
   * @return {void}
   * @private
   */;
  Hovercards._closeDrawer = function _closeDrawer(target, container) {
    var drawer = container.querySelector(".gravatar-hovercard__drawer[data-drawer-name=\"" + target.dataset.targetDrawer + "\"]");
    if (!drawer) {
      return;
    }
    drawer.classList.add('gravatar-hovercard__drawer--closing');
    drawer.classList.remove('gravatar-hovercard__drawer--open');
    setTimeout(function () {
      drawer.classList.remove('gravatar-hovercard__drawer--closing');
    }, 300);
  }

  /**
   * Creates the contact drawer content.
   *
   * @param {Record< string, any >[]} contactsData   - The user's contact data.
   * @param {Object}                  [options]      - Optional parameters for the contact drawer.
   * @param {Record<string, string>}  [options.i18n] - The i18n object.
   * @return {string}                               - The contact drawer content.
   * @private
   */;
  Hovercards._createContactDrawerContent = function _createContactDrawerContent(contactsData, _temp3) {
    var _ref3 = _temp3 === void 0 ? {} : _temp3,
      _ref3$i18n = _ref3.i18n,
      i18n = _ref3$i18n === void 0 ? {} : _ref3$i18n;
    var icons = {
      email: 'icons/mail.svg',
      home_phone: 'icons/home-phone.svg',
      work_phone: 'icons/work-phone.svg',
      cell_phone: 'icons/mobile-phone.svg',
      contact_form: 'icons/envelope.svg',
      calendar: 'icons/calendar.svg',
      calendly: 'icons/calendly.svg'
    };
    var labels = {
      email: __t(i18n, 'Email'),
      home_phone: __t(i18n, 'Home Phone'),
      work_phone: __t(i18n, 'Work Phone'),
      cell_phone: __t(i18n, 'Cell Phone'),
      contact_form: __t(i18n, 'Contact Form'),
      calendar: __t(i18n, 'Calendar')
    };
    var getUrl = function getUrl(type, value) {
      switch (type) {
        case 'email':
          return "mailto:" + value;
        case 'contact_form':
        case 'calendar':
        case 'calendly':
          return value.startsWith('http') ? value : "https://" + value;
        default:
          return null;
      }
    };
    var items = contactsData.map(function (_ref4) {
      var _labels$key;
      var key = _ref4[0],
        value = _ref4[1];
      var url = getUrl(key, value);
      var text = value.replace(/^(https?:\/\/)?(www\.)?/, '');
      text = text.endsWith('/') ? text.slice(0, -1) : text;
      if (url) {
        text = "<a class=\"gravatar-hovercard__drawer-item-link\" href=\"" + url + "\" target=\"_blank\">" + text + "</a>";
      }
      return "\n\t\t\t\t<li class=\"gravatar-hovercard__drawer-item\">\n\t\t\t\t\t<img\n\t\t\t\t\t\tclass=\"gravatar-hovercard__drawer-item-icon\"\n\t\t\t\t\t\twidth=\"24\"\n\t\t\t\t\t\theight=\"24\"\n\t\t\t\t\t\tsrc=\"https://s.gravatar.com/" + icons[key] + "\"\n\t\t\t\t\t\talt=\"\"\n\t\t\t\t\t>\n\t\t\t\t\t<div class=\"gravatar-hovercard__drawer-item-info\">\n\t\t\t\t\t\t<span class=\"gravatar-hovercard__drawer-item-label\">" + ((_labels$key = labels[key]) != null ? _labels$key : key.replace('_', ' ')) + "</span>\n\t\t\t\t\t\t<span class=\"gravatar-hovercard__drawer-item-text\">" + text + "</span>\n\t\t\t\t\t</div>\n\t\t\t\t</li>\n\t\t\t";
    });
    return items.join('');
  }

  /**
   * Creates the send money drawer content.
   *
   * @param {Payments} payments - The user's payment data.
   * @return {string}           - The send money drawer content.
   * @private
   */;
  Hovercards._createSendMoneyDrawerContent = function _createSendMoneyDrawerContent(payments) {
    var _payments$links, _payments$crypto_wall;
    var items = [];
    (_payments$links = payments.links) == null || _payments$links.forEach(function (item) {
      items.push("\n\t\t\t\t<li class=\"gravatar-hovercard__drawer-item\">\n\t\t\t\t\t<img class=\"gravatar-hovercard__drawer-item-icon\" width=\"24\" height=\"24\" src=\"https://s.gravatar.com/icons/link.svg\" alt=\"\">\n\t\t\t\t\t<div class=\"gravatar-hovercard__drawer-item-info\">\n\t\t\t\t\t\t<span class=\"gravatar-hovercard__drawer-item-label\">" + item.label + "</span>\n\t\t\t\t\t\t<span class=\"gravatar-hovercard__drawer-item-text\">\n\t\t\t\t\t\t\t<a class=\"gravatar-hovercard__drawer-item-link\" href=\"" + item.url + "\" target=\"_blank\">\n\t\t\t\t\t\t\t\t" + item.url.replace(/^(https?:\/\/)/, '') + "\n\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</div>\n\t\t\t\t</li>\n\t\t\t");
    });
    (_payments$crypto_wall = payments.crypto_wallets) == null || _payments$crypto_wall.forEach(function (item) {
      items.push("\n\t\t\t\t<li class=\"gravatar-hovercard__drawer-item\">\n\t\t\t\t\t<img class=\"gravatar-hovercard__drawer-item-icon\" width=\"24\" height=\"24\" src=\"https://s.gravatar.com/icons/link.svg\" alt=\"\">\n\t\t\t\t\t<div class=\"gravatar-hovercard__drawer-item-info\">\n\t\t\t\t\t\t<span class=\"gravatar-hovercard__drawer-item-label\">" + item.label + "</span>\n\t\t\t\t\t\t<span class=\"gravatar-hovercard__drawer-item-text\">" + item.address + "</span>\n\t\t\t\t\t</div>\n\t\t\t\t</li>\n\t\t\t");
    });
    return items.join('');
  }

  /**
   * Creates a skeleton hovercard element.
   *
   * @param {Object} [options]                 - Optional parameters for the skeleton hovercard.
   * @param {string} [options.additionalClass] - Additional CSS class for the skeleton hovercard.
   * @return {HTMLDivElement}                  - The created skeleton hovercard element.
   */;
  /**
   * Waits for a specified delay and fetches the user's profile data,
   * then shows the hovercard relative to the ref element.
   *
   * @param {HovercardRef} hovercardRef - The hovercard ref object.
   * @return {void}
   * @private
   */
  _proto._showHovercard = function _showHovercard(_ref5) {
    var _this3 = this;
    var id = _ref5.id,
      hash = _ref5.hash,
      params = _ref5.params,
      ref = _ref5.ref;
    var timeoutId = setTimeout(function () {
      if (dc.getElementById(id)) {
        return;
      }

      // Let client decide if we can show the hovercard
      if (!_this3._canShowHovercard(hash)) {
        return;
      }
      var urlParams = new URLSearchParams(params);
      urlParams["delete"]('size');
      urlParams.set('s', '256');
      params = "?" + urlParams.toString();
      var hovercard;
      var positionOptions = {
        placement: _this3._placement,
        offset: _this3._offset,
        autoFlip: _this3._autoFlip,
        autoShift: _this3._autoShift
      };
      if (_this3._cachedProfiles.has(hash)) {
        var profile = _this3._cachedProfiles.get(hash);
        hovercard = Hovercards.createHovercard(_extends({}, profile, {
          avatarUrl: profile.avatarUrl + params
        }), {
          additionalClass: _this3._additionalClass,
          myHash: _this3._myHash,
          i18n: _this3._i18n
        });
        _this3._onHovercardShown(hash, hovercard);
      } else {
        hovercard = Hovercards.createHovercardSkeleton({
          additionalClass: _this3._additionalClass
        });
        _this3._onFetchProfileStart(hash);
        fetch(addQueryArg(BASE_API_URL + "/" + hash, 'source', 'hovercard')).then(function (res) {
          // API error handling
          if (res.status !== 200) {
            throw res.status;
          }
          return res.json();
        }).then(function (data) {
          var _data$verified_accoun;
          _this3._cachedProfiles.set(hash, {
            hash: data.hash,
            avatarUrl: data.avatar_url,
            profileUrl: data.profile_url,
            displayName: data.display_name,
            location: data.location,
            description: data.description,
            jobTitle: data.job_title,
            company: data.company,
            headerImage: data.header_image,
            hideDefaultHeaderImage: data.hide_default_header_image,
            backgroundColor: data.background_color,
            verifiedAccounts: (_data$verified_accoun = data.verified_accounts) == null ? void 0 : _data$verified_accoun.map(function (account) {
              return {
                type: account.service_type,
                label: account.service_label,
                icon: account.service_icon,
                url: account.url,
                isHidden: account.is_hidden
              };
            }),
            contactInfo: data.contact_info,
            payments: data.payments
          });
          var profile = _this3._cachedProfiles.get(hash);
          var hovercardInner = Hovercards.createHovercard(_extends({}, profile, {
            avatarUrl: profile.avatarUrl + params
          }), {
            additionalClass: _this3._additionalClass,
            myHash: _this3._myHash,
            i18n: _this3._i18n
          }).firstElementChild;
          hovercard.classList.remove('gravatar-hovercard--skeleton');
          hovercard.replaceChildren(hovercardInner);

          // Recalculate the hovercard position after fetching the user data
          assignPosition(ref, hovercard, positionOptions);
          _this3._onFetchProfileSuccess(hash, _this3._cachedProfiles.get(hash));
          _this3._onHovercardShown(hash, hovercard);
        })["catch"](function (code) {
          var message = __t(_this3._i18n, 'Sorry, we are unable to load this Gravatar profile.');
          switch (code) {
            case 403:
              message = __t(_this3._i18n, 'This profile is private.');
              break;
            case 404:
              message = __t(_this3._i18n, 'Gravatar not found.');
              break;
            case 429:
              message = __t(_this3._i18n, 'Too Many Requests.');
              break;
            case 500:
              message = __t(_this3._i18n, 'Internal Server Error.');
              break;
          }
          var additionalMessage = code === 404 ? "\n\t\t\t\t\t\t\t\t<i class=\"gravatar-hovercard__error-message gravatar-hovercard__error-message--claim-gravatar\">\n\t\t\t\t\t\t\t\t\t" + __t(_this3._i18n, 'Is this you?') + " \n\t\t\t\t\t\t\t\t\t<a href=\"https://gravatar.com/signup?utm_source=hovercard\" target=\"_blank\">\n\t\t\t\t\t\t\t\t\t\t" + __t(_this3._i18n, 'Claim your free profile.') + "\n\t\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t\t</i>\n\t\t\t\t\t\t\t\t" : '';
          var hovercardInner = Hovercards.createHovercardError("https://0.gravatar.com/avatar/" + hash + params, message, {
            additionalClass: _this3._additionalClass,
            additionalMessage: additionalMessage
          }).firstElementChild;
          hovercard.classList.add('gravatar-hovercard--error');
          hovercard.classList.remove('gravatar-hovercard--skeleton');
          hovercard.replaceChildren(hovercardInner);
          _this3._onFetchProfileFailure(hash, {
            code: code,
            message: message
          });
        });
      }

      // Set the hovercard ID here to avoid the show / hide side effect
      hovercard.id = id;
      // Don't hide the hovercard when the mouse is over the hovercard from the ref
      hovercard.addEventListener('mouseenter', function () {
        return clearInterval(_this3._hideHovercardTimeoutIds.get(id));
      });
      hovercard.addEventListener('mouseleave', function () {
        return _this3._hideHovercard(id);
      });

      // Placing the hovercard at the top-level of the document to avoid being clipped by overflow
      dc.body.appendChild(hovercard);
      assignPosition(ref, hovercard, positionOptions);
    }, this._delayToShow);
    this._showHovercardTimeoutIds.set(id, timeoutId);
  }

  /**
   * Waits for a specified delay and hides the hovercard.
   *
   * @param {string} id      - The ID associated with the hovercard.
   * @param {number} [delay] - The delay in milliseconds before hiding the hovercard.
   * @return {void}
   * @private
   */;
  _proto._hideHovercard = function _hideHovercard(id, delay) {
    var _this4 = this;
    if (delay === void 0) {
      delay = this._delayToHide;
    }
    var timeoutId = setTimeout(function () {
      var hovercard = dc.getElementById(id);
      if (hovercard) {
        hovercard.remove();
        _this4._onHovercardHidden(id, hovercard);
      }
    }, delay);
    this._hideHovercardTimeoutIds.set(id, timeoutId);
  }

  /**
   * Handles the mouseenter event for hovercard refs.
   *
   * @param {MouseEvent}   e            - The mouseenter event object.
   * @param {HovercardRef} hovercardRef - The hovercard ref object.
   * @return {void}
   * @private
   */;
  _proto._handleMouseEnter = function _handleMouseEnter(e, hovercardRef) {
    if ('ontouchstart' in dc) {
      return;
    }
    e.stopImmediatePropagation();

    // Don't hide the hovercard when the mouse is over the ref from the hovercard
    clearInterval(this._hideHovercardTimeoutIds.get(hovercardRef.id));
    this._showHovercard(hovercardRef);
  }

  /**
   * Handles the mouseleave event for hovercard refs.
   *
   * @param {MouseEvent}   e               - The mouseleave event object.
   * @param {HovercardRef} hovercardRef    - The hovercard ref object.
   * @param {string}       hovercardRef.id - The ID associated with the hovercard.
   * @return {void}
   * @private
   */;
  _proto._handleMouseLeave = function _handleMouseLeave(e, _ref6) {
    var id = _ref6.id;
    if ('ontouchstart' in dc) {
      return;
    }
    e.stopImmediatePropagation();
    clearInterval(this._showHovercardTimeoutIds.get(id));
    this._hideHovercard(id);
  }

  /**
   * Handles the click event for hovercard refs.
   *
   * @param {HovercardRef} hovercardRef    - The hovercard ref object.
   * @param {string}       hovercardRef.id - The ID associated with the hovercard.
   * @return {void}
   * @private
   */;
  _proto._handleMouseClick = function _handleMouseClick(_ref7) {
    var id = _ref7.id;
    if ('ontouchstart' in dc || !this._hideOnTargetClick) {
      return;
    }
    clearInterval(this._showHovercardTimeoutIds.get(id));
    this._hideHovercard(id, 0);
  };
  return Hovercards;
}();
_Hovercards = Hovercards;
Hovercards.createHovercard = function (profileData, _temp4) {
  var _payments$links2, _payments$crypto_wall2;
  var _ref8 = _temp4 === void 0 ? {} : _temp4,
    additionalClass = _ref8.additionalClass,
    myHash = _ref8.myHash,
    _ref8$i18n = _ref8.i18n,
    i18n = _ref8$i18n === void 0 ? {} : _ref8$i18n;
  var hash = profileData.hash,
    avatarUrl = profileData.avatarUrl,
    profileUrl = profileData.profileUrl,
    displayName = profileData.displayName,
    location = profileData.location,
    description = profileData.description,
    jobTitle = profileData.jobTitle,
    company = profileData.company,
    headerImage = profileData.headerImage,
    hideDefaultHeaderImage = profileData.hideDefaultHeaderImage,
    _profileData$verified = profileData.verifiedAccounts,
    verifiedAccounts = _profileData$verified === void 0 ? [] : _profileData$verified,
    payments = profileData.payments,
    contactInfo = profileData.contactInfo,
    backgroundColor = profileData.backgroundColor;
  var hovercard = dc.createElement('div');
  hovercard.className = "gravatar-hovercard" + (additionalClass ? " " + additionalClass : '');
  var calendly = verifiedAccounts.find(function (account) {
    return account.type === 'calendly' && !account.isHidden;
  });
  if (contactInfo && calendly) {
    contactInfo.calendly = calendly.url;
  }
  var trackedProfileUrl = escUrl(addQueryArg(profileUrl, 'utm_source', 'hovercard'));
  var username = escHtml(displayName);
  var isEditProfile = !description && myHash === hash;
  var jobInfo = [jobTitle, company].filter(Boolean).join(', ');
  var hasPayments = (payments == null || (_payments$links2 = payments.links) == null ? void 0 : _payments$links2.length) || (payments == null || (_payments$crypto_wall2 = payments.crypto_wallets) == null ? void 0 : _payments$crypto_wall2.length);
  var nonEmptyContacts = Object.entries(contactInfo || {}).filter(function (_ref9) {
    var _ = _ref9[0],
      value = _ref9[1];
    return !!value;
  });
  var renderSocialLinks = verifiedAccounts.slice(0, 3).reduce(function (links, _ref10) {
    var label = _ref10.label,
      icon = _ref10.icon,
      url = _ref10.url,
      type = _ref10.type,
      isHidden = _ref10.isHidden;
    if (isHidden) {
      return links;
    }
    links.push("\n\t\t\t\t\t<a class=\"gravatar-hovercard__social-link\" href=\"" + escUrl(url) + "\" target=\"_blank\" data-service-name=\"" + type + "\">\n\t\t\t\t\t\t<img class=\"gravatar-hovercard__social-icon\" src=\"" + escUrl(icon) + "\" width=\"32\" height=\"32\" alt=\"" + escHtml(label) + "\" />\n\t\t\t\t\t</a>\n\t\t\t\t");
    return links;
  }, []).join('');
  var headerImageHtml = '';
  var ctaButtons = '';
  var contactsDrawer = '';
  var sendMoneyDrawer = '';
  if (headerImage || !hideDefaultHeaderImage) {
    var img = "<img class=\"gravatar-hovercard__header-image-img\" src=\"" + escUrl(avatarUrl) + "\" alt=\"\"/>";
    headerImageHtml = "<div class=\"gravatar-hovercard__header-image\">" + (!headerImage ? img : '') + "</div>";
  }
  if (nonEmptyContacts.length || hasPayments) {
    if (nonEmptyContacts.length) {
      ctaButtons += "\n\t\t\t\t\t<button class=\"gravatar-hovercard__button\" data-target-drawer=\"contact\">" + __t(i18n, 'Contact') + "</button>\n\t\t\t\t";
      contactsDrawer = _Hovercards._createDrawer('contact', __t(i18n, 'Contact'), _Hovercards._createContactDrawerContent(nonEmptyContacts, {
        i18n: i18n
      }));
    }
    if (hasPayments) {
      ctaButtons += "\n\t\t\t\t\t<button class=\"gravatar-hovercard__button\" data-target-drawer=\"send-money\">" + __t(i18n, 'Send money') + "</button>\n\t\t\t\t";
      sendMoneyDrawer = _Hovercards._createDrawer('send-money', __t(i18n, 'Send money'), _Hovercards._createSendMoneyDrawerContent(payments));
    }
    ctaButtons = "\n\t\t\t\t<div class=\"gravatar-hovercard__buttons\">" + ctaButtons + "</div>\n\t\t\t";
  }
  hovercard.innerHTML = "\n\t\t\t<div class=\"gravatar-hovercard__inner\">\n\t\t\t\t" + headerImageHtml + "\n\t\t\t\t<div class=\"gravatar-hovercard__header\">\n\t\t\t\t\t<a class=\"gravatar-hovercard__avatar-link\" href=\"" + trackedProfileUrl + "\" target=\"_blank\">\n\t\t\t\t\t\t<img class=\"gravatar-hovercard__avatar\" src=\"" + escUrl(avatarUrl) + "\" width=\"104\" height=\"104\" alt=\"" + username + "\" />\n\t\t\t\t\t</a>\n\t\t\t\t\t<a class=\"gravatar-hovercard__personal-info-link\" href=\"" + trackedProfileUrl + "\" target=\"_blank\">\n\t\t\t\t\t\t<h4 class=\"gravatar-hovercard__name\">" + username + "</h4>\n\t\t\t\t\t\t" + (jobInfo ? "<p class=\"gravatar-hovercard__job\">" + escHtml(jobInfo) + "</p>" : '') + "\n\t\t\t\t\t\t" + (location ? "<p class=\"gravatar-hovercard__location\">" + escHtml(location) + "</p>" : '') + "\n\t\t\t\t\t</a>\n\t\t\t\t</div>\n\t\t\t\t" + (description ? "<div class=\"gravatar-hovercard__body\">\n\t\t\t\t\t\t\t\t<p class=\"gravatar-hovercard__description\">" + escHtml(description) + "</p>\n\t\t\t\t\t\t\t</div>" : '') + "\n\t\t\t\t<div class=\"gravatar-hovercard__social-links\">\n\t\t\t\t\t<a class=\"gravatar-hovercard__social-link\" href=\"" + trackedProfileUrl + "\" target=\"_blank\" data-service-name=\"gravatar\">\n\t\t\t\t\t\t<img class=\"gravatar-hovercard__social-icon\" src=\"https://s.gravatar.com/icons/gravatar.svg\" width=\"32\" height=\"32\" alt=\"Gravatar\" />\n\t\t\t\t\t</a>\n\t\t\t\t\t" + renderSocialLinks + "\n\t\t\t\t</div>\n\t\t\t\t" + ctaButtons + "\n\t\t\t\t<div class=\"gravatar-hovercard__footer\">\n\t\t\t\t\t<a class=\"gravatar-hovercard__profile-url\" title=\"" + profileUrl + "\" href=\"" + trackedProfileUrl + "\" target=\"_blank\">\n\t\t\t\t\t\t" + profileUrl.replace('https://', '') + "\n\t\t\t\t\t</a>\n\t\t\t\t\t<a\n\t\t\t\t\t\tclass=\"gravatar-hovercard__profile-link" + (isEditProfile ? ' gravatar-hovercard__profile-link--edit' : '') + "\"\n\t\t\t\t\t\thref=\"" + (isEditProfile ? 'https://gravatar.com/profiles/edit?utm_source=hovercard' : trackedProfileUrl) + "\"\n\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\t>\n\t\t\t\t\t\t" + (isEditProfile ? __t(i18n, 'Edit your profile →') : __t(i18n, 'View profile →')) + "\n\t\t\t\t\t</a>\n\t\t\t\t</div>\n\t\t\t\t" + contactsDrawer + "\n\t\t\t\t" + sendMoneyDrawer + "\n\t\t\t\t" + (backgroundColor ? '<div class="gravatar-hovercard__profile-color"></div>' : '') + "\n\t\t\t</div>\n\t\t";
  var hovercardInner = hovercard.querySelector('.gravatar-hovercard__inner');
  var headerImageEl = hovercardInner.querySelector('.gravatar-hovercard__header-image');
  var profileColorEl = hovercardInner.querySelector('.gravatar-hovercard__profile-color');
  if (headerImage && headerImageEl) {
    headerImageEl.style.background = headerImage;
  }
  if (backgroundColor && profileColorEl) {
    profileColorEl.style.background = backgroundColor;
  }
  hovercardInner.querySelectorAll('.gravatar-hovercard__button').forEach(function (el) {
    el.addEventListener('click', function () {
      return _Hovercards._openDrawer(el, hovercardInner);
    });
  });
  hovercardInner.querySelectorAll('.gravatar-hovercard__drawer-close').forEach(function (el) {
    el.addEventListener('click', function () {
      return _Hovercards._closeDrawer(el, hovercardInner);
    });
  });
  hovercardInner.querySelectorAll('.gravatar-hovercard__drawer-backdrop').forEach(function (el) {
    el.addEventListener('click', function () {
      return _Hovercards._closeDrawer(el, hovercardInner);
    });
  });
  return hovercard;
};
Hovercards.createHovercardSkeleton = function (_temp5) {
  var _ref11 = _temp5 === void 0 ? {} : _temp5,
    additionalClass = _ref11.additionalClass;
  var hovercard = dc.createElement('div');
  hovercard.className = "gravatar-hovercard gravatar-hovercard--skeleton" + (additionalClass ? " " + additionalClass : '');
  hovercard.innerHTML = "\n\t\t\t<div class=\"gravatar-hovercard__inner\">\n\t\t\t\t<div class=\"gravatar-hovercard__header\">\n\t\t\t\t\t<div class=\"gravatar-hovercard__avatar-link\"></div>\n\t\t\t\t\t<div class=\"gravatar-hovercard__personal-info-link\"></div>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"gravatar-hovercard__social-links\">\n\t\t\t\t\t<div class=\"gravatar-hovercard__social-link\"></div>\n\t\t\t\t\t<div class=\"gravatar-hovercard__social-link\"></div>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"gravatar-hovercard__footer\">\n\t\t\t\t\t<div class=\"gravatar-hovercard__profile-url\"></div>\n\t\t\t\t\t<div class=\"gravatar-hovercard__profile-link\"></div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t";
  return hovercard;
};
/**
 * Creates an error hovercard element.
 *
 * @param {string} avatarUrl                   - The URL of the avatar image.
 * @param {string} message                     - The error message to display.
 * @param {Object} [options]                   - Optional parameters for the error hovercard.
 * @param {string} [options.avatarAlt]         - The alt text for the avatar image.
 * @param {string} [options.additionalClass]   - Additional CSS class for the error hovercard.
 * @param {string} [options.additionalMessage] - Additional message to display in the error hovercard.
 * @return {HTMLDivElement}                    - The created error hovercard element.
 */
Hovercards.createHovercardError = function (avatarUrl, message, _temp6) {
  var _ref12 = _temp6 === void 0 ? {} : _temp6,
    _ref12$avatarAlt = _ref12.avatarAlt,
    avatarAlt = _ref12$avatarAlt === void 0 ? 'Avatar' : _ref12$avatarAlt,
    additionalClass = _ref12.additionalClass,
    _ref12$additionalMess = _ref12.additionalMessage,
    additionalMessage = _ref12$additionalMess === void 0 ? '' : _ref12$additionalMess;
  var hovercard = dc.createElement('div');
  hovercard.className = "gravatar-hovercard gravatar-hovercard--error" + (additionalClass ? " " + additionalClass : '');
  hovercard.innerHTML = "\n\t\t\t<div class=\"gravatar-hovercard__inner\">\n\t\t\t\t<img class=\"gravatar-hovercard__avatar\" src=\"" + avatarUrl + "\" width=\"104\" height=\"104\" alt=\"" + avatarAlt + "\" />\n\t\t\t\t<div class=\"gravatar-hovercard__error-message-wrapper\">\n\t\t\t\t\t<i class=\"gravatar-hovercard__error-message\">" + message + "</i>\n\t\t\t\t\t" + additionalMessage + "\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t";
  return hovercard;
};

;// CONCATENATED MODULE: ./src/use-hovercards.ts



function useHovercards(_temp) {
  var _ref = _temp === void 0 ? {} : _temp,
    placement = _ref.placement,
    offset = _ref.offset,
    autoFlip = _ref.autoFlip,
    autoShift = _ref.autoShift,
    hideOnTargetClick = _ref.hideOnTargetClick,
    delayToShow = _ref.delayToShow,
    delayToHide = _ref.delayToHide,
    additionalClass = _ref.additionalClass,
    myHash = _ref.myHash,
    i18n = _ref.i18n,
    onQueryHovercardRef = _ref.onQueryHovercardRef,
    onFetchProfileStart = _ref.onFetchProfileStart,
    onFetchProfileSuccess = _ref.onFetchProfileSuccess,
    onFetchProfileFailure = _ref.onFetchProfileFailure,
    onHovercardShown = _ref.onHovercardShown,
    onHovercardHidden = _ref.onHovercardHidden,
    onCanShowHovercard = _ref.onCanShowHovercard;
  // These callbacks / variables won't trigger hooks update and will always be the latest
  var onQueryHovercardRefRef = use_latest(onQueryHovercardRef);
  var onFetchProfileStartRef = use_latest(onFetchProfileStart);
  var onFetchProfileSuccessRef = use_latest(onFetchProfileSuccess);
  var onFetchProfileFailureRef = use_latest(onFetchProfileFailure);
  var onHovercardShownRef = use_latest(onHovercardShown);
  var onHovercardHiddenRef = use_latest(onHovercardHidden);
  var onCanShowHovercardRef = use_latest(onCanShowHovercard);
  var i18nRef = use_latest(i18n);
  // Instantiate the Hovercards class only when the options change
  var _useMemo = (0,external_react_.useMemo)(function () {
      return new Hovercards({
        placement: placement,
        offset: offset,
        autoFlip: autoFlip,
        autoShift: autoShift,
        hideOnTargetClick: hideOnTargetClick,
        delayToShow: delayToShow,
        delayToHide: delayToHide,
        additionalClass: additionalClass,
        myHash: myHash,
        i18n: i18nRef.current,
        onQueryHovercardRef: onQueryHovercardRefRef.current,
        onFetchProfileStart: onFetchProfileStartRef.current,
        onFetchProfileSuccess: onFetchProfileSuccessRef.current,
        onFetchProfileFailure: onFetchProfileFailureRef.current,
        onHovercardShown: onHovercardShownRef.current,
        onHovercardHidden: onHovercardHiddenRef.current,
        onCanShowHovercard: onCanShowHovercardRef.current
      });
    }, [placement, offset, autoFlip, autoShift, hideOnTargetClick, delayToShow, delayToHide, additionalClass, myHash, i18nRef, onQueryHovercardRefRef, onFetchProfileStartRef, onFetchProfileSuccessRef, onFetchProfileFailureRef, onHovercardShownRef, onHovercardHiddenRef, onCanShowHovercardRef]),
    attach = _useMemo.attach,
    detach = _useMemo.detach;
  (0,external_react_.useEffect)(function () {
    return detach;
  }, [detach]);
  return {
    attach: attach,
    detach: detach,
    createHovercard: Hovercards.createHovercard,
    createHovercardSkeleton: Hovercards.createHovercardSkeleton,
    createHovercardError: Hovercards.createHovercardError
  };
}
// EXTERNAL MODULE: ../../../node_modules/react/jsx-runtime.js
var jsx_runtime = __webpack_require__(867);
;// CONCATENATED MODULE: ./src/hovercards.tsx
var _excluded = ["children", "attach", "dataAttributeName", "ignoreSelector", "className", "style"];
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }




function hovercards_Hovercards(_temp) {
  var _ref = _temp === void 0 ? {} : _temp,
    children = _ref.children,
    attach = _ref.attach,
    dataAttributeName = _ref.dataAttributeName,
    ignoreSelector = _ref.ignoreSelector,
    className = _ref.className,
    style = _ref.style,