import { objectWithoutProperties as _objectWithoutProperties, extends as _extends, taggedTemplateLiteral as _taggedTemplateLiteral } from '../../../_virtual/_rollupPluginBabelHelpers.js';
import { keyframes, jsx } from '@emotion/core';
import _pt from 'prop-types';
import { ModalContent } from './ModalContent.esm.js';

function _templateObject() {
  var data = _taggedTemplateLiteral(["\n  0% {\n    transform: translate3d", "\n   }\n \n   100% {\n    transform: translate3d(0,0,0);\n   }\n "]);

  _templateObject = function _templateObject() {
    return data;
  };

  return data;
}

var buildTranslation = function buildTranslation(position) {
  return keyframes(_templateObject(), position === "left" ? "(-100%, 0,0)" : "(100%,0,0)");
};

var translateLeft = buildTranslation("left");
var translateRight = buildTranslation("right");

var baseCss = function baseCss(theme) {
  return {
    background: theme.colors.white,
    height: "100vh",
    position: "absolute",
    animationDuration: "0.5s",
    animationFillMode: "forwards",
    animationTimingFunction: "ease"
  };
};

var ModalPanel = function ModalPanel(_ref) {
  var _ref$maxWidth = _ref.maxWidth,
      maxWidth = _ref$maxWidth === void 0 ? "50vw" : _ref$maxWidth,
      _ref$position = _ref.position,
      position = _ref$position === void 0 ? "right" : _ref$position,
      props = _objectWithoutProperties(_ref, ["maxWidth", "position"]);

  return jsx(ModalContent, _extends({
    css: function css(theme) {
      return [baseCss(theme), {
        maxWidth: maxWidth
      }, position === "right" ? {
        right: 0,
        animationName: translateRight
      } : {
        left: 0,
        animationName: translateLeft
      }];
    }
  }, props));
};
ModalPanel.propTypes = {
  position: _pt.oneOf(["left", "right"]),
  maxWidth: _pt.string
};
ModalPanel.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "ModalPanel",
  "props": {
    "maxWidth": {
      "defaultValue": {
        "value": "`50vw`",
        "computed": false
      },
      "required": false
    },
    "position": {
      "defaultValue": {
        "value": "`right`",
        "computed": false
      },
      "required": false
    }
  }
};

if (typeof STORYBOOK_REACT_CLASSES !== "undefined") {
  STORYBOOK_REACT_CLASSES["src/components/Modal/ModalPanel.tsx"] = {
    name: "ModalPanel",
    docgenInfo: ModalPanel.__docgenInfo,
    path: "src/components/Modal/ModalPanel.tsx"
  };
}

export { ModalPanel };
//# sourceMappingURL=ModalPanel.esm.js.map
