@hhgtech/hhg-components/build/index-3f69a3aa.js

Hello Health Group common components

'use strict';

var React = require('react');
var styled = require('@emotion/styled');
var utils = require('./utils-7ba0038a.js');
var miscTheme = require('./miscTheme.js');

function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefault(React);
var styled__default = /*#__PURE__*/_interopDefault(styled);

const StyledPopup = styled__default["default"].div `
  position: fixed;
  left: 50%;

  padding: 0 16px 32px;
  background-color: ${miscTheme.theme.colors.white};
  border-radius: ${miscTheme.theme.borderRadius};
  box-shadow: 0px 4px 8px ${miscTheme.theme.colors.gray200};
  transform: translate(-50%, -50%);
  transition: all 0.5s ease-in-out;
  visibility: hidden;

  &[data-open='true'] {
    z-index: 400;
    top: 50%;
    opacity: 1;
    visibility: visible;
  }

  &[data-open='false'] {
    top: -50%;
  }

  &[data-type='lead'] {
    width: 332px;
    height: 460px;

    div {
      top: -15px;
      right: -15px;
    }
  }

  &[data-type='form'] {
    width: 496px;
    height: 548px;
    ${utils.MediaQueries.mbDown} {
      width: 340px;
    }
  }

  &[data-type='confirm'] {
    ${utils.MediaQueries.mbDown} {
      width: calc(100% - 32px);
    }
    ${utils.MediaQueries.mbUp} {
      width: 100%;
      max-width: 407px;
    }
  }

  .popup-content {
    position: relative;
    z-index: 111;
    height: 100%;
    padding: 16px;
  }

  .close-button {
    position: absolute;
    top: 16px;
    right: 0;
    cursor: pointer;

    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }
`;
const StyledPopupWrapper = styled__default["default"].div `
  position: fixed;
  z-index: 110;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  align-items: center;
  background: rgba(38, 38, 38, 0.3);

  &[data-open='false'] {
    display: none;
  }
`;

const Popup = ({ type = 'lead', closeIcon, isOpen = true, onClose, children, className = '', enableAnimation = true, disableClickOutside = false, }) => {
    return (React__default["default"].createElement(React__default["default"].Fragment, null,
        React__default["default"].createElement(StyledPopup, { "data-open": isOpen, "data-type": type, "data-animation": enableAnimation },
            React__default["default"].createElement("div", { className: `${className || ''} popup-content` },
                !!closeIcon && (React__default["default"].createElement("div", { className: "close-button", onClick: onClose }, closeIcon)),
                children)),
        React__default["default"].createElement(StyledPopupWrapper, { "data-open": isOpen, onClick: () => {
                !disableClickOutside && onClose();
            } })));
};

exports.Popup = Popup;