import React__default from 'react';
import { AnimatePresence, motion } from 'framer-motion';
import { T as Text } from './Text-es.js';
import { I as Icon } from './Icon-es.js';

var styles = {"hasValidationMessage":"fO5j-2U5rfE-","message":"lNpgPQh76MY-","spinning":"G-lkW6-mFUE-"};

function InputValidation({ message, visible = true, }) {
    const messages = [message];
    const variants = {
        slideOut: { y: "5%", opacity: 0 },
        slideIn: { y: 0, opacity: 1 },
    };
    if (!visible)
        return null;
    return (React__default.createElement(React__default.Fragment, null, messages && messages.length > 0 && (React__default.createElement(AnimatePresence, { mode: "wait" }, messages.map(msg => (React__default.createElement(motion.div, { key: `validation-${msg}`, variants: variants, initial: "slideOut", animate: "slideIn", exit: "slideOut", transition: { duration: 0.2 } },
        React__default.createElement("div", { className: styles.message, "aria-live": "assertive", role: "alert", tabIndex: 0 },
            React__default.createElement(Icon, { name: "alert", size: "small", color: "critical" }),
            React__default.createElement(Text, { size: "small", variation: "error" }, msg)))))))));
}

export { InputValidation as I };
