@hhgtech/hhg-components 1.29.82 → 1.29.83

package/build/index-5fdde636.js

@@ -0,0 +1,256 @@
+'use strict';
+
+var React = require('react');
+var useScrollbarSize = require('./useScrollbarSize-49049c18.js');
+var ReactDOM = require('react-dom');
+var styled = require('@emotion/styled');
+var utils = require('./utils-928b4701.js');
+var miscDefaultClassWrapper = require('./miscDefaultClassWrapper.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 StyledModal = miscDefaultClassWrapper.setDefaultClass(styled__default["default"].div `
+    position: relative;
+    z-index: 200;
+    background-color: ${miscTheme.theme.colors.white};
+    border-radius: ${miscTheme.theme.borderRadius};
+    box-shadow: 0px 8px 40px 0px #0000001a;
+    &[data-site-type='marryBaby'] {
+      border-radius: 16px;
+      .hhg-modal__content {
+        position: relative;
+        z-index: 111;
+        height: 100%;
+        padding: 24px;
+      }
+    }
+    .hhg-modal__content {
+      position: relative;
+      z-index: 111;
+      height: 100%;
+      padding: 16px;
+    }
+    .hhg-modal__video {
+      position: relative;
+      z-index: 111;
+      height: 100%;
+      background-color: none;
+      box-shadow: none;
+    }
+  `, 'hhgcomp-modal-modal');
+const StyledModalWrapper = styled__default["default"].div `
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 201;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  outline: 0;
+  visibility: hidden;
+  opacity: 0;
+  background-color: rgba(0, 0, 0, 0.6);
+  transition: opacity 0.3s ease-in-out;
+
+  .hhg-modal__close {
+    position: absolute;
+    top: 16px;
+    right: 16px;
+    cursor: pointer;
+    img {
+      width: 100%;
+      height: 100%;
+      border-radius: 50%;
+    }
+  }
+  &[data-type='video'] {
+    z-index: 1001;
+  }
+  &[data-open='true'] {
+    opacity: 1;
+    visibility: visible;
+  }
+
+  ${StyledModal.classSelector} {
+    transition: transform 0.3s ease-in-out;
+  }
+  &.slideTop {
+    ${StyledModal.classSelector} {
+      transform: translate(0, -100vh);
+    }
+
+    &[data-open='true'] {
+      ${StyledModal.classSelector} {
+        transform: translate(0);
+      }
+    }
+  }
+
+  &.scaleUp {
+    ${StyledModal.classSelector} {
+      transform: scale(0.9);
+    }
+
+    &[data-open='true'] {
+      ${StyledModal.classSelector} {
+        transform: scale(1);
+      }
+    }
+  }
+
+  &[data-type='tail'] {
+    justify-content: flex-end;
+    ${StyledModal.classSelector} {
+      width: 420px;
+      height: 100%;
+      border-radius: 0;
+      overflow: hidden auto;
+    }
+  }
+  &[data-type='form'] {
+    ${StyledModal.classSelector} {
+      width: 496px;
+      height: 548px;
+      max-height: 100%;
+      overflow-y: auto;
+      ${utils.MediaQueries.mbDown} {
+        width: 340px;
+      }
+    }
+  }
+  &[data-type='video'] {
+    ${StyledModal.classSelector} {
+      height: 100%;
+      max-height: 539px;
+      ${utils.MediaQueries.mbDown} {
+        height: 192px;
+        width: 100%;
+        height: 100%;
+        border-radius: ${miscTheme.theme.borderRadius};
+        max-height: 192px;
+      }
+    }
+  }
+  &[data-type='confirm'] {
+    ${StyledModal.classSelector} {
+      width: 100%;
+      max-width: 407px;
+      ${utils.MediaQueries.mbDown} {
+        width: calc(100% - 32px);
+        max-width: calc(100% - 32px);
+      }
+    }
+  }
+`;
+const StyledModalMask = styled__default["default"].div `
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  align-items: center;
+
+  &[data-open='false'] {
+    display: none;
+  }
+  &[data-type='video'] {
+    background-color: ${miscTheme.theme.colors.secondaryDark};
+  }
+`;
+
+const MODAL_ROOT_ID = 'hhg-modals';
+const getModalsRoot = () => {
+    let el = document.getElementById(MODAL_ROOT_ID);
+    if (!el) {
+        el = document.createElement('div');
+        el.setAttribute('id', MODAL_ROOT_ID);
+        document.body.append(el);
+    }
+    return el;
+};
+const cleanUpModalShow = () => {
+    const selector = '.hhg-modal[data-open="true"]';
+    const remainingPopupOpened = document.querySelectorAll(selector);
+    // Remove the opening class if there are only 1 popup is shown
+    if (remainingPopupOpened.length < 1) {
+        document.body.classList.remove('hhc-modal-show');
+    }
+};
+const cleanUpDisabledScroll = () => {
+    // Clear the overflow if there are only 1 popup is shown. useEffect runs after so the count number becomes zero
+    const selector = '.hhg-modal[data-open="true"]';
+    const remainingPopupOpened = document.querySelectorAll(selector);
+    if (remainingPopupOpened.length < 1) {
+        document.body.style.overflow = '';
+        document.body.style.paddingRight = '';
+        document.body.classList.remove('hhc-disabled-scroll');
+    }
+};
+/**
+ * @deprecated Consider to use at '@hhgtech/hhg-components/mantine'
+ */
+const Modal = ({ type = 'lead', closeIcon, isOpen = true, onClose, children, className = '', animationType = 'scaleUp', isStaticBackdrop = false, siteType, }) => {
+    const [mounted, setMounted] = React.useState(false);
+    const elRef = React.useRef(null);
+    const { width: scrollBarWidth } = useScrollbarSize.useScrollbarSize();
+    if (!elRef.current && mounted) {
+        elRef.current = document.createElement('div');
+    }
+    React.useEffect(() => {
+        setMounted(true);
+        return () => {
+            setMounted(false);
+            cleanUpModalShow();
+            cleanUpDisabledScroll();
+        };
+    }, []);
+    React.useEffect(() => {
+        if (mounted) {
+            const modalsRoot = getModalsRoot();
+            modalsRoot.appendChild(elRef.current);
+            return () => {
+                modalsRoot.removeChild(elRef.current);
+            };
+        }
+    }, [mounted]);
+    React.useEffect(() => {
+        if (isOpen) {
+            document.body.classList.add('hhc-modal-show');
+        }
+        else {
+            cleanUpModalShow();
+        }
+    }, [isOpen]);
+    React.useEffect(() => {
+        if (isOpen) {
+            document.body.style.overflow = 'hidden';
+            document.body.style.paddingRight = scrollBarWidth + 'px';
+            document.body.classList.add('hhc-disabled-scroll');
+        }
+        else {
+            cleanUpDisabledScroll();
+        }
+    }, [isOpen, scrollBarWidth]);
+    if (!mounted)
+        return null;
+    const classes = ['hhg-modal__wrapper', className, animationType]
+        .filter((s) => s)
+        .join(' ');
+    return ReactDOM.createPortal(React__default["default"].createElement(StyledModalWrapper, { className: classes, "data-open": isOpen, "data-type": type },
+        !isStaticBackdrop && (React__default["default"].createElement(StyledModalMask, { "data-open": isOpen, onClick: onClose, "data-type": type })),
+        !isStaticBackdrop && type === 'video' && !!closeIcon && (React__default["default"].createElement("div", { className: "hhg-modal__close", onClick: onClose }, closeIcon)),
+        React__default["default"].createElement(StyledModal, { className: "hhg-modal", "data-open": isOpen, "data-site-type": siteType },
+            React__default["default"].createElement("div", { className: type === 'video' ? 'hhg-modal__video' : 'hhg-modal__content' },
+                !!closeIcon && type !== 'video' && (React__default["default"].createElement("div", { className: "hhg-modal__close", onClick: onClose }, closeIcon)),
+                children))), elRef.current);
+};
+
+exports.Modal = Modal;

package/build/{index-e3bbd009.js → index-617bff8c.js}

@@ -1,175 +1,16 @@
 'use strict';
 
 var locale = require('date-fns/locale');
-var index$1 = require('./index-1f3fc2e3.js');
-var isProduction = require('./isProduction-20cd663d.js');
-
-const siteHost = {
-    HELLO_HEALTH_GROUP: 'hellohealthgroup.com',
-    HELLO_DOCTOR: 'hellodoctor.com.ph',
-    HELLO_DOCTOR_FIL: 'hellodoctor.com.ph/fil',
-    HELLO_KRUPET: 'hellokrupet.com',
-    HELLO_SWASTHYA: 'helloswasthya.com',
-    HELLO_SEHAT: 'hellosehat.com',
-    HELLO_SAYARWON: 'hellosayarwon.com',
-    HELLO_DOKTOR: 'hellodoktor.com',
-    HELLO_KHUNMOR: 'hellokhunmor.com',
-    HELLO_YISHI: 'helloyishi.com.tw',
-    HELLO_BACSI: 'hellobacsi.com',
-    MARRY_BABY: 'www.marrybaby.vn',
-};
-const siteOptions = {
-    HELLO_HEALTH_GROUP: {
-        lng: index$1.LOCALE.PhilippinesEnglish,
-        ns: 'translation',
-        name: 'Hello Health Group',
-        theme: 'hellosite',
-        dayjs: 'en',
-        phoneCountry: 'PH',
-        siteId: 10,
-    },
-    HELLO_DOCTOR: {
-        lng: index$1.LOCALE.PhilippinesEnglish,
-        ns: 'translation',
-        name: 'Hello Doctor',
-        theme: 'hellosite',
-        dayjs: 'en',
-        phoneCountry: 'PH',
-        siteId: 5,
-    },
-    HELLO_DOCTOR_FIL: {
-        lng: index$1.LOCALE.PhilippinesTagalog,
-        ns: 'translation',
-        name: 'Hello Doctor',
-        theme: 'hellosite',
-        dayjs: 'tl-ph',
-        phoneCountry: 'PH',
-        siteId: 5,
-    },
-    HELLO_KRUPET: {
-        lng: index$1.LOCALE.Cambodia,
-        ns: 'translation',
-        name: 'Hello Krupet',
-        theme: 'hellosite',
-        dayjs: 'km',
-        phoneCountry: 'KH',
-        siteId: 4,
-    },
-    HELLO_SWASTHYA: {
-        lng: index$1.LOCALE.India,
-        ns: 'translation',
-        name: 'Hello Swasthya',
-        theme: 'hellosite',
-        dayjs: 'hi',
-        phoneCountry: 'IN',
-        siteId: 9,
-    },
-    HELLO_SEHAT: {
-        lng: index$1.LOCALE.Indonesia,
-        ns: 'translation',
-        name: 'Hello Sehat',
-        theme: 'hellosite',
-        dayjs: 'id',
-        phoneCountry: 'ID',
-        siteId: 2,
-    },
-    HELLO_SAYARWON: {
-        lng: index$1.LOCALE.Myanmar,
-        ns: 'translation',
-        name: 'Hello Sayarwon',
-        theme: 'hellosite',
-        dayjs: 'my',
-        phoneCountry: 'MM',
-        siteId: 7,
-    },
-    HELLO_DOKTOR: {
-        lng: index$1.LOCALE.Malaysia,
-        ns: 'translation',
-        name: 'Hello Doktor',
-        theme: 'hellosite',
-        dayjs: 'ms-my',
-        phoneCountry: 'MY',
-        siteId: 3,
-    },
-    HELLO_KHUNMOR: {
-        lng: index$1.LOCALE.Thailand,
-        ns: 'translation',
-        name: 'Hello Khunmor',
-        theme: 'hellosite',
-        dayjs: 'th',
-        phoneCountry: 'TH',
-        siteId: 6,
-    },
-    HELLO_YISHI: {
-        lng: index$1.LOCALE.Taiwan,
-        ns: 'translation',
-        name: 'Hello Yishi',
-        theme: 'hellosite',
-        dayjs: 'zh-tw',
-        phoneCountry: 'TW',
-        siteId: 8,
-    },
-    HELLO_BACSI: {
-        lng: index$1.LOCALE.Vietnam,
-        ns: 'translation',
-        name: 'Hello Bacsi',
-        theme: 'hellosite',
-        dayjs: 'vi',
-        phoneCountry: 'VN',
-        siteId: 1,
-    },
-    MARRY_BABY: {
-        lng: index$1.LOCALE.Vietnam,
-        ns: 'marrybaby',
-        name: 'Marry Baby',
-        theme: 'marrybaby',
-        dayjs: 'vi',
-        phoneCountry: 'VN',
-        siteId: 11,
-    },
-};
-
-exports.RISK_SCREENER_NAME = void 0;
-(function (RISK_SCREENER_NAME) {
-    RISK_SCREENER_NAME["HPV"] = "hpv";
-})(exports.RISK_SCREENER_NAME || (exports.RISK_SCREENER_NAME = {}));
-const RISK_SCREENER_SLUG = {
-    [index$1.LOCALE.Vietnam]: {
-        [exports.RISK_SCREENER_NAME.HPV]: 'hpv-vaccine',
-    },
-    [index$1.LOCALE.Indonesia]: {
-        [exports.RISK_SCREENER_NAME.HPV]: 'deteksi-dini-hpv',
-    },
-};
+require('./index-d91f52cc.js');
+var constantsIsProduction = require('./constantsIsProduction.js');
+var constantsSite = require('./constantsSite.js');
+var constantsDomainLocales = require('./constantsDomainLocales.js');
+var constantsRiskScreener = require('./constantsRiskScreener.js');
+var Locale = require('./Locale-0b86b849.js');
 
 const basePath = process.env.NEXT_PUBLIC_DEPLOY_LOCALE === 'tl-PH' ? '/fil' : '';
 const SSO_URL = process.env.NEXT_PUBLIC_SSO;
 const USER_GEOLOCATION_COORDINATES_COOKIE = 'userGeoLocationCoordinates';
-const domainLocales = {
-    'vi-VN': 'hellobacsi.com',
-    'id-ID': 'hellosehat.com',
-    'ms-MY': 'hellodoktor.com',
-    'km-KH': 'hellokrupet.com',
-    'en-PH': 'hellodoctor.com.ph',
-    'th-TH': 'hellokhunmor.com',
-    'my-MM': 'hellosayarwon.com',
-    'zh-TW': 'helloyishi.com.tw',
-    'hi-IN': 'helloswasthya.com',
-    'tl-PH': 'hellodoctor.com.ph',
-    'vi-VN_MB': 'marrybaby.vn',
-};
-const MAP_DOMAIN_BY_LOCALE = {
-    [index$1.LOCALE.Vietnam]: 'hellobacsi.com',
-    [index$1.LOCALE.Indonesia]: 'hellosehat.com',
-    [index$1.LOCALE.Malaysia]: 'hellodoktor.com',
-    [index$1.LOCALE.Cambodia]: 'hellokrupet.com',
-    [index$1.LOCALE.PhilippinesEnglish]: 'hellodoctor.com.ph',
-    [index$1.LOCALE.PhilippinesTagalog]: 'hellodoctor.com.ph',
-    [index$1.LOCALE.Thailand]: 'hellokhunmor.com',
-    [index$1.LOCALE.Myanmar]: 'hellosayarwon.com',
-    [index$1.LOCALE.Taiwan]: 'helloyishi.com.tw',
-    [index$1.LOCALE.India]: 'helloswasthya.com',
-};
 const LOCALE_SPECS = {
     'vi-VN': {
         LOGO_TYPE: 'hellobacsi',
@@ -499,7 +340,7 @@ const CARE_LOCALES = [
     'id-ID',
     // 'en-PH',
     // 'tl-PH',
-    ...(isProduction.isProduction ? [] : ['ms-MY']),
+    ...(constantsIsProduction.isProduction ? [] : ['ms-MY']),
     //  'zh-TW'
 ];
 const CARE_BOOKING_LOCALES = ['vi-VN', 'id-ID'];
@@ -816,58 +657,58 @@ exports.QUERY_HEALTH_TOOL = void 0;
 })(exports.QUERY_HEALTH_TOOL || (exports.QUERY_HEALTH_TOOL = {}));
 // Available locale list https://cdn.jsdelivr.net/npm/dayjs@1/locale.json
 const ISO_FORMAT = {
-    [index$1.LOCALE.Vietnam]: {
+    [Locale.LOCALE.Vietnam]: {
         dateFormat: 'DD/MM/YYYY',
         separator: ',',
     },
-    [index$1.LOCALE.Cambodia]: {
+    [Locale.LOCALE.Cambodia]: {
         dateFormat: 'DD/MM/YYYY',
         separator: '.',
     },
-    [index$1.LOCALE.India]: {
+    [Locale.LOCALE.India]: {
         dateFormat: 'DD/MM/YYYY',
         separator: '.',
     },
-    [index$1.LOCALE.Indonesia]: {
+    [Locale.LOCALE.Indonesia]: {
         dateFormat: 'DD/MM/YYYY',
         separator: ',',
     },
-    [index$1.LOCALE.Malaysia]: {
+    [Locale.LOCALE.Malaysia]: {
         dateFormat: 'DD/MM/YYYY',
         separator: '.',
     },
-    [index$1.LOCALE.Thailand]: {
+    [Locale.LOCALE.Thailand]: {
         dateFormat: 'DD/MM/YYYY',
         separator: '.',
     },
-    [index$1.LOCALE.Taiwan]: {
+    [Locale.LOCALE.Taiwan]: {
         dateFormat: 'YYYY/MM/DD',
         separator: ',',
     },
-    [index$1.LOCALE.PhilippinesTagalog]: {
+    [Locale.LOCALE.PhilippinesTagalog]: {
         dateFormat: 'MM/DD/YYYY',
         separator: '.',
     },
-    [index$1.LOCALE.PhilippinesEnglish]: {
+    [Locale.LOCALE.PhilippinesEnglish]: {
         dateFormat: 'MM/DD/YYYY',
         separator: '.',
     },
-    [index$1.LOCALE.Myanmar]: {
+    [Locale.LOCALE.Myanmar]: {
         dateFormat: 'DD/MM/YYYY',
         separator: ',',
     },
 };
 const BEARER_TOKEN_COOKIE = 'hhg_user_token';
 const DATE_FNS_LOCALE = {
-    [index$1.LOCALE.PhilippinesEnglish]: locale.enUS,
-    [index$1.LOCALE.Vietnam]: locale.vi,
-    [index$1.LOCALE.Cambodia]: locale.km,
-    [index$1.LOCALE.India]: locale.hi,
-    [index$1.LOCALE.Indonesia]: locale.id,
-    [index$1.LOCALE.Myanmar]: locale.enUS,
-    [index$1.LOCALE.Malaysia]: locale.ms,
-    [index$1.LOCALE.Thailand]: locale.th,
-    [index$1.LOCALE.Taiwan]: locale.zhTW,
+    [Locale.LOCALE.PhilippinesEnglish]: locale.enUS,
+    [Locale.LOCALE.Vietnam]: locale.vi,
+    [Locale.LOCALE.Cambodia]: locale.km,
+    [Locale.LOCALE.India]: locale.hi,
+    [Locale.LOCALE.Indonesia]: locale.id,
+    [Locale.LOCALE.Myanmar]: locale.enUS,
+    [Locale.LOCALE.Malaysia]: locale.ms,
+    [Locale.LOCALE.Thailand]: locale.th,
+    [Locale.LOCALE.Taiwan]: locale.zhTW,
 };
 const CDN_ADDRESS = 'https://cdn.hellohealthgroup.com/countries';
 const GA_TOKEN_COOKIE = '_ga';
@@ -879,8 +720,6 @@ var index = /*#__PURE__*/Object.freeze({
   basePath: basePath,
   SSO_URL: SSO_URL,
   USER_GEOLOCATION_COORDINATES_COOKIE: USER_GEOLOCATION_COORDINATES_COOKIE,
-  domainLocales: domainLocales,
-  MAP_DOMAIN_BY_LOCALE: MAP_DOMAIN_BY_LOCALE,
   LOCALE_SPECS: LOCALE_SPECS,
   STATIC_PAGES: STATIC_PAGES,
   UP_BASEPATH: UP_BASEPATH,
@@ -897,11 +736,13 @@ var index = /*#__PURE__*/Object.freeze({
   GA_TOKEN_COOKIE: GA_TOKEN_COOKIE,
   API_DATE_FORMAT: API_DATE_FORMAT,
   DATE_FNS_DATE_FORMAT: DATE_FNS_DATE_FORMAT,
-  siteHost: siteHost,
-  siteOptions: siteOptions,
-  get RISK_SCREENER_NAME () { return exports.RISK_SCREENER_NAME; },
-  RISK_SCREENER_SLUG: RISK_SCREENER_SLUG,
-  isProduction: isProduction.isProduction
+  siteHost: constantsSite.siteHost,
+  siteOptions: constantsSite.siteOptions,
+  domainLocales: constantsDomainLocales.domainLocales,
+  MAP_DOMAIN_BY_LOCALE: constantsDomainLocales.MAP_DOMAIN_BY_LOCALE,
+  get RISK_SCREENER_NAME () { return constantsRiskScreener.RISK_SCREENER_NAME; },
+  RISK_SCREENER_SLUG: constantsRiskScreener.RISK_SCREENER_SLUG,
+  isProduction: constantsIsProduction.isProduction
 });
 
 exports.API_DATE_FORMAT = API_DATE_FORMAT;
@@ -916,15 +757,10 @@ exports.FAVICONS = FAVICONS;
 exports.GA_TOKEN_COOKIE = GA_TOKEN_COOKIE;
 exports.ISO_FORMAT = ISO_FORMAT;
 exports.LOCALE_SPECS = LOCALE_SPECS;
-exports.MAP_DOMAIN_BY_LOCALE = MAP_DOMAIN_BY_LOCALE;
-exports.RISK_SCREENER_SLUG = RISK_SCREENER_SLUG;
 exports.SSO_URL = SSO_URL;
 exports.STATIC_PAGES = STATIC_PAGES;
 exports.TOGETHER_LOCALES = TOGETHER_LOCALES;
 exports.UP_BASEPATH = UP_BASEPATH;
 exports.USER_GEOLOCATION_COORDINATES_COOKIE = USER_GEOLOCATION_COORDINATES_COOKIE;
 exports.basePath = basePath;
-exports.domainLocales = domainLocales;
 exports.index = index;
-exports.siteHost = siteHost;
-exports.siteOptions = siteOptions;

package/build/{index-2fd9063e.js → index-66e789cf.js}

@@ -1,9 +1,9 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-bd3f8718.js');
+var tslib_es6 = require('./tslib.es6-d6fa4ee6.js');
 var React = require('react');
 var styled = require('@emotion/styled');
-var theme = require('./theme-be20929b.js');
+var miscTheme = require('./miscTheme.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -15,7 +15,7 @@ const Heading = (_a) => {
     return React__default["default"].createElement(type, elementProps);
 };
 const StyledHeading = styled__default["default"](Heading) `
-  color: var(--text-color, ${theme.theme.mbColors.dark});
+  color: var(--text-color, ${miscTheme.theme.mbColors.dark});
   font-family: Krub;
   font-weight: 600;
   letter-spacing: -0.2px;
@@ -38,7 +38,7 @@ const StyledHeading = styled__default["default"](Heading) `
   }
 `;
 const StyledText = styled__default["default"].p `
-  color: var(--text-color, ${theme.theme.mbColors.dark});
+  color: var(--text-color, ${miscTheme.theme.mbColors.dark});
   letter-spacing: -0.2px;
 
   &[data-type='subtitle-1'] {

package/build/index-6b23104e.js

@@ -0,0 +1,108 @@
+'use strict';
+
+var React = require('react');
+var styled = require('@emotion/styled');
+var utils = require('./utils-928b4701.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, }) => {
+    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: onClose })));
+};
+
+exports.Popup = Popup;