@smart-react-components/ui/components/WaveEffect/WaveEffectElement.js

SRC UI includes React and Styled components.

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const Div_1 = __importDefault(require("@smart-react-components/core/Element/Div"));
const styled_components_1 = __importDefault(require("styled-components"));
exports.default = (0, styled_components_1.default)(Div_1.default)(({ duration, left, palette, scale, theme, top }) => `
  background: ${theme.$.palette[palette].waveEffect};
  border-radius: 50%;
  height: 100px;
  left: ${left}px;
  margin: -50px 0 0 -50px;
  opacity: .75;
  pointer-events: none;
  position: absolute;
  transform: scale(${scale});
  top: ${top}px;
  width: 100px;

  &.src-wave-effect-show {
    opacity: 0;
    transform: scale(0);
  }

  &.src-wave-effect-show-active {
    opacity: .75;
    transform: scale(${scale});  
  }

  &.src-wave-effect-hide-active {
    opacity: 0;
  }

  &.src-wave-effect-show-active,
  &.src-wave-effect-hide-active {
    transition: ease-out ${duration}ms;
    transition-property: opacity, transform;
  }
`);