import clsx from 'clsx';
import { Paragraph } from '../Paragraph';
const styleMap = {
    success: clsx('border-success before:bg-success'),
    warning: clsx('border-warning before:bg-warning'),
    error: clsx('border-error before:bg-error'),
    info: clsx('border-info before:bg-info'),
    progress: clsx('border-lavender before:bg-lavender'),
    disabled: clsx('border-gray-1 before:bg-gray-1'),
};
/**
 * Badge component used for indicating different statuses.
 *
 * @component
 * @example
 * // Example usage of Badge component
 * <Badge modifier="success">Success</Badge>
 *
 * @param {Object} props - The properties of the Badge component.
 * @param {'success' | 'warning' | 'error' | 'info'} props.modifier - The modifier to determine the badge style.
 * @param {ReactNode} props.children - The content to be displayed inside the badge.
 *
 * @returns {ReactNode} The rendered Badge component.
 */
export function Badge({ modifier, children, ...restProps }) {
    const className = clsx('relative inline-block rounded-full border py-1 pr-2 pl-6', 'before:absolute before:start-3 before:top-[50%] before:-mt-1 before:block before:h-[6px] before:w-[6px] before:rounded-full', styleMap[modifier], restProps.className);
    return (<span {...restProps} className={className}>
      <Paragraph size="chips" className="text-nowrap">
        {children}
      </Paragraph>
    </span>);
}
//# sourceMappingURL=Badge.jsx.map