'use strict';

var React = require('react');
var clsx = require('clsx');
var useMedia = require('../hooks/useMedia.js');
var breakpoint = require('../propsValues/breakpoint.js');
var jsxRuntime = require('react/jsx-runtime');

const MAP_ICON_SIZE = {
  16: 12,
  24: 16,
  32: 18,
  40: 20,
  48: 24,
  56: 28,
  72: 36
};
const Circle = /*#__PURE__*/React.forwardRef(function Circle({
  as: Element = 'div',
  children,
  size = 48,
  fixedSize = false,
  className,
  style,
  ...props
}, ref) {
  const isTinyViewport = useMedia.useMedia(`(max-width: ${breakpoint.Breakpoint.ZOOM_400}px)`);
  return /*#__PURE__*/jsxRuntime.jsx(Element, {
    ...props,
    ref: ref,
    style: {
      '--circle-size': fixedSize ? `${size}px` : `var(--size-${size})`,
      '--circle-icon-size': isTinyViewport && !fixedSize ? `${MAP_ICON_SIZE[size] / 2}px` : `${MAP_ICON_SIZE[size]}px`,
      ...style
    },
    className: clsx.clsx('np-circle', 'd-flex align-items-center justify-content-center', className),
    children: children
  });
});

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