@retailmenot/anchor/commonjs/modal.js

A React UI Library by RetailMeNot

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var __chunk_1 = require('./anchor-chunk-24f232e7.js');
var __chunk_2 = require('./anchor-chunk-9d9a5df6.js');
var StyledReactModal = require('styled-react-modal');
var StyledReactModal__default = _interopDefault(StyledReactModal);
var React = require('react');
var classNames = _interopDefault(require('classnames'));
var styled = require('@xstyled/styled-components');
var styled__default = _interopDefault(styled);
var system = require('@xstyled/system');
require('./addevent.js');
require('./anchor-chunk-31a3b978.js');
require('./arrowback.js');
require('./arrowforward.js');
require('./avataricon.js');
require('./avataroutline.js');
require('./barcode.js');
require('./bulletlist.js');
require('./calendar.js');
require('./camera.js');
require('./cart.js');
require('./cashback.js');
require('./cells.js');
require('./chat.js');
require('./check.js');
require('./checksmall.js');
require('./chevrondown.js');
require('./chevrondownsmall.js');
require('./chevronleft.js');
require('./chevronleftsmall.js');
require('./chevronright.js');
require('./chevronrightsmall.js');
require('./chevronup.js');
require('./chevronupsmall.js');
require('./clock.js');
var close = require('./close.js');
require('./closesmall.js');
require('./commentmore.js');
require('./creditcard.js');
require('./crosshairs.js');
require('./cut.js');
require('./disabled.js');
require('./dislike.js');
require('./download.js');
require('./ellipses.js');
require('./ellipsesvertical.js');
require('./envelope.js');
require('./envelopeopen.js');
require('./error.js');
require('./expand.js');
require('./gear.js');
require('./giftcard.js');
require('./hamburger.js');
require('./heart.js');
require('./heartoutline.js');
require('./home.js');
require('./info.js');
require('./infooutline.js');
require('./laptop.js');
require('./lightning.js');
require('./like.js');
require('./listicon.js');
require('./lock.js');
require('./map.js');
require('./marker.js');
require('./markeroutline.js');
require('./mobile.js');
require('./news.js');
require('./pencil.js');
require('./play.js');
require('./plus.js');
require('./plussmall.js');
require('./print.js');
require('./question.js');
require('./questionoutline.js');
require('./refresh.js');
require('./retailmenotlogo.js');
require('./sadface.js');
require('./search.js');
require('./share.js');
require('./sliders.js');
require('./star.js');
require('./starhalf.js');
require('./staroutline.js');
require('./success.js');
require('./successoutline.js');
require('./tag.js');
require('./upload.js');
require('./tagadd.js');
var __chunk_6 = require('./anchor-chunk-cd6fece5.js');
require('./anchor-chunk-1efd6395.js');
var __chunk_7 = require('./anchor-chunk-eb382a51.js');
require('./anchor-chunk-598e53e1.js');
require('polished');

function _templateObject() {
  var data = __chunk_1._taggedTemplateLiteral(["\n    box-sizing: border-box;\n    width: 100%;\n\n    order: 0;\n    flex-grow: 1;\n    ", "\n"]);

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

  return data;
}
var StyledContent = styled__default.div(_templateObject(), system.space);
var ModalContent = function ModalContent(_ref) {
  var children = _ref.children,
      className = _ref.className;
  return React.createElement(StyledContent, {
    className: classNames('anchor-modal-content', className)
  }, children);
};

function _templateObject$1() {
  var data = __chunk_1._taggedTemplateLiteral(["\n    box-sizing: border-box;\n    min-height: 4rem;\n    padding: 1.25rem 4.75rem 1.25rem 2rem;\n    width: 100%;\n    border-radius: modal modal 0 0;\n    margin-bottom: 1rem;\n\n    display: flex;\n    order: -1;\n\n    ", ";\n\n    // If the header exists, remove the Content's padding.\n    // We're preferring this selector to using Modal :first-child\n    // in case there is a close button placed before it, and using a\n    // double selector to ensure it takes precedence.\n    & ~ ", "", " {\n        padding-top: 0;\n    }\n\n    ", "\n"]);

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

  return data;
}
var StyledHeader = styled__default('div')(_templateObject$1(), function (_ref) {
  var _ref$color = _ref.color,
      color = _ref$color === void 0 ? 'text.light' : _ref$color,
      _ref$background = _ref.background,
      background = _ref$background === void 0 ? 'white' : _ref$background;
  return styled.css({
    color: color,
    backgroundColor: background
  });
}, StyledContent, StyledContent, system.space);
var ModalHeader = function ModalHeader(_a) {
  var children = _a.children,
      className = _a.className,
      title = _a.title,
      props = __chunk_2.__rest(_a, ["children", "className", "title"]);

  return React.createElement(StyledHeader, Object.assign({
    className: classNames('anchor-modal-header', className)
  }, props), title && React.createElement(__chunk_6.Typography, {
    scale: 20,
    weight: "bold"
  }, title), children);
};

function _templateObject2() {
  var data = __chunk_1._taggedTemplateLiteral(["\n            && {\n                padding: ", ";\n            }\n        "]);

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

  return data;
}

function _templateObject$2() {
  var data = __chunk_1._taggedTemplateLiteral(["\n    box-sizing: border-box;\n    width: 100%;\n    border-radius: 0 0 modal modal;\n    margin-top: auto;\n    ", ";\n\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    order: 1;\n    justify-self: flex-end;\n\n    background: ", ";\n\n    ", "\n"]);

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

  return data;
}
var StyledFooter = styled__default('div')(_templateObject$2(), function (_ref) {
  var padding = _ref.padding;
  return padding && styled.css(_templateObject2(), padding);
}, function (_ref2) {
  var _ref2$background = _ref2.background,
      background = _ref2$background === void 0 ? 'transparent' : _ref2$background;
  return background;
}, system.space);
var ModalFooter = function ModalFooter(_a) {
  var children = _a.children,
      className = _a.className,
      props = __chunk_2.__rest(_a, ["children", "className"]);

  return React.createElement(StyledFooter, Object.assign({
    className: classNames('anchor-modal-footer', className)
  }, props), children);
};

function _templateObject$3() {
  var data = __chunk_1._taggedTemplateLiteral(["\n    position: absolute;\n    height: 3rem;\n    width: 3rem;\n    margin: 0.5rem;\n    top: 0;\n    ", "\n\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    cursor: pointer;\n"]);

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

  return data;
}
var StyledClose = styled__default('div')(_templateObject$3(), function (_ref) {
  var align = _ref.align;
  return align === 'left' ? 'left: 0;' : 'right: 0;';
});
var ModalClose = function ModalClose(_a) {
  var className = _a.className,
      _a$align = _a.align,
      align = _a$align === void 0 ? 'right' : _a$align,
      props = __chunk_2.__rest(_a, ["className", "align"]);

  return React.createElement(StyledClose, {
    className: classNames('anchor-modal-close', className),
    align: align
  }, React.createElement(__chunk_7.Button, Object.assign({
    prefix: React.createElement(close.Close, null),
    variant: "minimal",
    circular: true
  }, props)));
};

function _templateObject2$1() {
  var data = __chunk_1._taggedTemplateLiteral(["\n    box-sizing: border-box;\n    overflow-y: auto;\n    padding: ", ";\n    background-color: ", ";\n"]);

  _templateObject2$1 = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject$4() {
  var data = __chunk_1._taggedTemplateLiteral(["\n    position: relative;\n    width: ", ";\n    height: ", ";\n    display: flex;\n    align-items: center;\n    flex-direction: column;\n    justify-content: space-between;\n\n    ", ";\n    box-shadow: ", ";\n\n    overflow: hidden;\n\n    // The Modal Content component only gets its bottom padding if\n    // its the last-child of the modal. Furthermore, if the Modal Header\n    // comes before it, then the Content loses its top padding\n    // (see Modal Header styles). The goal is that we have full padding\n    // in isolation, but lose the top or bottom padding if the Header or\n    // Footer (respectively) are also used.\n    ", " {\n        padding: ", ";\n        &:last-child {\n            padding-bottom: ", ";\n        }\n    }\n    ", " {\n        padding-left: ", "rem;\n    }\n    ", " {\n        padding: ", ";\n        min-height: ", "rem;\n    }\n    ", "\n"]);

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

  return data;
}
var Sizes = {
  lg: {
    width: 50,
    contentPadding: 2.5,
    footerHeight: 6.5
  },
  sm: {
    width: 25,
    contentPadding: 2,
    footerHeight: 5.5
  }
};
var defaultSize = 'lg';
var StyledModal = StyledReactModal__default.styled(_templateObject$4(), function (_ref) {
  var width = _ref.width,
      _ref$size = _ref.size,
      size = _ref$size === void 0 ? defaultSize : _ref$size;
  return width || "".concat(Sizes[size].width, "rem");
}, function (_ref2) {
  var _ref2$height = _ref2.height,
      height = _ref2$height === void 0 ? '42.375rem' : _ref2$height;
  return height;
}, function (_ref3) {
  var _ref3$background = _ref3.background,
      background = _ref3$background === void 0 ? 'white' : _ref3$background,
      color = _ref3.color;
  return styled.css({
    background: system.th.color(background),
    color: color,
    borderRadius: 'modal'
  });
}, function (_ref4) {
  var _ref4$shadow = _ref4.shadow,
      shadow = _ref4$shadow === void 0 ? '0 0.375rem 0.5rem 0.25rem rgba(0,0,0,0.13)' : _ref4$shadow;
  return shadow;
}, StyledContent, function (_ref5) {
  var _ref5$size = _ref5.size,
      size = _ref5$size === void 0 ? defaultSize : _ref5$size;
  return "4rem ".concat(Sizes[size].contentPadding, "rem 0 ").concat(Sizes[size].contentPadding, "rem");
}, function (_ref6) {
  var _ref6$size = _ref6.size,
      size = _ref6$size === void 0 ? defaultSize : _ref6$size;
  return "".concat(Sizes[size].contentPadding, "rem");
}, StyledHeader, function (_ref7) {
  var _ref7$size = _ref7.size,
      size = _ref7$size === void 0 ? defaultSize : _ref7$size;
  return Sizes[size].contentPadding;
}, StyledFooter, function (_ref8) {
  var _ref8$size = _ref8.size,
      size = _ref8$size === void 0 ? defaultSize : _ref8$size;
  return "0 ".concat(Sizes[size].contentPadding, "rem");
}, function (_ref9) {
  var _ref9$size = _ref9.size,
      size = _ref9$size === void 0 ? defaultSize : _ref9$size;
  return Sizes[size].footerHeight;
}, system.space);
var Modal = function Modal(_a) {
  var children = _a.children,
      className = _a.className,
      _a$margin = _a.margin,
      margin = _a$margin === void 0 ? 'auto' : _a$margin,
      props = __chunk_2.__rest(_a, ["children", "className", "margin"]);

  return React.createElement(StyledModal, Object.assign({}, Object.assign({
    className: classNames('anchor-modal', className),
    margin: margin
  }, props)), children);
};
Modal.Content = ModalContent;
Modal.Header = ModalHeader;
Modal.Footer = ModalFooter;
Modal.Close = ModalClose;
var CustomModalBackground = styled__default(StyledReactModal.BaseModalBackground)(_templateObject2$1(), function (_ref10) {
  var _ref10$padding = _ref10.padding,
      padding = _ref10$padding === void 0 ? '2rem 1rem' : _ref10$padding;
  return padding;
}, function (_ref11) {
  var _ref11$opacity = _ref11.opacity,
      opacity = _ref11$opacity === void 0 ? 0.6 : _ref11$opacity;
  return "rgba(0,0,0,".concat(opacity, ")");
});
var BaseModalBackground = CustomModalBackground;
var ModalProvider = /*#__PURE__*/function (_StyledReactModal$Mod) {
  __chunk_1._inherits(ModalProvider, _StyledReactModal$Mod);

  var _super = __chunk_1._createSuper(ModalProvider);

  function ModalProvider() {
    __chunk_1._classCallCheck(this, ModalProvider);

    return _super.apply(this, arguments);
  }

  return ModalProvider;
}(StyledReactModal.ModalProvider);
ModalProvider.defaultProps = {
  backgroundComponent: BaseModalBackground
};

exports.Modal = Modal;
exports.BaseModalBackground = BaseModalBackground;
exports.ModalProvider = ModalProvider;
//# sourceMappingURL=modal.js.map