@notificationapi/react 1.7.0 → 1.9.0

package/dist/components/Preferences/NotificationPreferencesInline.js

@@ -1,42 +1,60 @@
-import { jsxs as r, jsx as t } from "react/jsx-runtime";
-import { useContext as i } from "react";
-import { Preferences as n } from "./Preferences.js";
-import { NotificationAPIContext as o } from "../Provider/context.js";
-import { W as s } from "../../assets/WebPushOptInMessage.js";
-import { D as f } from "../../assets/Divider.js";
-function u(l) {
-  const e = i(o);
-  return e ? /* @__PURE__ */ r("div", { style: { borderRadius: 8, border: "1px solid #dcdcdc" }, children: [
-    /* @__PURE__ */ t(n, {}),
-    " ",
-    e.webPushOptInMessage && /* @__PURE__ */ r("div", { children: [
-      /* @__PURE__ */ t(f, { style: { margin: "10px 0" } }),
-      /* @__PURE__ */ t(
-        s,
-        {
-          hideAfterInteraction: !1,
-          descriptionStyle: {
-            flexDirection: "column",
-            // Stack the elements vertically
-            justifyContent: "flex-start",
-            // Align items to the left
-            fontSize: "14px",
-            alignItems: "flex-start"
-            // Align items to the left
-          },
-          buttonContainerStyle: {
-            justifyContent: "flex-start",
-            // Align buttons to the left
-            alignItems: "flex-start",
-            // Align buttons to the left
-            marginTop: "10px"
-            // Add some space between message and buttons
-          }
-        }
-      )
-    ] })
-  ] }) : null;
+import { jsxs as o, jsx as t } from "react/jsx-runtime";
+import { useContext as n } from "react";
+import { Preferences as s } from "./Preferences.js";
+import { NotificationAPIContext as m } from "../Provider/context.js";
+import { W as f } from "../../assets/WebPushOptInMessage.js";
+import { getThemeColors as l } from "../../utils/theme.js";
+import { u as a } from "../../assets/ButtonBase.js";
+import { D as p } from "../../assets/Divider.js";
+function y(c) {
+  const r = n(m), i = a(), e = l(i);
+  return r ? /* @__PURE__ */ o(
+    "div",
+    {
+      style: {
+        borderRadius: 8,
+        border: `1px solid ${e.border}`,
+        backgroundColor: e.paper,
+        color: e.text
+      },
+      children: [
+        /* @__PURE__ */ t(s, {}),
+        " ",
+        r.webPushOptInMessage && /* @__PURE__ */ o("div", { children: [
+          /* @__PURE__ */ t(
+            p,
+            {
+              style: { margin: "10px 0", borderColor: e.divider }
+            }
+          ),
+          /* @__PURE__ */ t(
+            f,
+            {
+              hideAfterInteraction: !1,
+              descriptionStyle: {
+                flexDirection: "column",
+                // Stack the elements vertically
+                justifyContent: "flex-start",
+                // Align items to the left
+                fontSize: "14px",
+                alignItems: "flex-start"
+                // Align items to the left
+              },
+              buttonContainerStyle: {
+                justifyContent: "flex-start",
+                // Align buttons to the left
+                alignItems: "flex-start",
+                // Align buttons to the left
+                marginTop: "10px"
+                // Add some space between message and buttons
+              }
+            }
+          )
+        ] })
+      ]
+    }
+  ) : null;
 }
 export {
-  u as NotificationPreferencesInline
+  y as NotificationPreferencesInline
 };

package/dist/components/Preferences/NotificationPreferencesPopup.js

@@ -1,28 +1,30 @@
 import { jsx as i, jsxs as $ } from "react/jsx-runtime";
 import * as c from "react";
-import { useContext as oo } from "react";
-import { Preferences as eo } from "./Preferences.js";
-import { NotificationAPIContext as ro } from "../Provider/context.js";
-import { W as to } from "../../assets/WebPushOptInMessage.js";
-import { g as k, e as T, s as f, h as u, m as j, u as S, c as g, P as o, b as P } from "../../assets/DefaultPropsProvider.js";
-import { u as ao } from "../../assets/useTheme.js";
-import { B as io, M as so, F as no } from "../../assets/Modal.js";
-import { P as E } from "../../assets/Paper.js";
-import { u as lo } from "../../assets/dividerClasses.js";
-import { T as po } from "../../assets/Typography.js";
-function co(r) {
-  return T("MuiDialog", r);
+import { useContext as eo } from "react";
+import { Preferences as ro } from "./Preferences.js";
+import { NotificationAPIContext as to } from "../Provider/context.js";
+import { W as ao } from "../../assets/WebPushOptInMessage.js";
+import { getThemeColors as so } from "../../utils/theme.js";
+import { u as j } from "../../assets/ButtonBase.js";
+import { g as k, e as u, P as o } from "../../assets/createTheme.js";
+import { g as T, s as f, m as E, u as S, c as g, a as P } from "../../assets/DefaultPropsProvider.js";
+import { B as io, M as no, F as lo } from "../../assets/Modal.js";
+import { P as F } from "../../assets/Paper.js";
+import { a as po } from "../../assets/useControlled.js";
+import { T as co } from "../../assets/Typography.js";
+function uo(r) {
+  return k("MuiDialog", r);
 }
-const D = k("MuiDialog", ["root", "scrollPaper", "scrollBody", "container", "paper", "paperScrollPaper", "paperScrollBody", "paperWidthFalse", "paperWidthXs", "paperWidthSm", "paperWidthMd", "paperWidthLg", "paperWidthXl", "paperFullWidth", "paperFullScreen"]), w = /* @__PURE__ */ c.createContext({});
+const D = T("MuiDialog", ["root", "scrollPaper", "scrollBody", "container", "paper", "paperScrollPaper", "paperScrollBody", "paperWidthFalse", "paperWidthXs", "paperWidthSm", "paperWidthMd", "paperWidthLg", "paperWidthXl", "paperFullWidth", "paperFullScreen"]), w = /* @__PURE__ */ c.createContext({});
 process.env.NODE_ENV !== "production" && (w.displayName = "DialogContext");
-const uo = f(io, {
+const fo = f(io, {
   name: "MuiDialog",
   slot: "Backdrop",
   overrides: (r, e) => e.backdrop
 })({
   // Improve scrollable dialog support.
   zIndex: -1
-}), fo = (r) => {
+}), mo = (r) => {
   const {
     classes: e,
     scroll: t,
@@ -34,8 +36,8 @@ const uo = f(io, {
     container: ["container", `scroll${u(t)}`],
     paper: ["paper", `paperScroll${u(t)}`, `paperWidth${u(String(a))}`, s && "paperFullWidth", n && "paperFullScreen"]
   };
-  return P(l, co, e);
-}, mo = f(so, {
+  return P(l, uo, e);
+}, go = f(no, {
   name: "MuiDialog",
   slot: "Root",
   overridesResolver: (r, e) => e.root
@@ -44,7 +46,7 @@ const uo = f(io, {
     // Use !important to override the Modal inline-style.
     position: "absolute !important"
   }
-}), go = f("div", {
+}), bo = f("div", {
   name: "MuiDialog",
   slot: "Container",
   overridesResolver: (r, e) => {
@@ -86,7 +88,7 @@ const uo = f(io, {
       }
     }
   }]
-}), bo = f(E, {
+}), xo = f(F, {
   name: "MuiDialog",
   slot: "Paper",
   overridesResolver: (r, e) => {
@@ -95,7 +97,7 @@ const uo = f(io, {
     } = r;
     return [e.paper, e[`scrollPaper${u(t.scroll)}`], e[`paperWidth${u(String(t.maxWidth))}`], t.fullWidth && e.paperFullWidth, t.fullScreen && e.paperFullScreen];
   }
-})(j(({
+})(E(({
   theme: r
 }) => ({
   margin: 32,
@@ -178,11 +180,11 @@ const uo = f(io, {
       }
     }
   }]
-}))), F = /* @__PURE__ */ c.forwardRef(function(e, t) {
+}))), I = /* @__PURE__ */ c.forwardRef(function(e, t) {
   const a = S({
     props: e,
     name: "MuiDialog"
-  }), s = ao(), n = {
+  }), s = j(), n = {
     enter: s.transitions.duration.enteringScreen,
     exit: s.transitions.duration.leavingScreen
   }, {
@@ -190,88 +192,88 @@ const uo = f(io, {
     "aria-labelledby": p,
     "aria-modal": m = !0,
     BackdropComponent: x,
-    BackdropProps: A,
-    children: V,
-    className: Y,
+    BackdropProps: V,
+    children: Y,
+    className: _,
     disableEscapeKeyDown: W = !1,
-    fullScreen: _ = !1,
-    fullWidth: z = !1,
-    maxWidth: K = "sm",
+    fullScreen: z = !1,
+    fullWidth: K = !1,
+    maxWidth: L = "sm",
     onBackdropClick: M,
     onClick: N,
-    onClose: y,
+    onClose: h,
     open: O,
-    PaperComponent: L = E,
+    PaperComponent: X = F,
     PaperProps: R = {},
-    scroll: X = "paper",
-    TransitionComponent: H = no,
+    scroll: H = "paper",
+    TransitionComponent: q = lo,
     transitionDuration: B = n,
-    TransitionProps: q,
-    ...G
+    TransitionProps: G,
+    ...J
   } = a, b = {
     ...a,
     disableEscapeKeyDown: W,
-    fullScreen: _,
-    fullWidth: z,
-    maxWidth: K,
-    scroll: X
-  }, h = fo(b), v = c.useRef(), J = (d) => {
+    fullScreen: z,
+    fullWidth: K,
+    maxWidth: L,
+    scroll: H
+  }, y = mo(b), v = c.useRef(), Q = (d) => {
     v.current = d.target === d.currentTarget;
-  }, Q = (d) => {
-    N && N(d), v.current && (v.current = null, M && M(d), y && y(d, "backdropClick"));
-  }, C = lo(p), Z = c.useMemo(() => ({
+  }, Z = (d) => {
+    N && N(d), v.current && (v.current = null, M && M(d), h && h(d, "backdropClick"));
+  }, C = po(p), oo = c.useMemo(() => ({
     titleId: C
   }), [C]);
-  return /* @__PURE__ */ i(mo, {
-    className: g(h.root, Y),
+  return /* @__PURE__ */ i(go, {
+    className: g(y.root, _),
     closeAfterTransition: !0,
     components: {
-      Backdrop: uo
+      Backdrop: fo
     },
     componentsProps: {
       backdrop: {
         transitionDuration: B,
         as: x,
-        ...A
+        ...V
       }
     },
     disableEscapeKeyDown: W,
-    onClose: y,
+    onClose: h,
     open: O,
     ref: t,
-    onClick: Q,
+    onClick: Z,
     ownerState: b,
-    ...G,
-    children: /* @__PURE__ */ i(H, {
+    ...J,
+    children: /* @__PURE__ */ i(q, {
       appear: !0,
       in: O,
       timeout: B,
       role: "presentation",
-      ...q,
-      children: /* @__PURE__ */ i(go, {
-        className: g(h.container),
-        onMouseDown: J,
+      ...G,
+      children: /* @__PURE__ */ i(bo, {
+        className: g(y.container),
+        onMouseDown: Q,
         ownerState: b,
-        children: /* @__PURE__ */ i(bo, {
-          as: L,
+        children: /* @__PURE__ */ i(xo, {
+          as: X,
           elevation: 24,
           role: "dialog",
           "aria-describedby": l,
           "aria-labelledby": C,
           "aria-modal": m,
           ...R,
-          className: g(h.paper, R.className),
+          className: g(y.paper, R.className),
           ownerState: b,
           children: /* @__PURE__ */ i(w.Provider, {
-            value: Z,
-            children: V
+            value: oo,
+            children: Y
           })
         })
       })
     })
   });
 });
-process.env.NODE_ENV !== "production" && (F.propTypes = {
+process.env.NODE_ENV !== "production" && (I.propTypes = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │
   // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
@@ -409,22 +411,22 @@ process.env.NODE_ENV !== "production" && (F.propTypes = {
    */
   TransitionProps: o.object
 });
-function xo(r) {
-  return T("MuiDialogContent", r);
+function ho(r) {
+  return k("MuiDialogContent", r);
 }
-k("MuiDialogContent", ["root", "dividers"]);
+T("MuiDialogContent", ["root", "dividers"]);
 function yo(r) {
-  return T("MuiDialogTitle", r);
+  return k("MuiDialogTitle", r);
 }
-const ho = k("MuiDialogTitle", ["root"]), vo = (r) => {
+const vo = T("MuiDialogTitle", ["root"]), Co = (r) => {
   const {
     classes: e,
     dividers: t
   } = r;
   return P({
     root: ["root", t && "dividers"]
-  }, xo, e);
-}, Co = f("div", {
+  }, ho, e);
+}, Do = f("div", {
   name: "MuiDialogContent",
   slot: "Root",
   overridesResolver: (r, e) => {
@@ -433,7 +435,7 @@ const ho = k("MuiDialogTitle", ["root"]), vo = (r) => {
     } = r;
     return [e.root, t.dividers && e.dividers];
   }
-})(j(({
+})(E(({
   theme: r
 }) => ({
   flex: "1 1 auto",
@@ -455,12 +457,12 @@ const ho = k("MuiDialogTitle", ["root"]), vo = (r) => {
       ownerState: e
     }) => !e.dividers,
     style: {
-      [`.${ho.root} + &`]: {
+      [`.${vo.root} + &`]: {
         paddingTop: 0
       }
     }
   }]
-}))), I = /* @__PURE__ */ c.forwardRef(function(e, t) {
+}))), U = /* @__PURE__ */ c.forwardRef(function(e, t) {
   const a = S({
     props: e,
     name: "MuiDialogContent"
@@ -471,15 +473,15 @@ const ho = k("MuiDialogTitle", ["root"]), vo = (r) => {
   } = a, p = {
     ...a,
     dividers: n
-  }, m = vo(p);
-  return /* @__PURE__ */ i(Co, {
+  }, m = Co(p);
+  return /* @__PURE__ */ i(Do, {
     className: g(m.root, s),
     ownerState: p,
     ref: t,
     ...l
   });
 });
-process.env.NODE_ENV !== "production" && (I.propTypes = {
+process.env.NODE_ENV !== "production" && (U.propTypes = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │
   // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
@@ -506,21 +508,21 @@ process.env.NODE_ENV !== "production" && (I.propTypes = {
    */
   sx: o.oneOfType([o.arrayOf(o.oneOfType([o.func, o.object, o.bool])), o.func, o.object])
 });
-const Do = (r) => {
+const ko = (r) => {
   const {
     classes: e
   } = r;
   return P({
     root: ["root"]
   }, yo, e);
-}, ko = f(po, {
+}, To = f(co, {
   name: "MuiDialogTitle",
   slot: "Root",
   overridesResolver: (r, e) => e.root
 })({
   padding: "16px 24px",
   flex: "0 0 auto"
-}), U = /* @__PURE__ */ c.forwardRef(function(e, t) {
+}), A = /* @__PURE__ */ c.forwardRef(function(e, t) {
   const a = S({
     props: e,
     name: "MuiDialogTitle"
@@ -528,10 +530,10 @@ const Do = (r) => {
     className: s,
     id: n,
     ...l
-  } = a, p = a, m = Do(p), {
+  } = a, p = a, m = ko(p), {
     titleId: x = n
   } = c.useContext(w);
-  return /* @__PURE__ */ i(ko, {
+  return /* @__PURE__ */ i(To, {
     component: "h2",
     className: g(m.root, s),
     ownerState: p,
@@ -541,7 +543,7 @@ const Do = (r) => {
     ...l
   });
 });
-process.env.NODE_ENV !== "production" && (U.propTypes = {
+process.env.NODE_ENV !== "production" && (A.propTypes = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │
   // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
@@ -567,44 +569,54 @@ process.env.NODE_ENV !== "production" && (U.propTypes = {
    */
   sx: o.oneOfType([o.arrayOf(o.oneOfType([o.func, o.object, o.bool])), o.func, o.object])
 });
-function jo(r) {
-  const e = oo(ro);
+function Io(r) {
+  const e = eo(to), t = j(), a = so(t);
   if (!e)
     return null;
-  const t = {
+  const s = {
     open: r.open === void 0 ? !0 : r.open,
     onClose: r.onClose || (() => {
     }),
     collapse: r.collapse === void 0 ? !1 : r.collapse
   };
   return /* @__PURE__ */ $(
-    F,
+    I,
     {
-      open: t.open,
-      onClose: t.onClose,
+      open: s.open,
+      onClose: s.onClose,
       maxWidth: "sm",
       fullWidth: !0,
       PaperProps: {
-        style: { borderRadius: 8 }
+        style: {
+          borderRadius: 8,
+          backgroundColor: a.paper,
+          color: a.text
+        }
       },
-      "aria-hidden": !t.open,
+      "aria-hidden": !s.open,
       scroll: "body",
       children: [
-        /* @__PURE__ */ i(U, { children: "Notification Preferences" }),
-        /* @__PURE__ */ $(I, { children: [
-          /* @__PURE__ */ i(eo, {}),
-          e.webPushOptInMessage && /* @__PURE__ */ i("div", { children: /* @__PURE__ */ i(
-            to,
-            {
-              hideAfterInteraction: !1,
-              descriptionStyle: { fontSize: 12 }
-            }
-          ) })
-        ] })
+        /* @__PURE__ */ i(A, { sx: { color: a.text }, children: "Notification Preferences" }),
+        /* @__PURE__ */ $(
+          U,
+          {
+            sx: { backgroundColor: a.paper, color: a.text },
+            children: [
+              /* @__PURE__ */ i(ro, {}),
+              e.webPushOptInMessage && /* @__PURE__ */ i("div", { children: /* @__PURE__ */ i(
+                ao,
+                {
+                  hideAfterInteraction: !1,
+                  descriptionStyle: { fontSize: 12 }
+                }
+              ) })
+            ]
+          }
+        )
       ]
     }
   );
 }
 export {
-  jo as NotificationPreferencesPopup
+  Io as NotificationPreferencesPopup
 };