@magicbell/magicbell-react - npm Package Compare versions

Comparing version 6.8.0-beta.1 to 6.8.0

dist/cjs/components/ClickableNotification/NotificationTitle.js

@@ -19,5 +19,5 @@ "use strict";
     var title = notification.title;
-    return (core_1.jsx("p", { title: title, css: core_1.css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        cursor: inherit;\n        line-height: 1.2 !important;\n        word-break: break-word !important;\n      "], ["\n        cursor: inherit;\n        line-height: 1.2 !important;\n        word-break: break-word !important;\n      "]))) }, title));
+    return (core_1.jsx("p", { title: title, css: core_1.css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        cursor: inherit;\n        font-weight: 500 !important;\n        line-height: 1.2 !important;\n        word-break: break-word !important;\n      "], ["\n        cursor: inherit;\n        font-weight: 500 !important;\n        line-height: 1.2 !important;\n        word-break: break-word !important;\n      "]))) }, title));
 }
 exports.default = mobx_react_lite_1.observer(NotificationTitle);
 var templateObject_1;

dist/cjs/components/ClickableNotification/StyledContainer.js

@@ -33,5 +33,5 @@ "use strict";
         themeVariation = notificationTheme.unread;
-    var style = core_1.css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    align-items: center;\n    background-color: ", " !important;\n    border-radius: ", ";\n    color: ", " !important;\n    cursor: pointer;\n    display: flex;\n    font-family: ", ";\n    font-size: ", ";\n    margin: 8px !important;\n    overflow: hidden;\n    text-align: ", " !important;\n    text-transform: ", ";\n    transition: background-color 300ms ease-out;\n    padding: 0.5em !important;\n\n    &:hover {\n      background-color: ", " !important;\n    }\n\n    & > a {\n      flex: 1;\n      display: flex;\n      align-items: center;\n\n      & > div {\n        padding: 0.5em !important;\n      }\n\n      & > div:first-of-type {\n        flex: 1;\n      }\n    }\n  "], ["\n    align-items: center;\n    background-color: ",
-        " !important;\n    border-radius: ", ";\n    color: ", " !important;\n    cursor: pointer;\n    display: flex;\n    font-family: ", ";\n    font-size: ", ";\n    margin: 8px !important;\n    overflow: hidden;\n    text-align: ", " !important;\n    text-transform: ", ";\n    transition: background-color 300ms ease-out;\n    padding: 0.5em !important;\n\n    &:hover {\n      background-color: ",
-        " !important;\n    }\n\n    & > a {\n      flex: 1;\n      display: flex;\n      align-items: center;\n\n      & > div {\n        padding: 0.5em !important;\n      }\n\n      & > div:first-of-type {\n        flex: 1;\n      }\n    }\n  "])), notification.isSeen
+    var style = core_1.css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    background-color: ", " !important;\n    border-radius: ", ";\n    color: ", " !important;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    font-family: ", ";\n    font-size: ", ";\n    margin: 4px !important;\n    overflow: hidden;\n    text-align: ", " !important;\n    text-transform: ", ";\n    transition: background-color 300ms ease-out;\n    padding: 16px 20px !important;\n\n    &:hover {\n      background-color: ", " !important;\n    }\n\n    & > a {\n      flex: 1;\n      display: inline-flex;\n      align-items: center;\n      margin: 0 0 0 -16px;\n\n      & > div {\n        margin: 0 0 0 16px;\n      }\n\n      & > div:first-of-type {\n        flex: 1;\n      }\n    }\n  "], ["\n    background-color: ",
+        " !important;\n    border-radius: ", ";\n    color: ", " !important;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    font-family: ", ";\n    font-size: ", ";\n    margin: 4px !important;\n    overflow: hidden;\n    text-align: ", " !important;\n    text-transform: ", ";\n    transition: background-color 300ms ease-out;\n    padding: 16px 20px !important;\n\n    &:hover {\n      background-color: ",
+        " !important;\n    }\n\n    & > a {\n      flex: 1;\n      display: inline-flex;\n      align-items: center;\n      margin: 0 0 0 -16px;\n\n      & > div {\n        margin: 0 0 0 16px;\n      }\n\n      & > div:first-of-type {\n        flex: 1;\n      }\n    }\n  "])), notification.isSeen
         ? 'transparent'
@@ -38,0 +38,0 @@ : color_1.toRGBA(themeVariation.backgroundColor, themeVariation.backgroundOpacity), themeVariation.borderRadius, themeVariation.textColor, themeVariation.fontFamily, themeVariation.fontSize, themeVariation.textAlign, themeVariation.textTransform, color_1.darken(color_1.toRGBA(themeVariation.backgroundColor, themeVariation.backgroundOpacity), 5));

dist/cjs/components/FloatingNotificationInbox/FloatingNotificationInbox.js

@@ -49,3 +49,3 @@ "use strict";
     var theme = react_1.useContext(MagicBellContext_1.default).theme;
-    var headerTheme = theme.header, footerTheme = theme.footer, notificationTheme = theme.notification;
+    var headerTheme = theme.header, footerTheme = theme.footer, containerTheme = theme.container;
     var handleNotificationClick = function (notification) {
@@ -59,3 +59,3 @@ onNotificationClick === null || onNotificationClick === void 0 ? void 0 : onNotificationClick(notification);
     };
-    return (core_1.jsx(headless_1.default, { render: function (attrs) { return (core_1.jsx("div", __assign({ css: core_1.css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n            background-color: ", ";\n            color: ", ";\n            border-radius: ", " ", ";\n            box-shadow: 0px 20px 25px rgba(84, 95, 111, 0.1), 0px 10px 10px rgba(84, 95, 111, 0.04);\n            width: ", "px;\n            max-width: calc(100vw - 10px);\n          "], ["\n            background-color: ", ";\n            color: ", ";\n            border-radius: ", " ", ";\n            box-shadow: 0px 20px 25px rgba(84, 95, 111, 0.1), 0px 10px 10px rgba(84, 95, 111, 0.04);\n            width: ", "px;\n            max-width: calc(100vw - 10px);\n          "])), notificationTheme.default.backgroundColor, notificationTheme.default.textColor, headerTheme.borderRadius, footerTheme.borderRadius, width) }, attrs),
+    return (core_1.jsx(headless_1.default, { render: function (attrs) { return (core_1.jsx("div", __assign({ css: core_1.css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n            background-color: ", ";\n            color: ", ";\n            border-radius: ", " ", ";\n            box-shadow: 0px 20px 25px rgba(84, 95, 111, 0.1), 0px 10px 10px rgba(84, 95, 111, 0.04);\n            width: ", "px;\n            max-width: calc(100vw - 10px);\n          "], ["\n            background-color: ", ";\n            color: ", ";\n            border-radius: ", " ", ";\n            box-shadow: 0px 20px 25px rgba(84, 95, 111, 0.1), 0px 10px 10px rgba(84, 95, 111, 0.04);\n            width: ", "px;\n            max-width: calc(100vw - 10px);\n          "])), containerTheme.backgroundColor, containerTheme.textColor, headerTheme.borderRadius, footerTheme.borderRadius, width) }, attrs),
             core_1.jsx(NotificationInbox_1.default, __assign({ onNotificationClick: handleNotificationClick }, inboxProps)),
@@ -62,0 +62,0 @@ core_1.jsx(Arrow_1.default, { placement: attrs['data-placement'] }))); }, visible: isOpen, onClickOutside: handleClickOutside, reference: launcherRef, placement: placement, interactive: true }));

dist/cjs/components/Footer/Footer.js

@@ -28,8 +28,10 @@ "use strict";
     var footerTheme = theme.footer;
-    var style = core_1.css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    background: ", ";\n    border-radius: 0 0 ", " ", " !important;\n    color: ", " !important;\n    text-align: ", " !important;\n\n    a {\n      color: ", " !important;\n      display: inline-block;\n\n      svg {\n        fill: currentColor;\n      }\n    }\n  "], ["\n    background: ", ";\n    border-radius: 0 0 ", " ", " !important;\n    color: ", " !important;\n    text-align: ", " !important;\n\n    a {\n      color: ", " !important;\n      display: inline-block;\n\n      svg {\n        fill: currentColor;\n      }\n    }\n  "])), color_1.toRGBA(footerTheme.backgroundColor, footerTheme.backgroundOpacity), footerTheme.borderRadius, footerTheme.borderRadius, footerTheme.textColor, footerTheme.textAlign, footerTheme.textColor);
+    var style = core_1.css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    background: ", ";\n    border-radius: 0 0 ", " ", " !important;\n    color: ", " !important;\n    text-align: ", " !important;\n    font-size: 0.75em !important;\n    padding: 14px 24px !important;\n\n    a {\n      color: ", " !important;\n      margin-left: 4px !important;\n    }\n  "], ["\n    background: ", ";\n    border-radius: 0 0 ", " ", " !important;\n    color: ", " !important;\n    text-align: ", " !important;\n    font-size: 0.75em !important;\n    padding: 14px 24px !important;\n\n    a {\n      color: ", " !important;\n      margin-left: 4px !important;\n    }\n  "])), color_1.toRGBA(footerTheme.backgroundColor, footerTheme.backgroundOpacity), footerTheme.borderRadius, footerTheme.borderRadius, footerTheme.textColor, footerTheme.textAlign, footerTheme.textColor);
     return (core_1.jsx("div", { css: [Styled_1.cleanslate, style] },
-        core_1.jsx("a", { href: "https://magicbell.io/?utm_source=widget", target: "_blank", rel: "noopener noreferrer" },
-            core_1.jsx(MagicBellLogo_1.default, null))));
+        core_1.jsx("div", { css: { display: 'flex', alignItems: 'center' } },
+            core_1.jsx("span", { css: { flex: 1 } }, "Powered by"),
+            core_1.jsx("a", { href: "https://magicbell.io/?utm_source=widget", target: "_blank", rel: "noopener noreferrer" },
+                core_1.jsx(MagicBellLogo_1.default, null)))));
 }
 exports.default = Footer;
 var templateObject_1;

dist/cjs/components/Footer/MagicBellLogo.js

@@ -14,9 +14,17 @@ "use strict";
 function MagicBellLogo() {
-    return (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "100", height: "40", viewBox: "300 225 300 300" },
-        react_1.default.createElement("g", null,
-            react_1.default.createElement("path", { d: "M197.297 337.172c9.91 0 18.922 4.066 25.46 10.61 6.528 6.534 10.583 15.546 10.583 25.456v19.082c0 4.309.344 7.063 1.043 9.215.695 2.137 1.847 4.004 3.414 6.383 1.14 1.734 2.27 3.238 3.195 4.473 2.176 2.902 3.637 4.851 3.578 7.511l.004.125c0 5.04-6.46 8.614-16.902 10.32-7.867 1.282-18.606 2.075-30.348 2.075-11.742 0-22.48-.793-30.347-2.074-10.442-1.707-16.903-5.282-16.903-10.32l.004-.036c-.137-2.762 1.387-4.824 3.707-7.949 1.008-1.356 2.25-3.027 3.547-5.023 1.445-2.223 2.441-3.907 3.016-5.926.613-2.164.882-5.043.882-9.707v-18.149c0-9.922 4.06-18.941 10.59-25.476 6.532-6.532 15.555-10.59 25.477-10.59m0 11.21c-6.832 0-13.047 2.798-17.55 7.305-4.509 4.508-7.31 10.72-7.31 17.551v18.149c0 5.746-.398 9.535-1.32 12.77-.96 3.374-2.379 5.823-4.414 8.948a93.564 93.564 0 01-1.933 2.84c-1.743 2.465 2.062 3.051 4.003 3.368 7.207 1.175 17.293 1.902 28.551 1.902s21.348-.727 28.551-1.902c5.02-.82 4.621-2.192 2.598-5.266-2.086-3.168-3.641-5.715-4.727-9.055-1.082-3.324-1.613-7.129-1.613-12.672v-19.082c0-6.843-2.797-13.07-7.297-17.574-4.492-4.492-10.7-7.281-17.54-7.281" }),
-            react_1.default.createElement("path", { d: "M187.379 369.477c.023 2.187.531 4.007 1.473 5.457a9.078 9.078 0 003.687 3.293c1.492.738 3.106 1.082 4.785 1.082 1.68 0 3.293-.344 4.79-1.082a9.043 9.043 0 003.683-3.293c.945-1.45 1.45-3.27 1.473-5.457-.024-2.184-.528-4.004-1.473-5.477a9.154 9.154 0 00-3.684-3.27 10.781 10.781 0 00-4.789-1.105c-1.68 0-3.293.371-4.785 1.105a9.19 9.19 0 00-3.687 3.27c-.942 1.473-1.45 3.293-1.473 5.477" }),
-            react_1.default.createElement("path", { fillRule: "evenodd", d: "M249.438 369.469l-10.77-5.524-10.766-5.52v22.087l10.766-5.524zm0 0" }),
-            react_1.default.createElement("path", { d: "M215.594 437.352a18.244 18.244 0 01-5.34 12.097v.02a18.237 18.237 0 01-12.93 5.36c-5.035 0-9.601-2.052-12.914-5.36l-.02-.02c-3.128-3.133-5.132-7.387-5.34-12.097 3.516.308 7.325.523 11.333.644a7.055 7.055 0 001.918 3.563 7.094 7.094 0 005.023 2.066 7.074 7.074 0 005.012-2.074l.008.008a7.084 7.084 0 001.918-3.563c4.008-.121 7.82-.336 11.332-.644M340.656 424.762V363.84H328.56l-20.02 40.473-20.101-40.473H276.25v60.922h9.66v-45.516l19.238 39.164h6.7l19.234-39.164.086 45.516zm37.196 0h9.836l-.086-30.371c-.043-3.41-.786-6.325-2.235-8.746-1.465-2.426-3.566-4.282-6.34-5.57-2.785-1.294-6.148-1.946-10.136-1.962-2.176 0-4.149.133-5.918.38-1.754.245-3.41.609-4.934 1.1a32.886 32.886 0 00-4.48 1.829 65.443 65.443 0 00-4.598 2.523l4.09 6.965c2.304-1.57 4.613-2.742 6.902-3.527 2.281-.781 4.54-1.176 6.762-1.176 3.652.016 6.41.844 8.265 2.469 1.86 1.62 2.786 3.898 2.786 6.844v1.394h-14.012c-3.727.043-6.887.637-9.484 1.77-2.598 1.144-4.582 2.738-5.95 4.812-1.363 2.063-2.043 4.512-2.058 7.34.015 2.062.39 3.96 1.133 5.703a13.256 13.256 0 003.246 4.54c1.421 1.304 3.136 2.304 5.136 3.03 2.004.711 4.25 1.075 6.758 1.09 3.367 0 6.34-.508 8.938-1.508 2.582-1.02 4.714-2.539 6.379-4.586zm-13.227-7.48c-1.871 0-3.465-.294-4.8-.86-1.337-.567-2.364-1.348-3.075-2.379-.727-1.027-1.09-2.234-1.09-3.64-.012-2.204.77-3.786 2.336-4.758 1.567-.973 3.988-1.438 7.238-1.422h12.532v4.265c-.188 1.696-.868 3.207-2.043 4.528-1.176 1.316-2.727 2.347-4.63 3.101-1.913.754-4.073 1.149-6.468 1.164m73.434-38.82h-9.922v7.488a16.332 16.332 0 00-6.367-5.847c-2.625-1.348-5.73-2.016-9.297-1.989-3.078.032-5.875.582-8.387 1.64a18.685 18.685 0 00-6.48 4.513c-1.817 1.941-3.208 4.25-4.196 6.933-.969 2.684-1.465 5.656-1.476 8.934.011 3.336.507 6.383 1.507 9.11.985 2.741 2.391 5.089 4.235 7.062 1.844 1.972 4.031 3.496 6.601 4.57 2.551 1.074 5.395 1.613 8.543 1.625 3.496-.012 6.528-.684 9.094-2.031 2.582-1.336 4.656-3.266 6.223-5.801v5.828c-.016 2.688-.625 5.004-1.813 6.965-1.191 1.957-2.875 3.48-5.047 4.555-2.164 1.074-4.73 1.609-7.675 1.625-2.813-.016-5.395-.45-7.758-1.32-2.364-.872-4.614-2.106-6.774-3.731l-4.265 7.226a36.233 36.233 0 009.023 4.48c3.203 1.06 6.598 1.599 10.211 1.61 3.64-.011 6.945-.504 9.89-1.508 2.946-1 5.47-2.449 7.571-4.336 2.105-1.886 3.715-4.164 4.848-6.82 1.129-2.668 1.695-5.668 1.71-9.004zm-23.239 36.207c-2.683-.016-5.035-.64-7.035-1.844-2-1.203-3.566-2.887-4.7-5.02-1.132-2.128-1.71-4.609-1.753-7.41.043-2.785.637-5.238 1.77-7.355 1.144-2.117 2.71-3.785 4.726-4.988 2.004-1.207 4.336-1.828 6.992-1.844 2.625.016 4.95.625 6.934 1.813a12.608 12.608 0 014.672 4.976c1.113 2.133 1.695 4.598 1.71 7.399-.015 2.8-.597 5.28-1.71 7.41-1.117 2.132-2.688 3.816-4.672 5.02-1.984 1.202-4.309 1.827-6.934 1.843m36.07-55.527c-1.117 0-2.109.27-2.988.785-.875.512-1.554 1.234-2.062 2.148-.508.914-.781 1.957-.781 3.16 0 1.176.273 2.207.78 3.106.509.898 1.192 1.613 2.063 2.117a5.876 5.876 0 002.989.781 5.872 5.872 0 002.984-.781c.871-.504 1.555-1.219 2.063-2.117.507-.899.78-1.93.78-3.106 0-1.203-.273-2.246-.78-3.16-.508-.914-1.188-1.637-2.063-2.148-.879-.516-1.871-.785-2.984-.785m4.96 19.32h-9.921v46.3h9.922zm28.958-.348c-3.45 0-6.598.582-9.442 1.711-2.844 1.133-5.3 2.75-7.37 4.832-2.063 2.082-3.673 4.57-4.802 7.442-1.132 2.882-1.71 6.093-1.71 9.601 0 3.496.581 6.672 1.71 9.531 1.133 2.856 2.73 5.32 4.801 7.395 2.067 2.074 4.527 3.672 7.371 4.79 2.84 1.116 5.992 1.694 9.442 1.694 4.41 0 8.257-.761 11.562-2.246 3.309-1.488 6.004-3.613 8.106-6.367l-5.57-5.57a15.02 15.02 0 01-5.813 4.16c-2.305.937-4.922 1.414-7.852 1.41-2.695-.008-5.058-.656-7.12-1.887-2.06-1.234-3.673-2.957-4.845-5.164-1.175-2.215-1.785-4.8-1.785-7.746 0-2.945.61-5.527 1.785-7.746 1.172-2.207 2.79-3.926 4.844-5.164 2.063-1.242 4.426-1.863 7.121-1.883 2.79-.023 5.285.418 7.5 1.332a16.781 16.781 0 015.73 3.887l5.485-6.438c-2.148-2.453-4.816-4.324-8.039-5.613-3.219-1.293-6.918-1.96-11.11-1.96m25.915-14.274v60.922h27.066c4.598 0 8.555-.688 11.867-2.016 3.301-1.324 5.848-3.23 7.625-5.715 1.79-2.492 2.7-5.484 2.7-8.976 0-2.743-.536-5.184-1.567-7.325-1.023-2.136-2.527-3.902-4.469-5.28-1.945-1.387-4.277-2.321-7.015-2.802 2.218-.535 4.12-1.433 5.715-2.683a12.64 12.64 0 003.683-4.672c.852-1.84 1.305-3.914 1.305-6.219 0-3.18-.852-5.91-2.496-8.168-1.649-2.265-4.004-4.004-7.051-5.222-3.043-1.22-6.688-1.844-10.906-1.844zm10.27 9.14h15.663c2.192 0 4.063.313 5.614.915 1.55.601 2.738 1.496 3.57 2.668.836 1.18 1.262 2.625 1.262 4.335 0 1.715-.422 3.192-1.262 4.41-.828 1.204-2.02 2.141-3.57 2.786-1.551.648-3.422.988-5.614.988h-15.664zm0 25.153h15.663c2.688 0 4.977.347 6.875 1.027 1.903.68 3.364 1.672 4.383 2.961 1.012 1.277 1.535 2.813 1.535 4.625 0 1.914-.523 3.54-1.535 4.86-1.016 1.32-2.48 2.308-4.383 2.988-1.898.683-4.191 1.031-6.875 1.031h-15.664zm66.062-20.02c-3.453.008-6.602.625-9.457 1.758-2.86 1.129-5.32 2.746-7.399 4.813-2.082 2.078-3.699 4.558-4.828 7.43-1.133 2.87-1.726 6.077-1.726 9.585 0 3.496.582 6.672 1.695 9.531 1.117 2.856 2.715 5.32 4.789 7.395 2.074 2.074 4.566 3.672 7.469 4.79 2.902 1.116 6.136 1.694 9.718 1.694 4.02 0 7.641-.703 10.88-2.058 3.23-1.352 5.991-3.278 8.265-5.77l-5.305-5.66a17.691 17.691 0 01-5.906 4.004c-2.219.922-4.613 1.398-7.148 1.395-2.454-.008-4.657-.485-6.63-1.426a13.373 13.373 0 01-4.933-3.973c-1.328-1.73-2.262-3.785-2.8-6.18h34.988c.304-4.191.113-7.96-.582-11.312-.696-3.363-1.934-6.234-3.7-8.617-1.758-2.371-4.074-4.215-6.96-5.48-2.883-1.27-6.372-1.927-10.43-1.919m-13.489 20.02c.391-2.48 1.188-4.613 2.391-6.399 1.219-1.796 2.773-3.175 4.672-4.148 1.902-.969 4.062-1.465 6.512-1.465 2.539 0 4.746.496 6.632 1.45a10.856 10.856 0 014.438 4.12c1.078 1.79 1.68 3.93 1.812 6.442zm49.993-37.945H613.55v64.574h10.008zm18.375 0h-10.012v64.574h10.012zm0 0" }))));
+    return (react_1.default.createElement("svg", { width: "64", height: "16", viewBox: "0 0 128 32", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg" },
+        react_1.default.createElement("path", { d: "M13.2378 4.66791C11.6702 4.67293 10.1682 5.29789 9.05974 6.40637C7.95126 7.51485 7.3263 9.01682 7.32128 10.5844V14.904C7.32128 16.2701 7.22608 17.1721 7.00713 17.9432C6.77392 18.7047 6.41866 19.4233 5.95519 20.0709C5.79336 20.3089 5.63866 20.5469 5.49587 20.7492C5.08176 21.3346 5.98613 21.475 6.44784 21.5488C8.69788 21.8729 10.9694 22.024 13.2426 22.001C15.5165 22.0241 17.7889 21.8729 20.0397 21.5488C21.2297 21.3537 21.1392 21.0276 20.6561 20.297C20.1816 19.6349 19.8034 18.909 19.5328 18.1408C19.2418 17.1631 19.1116 16.1447 19.1472 15.1254V10.5844C19.1453 9.01709 18.5223 7.51438 17.4147 6.40542C16.3071 5.29647 14.8052 4.67169 13.2378 4.66791ZM13.2378 2C15.5097 2.01067 17.6853 2.91905 19.2902 4.52711C20.8952 6.13517 21.7993 8.31251 21.8056 10.5844V15.1254C21.7707 15.8647 21.851 16.605 22.0436 17.3197C22.2453 17.8601 22.5191 18.3709 22.8575 18.8381C23.1288 19.2498 23.3978 19.6092 23.6167 19.9019C24.1356 20.5921 24.483 21.0562 24.4688 21.6892V21.713C24.4688 22.903 22.9289 23.7622 20.4443 24.1691C18.0527 24.5177 15.6379 24.6824 13.2212 24.6618C10.8141 24.6833 8.40892 24.521 6.02659 24.1763C3.54193 23.7693 2.00211 22.9197 2.00211 21.7202C1.96879 21.0633 2.33292 20.573 2.88507 19.8281C3.12306 19.5068 3.41818 19.1141 3.72757 18.6382C4.03691 18.2073 4.27775 17.7313 4.44155 17.2269C4.58673 16.7128 4.65099 16.0369 4.65099 14.9183V10.5844C4.65664 8.30944 5.56289 6.12924 7.17156 4.52057C8.78023 2.9119 10.9604 2.00566 13.2354 2H13.2378Z" }),
+        react_1.default.createElement("path", { d: "M10.8769 9.68955C10.8668 10.1473 10.9882 10.5983 11.2268 10.989C11.4417 11.326 11.7457 11.5969 12.105 11.772C12.4608 11.9412 12.8498 12.029 13.2438 12.029C13.6378 12.029 14.0268 11.9412 14.3826 11.772C14.7419 11.5969 15.0458 11.326 15.2608 10.989C15.49 10.5934 15.6107 10.1444 15.6107 9.68717C15.6107 9.22999 15.49 8.78091 15.2608 8.38534C15.0442 8.05094 14.7406 7.78189 14.3826 7.6071C14.0275 7.43555 13.6382 7.34644 13.2438 7.34644C12.8494 7.34644 12.4601 7.43555 12.105 7.6071C11.747 7.78189 11.4433 8.05094 11.2268 8.38534C10.9886 8.77798 10.8672 9.2304 10.8769 9.68955Z" }),
+        react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M25.6468 9.68483L23.0836 8.3711L20.5204 7.05737V9.68483V12.3147L23.0836 11.0009L25.6468 9.68483Z" }),
+        react_1.default.createElement("path", { d: "M17.5907 25.8422C17.5423 26.9273 17.0888 27.9548 16.3198 28.722C15.9164 29.1264 15.4371 29.4472 14.9095 29.6661C14.3818 29.8851 13.8162 29.9977 13.2449 29.9977C12.6737 29.9977 12.1081 29.8851 11.5804 29.6661C11.0528 29.4472 10.5735 29.1264 10.1701 28.722C9.40107 27.9548 8.94761 26.9273 8.89917 25.8422C9.73453 25.916 10.6437 25.9684 11.5956 25.9969C11.6721 26.3773 11.879 26.7191 12.1805 26.9633C12.482 27.2075 12.8593 27.3387 13.2473 27.3344C13.4683 27.3346 13.6872 27.2912 13.8914 27.2067C14.0956 27.1221 14.2811 26.9981 14.4373 26.8418C14.669 26.61 14.8278 26.3155 14.8942 25.9945C15.8462 25.966 16.7554 25.9136 17.5907 25.8398" }),
+        react_1.default.createElement("path", { d: "M44.688 7.22H41.806L36.834 18.418H36.68L31.686 7.22H28.782V22.62H31.048V11.356H31.224L35.536 20.86H37.978L42.268 11.356H42.422V22.62H44.688V7.22Z" }),
+        react_1.default.createElement("path", { d: "M57.2448 20.926C56.6948 20.926 56.4088 20.64 56.4088 20.024V15.514C56.4088 12.764 54.5168 11.4 52.0088 11.4C49.3688 11.4 47.7408 12.984 47.5428 15.162H49.7648C49.9628 14.018 50.6228 13.226 52.0088 13.226C53.3728 13.226 54.1648 14.018 54.1648 15.426V15.976L50.7988 16.306C48.6868 16.504 47.1028 17.582 47.1028 19.672C47.1028 21.828 48.7088 22.84 50.8428 22.84C52.4928 22.84 53.7028 22.202 54.4508 21.256C54.7588 22.29 55.4848 22.62 56.5188 22.62H57.5308V20.926H57.2448ZM54.1648 18.396C54.1648 20.376 52.5368 21.08 51.1728 21.08C50.1828 21.08 49.3468 20.684 49.3468 19.584C49.3468 18.528 50.2488 17.956 51.5468 17.846L54.1648 17.582V18.396Z" }),
+        react_1.default.createElement("path", { d: "M69.3697 11.774L68.1817 10.498C67.7417 11.07 67.0377 11.686 66.3557 12.038C65.6517 11.62 64.7937 11.4 63.8257 11.4C61.2077 11.4 59.5357 13.028 59.5357 15.184C59.5357 16.306 59.9757 17.23 60.7237 17.868C59.9537 18.286 59.2937 18.968 59.2937 19.958C59.2937 20.904 59.8217 21.63 60.6577 21.982L58.8977 23.5C59.0957 25.524 60.6577 27.24 64.0017 27.24C66.9277 27.24 68.9297 25.92 68.9297 23.588C68.9297 21.652 67.5437 20.442 65.0357 20.442H62.8577C61.9557 20.442 61.3177 20.134 61.3177 19.496C61.3177 19.1 61.5377 18.814 61.9557 18.594C62.5277 18.814 63.1877 18.924 63.9137 18.924C66.3557 18.924 68.2477 17.516 68.2477 15.184C68.2477 14.392 68.0057 13.666 67.5437 13.072C68.3137 12.698 69.0177 12.192 69.3697 11.774ZM63.9137 17.23C62.5497 17.23 61.6697 16.35 61.6697 15.184C61.6697 13.93 62.5497 13.072 63.9137 13.072C65.2557 13.072 66.0917 13.93 66.0917 15.184C66.0917 16.35 65.2557 17.23 63.9137 17.23ZM66.7737 23.698C66.7737 24.952 65.4757 25.524 64.0017 25.524C62.1537 25.524 61.3397 24.6 61.0757 23.654L62.7697 22.224H64.7717C65.6737 22.224 66.7737 22.554 66.7737 23.698Z" }),
+        react_1.default.createElement("path", { d: "M72.1185 9.992C72.8885 9.992 73.5265 9.332 73.5265 8.562C73.5265 7.77 72.8885 7.154 72.1185 7.154C71.3265 7.154 70.6665 7.77 70.6665 8.562C70.6665 9.332 71.3265 9.992 72.1185 9.992ZM70.9965 22.62H73.2405V11.62H70.9965V22.62Z" }),
+        react_1.default.createElement("path", { d: "M81.0823 22.84C83.8103 22.84 85.8123 21.322 86.2083 18.946H83.9643C83.5463 20.134 82.6003 20.882 81.0823 20.882C79.0143 20.882 77.7383 19.298 77.7383 17.186C77.7383 14.986 79.1243 13.358 81.0603 13.358C82.6003 13.358 83.6563 14.304 83.9203 15.448H86.1643C85.7903 12.786 83.5463 11.4 81.0603 11.4C77.8703 11.4 75.5163 13.798 75.5163 17.186C75.5163 20.42 77.6943 22.84 81.0823 22.84Z" }),
+        react_1.default.createElement("path", { d: "M96.7512 14.546V14.436C97.8732 13.908 98.9072 12.984 98.9072 11.048C98.9072 8.782 97.4772 7.22 94.5072 7.22H88.6332V22.62H94.5292C97.5212 22.62 99.3252 21.08 99.3252 18.396C99.3252 16.064 97.9392 14.986 96.7512 14.546ZM90.8992 9.112H94.2652C95.6732 9.112 96.5972 9.948 96.5972 11.378C96.5972 12.808 95.7612 13.754 94.1992 13.754H90.8992V9.112ZM94.3312 20.728H90.8992V15.646H94.3312C95.9592 15.646 96.9712 16.746 96.9712 18.242C96.9712 19.716 96.0032 20.728 94.3312 20.728Z" }),
+        react_1.default.createElement("path", { d: "M111.65 16.966C111.65 13.182 109.296 11.4 106.612 11.4C103.62 11.4 101.266 13.644 101.266 17.23C101.266 20.618 103.532 22.84 106.7 22.84C109.296 22.84 111.144 21.52 111.606 19.32H109.45C109.098 20.442 108.086 21.014 106.7 21.014C104.764 21.014 103.576 19.65 103.466 17.692H111.606C111.628 17.406 111.65 17.186 111.65 16.966ZM106.612 13.226C108.306 13.226 109.45 14.414 109.472 16.108H103.488C103.708 14.502 104.874 13.226 106.612 13.226Z" }),
+        react_1.default.createElement("path", { d: "M113.966 22.62H116.21V7H113.966V22.62Z" }),
+        react_1.default.createElement("path", { d: "M118.838 22.62H121.082V7H118.838V22.62Z" })));
 }
 exports.default = MagicBellLogo;

dist/cjs/components/Header/Header.js

@@ -32,3 +32,3 @@ "use strict";
     var handleClick = function () { return onAllRead(); };
-    var style = core_1.css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    align-items: center;\n    background: ", " !important;\n    border-radius: ", " ", " 0 0 !important;\n    color: ", ";\n    display: flex;\n    font-family: ", " !important;\n    font-size: ", " !important;\n    justify-content: space-between;\n    text-align: ", " !important;\n    text-transform: ", " !important;\n    padding: 16px !important;\n  "], ["\n    align-items: center;\n    background: ", " !important;\n    border-radius: ", " ", " 0 0 !important;\n    color: ", ";\n    display: flex;\n    font-family: ", " !important;\n    font-size: ", " !important;\n    justify-content: space-between;\n    text-align: ", " !important;\n    text-transform: ", " !important;\n    padding: 16px !important;\n  "])), color_1.toRGBA(headerTheme.backgroundColor, headerTheme.backgroundOpacity), headerTheme.borderRadius, headerTheme.borderRadius, headerTheme.textColor, headerTheme.fontFamily, headerTheme.fontSize, headerTheme.textAlign, headerTheme.textTransform);
+    var style = core_1.css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    align-items: center;\n    background: ", " !important;\n    border-radius: ", " ", " 0 0 !important;\n    color: ", ";\n    display: flex;\n    font-family: ", " !important;\n    font-size: ", " !important;\n    justify-content: space-between;\n    text-align: ", " !important;\n    text-transform: ", " !important;\n    padding: 16px 24px !important;\n  "], ["\n    align-items: center;\n    background: ", " !important;\n    border-radius: ", " ", " 0 0 !important;\n    color: ", ";\n    display: flex;\n    font-family: ", " !important;\n    font-size: ", " !important;\n    justify-content: space-between;\n    text-align: ", " !important;\n    text-transform: ", " !important;\n    padding: 16px 24px !important;\n  "])), color_1.toRGBA(headerTheme.backgroundColor, headerTheme.backgroundOpacity), headerTheme.borderRadius, headerTheme.borderRadius, headerTheme.textColor, headerTheme.fontFamily, headerTheme.fontSize, headerTheme.textAlign, headerTheme.textTransform);
     return (core_1.jsx("div", { css: [Styled_1.cleanslate, style] },
@@ -35,0 +35,0 @@ core_1.jsx(HeaderTitle_1.default, null),

dist/cjs/components/NotificationContent/NotificationContent.js

@@ -81,5 +81,5 @@ "use strict";
         return null;
-    return (core_1.jsx("article", { css: core_1.css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        color: inherit !important;\n        cursor: inherit;\n        margin: 0;\n        line-height: 1.2;\n        font-size: 0.865em !important;\n        margin-top: 1em !important;\n        opacity: 0.9;\n        word-break: break-word !important;\n      "], ["\n        color: inherit !important;\n        cursor: inherit;\n        margin: 0;\n        line-height: 1.2;\n        font-size: 0.865em !important;\n        margin-top: 1em !important;\n        opacity: 0.9;\n        word-break: break-word !important;\n      "]))), dangerouslySetInnerHTML: { __html: markup } }));
+    return (core_1.jsx("article", { css: core_1.css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        color: inherit !important;\n        cursor: inherit;\n        margin: 0;\n        line-height: 1.2;\n        font-size: 0.865em !important;\n        margin-top: 1em !important;\n        word-break: break-word !important;\n      "], ["\n        color: inherit !important;\n        cursor: inherit;\n        margin: 0;\n        line-height: 1.2;\n        font-size: 0.865em !important;\n        margin-top: 1em !important;\n        word-break: break-word !important;\n      "]))), dangerouslySetInnerHTML: { __html: markup } }));
 }
 exports.default = mobx_react_lite_1.observer(NotificationContent);
 var templateObject_1;

dist/cjs/components/NotificationContextMenu/NotificationContextMenu.js

@@ -26,6 +26,6 @@ "use strict";
     var theme = react_1.useContext(MagicBellContext_1.default).theme;
-    var notificationTheme = theme.notification;
+    var containerTheme = theme.container, notificationTheme = theme.notification;
     var handleDelete = function () { return notification.delete(); };
     var toggleRead = function () { return (notification.isRead ? notification.markAsUnread() : notification.markAsRead()); };
-    return (core_1.jsx("div", { css: core_1.css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        background: ", " !important;\n        border-radius: ", " !important;\n        box-shadow: 2px 0 3px ", ";\n        color: ", " !important;\n        font-family: ", " !important;\n        font-size: ", " !important;\n        text-transform: ", " !important;\n        min-width: 10em;\n\n        a {\n          display: block;\n          padding: 0.75em 1.25em !important;\n\n          &:hover {\n            text-decoration: underline !important;\n          }\n        }\n      "], ["\n        background: ", " !important;\n        border-radius: ", " !important;\n        box-shadow: 2px 0 3px ", ";\n        color: ", " !important;\n        font-family: ", " !important;\n        font-size: ", " !important;\n        text-transform: ", " !important;\n        min-width: 10em;\n\n        a {\n          display: block;\n          padding: 0.75em 1.25em !important;\n\n          &:hover {\n            text-decoration: underline !important;\n          }\n        }\n      "])), notificationTheme.default.backgroundColor, notificationTheme.default.borderRadius, color_1.darken(color_1.toRGBA(notificationTheme.default.backgroundColor, 0.5), 10), notificationTheme.default.textColor, notificationTheme.default.fontFamily, notificationTheme.default.fontSize, notificationTheme.default.textTransform) },
+    return (core_1.jsx("div", { css: core_1.css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        background: ", " !important;\n        border-radius: ", " !important;\n        box-shadow: 2px 2px 3px ", ";\n        color: ", " !important;\n        font-family: ", " !important;\n        font-size: ", " !important;\n        text-transform: ", " !important;\n        min-width: 10em;\n\n        a {\n          display: block;\n          padding: 0.75em 1.25em !important;\n\n          &:hover {\n            text-decoration: underline !important;\n          }\n        }\n      "], ["\n        background: ", " !important;\n        border-radius: ", " !important;\n        box-shadow: 2px 2px 3px ", ";\n        color: ", " !important;\n        font-family: ", " !important;\n        font-size: ", " !important;\n        text-transform: ", " !important;\n        min-width: 10em;\n\n        a {\n          display: block;\n          padding: 0.75em 1.25em !important;\n\n          &:hover {\n            text-decoration: underline !important;\n          }\n        }\n      "])), containerTheme.backgroundColor, notificationTheme.default.borderRadius, color_1.darken(color_1.toRGBA(containerTheme.backgroundColor, 0.5), 10), notificationTheme.default.textColor, notificationTheme.default.fontFamily, notificationTheme.default.fontSize, notificationTheme.default.textTransform) },
         core_1.jsx("a", { onClick: toggleRead, "data-testid": "toggle-read" }, notification.isRead ? 'Mark as unread' : 'Mark as read'),
@@ -32,0 +32,0 @@ core_1.jsx("a", { onClick: handleDelete, "data-testid": "delete" }, "Delete")));

dist/cjs/components/NotificationInbox/NotificationInbox.js

 "use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
@@ -16,2 +20,3 @@ return (mod && mod.__esModule) ? mod : { "default": mod };
 var ClearInboxMessage_1 = __importDefault(require("./ClearInboxMessage"));
+var FetchErrorMessage_1 = __importDefault(require("./error/FetchErrorMessage"));
 /**
@@ -41,5 +46,11 @@ * Component that renders all notifications as well as a header and a footer.
         return null;
-    return (core_1.jsx("div", { css: [Styled_1.cleanslate] },
+    return (core_1.jsx("div", { css: [
+            Styled_1.cleanslate,
+            core_1.css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n          display: flex;\n          flex-direction: column;\n          min-height: ", "px;\n        "], ["\n          display: flex;\n          flex-direction: column;\n          min-height: ", "px;\n        "])), height),
+        ] },
         core_1.jsx(Header_1.default, { onAllRead: markAsRead }),
-        store.isEmpty && !store.isFetchPending ? (core_1.jsx(ClearInboxMessage_1.default, null)) : (core_1.jsx(NotificationList_1.default, { notifications: store, height: height, onItemClick: onNotificationClick, queryParams: store.context })),
+        core_1.jsx("div", { css: { flex: 1 } },
+            store.xhrFetchState === 'rejected' && core_1.jsx(FetchErrorMessage_1.default, null),
+            store.xhrFetchState === 'fulfilled' && store.isEmpty && core_1.jsx(ClearInboxMessage_1.default, null),
+            store.xhrFetchState === 'fulfilled' && !store.isEmpty && (core_1.jsx(NotificationList_1.default, { notifications: store, height: height, onItemClick: onNotificationClick, queryParams: store.context }))),
         core_1.jsx(Footer_1.default, null)));
@@ -51,1 +62,2 @@ }
 exports.default = mobx_react_lite_1.observer(NotificationInbox);
+var templateObject_1;

dist/cjs/components/NotificationState/NotificationState.js

@@ -33,4 +33,4 @@ "use strict";
     var _b = react_1.useState(false), isHovered = _b[0], setHovered = _b[1];
-    return (core_1.jsx(headless_1.default, { render: function () { return core_1.jsx(NotificationContextMenu_1.default, { notification: notification }); }, placement: "bottom", trigger: "click", interactive: true },
-        core_1.jsx("div", { css: core_1.css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n          padding: 0.5em !important;\n          color: ", " !important;\n\n          svg {\n            height: 1.5em;\n            fill: currentColor;\n          }\n        "], ["\n          padding: 0.5em !important;\n          color: ",
+    return (core_1.jsx(headless_1.default, { render: function () { return core_1.jsx(NotificationContextMenu_1.default, { notification: notification }); }, offset: [4, 2], zIndex: 0, placement: "bottom-end", interactive: true },
+        core_1.jsx("div", { css: core_1.css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n          display: flex !important;\n          align-items: center !important;\n          padding: 0.5em 0 0.5em 0.25em !important;\n          color: ", " !important;\n\n          svg {\n            height: 1.5em;\n            fill: currentColor;\n          }\n        "], ["\n          display: flex !important;\n          align-items: center !important;\n          padding: 0.5em 0 0.5em 0.25em !important;\n          color: ",
                 " !important;\n\n          svg {\n            height: 1.5em;\n            fill: currentColor;\n          }\n        "])), notification.isRead
@@ -37,0 +37,0 @@ ? color_1.toRGBA(notificationTheme.default.textColor, 0.5)

dist/cjs/components/Timestamp/Timestamp.js

 "use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
@@ -26,4 +30,5 @@ return (mod && mod.__esModule) ? mod : { "default": mod };
     return (core_1.jsx(headless_1.default, { render: function () { return core_1.jsx(TimestampTooltip_1.default, { date: dateInstance }); }, placement: "bottom-end", interactive: true },
-        core_1.jsx("div", null, relativeTime)));
+        core_1.jsx("div", { css: core_1.css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n          padding: 0.5em 0 0.5em 0.25em !important;\n        "], ["\n          padding: 0.5em 0 0.5em 0.25em !important;\n        "]))) }, relativeTime)));
 }
 exports.default = mobx_react_lite_1.observer(Timestamp);
+var templateObject_1;

dist/cjs/components/Timestamp/TimestampTooltip.js

@@ -14,2 +14,3 @@ "use strict";
 var MagicBellContext_1 = __importDefault(require("../../context/MagicBellContext"));
+var color_1 = require("../../lib/color");
 /**
@@ -24,6 +25,6 @@ * Component that renders a formatted date. The component is styled as a tooltip.
     var theme = react_1.useContext(MagicBellContext_1.default).theme;
-    var notificationTheme = theme.notification;
-    return (core_1.jsx("span", { css: core_1.css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        background: ", " !important;\n        border-radius: 4px;\n        color: ", " !important;\n        font-size: 0.8em !important;\n        padding: 0.5em !important;\n        text-transform: ", ";\n      "], ["\n        background: ", " !important;\n        border-radius: 4px;\n        color: ", " !important;\n        font-size: 0.8em !important;\n        padding: 0.5em !important;\n        text-transform: ", ";\n      "])), notificationTheme.default.backgroundColor, notificationTheme.default.textColor, notificationTheme.default.textTransform) }, date.format('LL LT')));
+    var containerTheme = theme.container, notificationTheme = theme.notification;
+    return (core_1.jsx("span", { css: core_1.css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        background: ", " !important;\n        border-radius: ", " !important;\n        box-shadow: 2px 2px 3px ", ";\n        color: ", " !important;\n        font-size: 0.8em !important;\n        padding: 0.5em !important;\n        text-transform: ", ";\n      "], ["\n        background: ", " !important;\n        border-radius: ", " !important;\n        box-shadow: 2px 2px 3px ", ";\n        color: ", " !important;\n        font-size: 0.8em !important;\n        padding: 0.5em !important;\n        text-transform: ", ";\n      "])), containerTheme.backgroundColor, notificationTheme.default.borderRadius, color_1.darken(color_1.toRGBA(containerTheme.backgroundColor, 0.5), 10), notificationTheme.default.textColor, notificationTheme.default.textTransform) }, date.format('LL LT')));
 }
 exports.default = TimestampTooltip;
 var templateObject_1;

dist/cjs/context/Theme.js

@@ -47,6 +47,16 @@ "use strict";
     },
+    container: {
+        backgroundColor: '#FFFFFF',
+        backgroundOpacity: 1,
+        borderRadius: '8px',
+        fontFamily: fontFamily,
+        fontSize: '14px',
+        textAlign: textAlign,
+        textColor: black,
+        textTransform: textTransform,
+    },
     notification: {
         default: {
-            backgroundColor: 'white',
-            backgroundOpacity: 1,
+            backgroundColor: blue,
+            backgroundOpacity: 0.1,
             borderRadius: '8px',
@@ -61,3 +71,3 @@ fontFamily: fontFamily,
             backgroundColor: blue,
-            backgroundOpacity: 0.2,
+            backgroundOpacity: 0.1,
             borderRadius: '8px',
@@ -64,0 +74,0 @@ fontFamily: fontFamily,

dist/esm/components/ClickableNotification/NotificationTitle.js

@@ -17,5 +17,5 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
     var title = notification.title;
-    return (jsx("p", { title: title, css: css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        cursor: inherit;\n        line-height: 1.2 !important;\n        word-break: break-word !important;\n      "], ["\n        cursor: inherit;\n        line-height: 1.2 !important;\n        word-break: break-word !important;\n      "]))) }, title));
+    return (jsx("p", { title: title, css: css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        cursor: inherit;\n        font-weight: 500 !important;\n        line-height: 1.2 !important;\n        word-break: break-word !important;\n      "], ["\n        cursor: inherit;\n        font-weight: 500 !important;\n        line-height: 1.2 !important;\n        word-break: break-word !important;\n      "]))) }, title));
 }
 export default observer(NotificationTitle);
 var templateObject_1;

dist/esm/components/ClickableNotification/StyledContainer.js

@@ -28,5 +28,5 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
         themeVariation = notificationTheme.unread;
-    var style = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    align-items: center;\n    background-color: ", " !important;\n    border-radius: ", ";\n    color: ", " !important;\n    cursor: pointer;\n    display: flex;\n    font-family: ", ";\n    font-size: ", ";\n    margin: 8px !important;\n    overflow: hidden;\n    text-align: ", " !important;\n    text-transform: ", ";\n    transition: background-color 300ms ease-out;\n    padding: 0.5em !important;\n\n    &:hover {\n      background-color: ", " !important;\n    }\n\n    & > a {\n      flex: 1;\n      display: flex;\n      align-items: center;\n\n      & > div {\n        padding: 0.5em !important;\n      }\n\n      & > div:first-of-type {\n        flex: 1;\n      }\n    }\n  "], ["\n    align-items: center;\n    background-color: ",
-        " !important;\n    border-radius: ", ";\n    color: ", " !important;\n    cursor: pointer;\n    display: flex;\n    font-family: ", ";\n    font-size: ", ";\n    margin: 8px !important;\n    overflow: hidden;\n    text-align: ", " !important;\n    text-transform: ", ";\n    transition: background-color 300ms ease-out;\n    padding: 0.5em !important;\n\n    &:hover {\n      background-color: ",
-        " !important;\n    }\n\n    & > a {\n      flex: 1;\n      display: flex;\n      align-items: center;\n\n      & > div {\n        padding: 0.5em !important;\n      }\n\n      & > div:first-of-type {\n        flex: 1;\n      }\n    }\n  "])), notification.isSeen
+    var style = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    background-color: ", " !important;\n    border-radius: ", ";\n    color: ", " !important;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    font-family: ", ";\n    font-size: ", ";\n    margin: 4px !important;\n    overflow: hidden;\n    text-align: ", " !important;\n    text-transform: ", ";\n    transition: background-color 300ms ease-out;\n    padding: 16px 20px !important;\n\n    &:hover {\n      background-color: ", " !important;\n    }\n\n    & > a {\n      flex: 1;\n      display: inline-flex;\n      align-items: center;\n      margin: 0 0 0 -16px;\n\n      & > div {\n        margin: 0 0 0 16px;\n      }\n\n      & > div:first-of-type {\n        flex: 1;\n      }\n    }\n  "], ["\n    background-color: ",
+        " !important;\n    border-radius: ", ";\n    color: ", " !important;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    font-family: ", ";\n    font-size: ", ";\n    margin: 4px !important;\n    overflow: hidden;\n    text-align: ", " !important;\n    text-transform: ", ";\n    transition: background-color 300ms ease-out;\n    padding: 16px 20px !important;\n\n    &:hover {\n      background-color: ",
+        " !important;\n    }\n\n    & > a {\n      flex: 1;\n      display: inline-flex;\n      align-items: center;\n      margin: 0 0 0 -16px;\n\n      & > div {\n        margin: 0 0 0 16px;\n      }\n\n      & > div:first-of-type {\n        flex: 1;\n      }\n    }\n  "])), notification.isSeen
         ? 'transparent'
@@ -33,0 +33,0 @@ : toRGBA(themeVariation.backgroundColor, themeVariation.backgroundOpacity), themeVariation.borderRadius, themeVariation.textColor, themeVariation.fontFamily, themeVariation.fontSize, themeVariation.textAlign, themeVariation.textTransform, darken(toRGBA(themeVariation.backgroundColor, themeVariation.backgroundOpacity), 5));

dist/esm/components/FloatingNotificationInbox/FloatingNotificationInbox.js

@@ -44,3 +44,3 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
     var theme = useContext(MagicBellContext).theme;
-    var headerTheme = theme.header, footerTheme = theme.footer, notificationTheme = theme.notification;
+    var headerTheme = theme.header, footerTheme = theme.footer, containerTheme = theme.container;
     var handleNotificationClick = function (notification) {
@@ -54,3 +54,3 @@ onNotificationClick === null || onNotificationClick === void 0 ? void 0 : onNotificationClick(notification);
     };
-    return (jsx(Tippy, { render: function (attrs) { return (jsx("div", __assign({ css: css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n            background-color: ", ";\n            color: ", ";\n            border-radius: ", " ", ";\n            box-shadow: 0px 20px 25px rgba(84, 95, 111, 0.1), 0px 10px 10px rgba(84, 95, 111, 0.04);\n            width: ", "px;\n            max-width: calc(100vw - 10px);\n          "], ["\n            background-color: ", ";\n            color: ", ";\n            border-radius: ", " ", ";\n            box-shadow: 0px 20px 25px rgba(84, 95, 111, 0.1), 0px 10px 10px rgba(84, 95, 111, 0.04);\n            width: ", "px;\n            max-width: calc(100vw - 10px);\n          "])), notificationTheme.default.backgroundColor, notificationTheme.default.textColor, headerTheme.borderRadius, footerTheme.borderRadius, width) }, attrs),
+    return (jsx(Tippy, { render: function (attrs) { return (jsx("div", __assign({ css: css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n            background-color: ", ";\n            color: ", ";\n            border-radius: ", " ", ";\n            box-shadow: 0px 20px 25px rgba(84, 95, 111, 0.1), 0px 10px 10px rgba(84, 95, 111, 0.04);\n            width: ", "px;\n            max-width: calc(100vw - 10px);\n          "], ["\n            background-color: ", ";\n            color: ", ";\n            border-radius: ", " ", ";\n            box-shadow: 0px 20px 25px rgba(84, 95, 111, 0.1), 0px 10px 10px rgba(84, 95, 111, 0.04);\n            width: ", "px;\n            max-width: calc(100vw - 10px);\n          "])), containerTheme.backgroundColor, containerTheme.textColor, headerTheme.borderRadius, footerTheme.borderRadius, width) }, attrs),
             jsx(NotificationInbox, __assign({ onNotificationClick: handleNotificationClick }, inboxProps)),
@@ -57,0 +57,0 @@ jsx(Arrow, { placement: attrs['data-placement'] }))); }, visible: isOpen, onClickOutside: handleClickOutside, reference: launcherRef, placement: placement, interactive: true }));

dist/esm/components/Footer/Footer.js

@@ -23,7 +23,9 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
     var footerTheme = theme.footer;
-    var style = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    background: ", ";\n    border-radius: 0 0 ", " ", " !important;\n    color: ", " !important;\n    text-align: ", " !important;\n\n    a {\n      color: ", " !important;\n      display: inline-block;\n\n      svg {\n        fill: currentColor;\n      }\n    }\n  "], ["\n    background: ", ";\n    border-radius: 0 0 ", " ", " !important;\n    color: ", " !important;\n    text-align: ", " !important;\n\n    a {\n      color: ", " !important;\n      display: inline-block;\n\n      svg {\n        fill: currentColor;\n      }\n    }\n  "])), toRGBA(footerTheme.backgroundColor, footerTheme.backgroundOpacity), footerTheme.borderRadius, footerTheme.borderRadius, footerTheme.textColor, footerTheme.textAlign, footerTheme.textColor);
+    var style = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    background: ", ";\n    border-radius: 0 0 ", " ", " !important;\n    color: ", " !important;\n    text-align: ", " !important;\n    font-size: 0.75em !important;\n    padding: 14px 24px !important;\n\n    a {\n      color: ", " !important;\n      margin-left: 4px !important;\n    }\n  "], ["\n    background: ", ";\n    border-radius: 0 0 ", " ", " !important;\n    color: ", " !important;\n    text-align: ", " !important;\n    font-size: 0.75em !important;\n    padding: 14px 24px !important;\n\n    a {\n      color: ", " !important;\n      margin-left: 4px !important;\n    }\n  "])), toRGBA(footerTheme.backgroundColor, footerTheme.backgroundOpacity), footerTheme.borderRadius, footerTheme.borderRadius, footerTheme.textColor, footerTheme.textAlign, footerTheme.textColor);
     return (jsx("div", { css: [cleanslate, style] },
-        jsx("a", { href: "https://magicbell.io/?utm_source=widget", target: "_blank", rel: "noopener noreferrer" },
-            jsx(MagicBellLogo, null))));
+        jsx("div", { css: { display: 'flex', alignItems: 'center' } },
+            jsx("span", { css: { flex: 1 } }, "Powered by"),
+            jsx("a", { href: "https://magicbell.io/?utm_source=widget", target: "_blank", rel: "noopener noreferrer" },
+                jsx(MagicBellLogo, null)))));
 }
 var templateObject_1;

dist/esm/components/Footer/MagicBellLogo.js

@@ -9,8 +9,16 @@ import React from 'react';
 export default function MagicBellLogo() {
-    return (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "100", height: "40", viewBox: "300 225 300 300" },
-        React.createElement("g", null,
-            React.createElement("path", { d: "M197.297 337.172c9.91 0 18.922 4.066 25.46 10.61 6.528 6.534 10.583 15.546 10.583 25.456v19.082c0 4.309.344 7.063 1.043 9.215.695 2.137 1.847 4.004 3.414 6.383 1.14 1.734 2.27 3.238 3.195 4.473 2.176 2.902 3.637 4.851 3.578 7.511l.004.125c0 5.04-6.46 8.614-16.902 10.32-7.867 1.282-18.606 2.075-30.348 2.075-11.742 0-22.48-.793-30.347-2.074-10.442-1.707-16.903-5.282-16.903-10.32l.004-.036c-.137-2.762 1.387-4.824 3.707-7.949 1.008-1.356 2.25-3.027 3.547-5.023 1.445-2.223 2.441-3.907 3.016-5.926.613-2.164.882-5.043.882-9.707v-18.149c0-9.922 4.06-18.941 10.59-25.476 6.532-6.532 15.555-10.59 25.477-10.59m0 11.21c-6.832 0-13.047 2.798-17.55 7.305-4.509 4.508-7.31 10.72-7.31 17.551v18.149c0 5.746-.398 9.535-1.32 12.77-.96 3.374-2.379 5.823-4.414 8.948a93.564 93.564 0 01-1.933 2.84c-1.743 2.465 2.062 3.051 4.003 3.368 7.207 1.175 17.293 1.902 28.551 1.902s21.348-.727 28.551-1.902c5.02-.82 4.621-2.192 2.598-5.266-2.086-3.168-3.641-5.715-4.727-9.055-1.082-3.324-1.613-7.129-1.613-12.672v-19.082c0-6.843-2.797-13.07-7.297-17.574-4.492-4.492-10.7-7.281-17.54-7.281" }),
-            React.createElement("path", { d: "M187.379 369.477c.023 2.187.531 4.007 1.473 5.457a9.078 9.078 0 003.687 3.293c1.492.738 3.106 1.082 4.785 1.082 1.68 0 3.293-.344 4.79-1.082a9.043 9.043 0 003.683-3.293c.945-1.45 1.45-3.27 1.473-5.457-.024-2.184-.528-4.004-1.473-5.477a9.154 9.154 0 00-3.684-3.27 10.781 10.781 0 00-4.789-1.105c-1.68 0-3.293.371-4.785 1.105a9.19 9.19 0 00-3.687 3.27c-.942 1.473-1.45 3.293-1.473 5.477" }),
-            React.createElement("path", { fillRule: "evenodd", d: "M249.438 369.469l-10.77-5.524-10.766-5.52v22.087l10.766-5.524zm0 0" }),
-            React.createElement("path", { d: "M215.594 437.352a18.244 18.244 0 01-5.34 12.097v.02a18.237 18.237 0 01-12.93 5.36c-5.035 0-9.601-2.052-12.914-5.36l-.02-.02c-3.128-3.133-5.132-7.387-5.34-12.097 3.516.308 7.325.523 11.333.644a7.055 7.055 0 001.918 3.563 7.094 7.094 0 005.023 2.066 7.074 7.074 0 005.012-2.074l.008.008a7.084 7.084 0 001.918-3.563c4.008-.121 7.82-.336 11.332-.644M340.656 424.762V363.84H328.56l-20.02 40.473-20.101-40.473H276.25v60.922h9.66v-45.516l19.238 39.164h6.7l19.234-39.164.086 45.516zm37.196 0h9.836l-.086-30.371c-.043-3.41-.786-6.325-2.235-8.746-1.465-2.426-3.566-4.282-6.34-5.57-2.785-1.294-6.148-1.946-10.136-1.962-2.176 0-4.149.133-5.918.38-1.754.245-3.41.609-4.934 1.1a32.886 32.886 0 00-4.48 1.829 65.443 65.443 0 00-4.598 2.523l4.09 6.965c2.304-1.57 4.613-2.742 6.902-3.527 2.281-.781 4.54-1.176 6.762-1.176 3.652.016 6.41.844 8.265 2.469 1.86 1.62 2.786 3.898 2.786 6.844v1.394h-14.012c-3.727.043-6.887.637-9.484 1.77-2.598 1.144-4.582 2.738-5.95 4.812-1.363 2.063-2.043 4.512-2.058 7.34.015 2.062.39 3.96 1.133 5.703a13.256 13.256 0 003.246 4.54c1.421 1.304 3.136 2.304 5.136 3.03 2.004.711 4.25 1.075 6.758 1.09 3.367 0 6.34-.508 8.938-1.508 2.582-1.02 4.714-2.539 6.379-4.586zm-13.227-7.48c-1.871 0-3.465-.294-4.8-.86-1.337-.567-2.364-1.348-3.075-2.379-.727-1.027-1.09-2.234-1.09-3.64-.012-2.204.77-3.786 2.336-4.758 1.567-.973 3.988-1.438 7.238-1.422h12.532v4.265c-.188 1.696-.868 3.207-2.043 4.528-1.176 1.316-2.727 2.347-4.63 3.101-1.913.754-4.073 1.149-6.468 1.164m73.434-38.82h-9.922v7.488a16.332 16.332 0 00-6.367-5.847c-2.625-1.348-5.73-2.016-9.297-1.989-3.078.032-5.875.582-8.387 1.64a18.685 18.685 0 00-6.48 4.513c-1.817 1.941-3.208 4.25-4.196 6.933-.969 2.684-1.465 5.656-1.476 8.934.011 3.336.507 6.383 1.507 9.11.985 2.741 2.391 5.089 4.235 7.062 1.844 1.972 4.031 3.496 6.601 4.57 2.551 1.074 5.395 1.613 8.543 1.625 3.496-.012 6.528-.684 9.094-2.031 2.582-1.336 4.656-3.266 6.223-5.801v5.828c-.016 2.688-.625 5.004-1.813 6.965-1.191 1.957-2.875 3.48-5.047 4.555-2.164 1.074-4.73 1.609-7.675 1.625-2.813-.016-5.395-.45-7.758-1.32-2.364-.872-4.614-2.106-6.774-3.731l-4.265 7.226a36.233 36.233 0 009.023 4.48c3.203 1.06 6.598 1.599 10.211 1.61 3.64-.011 6.945-.504 9.89-1.508 2.946-1 5.47-2.449 7.571-4.336 2.105-1.886 3.715-4.164 4.848-6.82 1.129-2.668 1.695-5.668 1.71-9.004zm-23.239 36.207c-2.683-.016-5.035-.64-7.035-1.844-2-1.203-3.566-2.887-4.7-5.02-1.132-2.128-1.71-4.609-1.753-7.41.043-2.785.637-5.238 1.77-7.355 1.144-2.117 2.71-3.785 4.726-4.988 2.004-1.207 4.336-1.828 6.992-1.844 2.625.016 4.95.625 6.934 1.813a12.608 12.608 0 014.672 4.976c1.113 2.133 1.695 4.598 1.71 7.399-.015 2.8-.597 5.28-1.71 7.41-1.117 2.132-2.688 3.816-4.672 5.02-1.984 1.202-4.309 1.827-6.934 1.843m36.07-55.527c-1.117 0-2.109.27-2.988.785-.875.512-1.554 1.234-2.062 2.148-.508.914-.781 1.957-.781 3.16 0 1.176.273 2.207.78 3.106.509.898 1.192 1.613 2.063 2.117a5.876 5.876 0 002.989.781 5.872 5.872 0 002.984-.781c.871-.504 1.555-1.219 2.063-2.117.507-.899.78-1.93.78-3.106 0-1.203-.273-2.246-.78-3.16-.508-.914-1.188-1.637-2.063-2.148-.879-.516-1.871-.785-2.984-.785m4.96 19.32h-9.921v46.3h9.922zm28.958-.348c-3.45 0-6.598.582-9.442 1.711-2.844 1.133-5.3 2.75-7.37 4.832-2.063 2.082-3.673 4.57-4.802 7.442-1.132 2.882-1.71 6.093-1.71 9.601 0 3.496.581 6.672 1.71 9.531 1.133 2.856 2.73 5.32 4.801 7.395 2.067 2.074 4.527 3.672 7.371 4.79 2.84 1.116 5.992 1.694 9.442 1.694 4.41 0 8.257-.761 11.562-2.246 3.309-1.488 6.004-3.613 8.106-6.367l-5.57-5.57a15.02 15.02 0 01-5.813 4.16c-2.305.937-4.922 1.414-7.852 1.41-2.695-.008-5.058-.656-7.12-1.887-2.06-1.234-3.673-2.957-4.845-5.164-1.175-2.215-1.785-4.8-1.785-7.746 0-2.945.61-5.527 1.785-7.746 1.172-2.207 2.79-3.926 4.844-5.164 2.063-1.242 4.426-1.863 7.121-1.883 2.79-.023 5.285.418 7.5 1.332a16.781 16.781 0 015.73 3.887l5.485-6.438c-2.148-2.453-4.816-4.324-8.039-5.613-3.219-1.293-6.918-1.96-11.11-1.96m25.915-14.274v60.922h27.066c4.598 0 8.555-.688 11.867-2.016 3.301-1.324 5.848-3.23 7.625-5.715 1.79-2.492 2.7-5.484 2.7-8.976 0-2.743-.536-5.184-1.567-7.325-1.023-2.136-2.527-3.902-4.469-5.28-1.945-1.387-4.277-2.321-7.015-2.802 2.218-.535 4.12-1.433 5.715-2.683a12.64 12.64 0 003.683-4.672c.852-1.84 1.305-3.914 1.305-6.219 0-3.18-.852-5.91-2.496-8.168-1.649-2.265-4.004-4.004-7.051-5.222-3.043-1.22-6.688-1.844-10.906-1.844zm10.27 9.14h15.663c2.192 0 4.063.313 5.614.915 1.55.601 2.738 1.496 3.57 2.668.836 1.18 1.262 2.625 1.262 4.335 0 1.715-.422 3.192-1.262 4.41-.828 1.204-2.02 2.141-3.57 2.786-1.551.648-3.422.988-5.614.988h-15.664zm0 25.153h15.663c2.688 0 4.977.347 6.875 1.027 1.903.68 3.364 1.672 4.383 2.961 1.012 1.277 1.535 2.813 1.535 4.625 0 1.914-.523 3.54-1.535 4.86-1.016 1.32-2.48 2.308-4.383 2.988-1.898.683-4.191 1.031-6.875 1.031h-15.664zm66.062-20.02c-3.453.008-6.602.625-9.457 1.758-2.86 1.129-5.32 2.746-7.399 4.813-2.082 2.078-3.699 4.558-4.828 7.43-1.133 2.87-1.726 6.077-1.726 9.585 0 3.496.582 6.672 1.695 9.531 1.117 2.856 2.715 5.32 4.789 7.395 2.074 2.074 4.566 3.672 7.469 4.79 2.902 1.116 6.136 1.694 9.718 1.694 4.02 0 7.641-.703 10.88-2.058 3.23-1.352 5.991-3.278 8.265-5.77l-5.305-5.66a17.691 17.691 0 01-5.906 4.004c-2.219.922-4.613 1.398-7.148 1.395-2.454-.008-4.657-.485-6.63-1.426a13.373 13.373 0 01-4.933-3.973c-1.328-1.73-2.262-3.785-2.8-6.18h34.988c.304-4.191.113-7.96-.582-11.312-.696-3.363-1.934-6.234-3.7-8.617-1.758-2.371-4.074-4.215-6.96-5.48-2.883-1.27-6.372-1.927-10.43-1.919m-13.489 20.02c.391-2.48 1.188-4.613 2.391-6.399 1.219-1.796 2.773-3.175 4.672-4.148 1.902-.969 4.062-1.465 6.512-1.465 2.539 0 4.746.496 6.632 1.45a10.856 10.856 0 014.438 4.12c1.078 1.79 1.68 3.93 1.812 6.442zm49.993-37.945H613.55v64.574h10.008zm18.375 0h-10.012v64.574h10.012zm0 0" }))));
+    return (React.createElement("svg", { width: "64", height: "16", viewBox: "0 0 128 32", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg" },
+        React.createElement("path", { d: "M13.2378 4.66791C11.6702 4.67293 10.1682 5.29789 9.05974 6.40637C7.95126 7.51485 7.3263 9.01682 7.32128 10.5844V14.904C7.32128 16.2701 7.22608 17.1721 7.00713 17.9432C6.77392 18.7047 6.41866 19.4233 5.95519 20.0709C5.79336 20.3089 5.63866 20.5469 5.49587 20.7492C5.08176 21.3346 5.98613 21.475 6.44784 21.5488C8.69788 21.8729 10.9694 22.024 13.2426 22.001C15.5165 22.0241 17.7889 21.8729 20.0397 21.5488C21.2297 21.3537 21.1392 21.0276 20.6561 20.297C20.1816 19.6349 19.8034 18.909 19.5328 18.1408C19.2418 17.1631 19.1116 16.1447 19.1472 15.1254V10.5844C19.1453 9.01709 18.5223 7.51438 17.4147 6.40542C16.3071 5.29647 14.8052 4.67169 13.2378 4.66791ZM13.2378 2C15.5097 2.01067 17.6853 2.91905 19.2902 4.52711C20.8952 6.13517 21.7993 8.31251 21.8056 10.5844V15.1254C21.7707 15.8647 21.851 16.605 22.0436 17.3197C22.2453 17.8601 22.5191 18.3709 22.8575 18.8381C23.1288 19.2498 23.3978 19.6092 23.6167 19.9019C24.1356 20.5921 24.483 21.0562 24.4688 21.6892V21.713C24.4688 22.903 22.9289 23.7622 20.4443 24.1691C18.0527 24.5177 15.6379 24.6824 13.2212 24.6618C10.8141 24.6833 8.40892 24.521 6.02659 24.1763C3.54193 23.7693 2.00211 22.9197 2.00211 21.7202C1.96879 21.0633 2.33292 20.573 2.88507 19.8281C3.12306 19.5068 3.41818 19.1141 3.72757 18.6382C4.03691 18.2073 4.27775 17.7313 4.44155 17.2269C4.58673 16.7128 4.65099 16.0369 4.65099 14.9183V10.5844C4.65664 8.30944 5.56289 6.12924 7.17156 4.52057C8.78023 2.9119 10.9604 2.00566 13.2354 2H13.2378Z" }),
+        React.createElement("path", { d: "M10.8769 9.68955C10.8668 10.1473 10.9882 10.5983 11.2268 10.989C11.4417 11.326 11.7457 11.5969 12.105 11.772C12.4608 11.9412 12.8498 12.029 13.2438 12.029C13.6378 12.029 14.0268 11.9412 14.3826 11.772C14.7419 11.5969 15.0458 11.326 15.2608 10.989C15.49 10.5934 15.6107 10.1444 15.6107 9.68717C15.6107 9.22999 15.49 8.78091 15.2608 8.38534C15.0442 8.05094 14.7406 7.78189 14.3826 7.6071C14.0275 7.43555 13.6382 7.34644 13.2438 7.34644C12.8494 7.34644 12.4601 7.43555 12.105 7.6071C11.747 7.78189 11.4433 8.05094 11.2268 8.38534C10.9886 8.77798 10.8672 9.2304 10.8769 9.68955Z" }),
+        React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M25.6468 9.68483L23.0836 8.3711L20.5204 7.05737V9.68483V12.3147L23.0836 11.0009L25.6468 9.68483Z" }),
+        React.createElement("path", { d: "M17.5907 25.8422C17.5423 26.9273 17.0888 27.9548 16.3198 28.722C15.9164 29.1264 15.4371 29.4472 14.9095 29.6661C14.3818 29.8851 13.8162 29.9977 13.2449 29.9977C12.6737 29.9977 12.1081 29.8851 11.5804 29.6661C11.0528 29.4472 10.5735 29.1264 10.1701 28.722C9.40107 27.9548 8.94761 26.9273 8.89917 25.8422C9.73453 25.916 10.6437 25.9684 11.5956 25.9969C11.6721 26.3773 11.879 26.7191 12.1805 26.9633C12.482 27.2075 12.8593 27.3387 13.2473 27.3344C13.4683 27.3346 13.6872 27.2912 13.8914 27.2067C14.0956 27.1221 14.2811 26.9981 14.4373 26.8418C14.669 26.61 14.8278 26.3155 14.8942 25.9945C15.8462 25.966 16.7554 25.9136 17.5907 25.8398" }),
+        React.createElement("path", { d: "M44.688 7.22H41.806L36.834 18.418H36.68L31.686 7.22H28.782V22.62H31.048V11.356H31.224L35.536 20.86H37.978L42.268 11.356H42.422V22.62H44.688V7.22Z" }),
+        React.createElement("path", { d: "M57.2448 20.926C56.6948 20.926 56.4088 20.64 56.4088 20.024V15.514C56.4088 12.764 54.5168 11.4 52.0088 11.4C49.3688 11.4 47.7408 12.984 47.5428 15.162H49.7648C49.9628 14.018 50.6228 13.226 52.0088 13.226C53.3728 13.226 54.1648 14.018 54.1648 15.426V15.976L50.7988 16.306C48.6868 16.504 47.1028 17.582 47.1028 19.672C47.1028 21.828 48.7088 22.84 50.8428 22.84C52.4928 22.84 53.7028 22.202 54.4508 21.256C54.7588 22.29 55.4848 22.62 56.5188 22.62H57.5308V20.926H57.2448ZM54.1648 18.396C54.1648 20.376 52.5368 21.08 51.1728 21.08C50.1828 21.08 49.3468 20.684 49.3468 19.584C49.3468 18.528 50.2488 17.956 51.5468 17.846L54.1648 17.582V18.396Z" }),
+        React.createElement("path", { d: "M69.3697 11.774L68.1817 10.498C67.7417 11.07 67.0377 11.686 66.3557 12.038C65.6517 11.62 64.7937 11.4 63.8257 11.4C61.2077 11.4 59.5357 13.028 59.5357 15.184C59.5357 16.306 59.9757 17.23 60.7237 17.868C59.9537 18.286 59.2937 18.968 59.2937 19.958C59.2937 20.904 59.8217 21.63 60.6577 21.982L58.8977 23.5C59.0957 25.524 60.6577 27.24 64.0017 27.24C66.9277 27.24 68.9297 25.92 68.9297 23.588C68.9297 21.652 67.5437 20.442 65.0357 20.442H62.8577C61.9557 20.442 61.3177 20.134 61.3177 19.496C61.3177 19.1 61.5377 18.814 61.9557 18.594C62.5277 18.814 63.1877 18.924 63.9137 18.924C66.3557 18.924 68.2477 17.516 68.2477 15.184C68.2477 14.392 68.0057 13.666 67.5437 13.072C68.3137 12.698 69.0177 12.192 69.3697 11.774ZM63.9137 17.23C62.5497 17.23 61.6697 16.35 61.6697 15.184C61.6697 13.93 62.5497 13.072 63.9137 13.072C65.2557 13.072 66.0917 13.93 66.0917 15.184C66.0917 16.35 65.2557 17.23 63.9137 17.23ZM66.7737 23.698C66.7737 24.952 65.4757 25.524 64.0017 25.524C62.1537 25.524 61.3397 24.6 61.0757 23.654L62.7697 22.224H64.7717C65.6737 22.224 66.7737 22.554 66.7737 23.698Z" }),
+        React.createElement("path", { d: "M72.1185 9.992C72.8885 9.992 73.5265 9.332 73.5265 8.562C73.5265 7.77 72.8885 7.154 72.1185 7.154C71.3265 7.154 70.6665 7.77 70.6665 8.562C70.6665 9.332 71.3265 9.992 72.1185 9.992ZM70.9965 22.62H73.2405V11.62H70.9965V22.62Z" }),
+        React.createElement("path", { d: "M81.0823 22.84C83.8103 22.84 85.8123 21.322 86.2083 18.946H83.9643C83.5463 20.134 82.6003 20.882 81.0823 20.882C79.0143 20.882 77.7383 19.298 77.7383 17.186C77.7383 14.986 79.1243 13.358 81.0603 13.358C82.6003 13.358 83.6563 14.304 83.9203 15.448H86.1643C85.7903 12.786 83.5463 11.4 81.0603 11.4C77.8703 11.4 75.5163 13.798 75.5163 17.186C75.5163 20.42 77.6943 22.84 81.0823 22.84Z" }),
+        React.createElement("path", { d: "M96.7512 14.546V14.436C97.8732 13.908 98.9072 12.984 98.9072 11.048C98.9072 8.782 97.4772 7.22 94.5072 7.22H88.6332V22.62H94.5292C97.5212 22.62 99.3252 21.08 99.3252 18.396C99.3252 16.064 97.9392 14.986 96.7512 14.546ZM90.8992 9.112H94.2652C95.6732 9.112 96.5972 9.948 96.5972 11.378C96.5972 12.808 95.7612 13.754 94.1992 13.754H90.8992V9.112ZM94.3312 20.728H90.8992V15.646H94.3312C95.9592 15.646 96.9712 16.746 96.9712 18.242C96.9712 19.716 96.0032 20.728 94.3312 20.728Z" }),
+        React.createElement("path", { d: "M111.65 16.966C111.65 13.182 109.296 11.4 106.612 11.4C103.62 11.4 101.266 13.644 101.266 17.23C101.266 20.618 103.532 22.84 106.7 22.84C109.296 22.84 111.144 21.52 111.606 19.32H109.45C109.098 20.442 108.086 21.014 106.7 21.014C104.764 21.014 103.576 19.65 103.466 17.692H111.606C111.628 17.406 111.65 17.186 111.65 16.966ZM106.612 13.226C108.306 13.226 109.45 14.414 109.472 16.108H103.488C103.708 14.502 104.874 13.226 106.612 13.226Z" }),
+        React.createElement("path", { d: "M113.966 22.62H116.21V7H113.966V22.62Z" }),
+        React.createElement("path", { d: "M118.838 22.62H121.082V7H118.838V22.62Z" })));
 }

dist/esm/components/Header/Header.js

@@ -27,3 +27,3 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
     var handleClick = function () { return onAllRead(); };
-    var style = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    align-items: center;\n    background: ", " !important;\n    border-radius: ", " ", " 0 0 !important;\n    color: ", ";\n    display: flex;\n    font-family: ", " !important;\n    font-size: ", " !important;\n    justify-content: space-between;\n    text-align: ", " !important;\n    text-transform: ", " !important;\n    padding: 16px !important;\n  "], ["\n    align-items: center;\n    background: ", " !important;\n    border-radius: ", " ", " 0 0 !important;\n    color: ", ";\n    display: flex;\n    font-family: ", " !important;\n    font-size: ", " !important;\n    justify-content: space-between;\n    text-align: ", " !important;\n    text-transform: ", " !important;\n    padding: 16px !important;\n  "])), toRGBA(headerTheme.backgroundColor, headerTheme.backgroundOpacity), headerTheme.borderRadius, headerTheme.borderRadius, headerTheme.textColor, headerTheme.fontFamily, headerTheme.fontSize, headerTheme.textAlign, headerTheme.textTransform);
+    var style = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    align-items: center;\n    background: ", " !important;\n    border-radius: ", " ", " 0 0 !important;\n    color: ", ";\n    display: flex;\n    font-family: ", " !important;\n    font-size: ", " !important;\n    justify-content: space-between;\n    text-align: ", " !important;\n    text-transform: ", " !important;\n    padding: 16px 24px !important;\n  "], ["\n    align-items: center;\n    background: ", " !important;\n    border-radius: ", " ", " 0 0 !important;\n    color: ", ";\n    display: flex;\n    font-family: ", " !important;\n    font-size: ", " !important;\n    justify-content: space-between;\n    text-align: ", " !important;\n    text-transform: ", " !important;\n    padding: 16px 24px !important;\n  "])), toRGBA(headerTheme.backgroundColor, headerTheme.backgroundOpacity), headerTheme.borderRadius, headerTheme.borderRadius, headerTheme.textColor, headerTheme.fontFamily, headerTheme.fontSize, headerTheme.textAlign, headerTheme.textTransform);
     return (jsx("div", { css: [cleanslate, style] },
@@ -30,0 +30,0 @@ jsx(HeaderTitle, null),

dist/esm/components/NotificationContent/NotificationContent.js

@@ -79,5 +79,5 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
         return null;
-    return (jsx("article", { css: css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        color: inherit !important;\n        cursor: inherit;\n        margin: 0;\n        line-height: 1.2;\n        font-size: 0.865em !important;\n        margin-top: 1em !important;\n        opacity: 0.9;\n        word-break: break-word !important;\n      "], ["\n        color: inherit !important;\n        cursor: inherit;\n        margin: 0;\n        line-height: 1.2;\n        font-size: 0.865em !important;\n        margin-top: 1em !important;\n        opacity: 0.9;\n        word-break: break-word !important;\n      "]))), dangerouslySetInnerHTML: { __html: markup } }));
+    return (jsx("article", { css: css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        color: inherit !important;\n        cursor: inherit;\n        margin: 0;\n        line-height: 1.2;\n        font-size: 0.865em !important;\n        margin-top: 1em !important;\n        word-break: break-word !important;\n      "], ["\n        color: inherit !important;\n        cursor: inherit;\n        margin: 0;\n        line-height: 1.2;\n        font-size: 0.865em !important;\n        margin-top: 1em !important;\n        word-break: break-word !important;\n      "]))), dangerouslySetInnerHTML: { __html: markup } }));
 }
 export default observer(NotificationContent);
 var templateObject_1;

dist/esm/components/NotificationContextMenu/NotificationContextMenu.js

@@ -21,6 +21,6 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
     var theme = useContext(MagicBellContext).theme;
-    var notificationTheme = theme.notification;
+    var containerTheme = theme.container, notificationTheme = theme.notification;
     var handleDelete = function () { return notification.delete(); };
     var toggleRead = function () { return (notification.isRead ? notification.markAsUnread() : notification.markAsRead()); };
-    return (jsx("div", { css: css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        background: ", " !important;\n        border-radius: ", " !important;\n        box-shadow: 2px 0 3px ", ";\n        color: ", " !important;\n        font-family: ", " !important;\n        font-size: ", " !important;\n        text-transform: ", " !important;\n        min-width: 10em;\n\n        a {\n          display: block;\n          padding: 0.75em 1.25em !important;\n\n          &:hover {\n            text-decoration: underline !important;\n          }\n        }\n      "], ["\n        background: ", " !important;\n        border-radius: ", " !important;\n        box-shadow: 2px 0 3px ", ";\n        color: ", " !important;\n        font-family: ", " !important;\n        font-size: ", " !important;\n        text-transform: ", " !important;\n        min-width: 10em;\n\n        a {\n          display: block;\n          padding: 0.75em 1.25em !important;\n\n          &:hover {\n            text-decoration: underline !important;\n          }\n        }\n      "])), notificationTheme.default.backgroundColor, notificationTheme.default.borderRadius, darken(toRGBA(notificationTheme.default.backgroundColor, 0.5), 10), notificationTheme.default.textColor, notificationTheme.default.fontFamily, notificationTheme.default.fontSize, notificationTheme.default.textTransform) },
+    return (jsx("div", { css: css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        background: ", " !important;\n        border-radius: ", " !important;\n        box-shadow: 2px 2px 3px ", ";\n        color: ", " !important;\n        font-family: ", " !important;\n        font-size: ", " !important;\n        text-transform: ", " !important;\n        min-width: 10em;\n\n        a {\n          display: block;\n          padding: 0.75em 1.25em !important;\n\n          &:hover {\n            text-decoration: underline !important;\n          }\n        }\n      "], ["\n        background: ", " !important;\n        border-radius: ", " !important;\n        box-shadow: 2px 2px 3px ", ";\n        color: ", " !important;\n        font-family: ", " !important;\n        font-size: ", " !important;\n        text-transform: ", " !important;\n        min-width: 10em;\n\n        a {\n          display: block;\n          padding: 0.75em 1.25em !important;\n\n          &:hover {\n            text-decoration: underline !important;\n          }\n        }\n      "])), containerTheme.backgroundColor, notificationTheme.default.borderRadius, darken(toRGBA(containerTheme.backgroundColor, 0.5), 10), notificationTheme.default.textColor, notificationTheme.default.fontFamily, notificationTheme.default.fontSize, notificationTheme.default.textTransform) },
         jsx("a", { onClick: toggleRead, "data-testid": "toggle-read" }, notification.isRead ? 'Mark as unread' : 'Mark as read'),
@@ -27,0 +27,0 @@ jsx("a", { onClick: handleDelete, "data-testid": "delete" }, "Delete")));

dist/esm/components/NotificationInbox/NotificationInbox.js

@@ -0,3 +1,7 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/core';
 import { observer } from 'mobx-react-lite';
@@ -11,2 +15,3 @@ import { useContext, useEffect } from 'react';
 import ClearInboxMessage from './ClearInboxMessage';
+import FetchErrorMessage from './error/FetchErrorMessage';
 /**
@@ -36,5 +41,11 @@ * Component that renders all notifications as well as a header and a footer.
         return null;
-    return (jsx("div", { css: [cleanslate] },
+    return (jsx("div", { css: [
+            cleanslate,
+            css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n          display: flex;\n          flex-direction: column;\n          min-height: ", "px;\n        "], ["\n          display: flex;\n          flex-direction: column;\n          min-height: ", "px;\n        "])), height),
+        ] },
         jsx(Header, { onAllRead: markAsRead }),
-        store.isEmpty && !store.isFetchPending ? (jsx(ClearInboxMessage, null)) : (jsx(NotificationList, { notifications: store, height: height, onItemClick: onNotificationClick, queryParams: store.context })),
+        jsx("div", { css: { flex: 1 } },
+            store.xhrFetchState === 'rejected' && jsx(FetchErrorMessage, null),
+            store.xhrFetchState === 'fulfilled' && store.isEmpty && jsx(ClearInboxMessage, null),
+            store.xhrFetchState === 'fulfilled' && !store.isEmpty && (jsx(NotificationList, { notifications: store, height: height, onItemClick: onNotificationClick, queryParams: store.context }))),
         jsx(Footer, null)));
@@ -46,1 +57,2 @@ }
 export default observer(NotificationInbox);
+var templateObject_1;

dist/esm/components/NotificationState/NotificationState.js

@@ -28,4 +28,4 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
     var _b = useState(false), isHovered = _b[0], setHovered = _b[1];
-    return (jsx(Tippy, { render: function () { return jsx(NotificationContextMenu, { notification: notification }); }, placement: "bottom", trigger: "click", interactive: true },
-        jsx("div", { css: css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n          padding: 0.5em !important;\n          color: ", " !important;\n\n          svg {\n            height: 1.5em;\n            fill: currentColor;\n          }\n        "], ["\n          padding: 0.5em !important;\n          color: ",
+    return (jsx(Tippy, { render: function () { return jsx(NotificationContextMenu, { notification: notification }); }, offset: [4, 2], zIndex: 0, placement: "bottom-end", interactive: true },
+        jsx("div", { css: css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n          display: flex !important;\n          align-items: center !important;\n          padding: 0.5em 0 0.5em 0.25em !important;\n          color: ", " !important;\n\n          svg {\n            height: 1.5em;\n            fill: currentColor;\n          }\n        "], ["\n          display: flex !important;\n          align-items: center !important;\n          padding: 0.5em 0 0.5em 0.25em !important;\n          color: ",
                 " !important;\n\n          svg {\n            height: 1.5em;\n            fill: currentColor;\n          }\n        "])), notification.isRead
@@ -32,0 +32,0 @@ ? toRGBA(notificationTheme.default.textColor, 0.5)

dist/esm/components/Timestamp/Timestamp.js

@@ -0,3 +1,7 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/core';
 import Tippy from '@tippyjs/react/headless';
@@ -21,4 +25,5 @@ import { observer } from 'mobx-react-lite';
     return (jsx(Tippy, { render: function () { return jsx(TimestampTooltip, { date: dateInstance }); }, placement: "bottom-end", interactive: true },
-        jsx("div", null, relativeTime)));
+        jsx("div", { css: css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n          padding: 0.5em 0 0.5em 0.25em !important;\n        "], ["\n          padding: 0.5em 0 0.5em 0.25em !important;\n        "]))) }, relativeTime)));
 }
 export default observer(Timestamp);
+var templateObject_1;

dist/esm/components/Timestamp/TimestampTooltip.js

@@ -9,2 +9,3 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
 import MagicBellContext from '../../context/MagicBellContext';
+import { darken, toRGBA } from '../../lib/color';
 /**
@@ -19,5 +20,5 @@ * Component that renders a formatted date. The component is styled as a tooltip.
     var theme = useContext(MagicBellContext).theme;
-    var notificationTheme = theme.notification;
-    return (jsx("span", { css: css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        background: ", " !important;\n        border-radius: 4px;\n        color: ", " !important;\n        font-size: 0.8em !important;\n        padding: 0.5em !important;\n        text-transform: ", ";\n      "], ["\n        background: ", " !important;\n        border-radius: 4px;\n        color: ", " !important;\n        font-size: 0.8em !important;\n        padding: 0.5em !important;\n        text-transform: ", ";\n      "])), notificationTheme.default.backgroundColor, notificationTheme.default.textColor, notificationTheme.default.textTransform) }, date.format('LL LT')));
+    var containerTheme = theme.container, notificationTheme = theme.notification;
+    return (jsx("span", { css: css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        background: ", " !important;\n        border-radius: ", " !important;\n        box-shadow: 2px 2px 3px ", ";\n        color: ", " !important;\n        font-size: 0.8em !important;\n        padding: 0.5em !important;\n        text-transform: ", ";\n      "], ["\n        background: ", " !important;\n        border-radius: ", " !important;\n        box-shadow: 2px 2px 3px ", ";\n        color: ", " !important;\n        font-size: 0.8em !important;\n        padding: 0.5em !important;\n        text-transform: ", ";\n      "])), containerTheme.backgroundColor, notificationTheme.default.borderRadius, darken(toRGBA(containerTheme.backgroundColor, 0.5), 10), notificationTheme.default.textColor, notificationTheme.default.textTransform) }, date.format('LL LT')));
 }
 var templateObject_1;

dist/esm/context/Theme.js

@@ -44,6 +44,16 @@ var blue = '#3498F4';
     },
+    container: {
+        backgroundColor: '#FFFFFF',
+        backgroundOpacity: 1,
+        borderRadius: '8px',
+        fontFamily: fontFamily,
+        fontSize: '14px',
+        textAlign: textAlign,
+        textColor: black,
+        textTransform: textTransform,
+    },
     notification: {
         default: {
-            backgroundColor: 'white',
-            backgroundOpacity: 1,
+            backgroundColor: blue,
+            backgroundOpacity: 0.1,
             borderRadius: '8px',
@@ -58,3 +68,3 @@ fontFamily: fontFamily,
             backgroundColor: blue,
-            backgroundOpacity: 0.2,
+            backgroundOpacity: 0.1,
             borderRadius: '8px',
@@ -61,0 +71,0 @@ fontFamily: fontFamily,

dist/types/context/Theme.d.ts

@@ -16,5 +16,6 @@ export interface IElementTheme {
     };
+    unseenBadge: IElementTheme;
     header: IElementTheme;
+    container: IElementTheme;
     footer: IElementTheme;
-    unseenBadge: IElementTheme;
     notification: {
@@ -21,0 +22,0 @@ default: IElementTheme;

package.json

 {
   "name": "@magicbell/magicbell-react",
-  "version": "6.8.0-beta.1",
+  "version": "6.8.0",
   "description": "A set of React components to build a notification inbox",
@@ -85,3 +85,3 @@ "author": "MagicBell <[e-mail]> (https://magicbell.io/)",
     "@emotion/core": "^10.0.35",
-    "@magicbell/core": "^1.5.0",
+    "@magicbell/core": "^1.5.1",
     "@tippyjs/react": "^4.2.0",
@@ -88,0 +88,0 @@ "ably": "^1.2.4",

src/context/Theme.ts

@@ -17,5 +17,6 @@ export interface IElementTheme {
   };
+  unseenBadge: IElementTheme;
   header: IElementTheme;
+  container: IElementTheme;
   footer: IElementTheme;
-  unseenBadge: IElementTheme;
   notification: {
@@ -73,6 +74,16 @@ default: IElementTheme;
   },
+  container: {
+    backgroundColor: '#FFFFFF',
+    backgroundOpacity: 1,
+    borderRadius: '8px',
+    fontFamily,
+    fontSize: '14px',
+    textAlign,
+    textColor: black,
+    textTransform,
+  },
   notification: {
     default: {
-      backgroundColor: 'white',
-      backgroundOpacity: 1,
+      backgroundColor: blue,
+      backgroundOpacity: 0.1,
       borderRadius: '8px',
@@ -87,3 +98,3 @@ fontFamily,
       backgroundColor: blue,
-      backgroundOpacity: 0.2,
+      backgroundOpacity: 0.1,
       borderRadius: '8px',
@@ -90,0 +101,0 @@ fontFamily,

tests/src/context/Theme.spec.ts

@@ -26,2 +26,16 @@ import { defaultTheme } from '../../../src/context/Theme';
 
+    it('defines default values for the notifications container', () => {
+      expect(defaultTheme.container).toEqual({
+        backgroundColor: '#FFFFFF',
+        backgroundOpacity: 1,
+        borderRadius: '8px',
+        fontFamily:
+          '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif',
+        fontSize: '14px',
+        textAlign: 'left',
+        textColor: '#3A424D',
+        textTransform: 'none',
+      });
+    });
+
     it('defines default values for the footer', () => {
@@ -57,4 +71,4 @@ expect(defaultTheme.footer).toEqual({
       expect(defaultTheme.notification.default).toEqual({
-        backgroundColor: 'white',
-        backgroundOpacity: 1,
+        backgroundColor: '#3498F4',
+        backgroundOpacity: 0.1,
         borderRadius: '8px',
@@ -73,3 +87,3 @@ fontFamily:
         backgroundColor: '#3498F4',
-        backgroundOpacity: 0.2,
+        backgroundOpacity: 0.1,
         borderRadius: '8px',
@@ -76,0 +90,0 @@ fontFamily:

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

535963

9.08%

Number of package files

276

5.34%

Lines of code

7016

6.32%

Number of low quality alerts

0

-100%

Dependency changes

• Updated

  @magicbell/core@^1.5.1