'use strict';

var clsx = require('clsx');
var React = require('react');
var Body = require('../body/Body.js');
var classMap = require('../button/classMap.js');
var Circle = require('../common/circle/Circle.js');
var useMedia = require('../common/hooks/useMedia.js');
var jsxRuntime = require('react/jsx-runtime');
var breakpoint = require('../common/propsValues/breakpoint.js');
var typography = require('../common/propsValues/typography.js');
var control = require('../common/propsValues/control.js');

const CircularButton = ({
  className,
  children,
  disabled,
  icon,
  priority = control.Priority.PRIMARY,
  type = control.ControlType.ACCENT,
  ...rest
}) => {
  const classes = clsx.clsx('btn np-btn', 'm-b-1', classMap.typeClassMap[type], classMap.priorityClassMap[priority]);
  const iconElement = Number(icon.props.size) !== 24 ? /*#__PURE__*/React.cloneElement(icon, {
    size: 24
  }) : icon;
  const isTinyViewport = useMedia.useMedia(`(max-width: ${breakpoint.Breakpoint.ZOOM_400}px)`);
  return /*#__PURE__*/jsxRuntime.jsxs("label", {
    className: clsx.clsx('np-circular-btn', priority, type, disabled && 'disabled', className),
    children: [/*#__PURE__*/jsxRuntime.jsx(Circle, {
      as: "input"
      // @ts-expect-error it's input[type=button] element
      ,
      type: "button",
      size: isTinyViewport ? 64 : 56,
      "aria-label": children,
      className: classes,
      disabled: disabled,
      ...rest
    }), iconElement, /*#__PURE__*/jsxRuntime.jsx(Body, {
      as: "span",
      className: "np-circular-btn__label",
      type: typography.Typography.BODY_DEFAULT_BOLD,
      children: children
    })]
  });
};

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