react-calendly - npm Package Compare versions

Comparing version 4.1.1 to 4.2.0

dist/index.es.js

@@ -1,19 +0,19 @@
-import { createElement, Component, Fragment, useEffect } from 'react';
-import { createPortal } from 'react-dom';
+import * as React from 'react';
+import * as ReactDom from 'react-dom';
 
-/*! *****************************************************************************
-Copyright (c) Microsoft Corporation. All rights reserved.
-Licensed under the Apache License, Version 2.0 (the "License"); you may not use
-this file except in compliance with the License. You may obtain a copy of the
-License at http://www.apache.org/licenses/LICENSE-2.0
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
 
-THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
-WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
-MERCHANTABLITY OR NON-INFRINGEMENT.
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
 
-See the Apache Version 2.0 License for specific language governing permissions
-and limitations under the License.
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
 ***************************************************************************** */
-/* global Reflect, Promise */
+/* global Reflect, Promise, SuppressedError, Symbol */
 
@@ -23,3 +23,3 @@ var extendStatics = function(d, b) {
         ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
     return extendStatics(d, b);
@@ -29,2 +29,4 @@ };
 function __extends(d, b) {
+    if (typeof b !== "function" && b !== null)
+        throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
     extendStatics(d, b);
@@ -46,2 +48,7 @@ function __() { this.constructor = d; }
 
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
 function styleInject(css, ref) {
@@ -74,4 +81,4 @@ if ( ref === void 0 ) ref = {};
 
-var css = "/*\n  code is extracted from Calendly's embed stylesheet: https://assets.calendly.com/assets/external/widget.css\n*/\n\n.calendly-inline-widget,\n.calendly-inline-widget *,\n.calendly-badge-widget,\n.calendly-badge-widget *,\n.calendly-overlay,\n.calendly-overlay * {\n    font-size:16px;\n    line-height:1.2em\n}\n\n.calendly-inline-widget iframe,\n.calendly-badge-widget iframe,\n.calendly-overlay iframe {\n    display:inline;\n    width:100%;\n    height:100%\n}\n\n.calendly-popup-content {\n    position:relative\n}\n\n.calendly-popup-content.calendly-mobile {\n    -webkit-overflow-scrolling:touch;\n    overflow-y:auto\n}\n\n.calendly-overlay {\n    position:fixed;\n    top:0;\n    left:0;\n    right:0;\n    bottom:0;\n    overflow:hidden;\n    z-index:9999;\n    background-color:#a5a5a5;\n    background-color:rgba(31,31,31,0.4)\n}\n\n.calendly-overlay .calendly-close-overlay {\n    position:absolute;\n    top:0;\n    left:0;\n    right:0;\n    bottom:0\n}\n\n.calendly-overlay .calendly-popup {\n    box-sizing:border-box;\n    position:absolute;\n    top:50%;\n    left:50%;\n    -webkit-transform:translateY(-50%) translateX(-50%);\n    transform:translateY(-50%) translateX(-50%);\n    width:80%;\n    min-width:900px;\n    max-width:1000px;\n    height:90%;\n    max-height:680px\n}\n\n@media (max-width: 975px) {\n    .calendly-overlay .calendly-popup {\n        position:fixed;\n        top:50px;\n        left:0;\n        right:0;\n        bottom:0;\n        -webkit-transform:none;\n        transform:none;\n        width:100%;\n        height:auto;\n        min-width:0;\n        max-height:none\n    }\n}\n\n.calendly-overlay .calendly-popup .calendly-popup-content {\n    height:100%;\n}\n\n.calendly-overlay .calendly-popup-close {\n    position:absolute;\n    top:25px;\n    right:25px;\n    color:#fff;\n    width:19px;\n    height:19px;\n    cursor:pointer;\n    background:url(https://assets.calendly.com/assets/external/close-icon.svg) no-repeat;\n    background-size:contain\n}\n\n@media (max-width: 975px) {\n    .calendly-overlay .calendly-popup-close {\n        top:15px;\n        right:15px\n    }\n}\n\n.calendly-badge-widget {\n    position:fixed;\n    right:20px;\n    bottom:15px;\n    z-index:9998\n}\n\n.calendly-badge-widget .calendly-badge-content {\n    display:table-cell;\n    width:auto;\n    height:45px;\n    padding:0 30px;\n    border-radius:25px;\n    box-shadow:rgba(0,0,0,0.25) 0 2px 5px;\n    font-family:sans-serif;\n    text-align:center;\n    vertical-align:middle;\n    font-weight:bold;\n    font-size:14px;\n    color:#fff;\n    cursor:pointer\n}\n\n.calendly-badge-widget .calendly-badge-content.calendly-white {\n    color:#666a73\n}\n\n.calendly-badge-widget .calendly-badge-content span {\n    display:block;\n    font-size:12px\n}\n\n.calendly-spinner {\n    position:absolute;\n    top:50%;\n    left:0;\n    right:0;\n    -webkit-transform:translateY(-50%);\n    transform:translateY(-50%);\n    text-align:center;\n    z-index:-1\n}\n\n.calendly-spinner>div {\n    display:inline-block;\n    width:18px;\n    height:18px;\n    background-color:#e1e1e1;\n    border-radius:50%;\n    vertical-align:middle;\n    -webkit-animation:calendly-bouncedelay 1.4s infinite ease-in-out;\n    animation:calendly-bouncedelay 1.4s infinite ease-in-out;\n    -webkit-animation-fill-mode:both;\n    animation-fill-mode:both\n}\n\n.calendly-spinner .calendly-bounce1 {\n    -webkit-animation-delay:-0.32s;\n    animation-delay:-0.32s\n}\n\n.calendly-spinner .calendly-bounce2 {\n    -webkit-animation-delay:-0.16s;\n    animation-delay:-0.16s\n}\n\n@-webkit-keyframes calendly-bouncedelay {\n    0%,80%,100% {\n        -webkit-transform:scale(0);\n        transform:scale(0)\n    } \n    \n    40%{\n        -webkit-transform:scale(1);\n        transform:scale(1)\n    }\n}\n\n@keyframes calendly-bouncedelay{ \n    0%,80%,100% {\n        -webkit-transform:scale(0);\n        transform:scale(0)\n    }\n    \n    40% {\n        -webkit-transform:scale(1);\n        transform:scale(1)\n    }\n}";
-styleInject(css);
+var css_248z = "/*\n  code is extracted from Calendly's embed stylesheet: https://assets.calendly.com/assets/external/widget.css\n*/\n\n.calendly-inline-widget,\n.calendly-inline-widget *,\n.calendly-badge-widget,\n.calendly-badge-widget *,\n.calendly-overlay,\n.calendly-overlay * {\n    font-size:16px;\n    line-height:1.2em\n}\n\n.calendly-inline-widget iframe,\n.calendly-badge-widget iframe,\n.calendly-overlay iframe {\n    display:inline;\n    width:100%;\n    height:100%\n}\n\n.calendly-popup-content {\n    position:relative\n}\n\n.calendly-popup-content.calendly-mobile {\n    -webkit-overflow-scrolling:touch;\n    overflow-y:auto\n}\n\n.calendly-overlay {\n    position:fixed;\n    top:0;\n    left:0;\n    right:0;\n    bottom:0;\n    overflow:hidden;\n    z-index:9999;\n    background-color:#a5a5a5;\n    background-color:rgba(31,31,31,0.4)\n}\n\n.calendly-overlay .calendly-close-overlay {\n    position:absolute;\n    top:0;\n    left:0;\n    right:0;\n    bottom:0\n}\n\n.calendly-overlay .calendly-popup {\n    box-sizing:border-box;\n    position:absolute;\n    top:50%;\n    left:50%;\n    -webkit-transform:translateY(-50%) translateX(-50%);\n    transform:translateY(-50%) translateX(-50%);\n    width:80%;\n    min-width:900px;\n    max-width:1000px;\n    height:90%;\n    max-height:680px\n}\n\n@media (max-width: 975px) {\n    .calendly-overlay .calendly-popup {\n        position:fixed;\n        top:50px;\n        left:0;\n        right:0;\n        bottom:0;\n        -webkit-transform:none;\n        transform:none;\n        width:100%;\n        height:auto;\n        min-width:0;\n        max-height:none\n    }\n}\n\n.calendly-overlay .calendly-popup .calendly-popup-content {\n    height:100%;\n}\n\n.calendly-overlay .calendly-popup-close {\n    position:absolute;\n    top:25px;\n    right:25px;\n    color:#fff;\n    width:19px;\n    height:19px;\n    cursor:pointer;\n    background:url(https://assets.calendly.com/assets/external/close-icon.svg) no-repeat;\n    background-size:contain\n}\n\n@media (max-width: 975px) {\n    .calendly-overlay .calendly-popup-close {\n        top:15px;\n        right:15px\n    }\n}\n\n.calendly-badge-widget {\n    position:fixed;\n    right:20px;\n    bottom:15px;\n    z-index:9998\n}\n\n.calendly-badge-widget .calendly-badge-content {\n    display:table-cell;\n    width:auto;\n    height:45px;\n    padding:0 30px;\n    border-radius:25px;\n    box-shadow:rgba(0,0,0,0.25) 0 2px 5px;\n    font-family:sans-serif;\n    text-align:center;\n    vertical-align:middle;\n    font-weight:bold;\n    font-size:14px;\n    color:#fff;\n    cursor:pointer\n}\n\n.calendly-badge-widget .calendly-badge-content.calendly-white {\n    color:#666a73\n}\n\n.calendly-badge-widget .calendly-badge-content span {\n    display:block;\n    font-size:12px\n}\n\n.calendly-spinner {\n    position:absolute;\n    top:50%;\n    left:0;\n    right:0;\n    -webkit-transform:translateY(-50%);\n    transform:translateY(-50%);\n    text-align:center;\n    z-index:-1\n}\n\n.calendly-spinner>div {\n    display:inline-block;\n    width:18px;\n    height:18px;\n    background-color:#e1e1e1;\n    border-radius:50%;\n    vertical-align:middle;\n    -webkit-animation:calendly-bouncedelay 1.4s infinite ease-in-out;\n    animation:calendly-bouncedelay 1.4s infinite ease-in-out;\n    -webkit-animation-fill-mode:both;\n    animation-fill-mode:both\n}\n\n.calendly-spinner .calendly-bounce1 {\n    -webkit-animation-delay:-0.32s;\n    animation-delay:-0.32s\n}\n\n.calendly-spinner .calendly-bounce2 {\n    -webkit-animation-delay:-0.16s;\n    animation-delay:-0.16s\n}\n\n@-webkit-keyframes calendly-bouncedelay {\n    0%,80%,100% {\n        -webkit-transform:scale(0);\n        transform:scale(0)\n    } \n    \n    40%{\n        -webkit-transform:scale(1);\n        transform:scale(1)\n    }\n}\n\n@keyframes calendly-bouncedelay{ \n    0%,80%,100% {\n        -webkit-transform:scale(0);\n        transform:scale(0)\n    }\n    \n    40% {\n        -webkit-transform:scale(1);\n        transform:scale(1)\n    }\n}";
+styleInject(css_248z);
 
@@ -116,24 +123,24 @@ function sanitizeColorString(str) {
         hasQueryString ? queryString : null,
-        backgroundColor ? "background_color=" + backgroundColor : null,
+        backgroundColor ? "background_color=".concat(backgroundColor) : null,
         hideEventTypeDetails ? "hide_event_type_details=1" : null,
         hideLandingPageDetails ? "hide_landing_page_details=1" : null,
-        primaryColor ? "primary_color=" + primaryColor : null,
-        textColor ? "text_color=" + textColor : null,
+        primaryColor ? "primary_color=".concat(primaryColor) : null,
+        textColor ? "text_color=".concat(textColor) : null,
         hideGdprBanner ? "hide_gdpr_banner=1" : null,
-        name ? "name=" + encodeURIComponent(name) : null,
-        location ? "location=" + encodeURIComponent(location) : null,
-        firstName ? "first_name=" + encodeURIComponent(firstName) : null,
-        lastName ? "last_name=" + encodeURIComponent(lastName) : null,
-        guests ? "guests=" + guests.map(encodeURIComponent).join(",") : null,
-        email ? "email=" + encodeURIComponent(email) : null,
-        date && date instanceof Date ? "date=" + formatDate(date) : null,
-        utmCampaign ? "utm_campaign=" + encodeURIComponent(utmCampaign) : null,
-        utmContent ? "utm_content=" + encodeURIComponent(utmContent) : null,
-        utmMedium ? "utm_medium=" + encodeURIComponent(utmMedium) : null,
-        utmSource ? "utm_source=" + encodeURIComponent(utmSource) : null,
-        utmTerm ? "utm_term=" + encodeURIComponent(utmTerm) : null,
+        name ? "name=".concat(encodeURIComponent(name)) : null,
+        location ? "location=".concat(encodeURIComponent(location)) : null,
+        firstName ? "first_name=".concat(encodeURIComponent(firstName)) : null,
+        lastName ? "last_name=".concat(encodeURIComponent(lastName)) : null,
+        guests ? "guests=".concat(guests.map(encodeURIComponent).join(",")) : null,
+        email ? "email=".concat(encodeURIComponent(email)) : null,
+        date && date instanceof Date ? "date=".concat(formatDate(date)) : null,
+        utmCampaign ? "utm_campaign=".concat(encodeURIComponent(utmCampaign)) : null,
+        utmContent ? "utm_content=".concat(encodeURIComponent(utmContent)) : null,
+        utmMedium ? "utm_medium=".concat(encodeURIComponent(utmMedium)) : null,
+        utmSource ? "utm_source=".concat(encodeURIComponent(utmSource)) : null,
+        utmTerm ? "utm_term=".concat(encodeURIComponent(utmTerm)) : null,
         salesforce_uuid
-            ? "salesforce_uuid=" + encodeURIComponent(salesforce_uuid)
+            ? "salesforce_uuid=".concat(encodeURIComponent(salesforce_uuid))
             : null,
-        embedType ? "embed_type=" + embedType : null,
+        embedType ? "embed_type=".concat(embedType) : null,
         /*
@@ -148,3 +155,3 @@ * https://github.com/tcampb/react-calendly/pull/31
         .join("&");
-    return baseUrl + "?" + updatedQueryString;
+    return "".concat(baseUrl, "?").concat(updatedQueryString);
 };
@@ -157,4 +164,4 @@ var formatDate = function (d) {
         year,
-        month < 10 ? "0" + month : month,
-        day < 10 ? "0" + day : day,
+        month < 10 ? "0".concat(month) : month,
+        day < 10 ? "0".concat(day) : day,
     ].join("-");
@@ -169,3 +176,3 @@ };
         return [];
-    return customAnswersFiltered.map(function (key) { return key + "=" + encodeURIComponent(customAnswers[key]); });
+    return customAnswersFiltered.map(function (key) { return "".concat(key, "=").concat(encodeURIComponent(customAnswers[key])); });
 };
@@ -179,9 +186,9 @@
     LoadingSpinner.prototype.render = function () {
-        return (createElement("div", { className: "calendly-spinner" },
-            createElement("div", { className: "calendly-bounce1" }),
-            createElement("div", { className: "calendly-bounce2" }),
-            createElement("div", { className: "calendly-bounce3" })));
+        return (React.createElement("div", { className: "calendly-spinner" },
+            React.createElement("div", { className: "calendly-bounce1" }),
+            React.createElement("div", { className: "calendly-bounce2" }),
+            React.createElement("div", { className: "calendly-bounce3" })));
     };
     return LoadingSpinner;
-}(Component));
+}(React.Component));
 
@@ -215,8 +222,9 @@ var defaultStyles = {
         });
-        return (createElement("div", { className: "calendly-inline-widget", style: this.props.styles || defaultStyles },
-            this.state.isLoading && createElement(LoadingSpinner, null),
-            createElement("iframe", { width: "100%", height: "100%", frameBorder: "0", title: this.props.iframeTitle || "Calendly Scheduling Page", onLoad: this.onLoad, src: src })));
+        var LoadingSpinner$1 = this.props.LoadingSpinner || LoadingSpinner;
+        return (React.createElement("div", { className: "calendly-inline-widget", style: this.props.styles || defaultStyles },
+            this.state.isLoading && React.createElement(LoadingSpinner$1, null),
+            React.createElement("iframe", { width: "100%", height: "100%", frameBorder: "0", title: this.props.iframeTitle || "Calendly Scheduling Page", onLoad: this.onLoad, src: src })));
     };
     return InlineWidget;
-}(Component));
+}(React.Component));
 
@@ -246,8 +254,9 @@ var ModalContent = /** @class */ (function (_super) {
         });
-        return (createElement(Fragment, null,
-            this.state.isLoading && createElement(LoadingSpinner, null),
-            createElement("iframe", { width: "100%", height: "100%", frameBorder: "0", title: this.props.iframeTitle || "Calendly Scheduling Page", onLoad: this.onLoad, src: src })));
+        var LoadingSpinner$1 = this.props.LoadingSpinner || LoadingSpinner;
+        return (React.createElement(React.Fragment, null,
+            this.state.isLoading && React.createElement(LoadingSpinner$1, null),
+            React.createElement("iframe", { width: "100%", height: "100%", frameBorder: "0", title: this.props.iframeTitle || "Calendly Scheduling Page", onLoad: this.onLoad, src: src })));
     };
     return ModalContent;
-}(Component));
+}(React.Component));
 
@@ -260,8 +269,8 @@ var Modal = (function (props) {
     }
-    return createPortal(createElement("div", { className: "calendly-overlay" },
-        createElement("div", { onClick: props.onModalClose, className: "calendly-close-overlay" }),
-        createElement("div", { className: "calendly-popup" },
-            createElement("div", { className: "calendly-popup-content" },
-                createElement(ModalContent, __assign({}, props)))),
-        createElement("button", { className: "calendly-popup-close", onClick: props.onModalClose, "aria-label": "Close modal", style: {
+    return ReactDom.createPortal(React.createElement("div", { className: "calendly-overlay" },
+        React.createElement("div", { onClick: props.onModalClose, className: "calendly-close-overlay" }),
+        React.createElement("div", { className: "calendly-popup" },
+            React.createElement("div", { className: "calendly-popup-content" },
+                React.createElement(ModalContent, __assign({}, props)))),
+        React.createElement("button", { className: "calendly-popup-close", onClick: props.onModalClose, "aria-label": "Close modal", style: {
                 display: "block",
@@ -297,8 +306,8 @@ border: "none",
     PopupButton.prototype.render = function () {
-        return (createElement(Fragment, null,
-            createElement("button", { onClick: this.onClick, style: this.props.styles || {}, className: this.props.className || "" }, this.props.text),
-            createElement(Modal, __assign({}, this.props, { open: this.state.isOpen, onModalClose: this.onClose, rootElement: this.props.rootElement }))));
+        return (React.createElement(React.Fragment, null,
+            React.createElement("button", { onClick: this.onClick, style: this.props.styles || {}, className: this.props.className || "" }, this.props.text),
+            React.createElement(Modal, __assign({}, this.props, { open: this.state.isOpen, onModalClose: this.onClose, rootElement: this.props.rootElement }))));
     };
     return PopupButton;
-}(Component));
+}(React.Component));
 
@@ -328,4 +337,4 @@ var PopupWidget = /** @class */ (function (_super) {
     PopupWidget.prototype.render = function () {
-        return (createElement("div", { className: "calendly-badge-widget", onClick: this.onClick },
-            createElement("div", { className: "calendly-badge-content", style: {
+        return (React.createElement("div", { className: "calendly-badge-widget", onClick: this.onClick },
+            React.createElement("div", { className: "calendly-badge-content", style: {
                     background: this.props.color || "#00a2ff",
@@ -335,7 +344,7 @@ color: this.props.textColor || "#ffffff",
                 this.props.text || "Schedule time with me",
-                this.props.branding && createElement("span", null, "powered by Calendly")),
-            createElement(Modal, __assign({}, this.props, { open: this.state.isOpen, onModalClose: this.onClose, rootElement: this.props.rootElement }))));
+                this.props.branding && React.createElement("span", null, "powered by Calendly")),
+            React.createElement(Modal, __assign({}, this.props, { open: this.state.isOpen, onModalClose: this.onClose, rootElement: this.props.rootElement }))));
     };
     return PopupWidget;
-}(Component));
+}(React.Component));
 
@@ -345,3 +354,3 @@ var EVENT_NAME = "message";
     var _a = eventHandlers || {}, onDateAndTimeSelected = _a.onDateAndTimeSelected, onEventScheduled = _a.onEventScheduled, onEventTypeViewed = _a.onEventTypeViewed, onProfilePageViewed = _a.onProfilePageViewed;
-    useEffect(function () {
+    React.useEffect(function () {
         var onMessage = function (e) {
@@ -369,3 +378,3 @@ var eventName = e.data.event;
 
-export { InlineWidget, PopupButton, PopupWidget, Modal as PopupModal, useCalendlyEventListener };
+export { InlineWidget, PopupButton, Modal as PopupModal, PopupWidget, useCalendlyEventListener };
 //# sourceMappingURL=index.es.js.map

dist/index.js

 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var React = require('react');
 var ReactDom = require('react-dom');
 
-/*! *****************************************************************************
-Copyright (c) Microsoft Corporation. All rights reserved.
-Licensed under the Apache License, Version 2.0 (the "License"); you may not use
-this file except in compliance with the License. You may obtain a copy of the
-License at http://www.apache.org/licenses/LICENSE-2.0
+function _interopNamespaceDefault(e) {
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n.default = e;
+    return Object.freeze(n);
+}
 
-THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
-WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
-MERCHANTABLITY OR NON-INFRINGEMENT.
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+var ReactDom__namespace = /*#__PURE__*/_interopNamespaceDefault(ReactDom);
 
-See the Apache Version 2.0 License for specific language governing permissions
-and limitations under the License.
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
 ***************************************************************************** */
-/* global Reflect, Promise */
+/* global Reflect, Promise, SuppressedError, Symbol */
 
@@ -27,3 +45,3 @@ var extendStatics = function(d, b) {
         ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
     return extendStatics(d, b);
@@ -33,2 +51,4 @@ };
 function __extends(d, b) {
+    if (typeof b !== "function" && b !== null)
+        throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
     extendStatics(d, b);
@@ -50,2 +70,7 @@ function __() { this.constructor = d; }
 
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
 function styleInject(css, ref) {
@@ -78,4 +103,4 @@ if ( ref === void 0 ) ref = {};
 
-var css = "/*\n  code is extracted from Calendly's embed stylesheet: https://assets.calendly.com/assets/external/widget.css\n*/\n\n.calendly-inline-widget,\n.calendly-inline-widget *,\n.calendly-badge-widget,\n.calendly-badge-widget *,\n.calendly-overlay,\n.calendly-overlay * {\n    font-size:16px;\n    line-height:1.2em\n}\n\n.calendly-inline-widget iframe,\n.calendly-badge-widget iframe,\n.calendly-overlay iframe {\n    display:inline;\n    width:100%;\n    height:100%\n}\n\n.calendly-popup-content {\n    position:relative\n}\n\n.calendly-popup-content.calendly-mobile {\n    -webkit-overflow-scrolling:touch;\n    overflow-y:auto\n}\n\n.calendly-overlay {\n    position:fixed;\n    top:0;\n    left:0;\n    right:0;\n    bottom:0;\n    overflow:hidden;\n    z-index:9999;\n    background-color:#a5a5a5;\n    background-color:rgba(31,31,31,0.4)\n}\n\n.calendly-overlay .calendly-close-overlay {\n    position:absolute;\n    top:0;\n    left:0;\n    right:0;\n    bottom:0\n}\n\n.calendly-overlay .calendly-popup {\n    box-sizing:border-box;\n    position:absolute;\n    top:50%;\n    left:50%;\n    -webkit-transform:translateY(-50%) translateX(-50%);\n    transform:translateY(-50%) translateX(-50%);\n    width:80%;\n    min-width:900px;\n    max-width:1000px;\n    height:90%;\n    max-height:680px\n}\n\n@media (max-width: 975px) {\n    .calendly-overlay .calendly-popup {\n        position:fixed;\n        top:50px;\n        left:0;\n        right:0;\n        bottom:0;\n        -webkit-transform:none;\n        transform:none;\n        width:100%;\n        height:auto;\n        min-width:0;\n        max-height:none\n    }\n}\n\n.calendly-overlay .calendly-popup .calendly-popup-content {\n    height:100%;\n}\n\n.calendly-overlay .calendly-popup-close {\n    position:absolute;\n    top:25px;\n    right:25px;\n    color:#fff;\n    width:19px;\n    height:19px;\n    cursor:pointer;\n    background:url(https://assets.calendly.com/assets/external/close-icon.svg) no-repeat;\n    background-size:contain\n}\n\n@media (max-width: 975px) {\n    .calendly-overlay .calendly-popup-close {\n        top:15px;\n        right:15px\n    }\n}\n\n.calendly-badge-widget {\n    position:fixed;\n    right:20px;\n    bottom:15px;\n    z-index:9998\n}\n\n.calendly-badge-widget .calendly-badge-content {\n    display:table-cell;\n    width:auto;\n    height:45px;\n    padding:0 30px;\n    border-radius:25px;\n    box-shadow:rgba(0,0,0,0.25) 0 2px 5px;\n    font-family:sans-serif;\n    text-align:center;\n    vertical-align:middle;\n    font-weight:bold;\n    font-size:14px;\n    color:#fff;\n    cursor:pointer\n}\n\n.calendly-badge-widget .calendly-badge-content.calendly-white {\n    color:#666a73\n}\n\n.calendly-badge-widget .calendly-badge-content span {\n    display:block;\n    font-size:12px\n}\n\n.calendly-spinner {\n    position:absolute;\n    top:50%;\n    left:0;\n    right:0;\n    -webkit-transform:translateY(-50%);\n    transform:translateY(-50%);\n    text-align:center;\n    z-index:-1\n}\n\n.calendly-spinner>div {\n    display:inline-block;\n    width:18px;\n    height:18px;\n    background-color:#e1e1e1;\n    border-radius:50%;\n    vertical-align:middle;\n    -webkit-animation:calendly-bouncedelay 1.4s infinite ease-in-out;\n    animation:calendly-bouncedelay 1.4s infinite ease-in-out;\n    -webkit-animation-fill-mode:both;\n    animation-fill-mode:both\n}\n\n.calendly-spinner .calendly-bounce1 {\n    -webkit-animation-delay:-0.32s;\n    animation-delay:-0.32s\n}\n\n.calendly-spinner .calendly-bounce2 {\n    -webkit-animation-delay:-0.16s;\n    animation-delay:-0.16s\n}\n\n@-webkit-keyframes calendly-bouncedelay {\n    0%,80%,100% {\n        -webkit-transform:scale(0);\n        transform:scale(0)\n    } \n    \n    40%{\n        -webkit-transform:scale(1);\n        transform:scale(1)\n    }\n}\n\n@keyframes calendly-bouncedelay{ \n    0%,80%,100% {\n        -webkit-transform:scale(0);\n        transform:scale(0)\n    }\n    \n    40% {\n        -webkit-transform:scale(1);\n        transform:scale(1)\n    }\n}";
-styleInject(css);
+var css_248z = "/*\n  code is extracted from Calendly's embed stylesheet: https://assets.calendly.com/assets/external/widget.css\n*/\n\n.calendly-inline-widget,\n.calendly-inline-widget *,\n.calendly-badge-widget,\n.calendly-badge-widget *,\n.calendly-overlay,\n.calendly-overlay * {\n    font-size:16px;\n    line-height:1.2em\n}\n\n.calendly-inline-widget iframe,\n.calendly-badge-widget iframe,\n.calendly-overlay iframe {\n    display:inline;\n    width:100%;\n    height:100%\n}\n\n.calendly-popup-content {\n    position:relative\n}\n\n.calendly-popup-content.calendly-mobile {\n    -webkit-overflow-scrolling:touch;\n    overflow-y:auto\n}\n\n.calendly-overlay {\n    position:fixed;\n    top:0;\n    left:0;\n    right:0;\n    bottom:0;\n    overflow:hidden;\n    z-index:9999;\n    background-color:#a5a5a5;\n    background-color:rgba(31,31,31,0.4)\n}\n\n.calendly-overlay .calendly-close-overlay {\n    position:absolute;\n    top:0;\n    left:0;\n    right:0;\n    bottom:0\n}\n\n.calendly-overlay .calendly-popup {\n    box-sizing:border-box;\n    position:absolute;\n    top:50%;\n    left:50%;\n    -webkit-transform:translateY(-50%) translateX(-50%);\n    transform:translateY(-50%) translateX(-50%);\n    width:80%;\n    min-width:900px;\n    max-width:1000px;\n    height:90%;\n    max-height:680px\n}\n\n@media (max-width: 975px) {\n    .calendly-overlay .calendly-popup {\n        position:fixed;\n        top:50px;\n        left:0;\n        right:0;\n        bottom:0;\n        -webkit-transform:none;\n        transform:none;\n        width:100%;\n        height:auto;\n        min-width:0;\n        max-height:none\n    }\n}\n\n.calendly-overlay .calendly-popup .calendly-popup-content {\n    height:100%;\n}\n\n.calendly-overlay .calendly-popup-close {\n    position:absolute;\n    top:25px;\n    right:25px;\n    color:#fff;\n    width:19px;\n    height:19px;\n    cursor:pointer;\n    background:url(https://assets.calendly.com/assets/external/close-icon.svg) no-repeat;\n    background-size:contain\n}\n\n@media (max-width: 975px) {\n    .calendly-overlay .calendly-popup-close {\n        top:15px;\n        right:15px\n    }\n}\n\n.calendly-badge-widget {\n    position:fixed;\n    right:20px;\n    bottom:15px;\n    z-index:9998\n}\n\n.calendly-badge-widget .calendly-badge-content {\n    display:table-cell;\n    width:auto;\n    height:45px;\n    padding:0 30px;\n    border-radius:25px;\n    box-shadow:rgba(0,0,0,0.25) 0 2px 5px;\n    font-family:sans-serif;\n    text-align:center;\n    vertical-align:middle;\n    font-weight:bold;\n    font-size:14px;\n    color:#fff;\n    cursor:pointer\n}\n\n.calendly-badge-widget .calendly-badge-content.calendly-white {\n    color:#666a73\n}\n\n.calendly-badge-widget .calendly-badge-content span {\n    display:block;\n    font-size:12px\n}\n\n.calendly-spinner {\n    position:absolute;\n    top:50%;\n    left:0;\n    right:0;\n    -webkit-transform:translateY(-50%);\n    transform:translateY(-50%);\n    text-align:center;\n    z-index:-1\n}\n\n.calendly-spinner>div {\n    display:inline-block;\n    width:18px;\n    height:18px;\n    background-color:#e1e1e1;\n    border-radius:50%;\n    vertical-align:middle;\n    -webkit-animation:calendly-bouncedelay 1.4s infinite ease-in-out;\n    animation:calendly-bouncedelay 1.4s infinite ease-in-out;\n    -webkit-animation-fill-mode:both;\n    animation-fill-mode:both\n}\n\n.calendly-spinner .calendly-bounce1 {\n    -webkit-animation-delay:-0.32s;\n    animation-delay:-0.32s\n}\n\n.calendly-spinner .calendly-bounce2 {\n    -webkit-animation-delay:-0.16s;\n    animation-delay:-0.16s\n}\n\n@-webkit-keyframes calendly-bouncedelay {\n    0%,80%,100% {\n        -webkit-transform:scale(0);\n        transform:scale(0)\n    } \n    \n    40%{\n        -webkit-transform:scale(1);\n        transform:scale(1)\n    }\n}\n\n@keyframes calendly-bouncedelay{ \n    0%,80%,100% {\n        -webkit-transform:scale(0);\n        transform:scale(0)\n    }\n    \n    40% {\n        -webkit-transform:scale(1);\n        transform:scale(1)\n    }\n}";
+styleInject(css_248z);
 
@@ -120,24 +145,24 @@ function sanitizeColorString(str) {
         hasQueryString ? queryString : null,
-        backgroundColor ? "background_color=" + backgroundColor : null,
+        backgroundColor ? "background_color=".concat(backgroundColor) : null,
         hideEventTypeDetails ? "hide_event_type_details=1" : null,
         hideLandingPageDetails ? "hide_landing_page_details=1" : null,
-        primaryColor ? "primary_color=" + primaryColor : null,
-        textColor ? "text_color=" + textColor : null,
+        primaryColor ? "primary_color=".concat(primaryColor) : null,
+        textColor ? "text_color=".concat(textColor) : null,
         hideGdprBanner ? "hide_gdpr_banner=1" : null,
-        name ? "name=" + encodeURIComponent(name) : null,
-        location ? "location=" + encodeURIComponent(location) : null,
-        firstName ? "first_name=" + encodeURIComponent(firstName) : null,
-        lastName ? "last_name=" + encodeURIComponent(lastName) : null,
-        guests ? "guests=" + guests.map(encodeURIComponent).join(",") : null,
-        email ? "email=" + encodeURIComponent(email) : null,
-        date && date instanceof Date ? "date=" + formatDate(date) : null,
-        utmCampaign ? "utm_campaign=" + encodeURIComponent(utmCampaign) : null,
-        utmContent ? "utm_content=" + encodeURIComponent(utmContent) : null,
-        utmMedium ? "utm_medium=" + encodeURIComponent(utmMedium) : null,
-        utmSource ? "utm_source=" + encodeURIComponent(utmSource) : null,
-        utmTerm ? "utm_term=" + encodeURIComponent(utmTerm) : null,
+        name ? "name=".concat(encodeURIComponent(name)) : null,
+        location ? "location=".concat(encodeURIComponent(location)) : null,
+        firstName ? "first_name=".concat(encodeURIComponent(firstName)) : null,
+        lastName ? "last_name=".concat(encodeURIComponent(lastName)) : null,
+        guests ? "guests=".concat(guests.map(encodeURIComponent).join(",")) : null,
+        email ? "email=".concat(encodeURIComponent(email)) : null,
+        date && date instanceof Date ? "date=".concat(formatDate(date)) : null,
+        utmCampaign ? "utm_campaign=".concat(encodeURIComponent(utmCampaign)) : null,
+        utmContent ? "utm_content=".concat(encodeURIComponent(utmContent)) : null,
+        utmMedium ? "utm_medium=".concat(encodeURIComponent(utmMedium)) : null,
+        utmSource ? "utm_source=".concat(encodeURIComponent(utmSource)) : null,
+        utmTerm ? "utm_term=".concat(encodeURIComponent(utmTerm)) : null,
         salesforce_uuid
-            ? "salesforce_uuid=" + encodeURIComponent(salesforce_uuid)
+            ? "salesforce_uuid=".concat(encodeURIComponent(salesforce_uuid))
             : null,
-        embedType ? "embed_type=" + embedType : null,
+        embedType ? "embed_type=".concat(embedType) : null,
         /*
@@ -152,3 +177,3 @@ * https://github.com/tcampb/react-calendly/pull/31
         .join("&");
-    return baseUrl + "?" + updatedQueryString;
+    return "".concat(baseUrl, "?").concat(updatedQueryString);
 };
@@ -161,4 +186,4 @@ var formatDate = function (d) {
         year,
-        month < 10 ? "0" + month : month,
-        day < 10 ? "0" + day : day,
+        month < 10 ? "0".concat(month) : month,
+        day < 10 ? "0".concat(day) : day,
     ].join("-");
@@ -173,3 +198,3 @@ };
         return [];
-    return customAnswersFiltered.map(function (key) { return key + "=" + encodeURIComponent(customAnswers[key]); });
+    return customAnswersFiltered.map(function (key) { return "".concat(key, "=").concat(encodeURIComponent(customAnswers[key])); });
 };
@@ -183,9 +208,9 @@
     LoadingSpinner.prototype.render = function () {
-        return (React.createElement("div", { className: "calendly-spinner" },
-            React.createElement("div", { className: "calendly-bounce1" }),
-            React.createElement("div", { className: "calendly-bounce2" }),
-            React.createElement("div", { className: "calendly-bounce3" })));
+        return (React__namespace.createElement("div", { className: "calendly-spinner" },
+            React__namespace.createElement("div", { className: "calendly-bounce1" }),
+            React__namespace.createElement("div", { className: "calendly-bounce2" }),
+            React__namespace.createElement("div", { className: "calendly-bounce3" })));
     };
     return LoadingSpinner;
-}(React.Component));
+}(React__namespace.Component));
 
@@ -219,8 +244,9 @@ var defaultStyles = {
         });
-        return (React.createElement("div", { className: "calendly-inline-widget", style: this.props.styles || defaultStyles },
-            this.state.isLoading && React.createElement(LoadingSpinner, null),
-            React.createElement("iframe", { width: "100%", height: "100%", frameBorder: "0", title: this.props.iframeTitle || "Calendly Scheduling Page", onLoad: this.onLoad, src: src })));
+        var LoadingSpinner$1 = this.props.LoadingSpinner || LoadingSpinner;
+        return (React__namespace.createElement("div", { className: "calendly-inline-widget", style: this.props.styles || defaultStyles },
+            this.state.isLoading && React__namespace.createElement(LoadingSpinner$1, null),
+            React__namespace.createElement("iframe", { width: "100%", height: "100%", frameBorder: "0", title: this.props.iframeTitle || "Calendly Scheduling Page", onLoad: this.onLoad, src: src })));
     };
     return InlineWidget;
-}(React.Component));
+}(React__namespace.Component));
 
@@ -250,8 +276,9 @@ var ModalContent = /** @class */ (function (_super) {
         });
-        return (React.createElement(React.Fragment, null,
-            this.state.isLoading && React.createElement(LoadingSpinner, null),
-            React.createElement("iframe", { width: "100%", height: "100%", frameBorder: "0", title: this.props.iframeTitle || "Calendly Scheduling Page", onLoad: this.onLoad, src: src })));
+        var LoadingSpinner$1 = this.props.LoadingSpinner || LoadingSpinner;
+        return (React__namespace.createElement(React__namespace.Fragment, null,
+            this.state.isLoading && React__namespace.createElement(LoadingSpinner$1, null),
+            React__namespace.createElement("iframe", { width: "100%", height: "100%", frameBorder: "0", title: this.props.iframeTitle || "Calendly Scheduling Page", onLoad: this.onLoad, src: src })));
     };
     return ModalContent;
-}(React.Component));
+}(React__namespace.Component));
 
@@ -264,8 +291,8 @@ var Modal = (function (props) {
     }
-    return ReactDom.createPortal(React.createElement("div", { className: "calendly-overlay" },
-        React.createElement("div", { onClick: props.onModalClose, className: "calendly-close-overlay" }),
-        React.createElement("div", { className: "calendly-popup" },
-            React.createElement("div", { className: "calendly-popup-content" },
-                React.createElement(ModalContent, __assign({}, props)))),
-        React.createElement("button", { className: "calendly-popup-close", onClick: props.onModalClose, "aria-label": "Close modal", style: {
+    return ReactDom__namespace.createPortal(React__namespace.createElement("div", { className: "calendly-overlay" },
+        React__namespace.createElement("div", { onClick: props.onModalClose, className: "calendly-close-overlay" }),
+        React__namespace.createElement("div", { className: "calendly-popup" },
+            React__namespace.createElement("div", { className: "calendly-popup-content" },
+                React__namespace.createElement(ModalContent, __assign({}, props)))),
+        React__namespace.createElement("button", { className: "calendly-popup-close", onClick: props.onModalClose, "aria-label": "Close modal", style: {
                 display: "block",
@@ -301,8 +328,8 @@ border: "none",
     PopupButton.prototype.render = function () {
-        return (React.createElement(React.Fragment, null,
-            React.createElement("button", { onClick: this.onClick, style: this.props.styles || {}, className: this.props.className || "" }, this.props.text),
-            React.createElement(Modal, __assign({}, this.props, { open: this.state.isOpen, onModalClose: this.onClose, rootElement: this.props.rootElement }))));
+        return (React__namespace.createElement(React__namespace.Fragment, null,
+            React__namespace.createElement("button", { onClick: this.onClick, style: this.props.styles || {}, className: this.props.className || "" }, this.props.text),
+            React__namespace.createElement(Modal, __assign({}, this.props, { open: this.state.isOpen, onModalClose: this.onClose, rootElement: this.props.rootElement }))));
     };
     return PopupButton;
-}(React.Component));
+}(React__namespace.Component));
 
@@ -332,4 +359,4 @@ var PopupWidget = /** @class */ (function (_super) {
     PopupWidget.prototype.render = function () {
-        return (React.createElement("div", { className: "calendly-badge-widget", onClick: this.onClick },
-            React.createElement("div", { className: "calendly-badge-content", style: {
+        return (React__namespace.createElement("div", { className: "calendly-badge-widget", onClick: this.onClick },
+            React__namespace.createElement("div", { className: "calendly-badge-content", style: {
                     background: this.props.color || "#00a2ff",
@@ -339,7 +366,7 @@ color: this.props.textColor || "#ffffff",
                 this.props.text || "Schedule time with me",
-                this.props.branding && React.createElement("span", null, "powered by Calendly")),
-            React.createElement(Modal, __assign({}, this.props, { open: this.state.isOpen, onModalClose: this.onClose, rootElement: this.props.rootElement }))));
+                this.props.branding && React__namespace.createElement("span", null, "powered by Calendly")),
+            React__namespace.createElement(Modal, __assign({}, this.props, { open: this.state.isOpen, onModalClose: this.onClose, rootElement: this.props.rootElement }))));
     };
     return PopupWidget;
-}(React.Component));
+}(React__namespace.Component));
 
@@ -349,3 +376,3 @@ var EVENT_NAME = "message";
     var _a = eventHandlers || {}, onDateAndTimeSelected = _a.onDateAndTimeSelected, onEventScheduled = _a.onEventScheduled, onEventTypeViewed = _a.onEventTypeViewed, onProfilePageViewed = _a.onProfilePageViewed;
-    React.useEffect(function () {
+    React__namespace.useEffect(function () {
         var onMessage = function (e) {
@@ -375,5 +402,5 @@ var eventName = e.data.event;
 exports.PopupButton = PopupButton;
+exports.PopupModal = Modal;
 exports.PopupWidget = PopupWidget;
-exports.PopupModal = Modal;
 exports.useCalendlyEventListener = useCalendlyEventListener;
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "react-calendly",
-  "version": "4.1.1",
+  "version": "4.2.0",
   "description": "Calendly integration for React apps",
@@ -22,11 +22,5 @@ "author": "tcampb",
   "scripts": {
-    "test": "cross-env CI=1 react-scripts-ts test --env=jsdom",
-    "test:watch": "react-scripts-ts test --env=jsdom",
     "build": "rollup -c && tsc --emitDeclarationOnly",
     "start": "rollup -c -w",
-    "prepare": "npm run build",
-    "predeploy": "npm install && npm run build-storybook",
-    "deploy": "gh-pages -d storybook-static",
-    "storybook": "start-storybook -p 9001 -c .storybook ",
-    "build-storybook": "build-storybook"
+    "prepare": "npm run build"
   },
@@ -38,38 +32,15 @@ "peerDependencies": {
   "devDependencies": {
-    "@rollup/plugin-typescript": "^2.1.0",
-    "@storybook/addon-actions": "^5.3.7",
-    "@storybook/addon-info": "^5.3.17",
-    "@storybook/addon-knobs": "^5.3.17",
-    "@storybook/addon-links": "^5.3.7",
-    "@storybook/addons": "^5.3.7",
-    "@storybook/cli": "^5.3.7",
-    "@storybook/preset-create-react-app": "^1.5.2",
-    "@storybook/react": "^5.3.7",
-    "@svgr/rollup": "^2.4.1",
-    "@types/jest": "^23.3.14",
-    "@types/node": "^13.9.5",
+    "@rollup/plugin-typescript": "^11.1.4",
     "@types/react": "^16.8.0",
     "@types/react-dom": "^16.8.0",
-    "babel-core": "^6.26.3",
-    "babel-loader": "^7.1.5",
-    "babel-runtime": "^6.26.0",
-    "cross-env": "^5.1.4",
-    "gh-pages": "^1.2.0",
-    "jest": "^24.9.0",
-    "mini-css-extract-plugin": "^0.9.0",
     "prettier": "2.0.2",
     "react": "^16.8.0",
-    "react-docgen-typescript-loader": "^3.7.1",
     "react-dom": "^16.8.0",
-    "react-scripts": "3.3.0",
-    "rollup": "^0.62.0",
-    "rollup-plugin-babel": "^3.0.7",
-    "rollup-plugin-commonjs": "^9.1.3",
-    "rollup-plugin-postcss": "^1.6.2",
-    "rollup-plugin-node-resolve": "^3.3.0",
-    "rollup-plugin-peer-deps-external": "^2.2.0",
-    "rollup-plugin-url": "^1.4.0",
-    "ts-jest": "^24.3.0",
-    "ts-loader": "^6.2.2",
-    "typescript": "^4.0.5"
+    "rollup": "^3.29.4",
+    "typescript": "^4.0.5",
+    "@rollup/plugin-commonjs": "^25.0.4",
+    "@rollup/plugin-node-resolve": "^15.2.1",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
+    "tslib": "^2.6.2"
   },
@@ -76,0 +47,0 @@ "files": [

README.md

@@ -263,4 +263,4 @@ # react-calendly
 
-- [Scheduled Event Schema](https://developer.calendly.com/docs/api-docs/reference/calendly-api/openapi.yaml/paths/~1scheduled_events~1%7Buuid%7D/get)
-- [Invitee Schema](https://developer.calendly.com/docs/api-docs/reference/calendly-api/openapi.yaml/paths/~1scheduled_events~1%7Bevent_uuid%7D~1invitees~1%7Binvitee_uuid%7D/get)
+- [Scheduled Event Schema](https://developer.calendly.com/api-docs/e2f95ebd44914-get-event)
+- [Invitee Schema](https://developer.calendly.com/api-docs/8305c0ccfac70-get-event-invitee)
 
@@ -267,0 +267,0 @@ #### Can I use react-calendly with Nextjs?

typings/calendly.d.ts

@@ -1,5 +0,6 @@
-declare type Optional<T extends object> = {
+/// <reference types="react" />
+type Optional<T extends object> = {
     [P in keyof T]?: T[P];
 };
-export declare type Prefill = Optional<{
+export type Prefill = Optional<{
     name: string;
@@ -31,3 +32,3 @@ email: string;
 }
-export declare type Utm = Optional<{
+export type Utm = Optional<{
     utmCampaign: string;
@@ -44,4 +45,8 @@ utmSource: string;
  */
-export declare type IframeTitle = string;
-export declare type PageSettings = Optional<{
+export type IframeTitle = string;
+/**
+ * @description LoadingSpinner is a React component that will be displayed while the Calendly iframe is loading. If no component is provided, the default Calendly loading spinner will be used.
+ */
+export type LoadingSpinner = React.FunctionComponent;
+export type PageSettings = Optional<{
     /**
@@ -48,0 +53,0 @@ * @description Use this setting to hide your profile picture, name, event duration, location, and description when Calendly is embedded. This will help reduce duplicate information that you may already have on your web page.

typings/components/hooks/useCalendlyEventListener.d.ts

 import { CalendlyEvent } from "../../calendly";
-export declare type DateAndTimeSelectedEvent = MessageEvent<{
+export type DateAndTimeSelectedEvent = MessageEvent<{
     event: CalendlyEvent.DATE_AND_TIME_SELECTED;
     payload: {};
 }>;
-export declare type EventScheduledEvent = MessageEvent<{
+export type EventScheduledEvent = MessageEvent<{
     event: CalendlyEvent.EVENT_SCHEDULED;
@@ -27,11 +27,11 @@ payload: {
 }>;
-export declare type EventTypeViewedEvent = MessageEvent<{
+export type EventTypeViewedEvent = MessageEvent<{
     event: CalendlyEvent.EVENT_TYPE_VIEWED;
     payload: {};
 }>;
-export declare type ProfilePageViewedEvent = MessageEvent<{
+export type ProfilePageViewedEvent = MessageEvent<{
     event: CalendlyEvent.PROFILE_PAGE_VIEWED;
     payload: {};
 }>;
-export declare type CalendlyEventHandlers = {
+export type CalendlyEventHandlers = {
     onDateAndTimeSelected?: (e: DateAndTimeSelectedEvent) => any;
@@ -38,0 +38,0 @@ onEventScheduled?: (e: EventScheduledEvent) => any;

typings/components/InlineWidget/InlineWidget.d.ts

 import * as React from "react";
 import "../../calendly-widget.css";
-import { PageSettings, Prefill, Utm, IframeTitle } from "../../calendly";
+import { PageSettings, Prefill, Utm, IframeTitle, LoadingSpinner } from "../../calendly";
 export interface Props {
@@ -11,2 +11,3 @@ url: string;
     iframeTitle?: IframeTitle;
+    LoadingSpinner?: LoadingSpinner;
 }
@@ -18,4 +19,4 @@ declare class InlineWidget extends React.Component<Props, {
     private onLoad;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export default InlineWidget;

typings/components/LoadingSpinner/LoadingSpinner.d.ts

 import * as React from "react";
 import "../../calendly-widget.css";
 declare class LoadingSpinner extends React.Component {
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export default LoadingSpinner;

typings/components/PopupButton/PopupButton.d.ts

 import * as React from "react";
 import "../../calendly-widget.css";
-import { PageSettings, Prefill, Utm, IframeTitle } from "../../calendly";
+import { PageSettings, Prefill, Utm, IframeTitle, LoadingSpinner } from "../../calendly";
 export interface Props {
@@ -14,2 +14,3 @@ url: string;
     iframeTitle?: IframeTitle;
+    LoadingSpinner?: LoadingSpinner;
 }
@@ -22,4 +23,4 @@ declare class PopupButton extends React.Component<Props, {
     onClose(e: React.SyntheticEvent): void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export default PopupButton;

typings/components/PopupModal/Modal.d.ts

 import * as React from "react";
+import { LoadingSpinner } from "../../calendly";
 import { Props as ModalContentProps } from "./ModalContent";
@@ -7,4 +8,5 @@ interface Props extends ModalContentProps {
     rootElement: HTMLElement;
+    LoadingSpinner?: LoadingSpinner;
 }
 declare const _default: (props: Props) => React.ReactPortal | null;
 export default _default;

typings/components/PopupModal/ModalContent.d.ts

 import * as React from "react";
 import "../../calendly-widget.css";
-import { PageSettings, Prefill, Utm, IframeTitle } from "../../calendly";
+import { PageSettings, Prefill, Utm, IframeTitle, LoadingSpinner } from "../../calendly";
 export interface Props {
@@ -10,2 +10,3 @@ url: string;
     iframeTitle?: IframeTitle;
+    LoadingSpinner?: LoadingSpinner;
 }
@@ -17,4 +18,4 @@ declare class ModalContent extends React.Component<Props, {
     private onLoad;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export default ModalContent;

typings/components/PopupWidget/PopupWidget.d.ts

 import * as React from "react";
 import "../../calendly-widget.css";
-import { PageSettings, Prefill, Utm, IframeTitle } from "../../calendly";
+import { PageSettings, Prefill, Utm, IframeTitle, LoadingSpinner } from "../../calendly";
 export interface Props {
@@ -15,2 +15,3 @@ url: string;
     iframeTitle?: IframeTitle;
+    LoadingSpinner?: LoadingSpinner;
 }
@@ -23,4 +24,4 @@ declare class PopupWidget extends React.Component<Props, {
     onClose(e: React.SyntheticEvent): void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export default PopupWidget;

Fixed alerts

Mixed license

License

(Experimental) Package contains multiple licenses.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

148616

increased by2.52%

Dev dependency count

13

decreased by-63.89%

Number of package files

27

increased by50%

Number of low license alerts

0

decreased by-100%

Lines of code

1373

increased by36.21%

No dependency changes