'use strict';

var jsxRuntime = require('react/jsx-runtime');

/**
 * Depending on avatar size, notifcation dot size and offset are different
 */
const MAP_STYLE_CONFIG = {
  16: {
    size: 6,
    offset: 1
  },
  24: {
    size: 8,
    offset: 2
  },
  32: {
    size: 10,
    offset: 2
  },
  40: {
    size: 10,
    offset: 2
  },
  48: {
    size: 14,
    offset: 2
  },
  56: {
    size: 16,
    offset: 3
  },
  72: {
    size: 20,
    offset: 3
  }
};
function NotificationDot({
  children,
  avatarSize = 48
}) {
  return /*#__PURE__*/jsxRuntime.jsxs("div", {
    className: "np-notification-dot",
    style: {
      // @ts-expect-error CSS custom props allowed
      '--np-notification-dot-size': `${MAP_STYLE_CONFIG[avatarSize].size}px`,
      '--np-notification-dot-offset': `${MAP_STYLE_CONFIG[avatarSize].offset}px`
    },
    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
      className: "np-notification-dot-badge"
    }), /*#__PURE__*/jsxRuntime.jsx("div", {
      className: "np-notification-dot-mask",
      children: children
    })]
  });
}

module.exports = NotificationDot;
//# sourceMappingURL=NotificationDot.js.map
