@notificationapi/react 1.7.0 → 1.8.0

package/dist/components/Notifications/InboxHeader.js

@@ -2,14 +2,15 @@ import { jsx as k, jsxs as Be, Fragment as mo } from "react/jsx-runtime";
 import { T as vo } from "../../assets/Typography.js";
 import { B as ho } from "../../assets/Box.js";
 import * as M from "react";
-import { g as Wt, e as It, P as r, b as Ht, s as ot, u as Vt, m as ut, h as Ft, a as Ut, c as xt } from "../../assets/DefaultPropsProvider.js";
-import { u as zt, G as go } from "../../assets/Grow.js";
-import { u as yo } from "../../assets/useTheme.js";
-import { c as bo, r as qt, b as Tt, u as Xe, d as Pt, a as Ge, g as wo, i as Et } from "../../assets/ButtonBase.js";
-import { o as Rt, P as Oo, H as _e, g as xo, e as To } from "../../assets/Portal.js";
+import { g as Wt, P as r, e as It, a as Ht } from "../../assets/createTheme.js";
+import { g as Vt, a as Ft, s as ot, u as Ut, m as ut, c as xt } from "../../assets/DefaultPropsProvider.js";
+import { u as zt } from "../../assets/index.js";
+import { c as go, r as qt, d as Tt, u as yo, a as Xe, f as Pt, b as Ge, h as bo, i as Et } from "../../assets/ButtonBase.js";
+import { o as Rt, P as wo, H as _e, g as Oo, e as xo } from "../../assets/Portal.js";
 import { u as pt } from "../../assets/resolveComponentProps.js";
-import { u as Po } from "../../assets/useSlotProps.js";
-import { a as Eo, u as Ro } from "../../assets/dividerClasses.js";
+import { u as To } from "../../assets/useSlotProps.js";
+import { a as Po, u as Eo } from "../../assets/dividerClasses.js";
+import { G as Ro } from "../../assets/Grow.js";
 import { I as At } from "../../assets/IconButton.js";
 import { c as Yt } from "../../assets/createSvgIcon.js";
 import { D as Ao } from "../../assets/Divider.js";
@@ -917,9 +918,9 @@ var Sr = [tr, br, _o, Fo, gr, ur, xr, Ko, mr], $r = /* @__PURE__ */ Dr({
   defaultModifiers: Sr
 });
 function Lr(t) {
-  return It("MuiPopper", t);
+  return Wt("MuiPopper", t);
 }
-Wt("MuiPopper", ["root"]);
+Vt("MuiPopper", ["root"]);
 function kr(t, e) {
   if (e === "ltr")
     return t;
@@ -949,7 +950,7 @@ const Nr = (t) => {
   const {
     classes: e
   } = t;
-  return Ht({
+  return Ft({
     root: ["root"]
   }, Lr, e);
 }, Wr = {}, Ir = /* @__PURE__ */ M.forwardRef(function(e, o) {
@@ -1024,7 +1025,7 @@ const Nr = (t) => {
     placement: R
   };
   T !== null && (C.TransitionProps = T);
-  const W = Nr(e), j = u.root ?? "div", G = Po({
+  const W = Nr(e), j = u.root ?? "div", G = To({
     elementType: j,
     externalSlotProps: x.root,
     externalForwardedProps: h,
@@ -1076,7 +1077,7 @@ const Nr = (t) => {
     onEnter: y,
     onExited: b
   } : void 0;
-  return /* @__PURE__ */ k(Oo, {
+  return /* @__PURE__ */ k(wo, {
     disablePortal: i,
     container: R,
     children: /* @__PURE__ */ k(Ir, {
@@ -1117,7 +1118,7 @@ process.env.NODE_ENV !== "production" && (oo.propTypes = {
    * It's used to set the position of the popper.
    * The return value will passed as the reference object of the Popper instance.
    */
-  anchorEl: bo(r.oneOfType([_e, r.object, r.func]), (t) => {
+  anchorEl: go(r.oneOfType([_e, r.object, r.func]), (t) => {
     if (t.open) {
       const e = tt(t.anchorEl);
       if (e && nt(e) && e.nodeType === 1) {
@@ -1232,7 +1233,7 @@ const Hr = ot(oo, {
   slot: "Root",
   overridesResolver: (t, e) => e.root
 })({}), wt = /* @__PURE__ */ M.forwardRef(function(e, o) {
-  const n = zt(), a = Vt({
+  const n = zt(), a = Ut({
     props: e,
     name: "MuiPopper"
   }), {
@@ -1408,9 +1409,9 @@ process.env.NODE_ENV !== "production" && (wt.propTypes = {
   transition: r.bool
 });
 function Vr(t) {
-  return It("MuiTooltip", t);
+  return Wt("MuiTooltip", t);
 }
-const L = Wt("MuiTooltip", ["popper", "popperInteractive", "popperArrow", "popperClose", "tooltip", "tooltipArrow", "touch", "tooltipPlacementLeft", "tooltipPlacementRight", "tooltipPlacementTop", "tooltipPlacementBottom", "arrow"]);
+const L = Vt("MuiTooltip", ["popper", "popperInteractive", "popperArrow", "popperClose", "tooltip", "tooltipArrow", "touch", "tooltipPlacementLeft", "tooltipPlacementRight", "tooltipPlacementTop", "tooltipPlacementBottom", "arrow"]);
 function Fr(t) {
   return Math.round(t * 1e5) / 1e5;
 }
@@ -1423,10 +1424,10 @@ const Ur = (t) => {
     placement: s
   } = t, c = {
     popper: ["popper", !o && "popperInteractive", n && "popperArrow"],
-    tooltip: ["tooltip", n && "tooltipArrow", a && "touch", `tooltipPlacement${Ft(s.split("-")[0])}`],
+    tooltip: ["tooltip", n && "tooltipArrow", a && "touch", `tooltipPlacement${It(s.split("-")[0])}`],
     arrow: ["arrow"]
   };
-  return Ht(c, Vr, e);
+  return Ft(c, Vr, e);
 }, zr = ot(wt, {
   name: "MuiTooltip",
   slot: "Popper",
@@ -1537,12 +1538,12 @@ const Ur = (t) => {
     const {
       ownerState: o
     } = t;
-    return [e.tooltip, o.touch && e.touch, o.arrow && e.tooltipArrow, e[`tooltipPlacement${Ft(o.placement.split("-")[0])}`]];
+    return [e.tooltip, o.touch && e.touch, o.arrow && e.tooltipArrow, e[`tooltipPlacement${It(o.placement.split("-")[0])}`]];
   }
 })(ut(({
   theme: t
 }) => ({
-  backgroundColor: t.vars ? t.vars.palette.Tooltip.bg : Ut(t.palette.grey[700], 0.92),
+  backgroundColor: t.vars ? t.vars.palette.Tooltip.bg : Ht(t.palette.grey[700], 0.92),
   borderRadius: (t.vars || t).shape.borderRadius,
   color: (t.vars || t).palette.common.white,
   fontFamily: t.typography.fontFamily,
@@ -1663,7 +1664,7 @@ const Ur = (t) => {
   width: "1em",
   height: "0.71em",
   boxSizing: "border-box",
-  color: t.vars ? t.vars.palette.Tooltip.bg : Ut(t.palette.grey[700], 0.9),
+  color: t.vars ? t.vars.palette.Tooltip.bg : Ht(t.palette.grey[700], 0.9),
   "&::before": {
     content: '""',
     margin: "auto",
@@ -1675,7 +1676,7 @@ const Ur = (t) => {
   }
 })));
 let Je = !1;
-const Nt = new wo();
+const Nt = new bo();
 let ke = {
   x: 0,
   y: 0
@@ -1686,7 +1687,7 @@ function Qe(t, e) {
   };
 }
 const ft = /* @__PURE__ */ M.forwardRef(function(e, o) {
-  const n = Vt({
+  const n = Ut({
     props: e,
     name: "MuiTooltip"
   }), {
@@ -1721,7 +1722,7 @@ const ft = /* @__PURE__ */ M.forwardRef(function(e, o) {
     ...$
   } = n, D = /* @__PURE__ */ M.isValidElement(s) ? s : /* @__PURE__ */ k("span", {
     children: s
-  }), N = yo(), re = zt(), [B, ve] = M.useState(), [ne, he] = M.useState(null), J = M.useRef(!1), F = x || w, ie = Xe(), se = Xe(), U = Xe(), ge = Xe(), [at, ye] = Eo({
+  }), N = yo(), re = zt(), [B, ve] = M.useState(), [ne, he] = M.useState(null), J = M.useRef(!1), F = x || w, ie = Xe(), se = Xe(), U = Xe(), ge = Xe(), [at, ye] = Po({
     controlled: R,
     default: !1,
     name: "Tooltip",
@@ -1737,7 +1738,7 @@ const ft = /* @__PURE__ */ M.forwardRef(function(e, o) {
 `));
     }, [j, B, v]);
   }
-  const be = Ro(E), le = M.useRef(), we = Pt(() => {
+  const be = Eo(E), le = M.useRef(), we = Pt(() => {
     le.current !== void 0 && (document.body.style.WebkitUserSelect = le.current, le.current = void 0), ge.clear();
   });
   M.useEffect(() => we, [we]);
@@ -1789,7 +1790,7 @@ const ft = /* @__PURE__ */ M.forwardRef(function(e, o) {
       document.removeEventListener("keydown", v);
     };
   }, [ce, Q]);
-  const ze = pt(xo(D), ve, o);
+  const ze = pt(Oo(D), ve, o);
   !j && j !== 0 && (Q = !1);
   const xe = M.useRef(), qe = (v) => {
     const _ = D.props;
@@ -1867,7 +1868,7 @@ const ft = /* @__PURE__ */ M.forwardRef(function(e, o) {
     ownerState: ue,
     className: xt(st.popper, P == null ? void 0 : P.className)
   }), [so, po] = Ge("transition", {
-    elementType: go,
+    elementType: Ro,
     externalForwardedProps: Ye,
     ownerState: ue
   }), [lo, co] = Ge("tooltip", {
@@ -1932,7 +1933,7 @@ process.env.NODE_ENV !== "production" && (ft.propTypes = {
   /**
    * Tooltip reference element.
    */
-  children: To.isRequired,
+  children: xo.isRequired,
   /**
    * Override or extend the styles applied to the component.
    */
@@ -2110,7 +2111,7 @@ const Xr = Yt(/* @__PURE__ */ k("path", {
   d: "m18 7-1.41-1.41-6.34 6.34 1.41 1.41zm4.24-1.41L11.66 16.17 7.48 12l-1.41 1.41L11.66 19l12-12zM.41 13.41 6 19l1.41-1.41L1.83 12z"
 }), "DoneAll"), Gr = Yt(/* @__PURE__ */ k("path", {
   d: "M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6"
-}), "Settings"), cn = (t) => {
+}), "Settings"), fn = (t) => {
   const e = t.title ?? /* @__PURE__ */ k(vo, { variant: "body1", children: "Notifications" });
   return /* @__PURE__ */ Be(mo, { children: [
     /* @__PURE__ */ Be(
@@ -2144,5 +2145,5 @@ const Xr = Yt(/* @__PURE__ */ k("path", {
   ] });
 };
 export {
-  cn as InboxHeader
+  fn as InboxHeader
 };

package/dist/components/Notifications/Notification.js

@@ -1,9 +1,11 @@
 import "react/jsx-runtime";
-import { N as f } from "../../assets/Notification.js";
+import { N as c } from "../../assets/Notification.js";
 import "../../assets/DefaultPropsProvider.js";
+import "../../utils/theme.js";
+import "../../assets/ButtonBase.js";
 import "../../assets/Typography.js";
 import "../../assets/IconButton.js";
 import "../../assets/Badge.js";
 export {
-  f as Notification
+  c as Notification
 };

package/dist/components/Notifications/NotificationFeed.js

@@ -1,24 +1,26 @@
-import { jsx as n, jsxs as s } from "react/jsx-runtime";
-import { useState as d, useContext as m, useEffect as h } from "react";
-import { Inbox as u } from "./Inbox.js";
-import { NotificationAPIContext as p } from "../Provider/context.js";
-import { NotificationPreferencesPopup as x } from "../Preferences/NotificationPreferencesPopup.js";
-import { Filter as S } from "./interface.js";
-import { W as b } from "../../assets/WebPushOptInMessage.js";
-import { c as C } from "../../assets/createSvgIcon.js";
-import { D as I } from "../../assets/Divider.js";
-const H = C(/* @__PURE__ */ n("path", {
+import { jsx as n, jsxs as f } from "react/jsx-runtime";
+import { useState as h, useContext as u, useEffect as p } from "react";
+import { Inbox as x } from "./Inbox.js";
+import { NotificationAPIContext as b } from "../Provider/context.js";
+import { NotificationPreferencesPopup as S } from "../Preferences/NotificationPreferencesPopup.js";
+import { Filter as C } from "./interface.js";
+import { getThemeColors as I } from "../../utils/theme.js";
+import { W as H } from "../../assets/WebPushOptInMessage.js";
+import { c as P } from "../../assets/createSvgIcon.js";
+import { u as y } from "../../assets/ButtonBase.js";
+import { D as v } from "../../assets/Divider.js";
+const M = P(/* @__PURE__ */ n("path", {
   d: "M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2m6.93 6h-2.95c-.32-1.25-.78-2.45-1.38-3.56 1.84.63 3.37 1.91 4.33 3.56M12 4.04c.83 1.2 1.48 2.53 1.91 3.96h-3.82c.43-1.43 1.08-2.76 1.91-3.96M4.26 14C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2s.06 1.34.14 2zm.82 2h2.95c.32 1.25.78 2.45 1.38 3.56-1.84-.63-3.37-1.9-4.33-3.56m2.95-8H5.08c.96-1.66 2.49-2.93 4.33-3.56C8.81 5.55 8.35 6.75 8.03 8M12 19.96c-.83-1.2-1.48-2.53-1.91-3.96h3.82c-.43 1.43-1.08 2.76-1.91 3.96M14.34 14H9.66c-.09-.66-.16-1.32-.16-2s.07-1.35.16-2h4.68c.09.65.16 1.32.16 2s-.07 1.34-.16 2m.25 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95c-.96 1.65-2.49 2.93-4.33 3.56M16.36 14c.08-.66.14-1.32.14-2s-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2z"
-}), "Language"), O = (e) => {
-  var a, o, c, l;
-  const [f, r] = d(!1), i = m(p);
-  if (h(() => {
+}), "Language"), R = (e) => {
+  var a, c, s, l;
+  const [m, o] = h(!1), i = u(b), g = y(), r = I(g);
+  if (p(() => {
     if (!i) return;
     i.markAsOpened();
-    const g = setInterval(() => {
+    const d = setInterval(() => {
       i.markAsOpened();
     }, 5e3);
-    return () => clearInterval(g);
+    return () => clearInterval(d);
   }, [i]), !i)
     return null;
   const t = {
@@ -26,33 +28,34 @@ const H = C(/* @__PURE__ */ n("path", {
     pageSize: e.pageSize || 5,
     pagePosition: e.pagePosition || "top",
     style: e.style || {},
-    filter: e.filter || S.ALL,
+    filter: e.filter || C.ALL,
     infiniteScrollHeight: e.infiniteScrollHeight ? e.infiniteScrollHeight : window.innerHeight * 0.75,
     renderers: {
       notification: (a = e.renderers) == null ? void 0 : a.notification
     },
     header: {
-      title: (o = e.header) == null ? void 0 : o.title,
-      button1ClickHandler: ((c = e.header) == null ? void 0 : c.button1ClickHandler) ?? i.markAsArchived,
-      button2ClickHandler: ((l = e.header) == null ? void 0 : l.button2ClickHandler) ?? (() => r(!0))
+      title: (c = e.header) == null ? void 0 : c.title,
+      button1ClickHandler: ((s = e.header) == null ? void 0 : s.button1ClickHandler) ?? i.markAsArchived,
+      button2ClickHandler: ((l = e.header) == null ? void 0 : l.button2ClickHandler) ?? (() => o(!0))
     },
     imageShape: e.imageShape || "circle",
     newTab: e.newTab ?? !1
   };
-  return /* @__PURE__ */ s(
+  return /* @__PURE__ */ f(
     "div",
     {
       style: {
         padding: "0 12px",
         boxSizing: "border-box",
         borderRadius: 8,
-        background: "#fff",
-        border: "1px solid #dcdcdc",
+        background: r.paper,
+        border: `1px solid ${r.border}`,
+        color: r.text,
         ...e.style
       },
       children: [
         /* @__PURE__ */ n(
-          u,
+          x,
           {
             maxHeight: t.infiniteScrollHeight,
             pagination: t.pagination,
@@ -65,13 +68,18 @@ const H = C(/* @__PURE__ */ n("path", {
             newTab: t.newTab
           }
         ),
-        i.webPushOptInMessage && localStorage.getItem("hideWebPushOptInMessage") !== "true" && /* @__PURE__ */ s("div", { children: [
-          /* @__PURE__ */ n(I, { style: { margin: "10px 0" } }),
+        i.webPushOptInMessage && localStorage.getItem("hideWebPushOptInMessage") !== "true" && /* @__PURE__ */ f("div", { children: [
           /* @__PURE__ */ n(
-            b,
+            v,
+            {
+              style: { margin: "10px 0", borderColor: r.divider }
+            }
+          ),
+          /* @__PURE__ */ n(
+            H,
             {
               hideAfterInteraction: !0,
-              icon: /* @__PURE__ */ n(H, { type: "text", style: { marginLeft: "9px" } }),
+              icon: /* @__PURE__ */ n(M, { type: "text", style: { marginLeft: "9px" } }),
               descriptionStyle: {
                 flexDirection: "column",
                 // Stack the elements vertically
@@ -93,10 +101,10 @@ const H = C(/* @__PURE__ */ n("path", {
           )
         ] }),
         /* @__PURE__ */ n(
-          x,
+          S,
           {
-            open: f,
-            onClose: () => r(!1)
+            open: m,
+            onClose: () => o(!1)
           }
         )
       ]
@@ -104,5 +112,5 @@ const H = C(/* @__PURE__ */ n("path", {
   );
 };
 export {
-  O as NotificationFeed
+  R as NotificationFeed
 };

package/dist/components/Notifications/NotificationLauncher.js

@@ -1,26 +1,28 @@
-import { jsx as o, jsxs as a } from "react/jsx-runtime";
-import { useState as l, useContext as C } from "react";
-import { Inbox as S } from "./Inbox.js";
-import { UnreadBadge as y } from "./UnreadBadge.js";
-import { NotificationAPIContext as z } from "../Provider/context.js";
-import { NotificationPreferencesPopup as N } from "../Preferences/NotificationPreferencesPopup.js";
-import { W as T, L as k } from "../../assets/WebPushOptInMessage.js";
-import { N as v } from "../../assets/channelUtils.js";
-import { I as A } from "../../assets/IconButton.js";
-import { P as H } from "../../assets/Popover.js";
-import { D as L } from "../../assets/Divider.js";
-const j = (e) => {
-  var d, f, u, h, g, m, p, b;
-  const [I, c] = l(!1), [i, s] = l(!1), n = C(z), [P, O] = l(null);
-  if (!n)
+import { jsx as o, jsxs as l } from "react/jsx-runtime";
+import { useState as c, useContext as y } from "react";
+import { Inbox as z } from "./Inbox.js";
+import { UnreadBadge as T } from "./UnreadBadge.js";
+import { NotificationAPIContext as N } from "../Provider/context.js";
+import { NotificationPreferencesPopup as k } from "../Preferences/NotificationPreferencesPopup.js";
+import { getThemeColors as v } from "../../utils/theme.js";
+import { W as H, L as A } from "../../assets/WebPushOptInMessage.js";
+import { u as L } from "../../assets/ButtonBase.js";
+import { N as w } from "../../assets/channelUtils.js";
+import { I as W } from "../../assets/IconButton.js";
+import { P as B } from "../../assets/Popover.js";
+import { D as E } from "../../assets/Divider.js";
+const K = (e) => {
+  var f, u, h, p, g, m, b, I;
+  const [x, d] = c(!1), [r, s] = c(!1), i = y(N), [C, P] = c(null), O = L(), n = v(O);
+  if (!i)
     return null;
   const t = {
     buttonIcon: e.buttonIcon || /* @__PURE__ */ o(
-      v,
+      w,
       {
         style: {
           fontSize: e.buttonIconSize || 20,
-          color: e.iconColor || "#000000"
+          color: e.iconColor || n.icon
         }
       }
     ),
@@ -32,7 +34,7 @@ const j = (e) => {
     popupWidth: e.popupWidth || 400,
     popupHeight: e.popupHeight || 600,
     buttonIconSize: e.buttonIconSize || 20,
-    iconColor: e.iconColor || "#000000",
+    iconColor: e.iconColor || n.icon,
     pagination: e.pagination || "INFINITE_SCROLL",
     pageSize: e.pageSize || 10,
     pagePosition: e.pagePosition || "top",
@@ -44,24 +46,24 @@ const j = (e) => {
     count: e.count || "COUNT_UNOPENED_NOTIFICATIONS",
     filter: e.filter || "ALL",
     header: {
-      title: (d = e.header) == null ? void 0 : d.title,
-      button1ClickHandler: ((f = e.header) == null ? void 0 : f.button1ClickHandler) ?? n.markAsArchived,
-      button2ClickHandler: ((u = e.header) == null ? void 0 : u.button2ClickHandler) ?? (() => c(!0))
+      title: (f = e.header) == null ? void 0 : f.title,
+      button1ClickHandler: ((u = e.header) == null ? void 0 : u.button1ClickHandler) ?? i.markAsArchived,
+      button2ClickHandler: ((h = e.header) == null ? void 0 : h.button2ClickHandler) ?? (() => d(!0))
     },
     renderers: {
-      notification: (h = e.renderers) == null ? void 0 : h.notification
+      notification: (p = e.renderers) == null ? void 0 : p.notification
     },
     popoverPosition: {
       anchorOrigin: {
         vertical: ((m = (g = e.popoverPosition) == null ? void 0 : g.anchorOrigin) == null ? void 0 : m.vertical) ?? "top",
-        horizontal: ((b = (p = e.popoverPosition) == null ? void 0 : p.anchorOrigin) == null ? void 0 : b.horizontal) ?? "left"
+        horizontal: ((I = (b = e.popoverPosition) == null ? void 0 : b.anchorOrigin) == null ? void 0 : I.horizontal) ?? "left"
       }
     },
     newTab: e.newTab ?? !1
-  }, x = (r) => {
-    s(!i), O(r == null ? void 0 : r.currentTarget), i && n.markAsOpened();
+  }, S = (a) => {
+    s(!r), P(a == null ? void 0 : a.currentTarget), r && i.markAsOpened();
   };
-  return /* @__PURE__ */ a(
+  return /* @__PURE__ */ l(
     "div",
     {
       style: {
@@ -77,14 +79,14 @@ const j = (e) => {
             style: {
               display: "inline-block"
             },
-            children: /* @__PURE__ */ o(y, { ...e.unreadBadgeProps, count: t.count, children: /* @__PURE__ */ o(A, { style: t.buttonStyles, onClick: x, children: t.buttonIcon }) })
+            children: /* @__PURE__ */ o(T, { ...e.unreadBadgeProps, count: t.count, children: /* @__PURE__ */ o(W, { style: t.buttonStyles, onClick: S, children: t.buttonIcon }) })
           }
         ),
-        /* @__PURE__ */ a(
-          H,
+        /* @__PURE__ */ o(
+          B,
           {
-            open: i,
-            anchorEl: P,
+            open: r,
+            anchorEl: C,
             anchorReference: "anchorEl",
             anchorOrigin: {
               horizontal: "center",
@@ -98,45 +100,69 @@ const j = (e) => {
             slotProps: {
               paper: {
                 style: {
-                  width: t.popupWidth,
-                  padding: "0 16px",
-                  borderRadius: 8
+                  borderRadius: 8,
+                  backgroundColor: n.paper,
+                  color: n.text
                 }
               }
             },
-            children: [
-              /* @__PURE__ */ o(
-                S,
-                {
-                  maxHeight: 500,
-                  pagination: t.pagination,
-                  filter: t.filter,
-                  pageSize: t.pageSize,
-                  pagePosition: t.pagePosition,
-                  notificationRenderer: t.renderers.notification,
-                  header: t.header,
-                  newTab: t.newTab
-                }
-              ),
-              n.webPushOptInMessage && localStorage.getItem("hideWebPushOptInMessage") !== "true" && /* @__PURE__ */ a("div", { children: [
-                /* @__PURE__ */ o(L, { style: { margin: "10px 0" } }),
-                /* @__PURE__ */ o(
-                  T,
-                  {
-                    hideAfterInteraction: !0,
-                    icon: /* @__PURE__ */ o(k, { type: "text", style: { marginLeft: "9px" } }),
-                    alertContainerStyle: { maxWidth: "345px" }
-                  }
-                )
-              ] })
-            ]
+            children: /* @__PURE__ */ l(
+              "div",
+              {
+                style: {
+                  width: t.popupWidth,
+                  padding: "0 16px",
+                  zIndex: t.popupZIndex,
+                  height: t.popupHeight,
+                  backgroundColor: n.paper,
+                  color: n.text
+                },
+                children: [
+                  /* @__PURE__ */ o(
+                    z,
+                    {
+                      maxHeight: t.popupHeight - 73,
+                      pagination: t.pagination,
+                      filter: t.filter,
+                      pageSize: t.pageSize,
+                      pagePosition: t.pagePosition,
+                      notificationRenderer: t.renderers.notification,
+                      header: t.header,
+                      newTab: t.newTab
+                    }
+                  ),
+                  i.webPushOptInMessage && localStorage.getItem("hideWebPushOptInMessage") !== "true" && /* @__PURE__ */ l("div", { children: [
+                    /* @__PURE__ */ o(
+                      E,
+                      {
+                        style: { margin: "10px 0", borderColor: n.divider }
+                      }
+                    ),
+                    /* @__PURE__ */ o(
+                      H,
+                      {
+                        hideAfterInteraction: !0,
+                        icon: /* @__PURE__ */ o(
+                          A,
+                          {
+                            type: "text",
+                            style: { marginLeft: "9px" }
+                          }
+                        ),
+                        alertContainerStyle: { maxWidth: "345px" }
+                      }
+                    )
+                  ] })
+                ]
+              }
+            )
           }
         ),
         /* @__PURE__ */ o(
-          N,
+          k,
           {
-            open: I,
-            onClose: () => c(!1)
+            open: x,
+            onClose: () => d(!1)
           }
         )
       ]
@@ -144,5 +170,5 @@ const j = (e) => {
   );
 };
 export {
-  j as NotificationLauncher
+  K as NotificationLauncher
 };