import _JSXStyle from "styled-jsx/style";
// Generated with util/create-component.js
import React from "react";
import classnames from "classnames";
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
export const Animated = props => {
  const {
    animation = "fadeInScale",
    duration = 500,
    transition = "ease-in-out",
    visible = true,
    children,
    className,
    ...otherProps
  } = props;
  return /*#__PURE__*/_jsxs("div", {
    "data-testid": "Wps-Animated",
    ...otherProps,
    className: _JSXStyle.dynamic([["134489512", [duration, transition, duration, transition]]]) + " " + (otherProps && otherProps.className != null && otherProps.className || classnames("Wps-Animated", animation, visible ? "visible" : "hidden", className) || ""),
    children: [/*#__PURE__*/_jsx(_JSXStyle, {
      id: "134489512",
      dynamic: [duration, transition, duration, transition],
      children: `.Wps-Animated.__jsx-style-dynamic-selector{visibility:hidden;-webkit-transition:all ${duration}ms ${transition};transition:all ${duration}ms ${transition};}.Wps-Animated.visible.__jsx-style-dynamic-selector{visibility:visible;}.Wps-Animated.hidden.__jsx-style-dynamic-selector{visibility:hidden;}.Wps-Animated.opacity.hidden.__jsx-style-dynamic-selector{opacity:0;}.Wps-Animated.opacity.visible.__jsx-style-dynamic-selector{opacity:1;}.Wps-Animated.rotate.__jsx-style-dynamic-selector{-webkit-animation:Wps-Animated-rotate-__jsx-style-dynamic-selector ${duration}ms ${transition} infinite;animation:Wps-Animated-rotate-__jsx-style-dynamic-selector ${duration}ms ${transition} infinite;}@-webkit-keyframes Wps-Animated-rotate-__jsx-style-dynamic-selector{from{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}to{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}@keyframes Wps-Animated-rotate-__jsx-style-dynamic-selector{from{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}to{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}.Wps-Animated.scale.hidden.__jsx-style-dynamic-selector{-webkit-transform:scale(0.7);-ms-transform:scale(0.7);transform:scale(0.7);}.Wps-Animated.scale.visible.__jsx-style-dynamic-selector{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}.Wps-Animated.fadeIn.hidden.__jsx-style-dynamic-selector{opacity:0;}.Wps-Animated.fadeIn.visible.__jsx-style-dynamic-selector{opacity:1;}.Wps-Animated.fadeInScale.hidden.__jsx-style-dynamic-selector{-webkit-transform:scale(0.7);-ms-transform:scale(0.7);transform:scale(0.7);opacity:0;}.Wps-Animated.fadeInScale.visible.__jsx-style-dynamic-selector{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);opacity:1;}.Wps-Animated.fadeInTop.hidden.__jsx-style-dynamic-selector{opacity:0;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);}.Wps-Animated.fadeInTop.visible.__jsx-style-dynamic-selector{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);}.Wps-Animated.fadeInBottom.hidden.__jsx-style-dynamic-selector{opacity:0;-webkit-transform:translateY(50%);-ms-transform:translateY(50%);transform:translateY(50%);}.Wps-Animated.fadeInBottom.visible.__jsx-style-dynamic-selector{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);}.Wps-Animated.fadeInLeft.hidden.__jsx-style-dynamic-selector{opacity:0;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);}.Wps-Animated.fadeInLeft.visible.__jsx-style-dynamic-selector{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);}.Wps-Animated.fadeInRight.hidden.__jsx-style-dynamic-selector{opacity:0;-webkit-transform:translateX(50%);-ms-transform:translateX(50%);transform:translateX(50%);}.Wps-Animated.fadeInRight.visible.__jsx-style-dynamic-selector{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);}.Wps-Animated.slideInTop.hidden.__jsx-style-dynamic-selector{-webkit-transform:translateY(-100%);-ms-transform:translateY(-100%);transform:translateY(-100%);}.Wps-Animated.slideInTop.visible.__jsx-style-dynamic-selector{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);}.Wps-Animated.slideInBottom.hidden.__jsx-style-dynamic-selector{-webkit-transform:translateY(100%);-ms-transform:translateY(100%);transform:translateY(100%);}.Wps-Animated.slideInBottom.visible.__jsx-style-dynamic-selector{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);}.Wps-Animated.slideInLeft.hidden.__jsx-style-dynamic-selector{-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);}.Wps-Animated.slideInLeft.visible.__jsx-style-dynamic-selector{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);}.Wps-Animated.slideInRight.hidden.__jsx-style-dynamic-selector{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%);}.Wps-Animated.slideInRight.visible.__jsx-style-dynamic-selector{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);}`
    }), children]
  });
};