'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

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
};
/**
 * circle like components have custom typography styles for for default (Inter) font
 *
 * circle size : font size (px)
 */
const MAP_FONT_SIZE = {
  16: 8,
  24: 12,
  32: 14,
  40: 18,
  48: 22,
  56: 26,
  72: 30
};
const Circle = /*#__PURE__*/React.forwardRef(function Circle({
  as: Element = 'div',
  children,
  size = 48,
  fixedSize = false,
  enableBorder = 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`,
      '--circle-font-size': `${MAP_FONT_SIZE[size]}px`,
      ...style
    },
    className: clsx.clsx('np-circle', {
      'np-circle-border': enableBorder
    }, 'd-flex align-items-center justify-content-center', className),
    children: children
  });
});

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