sparkl-ui/esm/modal/modal-exit.js

Modern and minimalist React UI library.

import _JSXStyle from "../styled-jsx.es.js";
import React from 'react';
import CssTransition from '../shared/css-transition';
import useTheme from '../use-theme';

var X = function X() {
  var theme = useTheme();
  return /*#__PURE__*/React.createElement("svg", {
    viewBox: "0 0 24 24",
    strokeWidth: "4",
    strokeLinecap: "round",
    strokeLinejoin: "round",
    fill: "none",
    shapeRendering: "geometricPrecision",
    className: _JSXStyle.dynamic([["3674282193", [theme.palette.background]]])
  }, /*#__PURE__*/React.createElement("path", {
    d: "M18 6L6 18M6 6l12 12",
    className: _JSXStyle.dynamic([["3674282193", [theme.palette.background]]])
  }), /*#__PURE__*/React.createElement(_JSXStyle, {
    id: "3674282193",
    dynamic: [theme.palette.background]
  }, "svg.__jsx-style-dynamic-selector{color:inherit;stroke:".concat(theme.palette.background, ";-webkit-transition:all 200ms ease;transition:all 200ms ease;width:1.214em;height:1.214em;padding-x:0.5em;cursor:pointer;}")));
};

export var ModalExit = function ModalExit(_ref) {
  var onClick = _ref.onClick,
      visible = _ref.visible;
  return /*#__PURE__*/React.createElement(CssTransition, {
    visible: visible,
    clearTime: 300
  }, /*#__PURE__*/React.createElement("div", {
    onClick: onClick,
    style: {
      padding: '.38rem'
    },
    className: "jsx-3700450091" + " " + "exit"
  }, /*#__PURE__*/React.createElement(X, null), /*#__PURE__*/React.createElement(_JSXStyle, {
    id: "3700450091"
  }, ".exit.jsx-3700450091{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;width:100%;}.exit-enter.jsx-3700450091{opacity:0;-webkit-transform:translate3d(0px,-30px,0px);-ms-transform:translate3d(0px,-30px,0px);transform:translate3d(0px,-30px,0px);}.exit-enter-active.jsx-3700450091{opacity:1;-webkit-transform:translate3d(0px,0px,0px);-ms-transform:translate3d(0px,0px,0px);transform:translate3d(0px,0px,0px);}.exit-leave.jsx-3700450091{opacity:1;-webkit-transform:translate3d(0px,0px,0px);-ms-transform:translate3d(0px,0px,0px);transform:translate3d(0px,0px,0px);}.exit-leave-active.jsx-3700450091{opacity:0;-webkit-transform:translate3d(0px,-30px,0px);-ms-transform:translate3d(0px,-30px,0px);transform:translate3d(0px,-30px,0px);}")));
};