import React from 'react';
import classnames from 'classnames';
import { jsx as _jsx } from "react/jsx-runtime";
export let COUNTER_TYPES = /*#__PURE__*/function (COUNTER_TYPES) {
  COUNTER_TYPES["SUCCESS"] = "success";
  COUNTER_TYPES["WARNING"] = "warning";
  COUNTER_TYPES["ERROR"] = "error";
  COUNTER_TYPES["INFO"] = "info";
  COUNTER_TYPES["PLAIN"] = "plain";
  COUNTER_TYPES["DARK"] = "dark";
  COUNTER_TYPES["PINK"] = "pink";
  COUNTER_TYPES["TURQUOISE"] = "turquoise";
  COUNTER_TYPES["PURPLE"] = "purple";
  COUNTER_TYPES["BLUE"] = "blue";
  COUNTER_TYPES["ORANGE"] = "orange";
  COUNTER_TYPES["APPLE"] = "apple";
  return COUNTER_TYPES;
}({});
/**
 * Counter is used to indicate amount of entities somewhere
 * @uxr-only-supported
 * @midnight-gray-supported
 * @alpine-light-supported
 * */
export function Counter({
  children,
  className,
  testId,
  type = COUNTER_TYPES.DARK,
  outline = false
}) {
  return /*#__PURE__*/_jsx("span", {
    className: classnames('counter', type, {
      outlined: outline
    }, className),
    "test-id": testId,
    children: children
  });
}