import { clsx } from 'clsx';
import { cloneElement } from 'react';
import Body from '../body/Body.mjs';
import { typeClassMap, priorityClassMap } from '../button/classMap.mjs';
import Circle from '../common/circle/Circle.mjs';
import { useMedia } from '../common/hooks/useMedia.mjs';
import { jsxs, jsx } from 'react/jsx-runtime';
import { Breakpoint } from '../common/propsValues/breakpoint.mjs';
import { Typography } from '../common/propsValues/typography.mjs';
import { Priority, ControlType } from '../common/propsValues/control.mjs';

const CircularButton = ({
  className,
  children,
  disabled,
  icon,
  priority = Priority.PRIMARY,
  type = ControlType.ACCENT,
  ...rest
}) => {
  const classes = clsx('btn np-btn', 'm-b-1', typeClassMap[type], priorityClassMap[priority]);
  const iconElement = Number(icon.props.size) !== 24 ? /*#__PURE__*/cloneElement(icon, {
    size: 24
  }) : icon;
  const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);
  return /*#__PURE__*/jsxs("label", {
    className: clsx('np-circular-btn', priority, type, disabled && 'disabled', className),
    children: [/*#__PURE__*/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__*/jsx(Body, {
      as: "span",
      className: "np-circular-btn__label",
      type: Typography.BODY_DEFAULT_BOLD,
      children: children
    })]
  });
};

export { CircularButton as default };
//# sourceMappingURL=CircularButton.mjs.map
