import clsx from 'clsx';
const styleMap = {
    principal: clsx('text-white not-disabled:hover:text-black not-disabled:active:text-black disabled:text-white [&:not(:disabled):not(:hover)]:focus:text-white', 'disabled:before:bg-gray-3 not-disabled:active:before:bg-gray-6 before:bg-black not-disabled:hover:before:bg-white [&:not(:disabled):not(:hover)]:focus:before:bg-black', 'disabled:after:bg-gray-3 [&:not(:disabled):not(:hover)]:focus:after:bg-clicoh not-disabled:hover:after:bg-clicoh not-disabled:active:after:bg-clicoh after:bg-black', 'dark:not-disabled:active:text-gray-6 dark:text-black dark:not-disabled:hover:text-white dark:disabled:text-white dark:[&:not(:disabled):not(:hover)]:focus:text-black', 'dark:disabled:before:bg-gray-1 dark:[&:not(:disabled):not(:hover)]:focus:before:bg-gray-5 dark:before:bg-white dark:not-disabled:hover:before:bg-black dark:not-disabled:active:before:bg-black', 'dark:disabled:after:bg-gray-1 dark:[&:not(:disabled):not(:hover)]:focus:after:bg-gray-5 dark:not-disabled:hover:after:bg-clicoh dark:not-disabled:active:after:bg-clicoh dark:after:bg-white'),
    second: clsx('text-gray-1 disabled:text-gray-3 [&:not(:disabled):not(:hover)]:focus:text-gray-1 not-disabled:active:text-gray-5 not-disabled:hover:text-white', 'disable:before:bg-white [&:not(:disabled):not(:hover)]:focus:before:bg-gray-6 before:bg-white not-disabled:hover:before:bg-black not-disabled:active:before:bg-black', 'after:bg-gray-1 disabled:after:bg-gray-3 [&:not(:disabled):not(:hover)]:focus:after:bg-gray-1 not-disabled:hover:after:bg-black not-disabled:active:after:bg-black', 'dark:disabled:text-gray-2 dark:[&:not(:disabled):not(:hover)]:focus:text-gray-5 dark:text-white dark:not-disabled:hover:text-black dark:not-disabled:active:text-black', 'dark:disable:before:bg-white dark:not-disabled:active:before:bg-gray-6 dark:before:bg-black dark:not-disabled:hover:before:bg-white dark:[&:not(:disabled):not(:hover)]:focus:before:bg-black', 'dark:disabled:after:bg-gray-2 dark:[&:not(:disabled):not(:hover)]:focus:after:bg-gray-5 dark:not-disabled:active:after:bg-gray-6 dark:after:bg-white dark:not-disabled:hover:after:bg-white'),
    text: clsx('underline', 'text-black', 'disabled:text-gray-3', 'active:text-gray-1', 'not-disabled:hover:before:bg-gray-5', 'not-disabled:hover:after:bg-gray-5', 'dark:active:text-gray-7 dark:disabled:text-gray-1 dark:text-white', 'dark:not-disabled:hover:before:bg-gray-1', 'dark:not-disabled:hover:after:bg-gray-1'),
    action: clsx('disabled:text-gray-3 not-disabled:active:text-gray-5 text-black not-disabled:hover:text-white [&:not(:disabled):not(:hover)]:focus:text-black', '[&:not(:disabled):not(:hover)]:focus:before:bg-gray-5 before:bg-white not-disabled:hover:before:bg-black not-disabled:active:before:bg-black disabled:before:bg-white', 'after:bg-clicoh disabled:after:bg-gray-3 not-disabled:hover:after:bg-black not-disabled:hover:after:bg-none not-disabled:active:after:bg-black not-disabled:active:after:bg-none disabled:after:bg-none', 'dark:disabled:text-gray-2 dark:[&:not(:disabled):not(:hover)]:focus:text-gray-5 dark:text-white dark:not-disabled:hover:text-black dark:not-disabled:active:text-black', 'dark:not-disabled:active:before:bg-gray-5 dark:before:bg-black dark:not-disabled:hover:before:bg-white dark:disabled:before:bg-black dark:[&:not(:disabled):not(:hover)]:focus:before:bg-black', 'dark:after:bg-clicoh dark:disabled:after:bg-gray-2 dark:not-disabled:active:after:bg-gray-5 dark:not-disabled:hover:after:bg-white dark:not-disabled:hover:after:bg-none dark:not-disabled:active:after:bg-none dark:disabled:after:bg-none'),
};
/**
 * Represents a button component with different modifiers.
 *
 * @component
 * @example
 * // Example usage of Button component
 * <Button iconL={<FiArrowRight />} onClick={() => console.log("Button clicked")}>Click me</Button>
 *
 * @param {Object} props - The properties of the Button component.
 * @param {'principal' | 'second' | 'text' | 'action'} [props.modifier='principal'] - The modifier for styling the button.
 * @param {ReactNode} [props.iconL] - The icon to be displayed to the left of the button text.
 * @param {ReactNode} [props.iconR] - The icon to be displayed to the right of the button text.
 * @param {ReactNode} props.children - The content to be displayed inside the button.
 * @param {ButtonHTMLAttributes<HTMLButtonElement>} restProps - Additional properties for the button element.
 *
 * @returns {ReactNode} The rendered Button component.
 */
export function Button({ modifier = 'principal', iconL, iconR, children, ...restProps }) {
    const className = clsx('relative flex items-center justify-center py-[10px] text-center text-sm font-semibold', 'rounded-3xl border-2 border-transparent transition-colors', 'before:absolute before:inset-0 before:-z-10 before:block before:rounded-3xl before:transition-colors', 'after:absolute after:-inset-[2px] after:-z-20 after:block after:rounded-3xl after:transition-colors', iconL ? 'pl-4' : 'pl-6', iconR ? 'pr-4' : 'pr-6', styleMap[modifier], restProps.className);
    return (<button {...restProps} className={className}>
      {!!iconL && <span className="pr-2 text-base">{iconL}</span>}
      <span>{children}</span>
      {!!iconR && <span className="pl-2 text-base">{iconR}</span>}
    </button>);
}
//# sourceMappingURL=Button.jsx.map