@notificationapi/react 1.6.2 → 1.8.0

package/dist/components/Preferences/Preferences.js

@@ -1,36 +1,37 @@
-import { jsx as i, jsxs as G, Fragment as he } from "react/jsx-runtime";
-import * as p from "react";
-import { useContext as ye } from "react";
-import { NotificationAPIContext as be } from "../Provider/context.js";
+import { jsx as s, jsxs as G, Fragment as he } from "react/jsx-runtime";
+import * as u from "react";
+import { useContext as xe } from "react";
+import { NotificationAPIContext as ye } from "../Provider/context.js";
 import { PreferenceInput as ie } from "./PreferenceInput.js";
-import { r as xe } from "../../assets/index.js";
-import { g as q, e as _, s as T, m as I, u as J, c as U, P as e, b as K, L as ve } from "../../assets/DefaultPropsProvider.js";
-import { u as Ce, e as Te, a as se, c as we, B as Ee } from "../../assets/ButtonBase.js";
-import { P as Re } from "../../assets/Paper.js";
-import { a as Ae } from "../../assets/dividerClasses.js";
-import { u as Se } from "../../assets/useTheme.js";
-import { T as Ne, g as ae } from "../../assets/utils.js";
-import { u as Ie } from "../../assets/resolveComponentProps.js";
-import { c as De } from "../../assets/createSvgIcon.js";
+import { getThemeColors as ve } from "../../utils/theme.js";
+import { u as le, a as Ce, e as Te, b as se, c as we, B as Ee } from "../../assets/ButtonBase.js";
+import { r as Re } from "../../assets/index2.js";
+import { g as q, P as e, p as Ae } from "../../assets/createTheme.js";
+import { g as _, s as E, m as I, u as J, c as U, a as K } from "../../assets/DefaultPropsProvider.js";
+import { P as Se } from "../../assets/Paper.js";
+import { a as Ne } from "../../assets/dividerClasses.js";
+import { T as Ie, g as ae } from "../../assets/utils.js";
+import { u as De } from "../../assets/resolveComponentProps.js";
+import { c as ke } from "../../assets/createSvgIcon.js";
 import { T as ce } from "../../assets/Typography.js";
 import { B as Me } from "../../assets/Box.js";
 function Pe(o) {
-  return _("MuiCollapse", o);
+  return q("MuiCollapse", o);
 }
-q("MuiCollapse", ["root", "horizontal", "vertical", "entered", "hidden", "wrapper", "wrapperInner"]);
+_("MuiCollapse", ["root", "horizontal", "vertical", "entered", "hidden", "wrapper", "wrapperInner"]);
 const Oe = (o) => {
   const {
     orientation: t,
     classes: n
-  } = o, s = {
+  } = o, c = {
     root: ["root", `${t}`],
     entered: ["entered"],
     hidden: ["hidden"],
     wrapper: ["wrapper", `${t}`],
     wrapperInner: ["wrapperInner", `${t}`]
   };
-  return K(s, Pe, n);
-}, $e = T("div", {
+  return K(c, Pe, n);
+}, $e = E("div", {
   name: "MuiCollapse",
   slot: "Root",
   overridesResolver: (o, t) => {
@@ -78,7 +79,7 @@ const Oe = (o) => {
       visibility: "hidden"
     }
   }]
-}))), ze = T("div", {
+}))), ze = E("div", {
   name: "MuiCollapse",
   slot: "Wrapper",
   overridesResolver: (o, t) => t.wrapper
@@ -95,7 +96,7 @@ const Oe = (o) => {
       height: "100%"
     }
   }]
-}), je = T("div", {
+}), je = E("div", {
   name: "MuiCollapse",
   slot: "WrapperInner",
   overridesResolver: (o, t) => t.wrapperInner
@@ -110,129 +111,129 @@ const Oe = (o) => {
       height: "100%"
     }
   }]
-}), L = /* @__PURE__ */ p.forwardRef(function(t, n) {
-  const s = J({
+}), L = /* @__PURE__ */ u.forwardRef(function(t, n) {
+  const c = J({
     props: t,
     name: "MuiCollapse"
   }), {
-    addEndListener: c,
-    children: l,
-    className: u,
+    addEndListener: i,
+    children: p,
+    className: l,
     collapsedSize: d = "0px",
     component: g,
-    easing: a,
+    easing: C,
     in: m,
-    onEnter: E,
-    onEntered: R,
+    onEnter: a,
+    onEntered: x,
     onEntering: A,
     onExit: D,
-    onExited: w,
-    onExiting: v,
+    onExited: R,
+    onExiting: T,
     orientation: f = "vertical",
-    style: M,
-    timeout: b = ve.standard,
+    style: k,
+    timeout: y = Ae.standard,
     // eslint-disable-next-line react/prop-types
-    TransitionComponent: k = Ne,
+    TransitionComponent: W = Ie,
     ...Q
-  } = s, P = {
-    ...s,
+  } = c, M = {
+    ...c,
     orientation: f,
     collapsedSize: d
-  }, x = Oe(P), O = Se(), X = Ce(), C = p.useRef(null), $ = p.useRef(), z = typeof d == "number" ? `${d}px` : d, S = f === "horizontal", N = S ? "width" : "height", j = p.useRef(null), Y = Ie(n, j), V = (r) => (h) => {
+  }, v = Oe(M), P = le(), X = Ce(), w = u.useRef(null), O = u.useRef(), $ = typeof d == "number" ? `${d}px` : d, S = f === "horizontal", N = S ? "width" : "height", z = u.useRef(null), Y = De(n, z), j = (r) => (b) => {
     if (r) {
-      const y = j.current;
-      h === void 0 ? r(y) : r(y, h);
+      const h = z.current;
+      b === void 0 ? r(h) : r(h, b);
     }
-  }, Z = () => C.current ? C.current[S ? "clientWidth" : "clientHeight"] : 0, le = V((r, h) => {
-    C.current && S && (C.current.style.position = "absolute"), r.style[N] = z, E && E(r, h);
-  }), pe = V((r, h) => {
-    const y = Z();
-    C.current && S && (C.current.style.position = "");
+  }, Z = () => w.current ? w.current[S ? "clientWidth" : "clientHeight"] : 0, pe = j((r, b) => {
+    w.current && S && (w.current.style.position = "absolute"), r.style[N] = $, a && a(r, b);
+  }), ue = j((r, b) => {
+    const h = Z();
+    w.current && S && (w.current.style.position = "");
     const {
       duration: B,
       easing: H
     } = ae({
-      style: M,
-      timeout: b,
-      easing: a
+      style: k,
+      timeout: y,
+      easing: C
     }, {
       mode: "enter"
     });
-    if (b === "auto") {
-      const re = O.transitions.getAutoHeightDuration(y);
-      r.style.transitionDuration = `${re}ms`, $.current = re;
+    if (y === "auto") {
+      const re = P.transitions.getAutoHeightDuration(h);
+      r.style.transitionDuration = `${re}ms`, O.current = re;
     } else
       r.style.transitionDuration = typeof B == "string" ? B : `${B}ms`;
-    r.style[N] = `${y}px`, r.style.transitionTimingFunction = H, A && A(r, h);
-  }), ue = V((r, h) => {
-    r.style[N] = "auto", R && R(r, h);
-  }), fe = V((r) => {
+    r.style[N] = `${h}px`, r.style.transitionTimingFunction = H, A && A(r, b);
+  }), fe = j((r, b) => {
+    r.style[N] = "auto", x && x(r, b);
+  }), me = j((r) => {
     r.style[N] = `${Z()}px`, D && D(r);
-  }), me = V(w), ge = V((r) => {
-    const h = Z(), {
-      duration: y,
+  }), ge = j(R), be = j((r) => {
+    const b = Z(), {
+      duration: h,
       easing: B
     } = ae({
-      style: M,
-      timeout: b,
-      easing: a
+      style: k,
+      timeout: y,
+      easing: C
     }, {
       mode: "exit"
     });
-    if (b === "auto") {
-      const H = O.transitions.getAutoHeightDuration(h);
-      r.style.transitionDuration = `${H}ms`, $.current = H;
+    if (y === "auto") {
+      const H = P.transitions.getAutoHeightDuration(b);
+      r.style.transitionDuration = `${H}ms`, O.current = H;
     } else
-      r.style.transitionDuration = typeof y == "string" ? y : `${y}ms`;
-    r.style[N] = z, r.style.transitionTimingFunction = B, v && v(r);
+      r.style.transitionDuration = typeof h == "string" ? h : `${h}ms`;
+    r.style[N] = $, r.style.transitionTimingFunction = B, T && T(r);
   });
-  return /* @__PURE__ */ i(k, {
+  return /* @__PURE__ */ s(W, {
     in: m,
-    onEnter: le,
-    onEntered: ue,
-    onEntering: pe,
-    onExit: fe,
-    onExited: me,
-    onExiting: ge,
+    onEnter: pe,
+    onEntered: fe,
+    onEntering: ue,
+    onExit: me,
+    onExited: ge,
+    onExiting: be,
     addEndListener: (r) => {
-      b === "auto" && X.start($.current || 0, r), c && c(j.current, r);
+      y === "auto" && X.start(O.current || 0, r), i && i(z.current, r);
     },
-    nodeRef: j,
-    timeout: b === "auto" ? null : b,
+    nodeRef: z,
+    timeout: y === "auto" ? null : y,
     ...Q,
     children: (r, {
-      ownerState: h,
-      ...y
-    }) => /* @__PURE__ */ i($e, {
+      ownerState: b,
+      ...h
+    }) => /* @__PURE__ */ s($e, {
       as: g,
-      className: U(x.root, u, {
-        entered: x.entered,
-        exited: !m && z === "0px" && x.hidden
+      className: U(v.root, l, {
+        entered: v.entered,
+        exited: !m && $ === "0px" && v.hidden
       }[r]),
       style: {
-        [S ? "minWidth" : "minHeight"]: z,
-        ...M
+        [S ? "minWidth" : "minHeight"]: $,
+        ...k
       },
       ref: Y,
       ownerState: {
-        ...P,
+        ...M,
         state: r
       },
-      ...y,
-      children: /* @__PURE__ */ i(ze, {
+      ...h,
+      children: /* @__PURE__ */ s(ze, {
         ownerState: {
-          ...P,
+          ...M,
           state: r
         },
-        className: x.wrapper,
-        ref: C,
-        children: /* @__PURE__ */ i(je, {
+        className: v.wrapper,
+        ref: w,
+        children: /* @__PURE__ */ s(je, {
           ownerState: {
-            ...P,
+            ...M,
             state: r
           },
-          className: x.wrapperInner,
-          children: l
+          className: v.wrapperInner,
+          children: p
         })
       })
     })
@@ -334,25 +335,25 @@ process.env.NODE_ENV !== "production" && (L.propTypes = {
   })])
 });
 L && (L.muiSupportAuto = !0);
-const ne = /* @__PURE__ */ p.createContext({});
+const ne = /* @__PURE__ */ u.createContext({});
 process.env.NODE_ENV !== "production" && (ne.displayName = "AccordionContext");
 function Ve(o) {
-  return _("MuiAccordion", o);
+  return q("MuiAccordion", o);
 }
-const F = q("MuiAccordion", ["root", "heading", "rounded", "expanded", "disabled", "gutters", "region"]), We = (o) => {
+const F = _("MuiAccordion", ["root", "heading", "rounded", "expanded", "disabled", "gutters", "region"]), We = (o) => {
   const {
     classes: t,
     square: n,
-    expanded: s,
-    disabled: c,
-    disableGutters: l
+    expanded: c,
+    disabled: i,
+    disableGutters: p
   } = o;
   return K({
-    root: ["root", !n && "rounded", s && "expanded", c && "disabled", !l && "gutters"],
+    root: ["root", !n && "rounded", c && "expanded", i && "disabled", !p && "gutters"],
     heading: ["heading"],
     region: ["region"]
   }, Ve, t);
-}, ke = T(Re, {
+}, Be = E(Se, {
   name: "MuiAccordion",
   slot: "Root",
   overridesResolver: (o, t) => {
@@ -439,88 +440,88 @@ const F = q("MuiAccordion", ["root", "heading", "rounded", "expanded", "disabled
       }
     }
   }]
-}))), Be = T("h3", {
+}))), Ge = E("h3", {
   name: "MuiAccordion",
   slot: "Heading",
   overridesResolver: (o, t) => t.heading
 })({
   all: "unset"
-}), ee = /* @__PURE__ */ p.forwardRef(function(t, n) {
-  const s = J({
+}), ee = /* @__PURE__ */ u.forwardRef(function(t, n) {
+  const c = J({
     props: t,
     name: "MuiAccordion"
   }), {
-    children: c,
-    className: l,
-    defaultExpanded: u = !1,
+    children: i,
+    className: p,
+    defaultExpanded: l = !1,
     disabled: d = !1,
     disableGutters: g = !1,
-    expanded: a,
+    expanded: C,
     onChange: m,
-    square: E = !1,
-    slots: R = {},
+    square: a = !1,
+    slots: x = {},
     slotProps: A = {},
     TransitionComponent: D,
-    TransitionProps: w,
-    ...v
-  } = s, [f, M] = Ae({
-    controlled: a,
-    default: u,
+    TransitionProps: R,
+    ...T
+  } = c, [f, k] = Ne({
+    controlled: C,
+    default: l,
     name: "Accordion",
     state: "expanded"
-  }), b = p.useCallback((Y) => {
-    M(!f), m && m(Y, !f);
-  }, [f, m, M]), [k, ...Q] = p.Children.toArray(c), P = p.useMemo(() => ({
+  }), y = u.useCallback((Y) => {
+    k(!f), m && m(Y, !f);
+  }, [f, m, k]), [W, ...Q] = u.Children.toArray(i), M = u.useMemo(() => ({
     expanded: f,
     disabled: d,
     disableGutters: g,
-    toggle: b
-  }), [f, d, g, b]), x = {
-    ...s,
-    square: E,
+    toggle: y
+  }), [f, d, g, y]), v = {
+    ...c,
+    square: a,
     disabled: d,
     disableGutters: g,
     expanded: f
-  }, O = We(x), X = {
+  }, P = We(v), X = {
     transition: D,
-    ...R
-  }, C = {
-    transition: w,
+    ...x
+  }, w = {
+    transition: R,
     ...A
-  }, $ = {
+  }, O = {
     slots: X,
-    slotProps: C
-  }, [z, S] = se("heading", {
-    elementType: Be,
-    externalForwardedProps: $,
-    className: O.heading,
-    ownerState: x
-  }), [N, j] = se("transition", {
+    slotProps: w
+  }, [$, S] = se("heading", {
+    elementType: Ge,
+    externalForwardedProps: O,
+    className: P.heading,
+    ownerState: v
+  }), [N, z] = se("transition", {
     elementType: L,
-    externalForwardedProps: $,
-    ownerState: x
+    externalForwardedProps: O,
+    ownerState: v
   });
-  return /* @__PURE__ */ G(ke, {
-    className: U(O.root, l),
+  return /* @__PURE__ */ G(Be, {
+    className: U(P.root, p),
     ref: n,
-    ownerState: x,
-    square: E,
-    ...v,
-    children: [/* @__PURE__ */ i(z, {
+    ownerState: v,
+    square: a,
+    ...T,
+    children: [/* @__PURE__ */ s($, {
       ...S,
-      children: /* @__PURE__ */ i(ne.Provider, {
-        value: P,
-        children: k
+      children: /* @__PURE__ */ s(ne.Provider, {
+        value: M,
+        children: W
       })
-    }), /* @__PURE__ */ i(N, {
+    }), /* @__PURE__ */ s(N, {
       in: f,
       timeout: "auto",
-      ...j,
-      children: /* @__PURE__ */ i("div", {
-        "aria-labelledby": k.props.id,
-        id: k.props["aria-controls"],
+      ...z,
+      children: /* @__PURE__ */ s("div", {
+        "aria-labelledby": W.props.id,
+        id: W.props["aria-controls"],
         role: "region",
-        className: O.region,
+        className: P.region,
         children: Q
       })
     })]
@@ -535,8 +536,8 @@ process.env.NODE_ENV !== "production" && (ee.propTypes = {
    * The content of the component.
    */
   children: we(e.node.isRequired, (o) => {
-    const t = p.Children.toArray(o.children)[0];
-    return xe.isFragment(t) ? new Error("MUI: The Accordion doesn't accept a Fragment as a child. Consider providing an array instead.") : /* @__PURE__ */ p.isValidElement(t) ? null : new Error("MUI: Expected the first child of Accordion to be a valid element.");
+    const t = u.Children.toArray(o.children)[0];
+    return Re.isFragment(t) ? new Error("MUI: The Accordion doesn't accept a Fragment as a child. Consider providing an array instead.") : /* @__PURE__ */ u.isValidElement(t) ? null : new Error("MUI: Expected the first child of Accordion to be a valid element.");
   }),
   /**
    * Override or extend the styles applied to the component.
@@ -611,18 +612,18 @@ process.env.NODE_ENV !== "production" && (ee.propTypes = {
    */
   TransitionProps: e.object
 });
-function Ge(o) {
-  return _("MuiAccordionDetails", o);
+function Ue(o) {
+  return q("MuiAccordionDetails", o);
 }
-q("MuiAccordionDetails", ["root"]);
-const Ue = (o) => {
+_("MuiAccordionDetails", ["root"]);
+const He = (o) => {
   const {
     classes: t
   } = o;
   return K({
     root: ["root"]
-  }, Ge, t);
-}, He = T("div", {
+  }, Ue, t);
+}, Fe = E("div", {
   name: "MuiAccordionDetails",
   slot: "Root",
   overridesResolver: (o, t) => t.root
@@ -630,19 +631,19 @@ const Ue = (o) => {
   theme: o
 }) => ({
   padding: o.spacing(1, 2, 2)
-}))), oe = /* @__PURE__ */ p.forwardRef(function(t, n) {
-  const s = J({
+}))), oe = /* @__PURE__ */ u.forwardRef(function(t, n) {
+  const c = J({
     props: t,
     name: "MuiAccordionDetails"
   }), {
-    className: c,
-    ...l
-  } = s, u = s, d = Ue(u);
-  return /* @__PURE__ */ i(He, {
-    className: U(d.root, c),
+    className: i,
+    ...p
+  } = c, l = c, d = He(l);
+  return /* @__PURE__ */ s(Fe, {
+    className: U(d.root, i),
     ref: n,
-    ownerState: u,
-    ...l
+    ownerState: l,
+    ...p
   });
 });
 process.env.NODE_ENV !== "production" && (oe.propTypes = {
@@ -667,23 +668,23 @@ process.env.NODE_ENV !== "production" && (oe.propTypes = {
    */
   sx: e.oneOfType([e.arrayOf(e.oneOfType([e.func, e.object, e.bool])), e.func, e.object])
 });
-function Fe(o) {
-  return _("MuiAccordionSummary", o);
+function Le(o) {
+  return q("MuiAccordionSummary", o);
 }
-const W = q("MuiAccordionSummary", ["root", "expanded", "focusVisible", "disabled", "gutters", "contentGutters", "content", "expandIconWrapper"]), Le = (o) => {
+const V = _("MuiAccordionSummary", ["root", "expanded", "focusVisible", "disabled", "gutters", "contentGutters", "content", "expandIconWrapper"]), qe = (o) => {
   const {
     classes: t,
     expanded: n,
-    disabled: s,
-    disableGutters: c
+    disabled: c,
+    disableGutters: i
   } = o;
   return K({
-    root: ["root", n && "expanded", s && "disabled", !c && "gutters"],
+    root: ["root", n && "expanded", c && "disabled", !i && "gutters"],
     focusVisible: ["focusVisible"],
-    content: ["content", n && "expanded", !c && "contentGutters"],
+    content: ["content", n && "expanded", !i && "contentGutters"],
     expandIconWrapper: ["expandIconWrapper", n && "expanded"]
-  }, Fe, t);
-}, qe = T(Ee, {
+  }, Le, t);
+}, _e = E(Ee, {
   name: "MuiAccordionSummary",
   slot: "Root",
   overridesResolver: (o, t) => t.root
@@ -699,25 +700,25 @@ const W = q("MuiAccordionSummary", ["root", "expanded", "focusVisible", "disable
     minHeight: 48,
     padding: o.spacing(0, 2),
     transition: o.transitions.create(["min-height", "background-color"], t),
-    [`&.${W.focusVisible}`]: {
+    [`&.${V.focusVisible}`]: {
       backgroundColor: (o.vars || o).palette.action.focus
     },
-    [`&.${W.disabled}`]: {
+    [`&.${V.disabled}`]: {
       opacity: (o.vars || o).palette.action.disabledOpacity
     },
-    [`&:hover:not(.${W.disabled})`]: {
+    [`&:hover:not(.${V.disabled})`]: {
       cursor: "pointer"
     },
     variants: [{
       props: (n) => !n.disableGutters,
       style: {
-        [`&.${W.expanded}`]: {
+        [`&.${V.expanded}`]: {
           minHeight: 64
         }
       }
     }]
   };
-})), _e = T("span", {
+})), Je = E("span", {
   name: "MuiAccordionSummary",
   slot: "Content",
   overridesResolver: (o, t) => t.content
@@ -734,12 +735,12 @@ const W = q("MuiAccordionSummary", ["root", "expanded", "focusVisible", "disable
       transition: o.transitions.create(["margin"], {
         duration: o.transitions.duration.shortest
       }),
-      [`&.${W.expanded}`]: {
+      [`&.${V.expanded}`]: {
         margin: "20px 0"
       }
     }
   }]
-}))), Je = T("span", {
+}))), Ke = E("span", {
   name: "MuiAccordionSummary",
   slot: "ExpandIconWrapper",
   overridesResolver: (o, t) => t.expandIconWrapper
@@ -752,52 +753,52 @@ const W = q("MuiAccordionSummary", ["root", "expanded", "focusVisible", "disable
   transition: o.transitions.create("transform", {
     duration: o.transitions.duration.shortest
   }),
-  [`&.${W.expanded}`]: {
+  [`&.${V.expanded}`]: {
     transform: "rotate(180deg)"
   }
-}))), te = /* @__PURE__ */ p.forwardRef(function(t, n) {
-  const s = J({
+}))), te = /* @__PURE__ */ u.forwardRef(function(t, n) {
+  const c = J({
     props: t,
     name: "MuiAccordionSummary"
   }), {
-    children: c,
-    className: l,
-    expandIcon: u,
+    children: i,
+    className: p,
+    expandIcon: l,
     focusVisibleClassName: d,
     onClick: g,
-    ...a
-  } = s, {
+    ...C
+  } = c, {
     disabled: m = !1,
-    disableGutters: E,
-    expanded: R,
+    disableGutters: a,
+    expanded: x,
     toggle: A
-  } = p.useContext(ne), D = (f) => {
+  } = u.useContext(ne), D = (f) => {
     A && A(f), g && g(f);
-  }, w = {
-    ...s,
-    expanded: R,
+  }, R = {
+    ...c,
+    expanded: x,
     disabled: m,
-    disableGutters: E
-  }, v = Le(w);
-  return /* @__PURE__ */ G(qe, {
+    disableGutters: a
+  }, T = qe(R);
+  return /* @__PURE__ */ G(_e, {
     focusRipple: !1,
     disableRipple: !0,
     disabled: m,
-    "aria-expanded": R,
-    className: U(v.root, l),
-    focusVisibleClassName: U(v.focusVisible, d),
+    "aria-expanded": x,
+    className: U(T.root, p),
+    focusVisibleClassName: U(T.focusVisible, d),
     onClick: D,
     ref: n,
-    ownerState: w,
-    ...a,
-    children: [/* @__PURE__ */ i(_e, {
-      className: v.content,
-      ownerState: w,
-      children: c
-    }), u && /* @__PURE__ */ i(Je, {
-      className: v.expandIconWrapper,
-      ownerState: w,
-      children: u
+    ownerState: R,
+    ...C,
+    children: [/* @__PURE__ */ s(Je, {
+      className: T.content,
+      ownerState: R,
+      children: i
+    }), l && /* @__PURE__ */ s(Ke, {
+      className: T.expandIconWrapper,
+      ownerState: R,
+      children: l
     })]
   });
 });
@@ -840,94 +841,144 @@ process.env.NODE_ENV !== "production" && (te.propTypes = {
    */
   sx: e.oneOfType([e.arrayOf(e.oneOfType([e.func, e.object, e.bool])), e.func, e.object])
 });
-const de = De(/* @__PURE__ */ i("path", {
+const de = ke(/* @__PURE__ */ s("path", {
   d: "M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z"
 }), "ExpandMore");
-function uo() {
-  const o = ye(be);
+function mo() {
+  const o = xe(ye), t = le(), n = ve(t);
   if (!o || !o.preferences)
     return null;
-  const t = o.preferences.notifications.sort((n, s) => n.title.localeCompare(s.title)).map((n) => {
-    var u, d, g;
-    const s = (u = o.preferences) == null ? void 0 : u.preferences.filter(
-      (a) => a.notificationId === n.notificationId && !a.subNotificationId
-    ), c = (d = o.preferences) == null ? void 0 : d.preferences.filter(
-      (a) => a.notificationId === n.notificationId && a.subNotificationId
-    ), l = (g = o.preferences) == null ? void 0 : g.subNotifications.filter(
-      (a) => c == null ? void 0 : c.find(
-        (m) => m.subNotificationId === a.subNotificationId && m.notificationId === a.notificationId
+  const c = o.preferences.notifications.sort((i, p) => i.title.localeCompare(p.title)).map((i) => {
+    var g, C, m;
+    const p = (g = o.preferences) == null ? void 0 : g.preferences.filter(
+      (a) => a.notificationId === i.notificationId && !a.subNotificationId
+    ), l = (C = o.preferences) == null ? void 0 : C.preferences.filter(
+      (a) => a.notificationId === i.notificationId && a.subNotificationId
+    ), d = (m = o.preferences) == null ? void 0 : m.subNotifications.filter(
+      (a) => l == null ? void 0 : l.find(
+        (x) => x.subNotificationId === a.subNotificationId && x.notificationId === a.notificationId
       )
     );
     return /* @__PURE__ */ G(
       ee,
       {
-        style: {
+        sx: {
           marginBottom: 0,
-          marginTop: 0
+          marginTop: 0,
+          backgroundColor: n.paper,
+          color: n.text,
+          "&:before": {
+            backgroundColor: n.divider
+          }
         },
         children: [
-          /* @__PURE__ */ i(
+          /* @__PURE__ */ s(
             te,
             {
-              expandIcon: /* @__PURE__ */ i(de, {}),
-              style: {
-                backgroundColor: "#f0f0f0",
+              expandIcon: /* @__PURE__ */ s(de, { sx: { color: n.text } }),
+              sx: {
+                backgroundColor: t.palette.mode === "dark" ? "rgba(255, 255, 255, 0.05)" : "rgba(0, 0, 0, 0.02)",
                 flexDirection: "row-reverse",
-                gap: 16
+                gap: 16,
+                "&:hover": {
+                  backgroundColor: t.palette.mode === "dark" ? "rgba(255, 255, 255, 0.08)" : "rgba(0, 0, 0, 0.04)"
+                }
               },
-              children: /* @__PURE__ */ i(ce, { variant: "body1", children: n.title })
+              children: /* @__PURE__ */ s(ce, { variant: "body1", sx: { color: n.text }, children: i.title })
             }
           ),
-          /* @__PURE__ */ i(oe, { children: /* @__PURE__ */ G(he, { children: [
-            /* @__PURE__ */ i(
-              ie,
-              {
-                notification: n,
-                preferences: s || [],
-                updateDelivery: o.updateDelivery
-              },
-              n.notificationId
-            ),
-            l == null ? void 0 : l.map((a) => /* @__PURE__ */ G(
-              ee,
-              {
-                style: {
-                  marginTop: 12
-                },
-                children: [
-                  /* @__PURE__ */ i(
-                    te,
-                    {
-                      expandIcon: /* @__PURE__ */ i(de, {}),
-                      style: {
-                        flexDirection: "row-reverse",
-                        gap: 16
-                      },
-                      children: /* @__PURE__ */ i(ce, { variant: "body1", children: a.title })
-                    }
-                  ),
-                  /* @__PURE__ */ i(oe, { children: /* @__PURE__ */ i(
-                    ie,
-                    {
-                      notification: n,
-                      preferences: c || [],
-                      updateDelivery: o.updateDelivery,
-                      subNotificationId: a.subNotificationId
+          /* @__PURE__ */ s(
+            oe,
+            {
+              sx: { backgroundColor: n.paper, color: n.text },
+              children: /* @__PURE__ */ G(he, { children: [
+                /* @__PURE__ */ s(
+                  ie,
+                  {
+                    notification: i,
+                    preferences: p || [],
+                    updateDelivery: o.updateDelivery
+                  },
+                  i.notificationId
+                ),
+                d == null ? void 0 : d.map((a) => /* @__PURE__ */ G(
+                  ee,
+                  {
+                    sx: {
+                      marginTop: 12,
+                      backgroundColor: n.paper,
+                      color: n.text,
+                      "&:before": {
+                        backgroundColor: n.divider
+                      }
                     },
-                    a.subNotificationId
-                  ) })
-                ]
-              },
-              `${a.notificationId}-${a.subNotificationId}`
-            ))
-          ] }) })
+                    children: [
+                      /* @__PURE__ */ s(
+                        te,
+                        {
+                          expandIcon: /* @__PURE__ */ s(de, { sx: { color: n.text } }),
+                          sx: {
+                            flexDirection: "row-reverse",
+                            gap: 16,
+                            backgroundColor: t.palette.mode === "dark" ? "rgba(255, 255, 255, 0.03)" : "rgba(0, 0, 0, 0.01)",
+                            "&:hover": {
+                              backgroundColor: t.palette.mode === "dark" ? "rgba(255, 255, 255, 0.06)" : "rgba(0, 0, 0, 0.02)"
+                            }
+                          },
+                          children: /* @__PURE__ */ s(
+                            ce,
+                            {
+                              variant: "body1",
+                              sx: { color: n.text },
+                              children: a.title
+                            }
+                          )
+                        }
+                      ),
+                      /* @__PURE__ */ s(
+                        oe,
+                        {
+                          sx: {
+                            backgroundColor: n.paper,
+                            color: n.text
+                          },
+                          children: /* @__PURE__ */ s(
+                            ie,
+                            {
+                              notification: i,
+                              preferences: l || [],
+                              updateDelivery: o.updateDelivery,
+                              subNotificationId: a.subNotificationId
+                            },
+                            a.subNotificationId
+                          )
+                        }
+                      )
+                    ]
+                  },
+                  `${a.notificationId}-${a.subNotificationId}`
+                ))
+              ] })
+            }
+          )
         ]
       },
-      n.notificationId
+      i.notificationId
     );
   });
-  return /* @__PURE__ */ i(Me, { sx: { borderRadius: 2, overflow: "hidden" }, children: t });
+  return /* @__PURE__ */ s(
+    Me,
+    {
+      sx: {
+        borderRadius: 2,
+        overflow: "hidden",
+        backgroundColor: n.paper,
+        color: n.text
+      },
+      children: c
+    }
+  );
 }
 export {
-  uo as Preferences
+  mo as Preferences
 };