@retailmenot/anchor/esm/modal.js

A React UI Library by RetailMeNot

import { a as _taggedTemplateLiteral, f as _classCallCheck, h as _inherits, i as _createSuper } from './anchor-chunk-7b9d8557.js';
import { a as __rest } from './anchor-chunk-27f34e54.js';
import StyledReactModal__default, { BaseModalBackground, ModalProvider } from 'styled-react-modal';
import { forwardRef, createElement, useContext, useState, Children, Fragment, useEffect, useRef, createRef, Component, cloneElement, useReducer, PureComponent, isValidElement, createContext, useImperativeHandle } from 'react';
import classNames from 'classnames';
import styled, { css } from '@xstyled/styled-components';
import { space, th } from '@xstyled/system';
import './addevent.js';
import './anchor-chunk-25c07228.js';
import './arrowback.js';
import './arrowforward.js';
import './avataricon.js';
import './avataroutline.js';
import './barcode.js';
import './bulletlist.js';
import './calendar.js';
import './camera.js';
import './cart.js';
import './cashback.js';
import './cells.js';
import './chat.js';
import './check.js';
import './checksmall.js';
import './chevrondown.js';
import './chevrondownsmall.js';
import './chevronleft.js';
import './chevronleftsmall.js';
import './chevronright.js';
import './chevronrightsmall.js';
import './chevronup.js';
import './chevronupsmall.js';
import './clock.js';
import { Close } from './close.js';
import './closesmall.js';
import './commentmore.js';
import './creditcard.js';
import './crosshairs.js';
import './cut.js';
import './disabled.js';
import './dislike.js';
import './download.js';
import './ellipses.js';
import './ellipsesvertical.js';
import './envelope.js';
import './envelopeopen.js';
import './error.js';
import './expand.js';
import './gear.js';
import './giftcard.js';
import './hamburger.js';
import './heart.js';
import './heartoutline.js';
import './home.js';
import './info.js';
import './infooutline.js';
import './laptop.js';
import './lightning.js';
import './like.js';
import './listicon.js';
import './lock.js';
import './map.js';
import './marker.js';
import './markeroutline.js';
import './mobile.js';
import './news.js';
import './pencil.js';
import './play.js';
import './plus.js';
import './plussmall.js';
import './print.js';
import './question.js';
import './questionoutline.js';
import './refresh.js';
import './retailmenotlogo.js';
import './sadface.js';
import './search.js';
import './share.js';
import './sliders.js';
import './star.js';
import './starhalf.js';
import './staroutline.js';
import './success.js';
import './successoutline.js';
import './tag.js';
import './upload.js';
import './tagadd.js';
import { a as Typography } from './anchor-chunk-5b0bbe0b.js';
import './anchor-chunk-cd7ef49a.js';
import { a as Button } from './anchor-chunk-e1ca097b.js';
import './anchor-chunk-20e4020f.js';
import 'polished';

function _templateObject() {
  var data = _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.div(_templateObject(), space);
var ModalContent = function ModalContent(_ref) {
  var children = _ref.children,
      className = _ref.className;
  return createElement(StyledContent, {
    className: classNames('anchor-modal-content', className)
  }, children);
};

function _templateObject$1() {
  var data = _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('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 css({
    color: color,
    backgroundColor: background
  });
}, StyledContent, StyledContent, space);
var ModalHeader = function ModalHeader(_a) {
  var children = _a.children,
      className = _a.className,
      title = _a.title,
      props = __rest(_a, ["children", "className", "title"]);

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

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

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

  return data;
}

function _templateObject$2() {
  var data = _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('div')(_templateObject$2(), function (_ref) {
  var padding = _ref.padding;
  return padding && css(_templateObject2(), padding);
}, function (_ref2) {
  var _ref2$background = _ref2.background,
      background = _ref2$background === void 0 ? 'transparent' : _ref2$background;
  return background;
}, space);
var ModalFooter = function ModalFooter(_a) {
  var children = _a.children,
      className = _a.className,
      props = __rest(_a, ["children", "className"]);

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

function _templateObject$3() {
  var data = _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('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 = __rest(_a, ["className", "align"]);

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

function _templateObject2$1() {
  var data = _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 = _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 css({
    background: 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;
}, 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 = __rest(_a, ["children", "className", "margin"]);

  return 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(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$1 = CustomModalBackground;
var ModalProvider$1 = /*#__PURE__*/function (_StyledReactModal$Mod) {
  _inherits(ModalProvider$$1, _StyledReactModal$Mod);

  var _super = _createSuper(ModalProvider$$1);

  function ModalProvider$$1() {
    _classCallCheck(this, ModalProvider$$1);

    return _super.apply(this, arguments);
  }

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

export { Modal, BaseModalBackground$1 as BaseModalBackground, ModalProvider$1 as ModalProvider };
//# sourceMappingURL=modal.js.map