@geezee/react-ui/esm/modal/modal-wrapper.js

Modern and minimalist React UI library.

import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _JSXStyle from "styled-jsx/style";
import React from 'react';
import withDefaults from '../utils/with-defaults';
import useTheme from '../styles/use-theme';
import CSSTransition from '../shared/css-transition';
var defaultProps = {
  className: '',
  visible: false
};

var ModalWrapper = function ModalWrapper(_ref) {
  var className = _ref.className,
      width = _ref.width,
      children = _ref.children,
      visible = _ref.visible,
      props = _objectWithoutProperties(_ref, ["className", "width", "children", "visible"]);

  var theme = useTheme();
  return /*#__PURE__*/React.createElement(CSSTransition, {
    name: "wrapper",
    visible: visible,
    clearTime: 300
  }, /*#__PURE__*/React.createElement("div", _extends({}, props, {
    className: _JSXStyle.dynamic([["1175900700", [width, theme.palette.background, theme.palette.foreground, theme.expressiveness.R2, theme.layout.gap, theme.expressiveness.shadowLarge]]]) + " " + (props && props.className != null && props.className || "wrapper ".concat(className))
  }), children, /*#__PURE__*/React.createElement(_JSXStyle, {
    id: "1175900700",
    dynamic: [width, theme.palette.background, theme.palette.foreground, theme.expressiveness.R2, theme.layout.gap, theme.expressiveness.shadowLarge]
  }, ".wrapper.__jsx-style-dynamic-selector{max-width:85vw;max-height:75vh;width:".concat(width, ";overflow:hidden;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;position:relative;box-sizing:border-box;background-color:").concat(theme.palette.background, ";color:").concat(theme.palette.foreground, ";border-radius:").concat(theme.expressiveness.R2, ";padding:").concat(theme.layout.gap, ";box-shadow:").concat(theme.expressiveness.shadowLarge, ";opacity:0;-webkit-transform:translate3d(0px,-40px,0px);-ms-transform:translate3d(0px,-40px,0px);transform:translate3d(0px,-40px,0px);-webkit-transition:opacity 0.35s cubic-bezier(0.4,0,0.2,1) 0s, -webkit-transform 0.35s cubic-bezier(0.4,0,0.2,1) 0s;-webkit-transition:opacity 0.35s cubic-bezier(0.4,0,0.2,1) 0s, transform 0.35s cubic-bezier(0.4,0,0.2,1) 0s;transition:opacity 0.35s cubic-bezier(0.4,0,0.2,1) 0s, transform 0.35s cubic-bezier(0.4,0,0.2,1) 0s;}.wrapper-enter.__jsx-style-dynamic-selector{opacity:0;-webkit-transform:translate3d(0px,-40px,0px);-ms-transform:translate3d(0px,-40px,0px);transform:translate3d(0px,-40px,0px);}.wrapper-enter-active.__jsx-style-dynamic-selector{opacity:1;-webkit-transform:translate3d(0px,0px,0px);-ms-transform:translate3d(0px,0px,0px);transform:translate3d(0px,0px,0px);}.wrapper-leave.__jsx-style-dynamic-selector{opacity:1;-webkit-transform:translate3d(0px,0px,0px);-ms-transform:translate3d(0px,0px,0px);transform:translate3d(0px,0px,0px);}.wrapper-leave-active.__jsx-style-dynamic-selector{opacity:0;-webkit-transform:translate3d(0px,-50px,0px);-ms-transform:translate3d(0px,-50px,0px);transform:translate3d(0px,-50px,0px);}"))));
};

export default withDefaults(ModalWrapper, defaultProps);