@hhgtech/hhg-components/build/esm/index-68e9d7d8.js

Hello Health Group common components

import React__default from 'react';
import styled from '@emotion/styled';
import { M as MediaQueries } from './utils-cb7242c7.js';
import { theme } from './miscTheme.js';

const StyledPopup = styled.div `
  position: fixed;
  left: 50%;

  padding: 0 16px 32px;
  background-color: ${theme.colors.white};
  border-radius: ${theme.borderRadius};
  box-shadow: 0px 4px 8px ${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;
    ${MediaQueries.mbDown} {
      width: 340px;
    }
  }

  &[data-type='confirm'] {
    ${MediaQueries.mbDown} {
      width: calc(100% - 32px);
    }
    ${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.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.createElement(React__default.Fragment, null,
        React__default.createElement(StyledPopup, { "data-open": isOpen, "data-type": type, "data-animation": enableAnimation },
            React__default.createElement("div", { className: `${className || ''} popup-content` },
                !!closeIcon && (React__default.createElement("div", { className: "close-button", onClick: onClose }, closeIcon)),
                children)),
        React__default.createElement(StyledPopupWrapper, { "data-open": isOpen, onClick: () => {
                !disableClickOutside && onClose();
            } })));
};

export { Popup as P };