'use strict';

var React = require('react');
var framerMotion = require('framer-motion');
var Text = require('./Text-cjs.js');
var Icon = require('./Icon-cjs.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.createElement(React.Fragment, null, messages && messages.length > 0 && (React.createElement(framerMotion.AnimatePresence, { mode: "wait" }, messages.map(msg => (React.createElement(framerMotion.motion.div, { key: `validation-${msg}`, variants: variants, initial: "slideOut", animate: "slideIn", exit: "slideOut", transition: { duration: 0.2 } },
        React.createElement("div", { className: styles.message, "aria-live": "assertive", role: "alert", tabIndex: 0 },
            React.createElement(Icon.Icon, { name: "alert", size: "small", color: "critical" }),
            React.createElement(Text.Text, { size: "small", variation: "error" }, msg)))))))));
}

exports.InputValidation = InputValidation;
