import { jsx as _jsx } from "react/jsx-runtime";
import { cn } from "#scalars";
import { FormMessage } from "./form-message.js";
export const FormMessageList = ({ messages, type = "info", className, ...props }) => {
    if (messages.length === 0) {
        return null;
    }
    if (messages.length === 1) {
        return (_jsx(FormMessage, { type: type, ...props, children: messages[0] }));
    }
    const typeClasses = {
        error: "before:bg-red-900 dark:before:bg-red-900",
        info: "before:bg-blue-900 dark:before:bg-blue-900",
        warning: "before:bg-orange-900 dark:before:bg-orange-900",
    };
    return (_jsx("ul", { className: cn("flex flex-col gap-1", className), ...props, children: messages.map((message) => (_jsx(FormMessage, { as: "li", type: type, className: cn(
            // Layout
            "relative pl-4", 
            // Visual styles
            "before:absolute before:left-0 before:top-[0.4em] before:size-2 before:rounded-full", typeClasses[type]), children: message }, message))) }));
};
//# sourceMappingURL=message-list.js.map