import { clsx } from 'clsx';
import { Breakpoint } from '@transferwise/neptune-tokens';
import Body from '../body/Body.mjs';
import '../common/theme.mjs';
import '../common/direction.mjs';
import { Priority } from '../common/propsValues/control.mjs';
import '../common/propsValues/size.mjs';
import { Typography } from '../common/propsValues/typography.mjs';
import '../common/propsValues/width.mjs';
import '../common/propsValues/type.mjs';
import '../common/propsValues/dateMode.mjs';
import '../common/propsValues/monthFormat.mjs';
import '../common/propsValues/position.mjs';
import '../common/propsValues/layouts.mjs';
import '../common/propsValues/status.mjs';
import '../common/propsValues/sentiment.mjs';
import '../common/propsValues/profileType.mjs';
import '../common/propsValues/variant.mjs';
import '../common/propsValues/scroll.mjs';
import '../common/propsValues/markdownNodeType.mjs';
import '../common/fileType.mjs';
import '@transferwise/formatting';
import '@transferwise/icons';
import 'react';
import 'react-intl';
import '../common/closeButton/CloseButton.messages.mjs';
import { jsxs, jsx } from 'react/jsx-runtime';
import IconButton from '../iconButton/IconButton.mjs';
import { useMedia } from '../common/hooks/useMedia.mjs';

const CircularButton = ({
  className,
  children,
  disabled,
  icon,
  onClick,
  priority = Priority.PRIMARY,
  type = 'default'
}) => {
  const isTinyViewport = useMedia(`(max-width: ${Breakpoint.EXTRA_SMALL}px)`);
  return /*#__PURE__*/jsxs("label", {
    className: clsx('np-circular-btn', `np-circular-btn-${priority}-${type}`, {
      'np-circular-btn-disabled': disabled
    }, className),
    children: [/*#__PURE__*/jsx(IconButton, {
      size: isTinyViewport ? 32 : 56,
      priority: priority,
      type: ['accent', 'positive'].includes(type) ? 'default' : type,
      className: clsx('m-b-1'),
      disabled: disabled,
      onClick: onClick,
      children: icon
    }), /*#__PURE__*/jsx(Body, {
      as: "span",
      className: clsx('np-circular-btn-label', {
        disabled
      }),
      type: Typography.BODY_DEFAULT_BOLD,
      children: children
    })]
  });
};

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