@variamosple/variamos-components 0.1.2 → 0.2.1

package/dist/Components/AuthWrapper/index.js

@@ -1,16 +1,17 @@
 import { jsx as o, Fragment as u } from "react/jsx-runtime";
-import d, { useEffect as c } from "react";
+import d, { useEffect as m } from "react";
 import { Spinner as f } from "react-bootstrap";
 import "../../Context/AnalyticsContext.js";
 import "../../Context/MenuContext.js";
 import { useRouter as p } from "../../Context/RouterContext.js";
 import { useSession as l } from "../../Context/SessionContext.js";
-const P = ({
+import "../../Context/NotificationContext.js";
+const v = ({
   redirectPath: i,
-  children: m
+  children: c
 }) => {
   const [a, h] = d.useState(!1), { isAuthenticated: t, isLoading: r } = l(), { navigate: n } = p();
-  return c(() => {
+  return m(() => {
     if (!r && !t && !a) {
       const e = window.location.href, s = new URLSearchParams();
       s.set("redirectTo", encodeURIComponent(e)), h(!0), setTimeout(
@@ -18,7 +19,7 @@ const P = ({
         300
       );
     }
-  }, [t, r, i, n, a]), c(() => {
+  }, [t, r, i, n, a]), m(() => {
     const e = new URL(window.location.href);
     e.searchParams.has("authToken") && (localStorage.setItem("authToken", e.searchParams.get("authToken")), e.searchParams.delete("authToken"), window.history.replaceState({}, "", e));
   }, []), r || !t ? /* @__PURE__ */ o("div", { className: "d-flex justify-content-center align-items-center w-100 h-100", children: /* @__PURE__ */ o(
@@ -28,8 +29,8 @@ const P = ({
       variant: "primary",
       style: { width: "3rem", height: "3rem", borderWidth: "0.5rem" }
     }
-  ) }) : /* @__PURE__ */ o(u, { children: m });
+  ) }) : /* @__PURE__ */ o(u, { children: c });
 };
 export {
-  P as AuthWrapper
+  v as AuthWrapper
 };

package/dist/Components/Header/HeaderOptions.js

@@ -5,10 +5,11 @@ import "../../Context/AnalyticsContext.js";
 import { useMenu as C } from "../../Context/MenuContext.js";
 import { useRouter as b } from "../../Context/RouterContext.js";
 import { useSession as x } from "../../Context/SessionContext.js";
+import "../../Context/NotificationContext.js";
 import { mapToWebTarget as L } from "../../Model/Router.js";
 import { Events as y } from "../../Common/Events.js";
 import { BugFormModal as U } from "./BugFormModal.js";
-const u = {}, O = ({ adminApiUrl: B }) => {
+const u = {}, Q = ({ adminApiUrl: B }) => {
   const { user: o, isAuthenticated: m, logout: P } = x(), { options: l } = C(), { navigate: A } = b(), [R, c] = h(!1), [k] = h([
     "Editor",
     "Model",
@@ -91,5 +92,5 @@ const u = {}, O = ({ adminApiUrl: B }) => {
   ] });
 };
 export {
-  O as HeaderOptions
+  Q as HeaderOptions
 };

package/dist/Components/Header/MenuItem.js

@@ -5,8 +5,9 @@ import "../../Context/AnalyticsContext.js";
 import "../../Context/MenuContext.js";
 import { useRouter as C } from "../../Context/RouterContext.js";
 import { useSession as N } from "../../Context/SessionContext.js";
+import "../../Context/NotificationContext.js";
 import { mapToWebTarget as m } from "../../Model/Router.js";
-const y = ({
+const z = ({
   title: e,
   type: w,
   location: g,
@@ -46,5 +47,5 @@ const y = ({
   )) });
 };
 export {
-  y as MenuItemComponent
+  z as MenuItemComponent
 };

package/dist/Components/Header/SubHeader.js

@@ -5,8 +5,9 @@ import "../../Context/AnalyticsContext.js";
 import { useMenu as N } from "../../Context/MenuContext.js";
 import { useRouter as v } from "../../Context/RouterContext.js";
 import { useSession as R } from "../../Context/SessionContext.js";
-const H = () => {
-  const { navigate: f } = v(), { subMenu: n } = N(), { user: r } = R(), t = w(() => {
+import "../../Context/NotificationContext.js";
+const L = () => {
+  const { navigate: p } = v(), { subMenu: n } = N(), { user: r } = R(), t = w(() => {
     const l = (r == null ? void 0 : r.roles) || [], m = (r == null ? void 0 : r.permissions) || [];
     return n ? n.filter((o) => {
       var a, c;
@@ -19,20 +20,20 @@ const H = () => {
         (e) => m.includes(e)
       )), i;
     }) : [];
-  }, [n, r]), p = (l) => () => {
-    f(l);
+  }, [n, r]), f = (l) => () => {
+    p(l);
   };
   return t.length ? /* @__PURE__ */ s(h, { className: "py-1 shadow-sm bg-white", children: /* @__PURE__ */ s(g, { children: /* @__PURE__ */ s(d, { className: "d-flex justify-content-center w-100 gap-3", children: t.map((l) => /* @__PURE__ */ s(
     d.Link,
     {
       as: "button",
       className: "btn btn-link p-0",
-      onClick: p(l.location),
+      onClick: f(l.location),
       children: l.title
     },
     l.location
   )) }) }) }) : null;
 };
 export {
-  H as SubHeader
+  L as SubHeader
 };

package/dist/Components/Header/index.js

@@ -1,46 +1,54 @@
-import { jsxs as o, jsx as e } from "react/jsx-runtime";
-import { Navbar as t, Container as h, Nav as i } from "react-bootstrap";
+import { jsxs as o, jsx as e, Fragment as g } from "react/jsx-runtime";
+import { useState as N } from "react";
+import { Navbar as a, Container as k, Nav as n } from "react-bootstrap";
 import "../../Context/AnalyticsContext.js";
-import { useMenu as f } from "../../Context/MenuContext.js";
-import { useRouter as g } from "../../Context/RouterContext.js";
-import { useSession as N } from "../../Context/SessionContext.js";
-import { HeaderOptions as k } from "./HeaderOptions.js";
-import { MenuItemComponent as n } from "./MenuItem.js";
-import { SubHeader as b } from "./SubHeader.js";
-const M = ({
-  logoUrl: a,
-  logoAlt: m = "App logo",
-  signInUrl: s,
-  adminApiUrl: c
+import { useMenu as w } from "../../Context/MenuContext.js";
+import { useRouter as C } from "../../Context/RouterContext.js";
+import { useSession as S } from "../../Context/SessionContext.js";
+import "../../Context/NotificationContext.js";
+import { HeaderOptions as b } from "./HeaderOptions.js";
+import { MenuItemComponent as m } from "./MenuItem.js";
+import { SubHeader as v } from "./SubHeader.js";
+import { NotificationBell as x } from "../Notifications/NotificationBell.js";
+import { NotificationDrawer as D } from "../Notifications/NotificationDrawer.js";
+const E = ({
+  logoUrl: s,
+  logoAlt: l = "App logo",
+  signInUrl: c,
+  adminApiUrl: p
 }) => {
-  const { items: l } = f(), { navigate: p } = g(), { isAuthenticated: d, isLoading: u } = N();
+  const { items: d } = w(), { navigate: f } = C(), { isAuthenticated: r, isLoading: h } = S(), [u, t] = N(!1);
   return /* @__PURE__ */ o("header", { className: "sticky-top", children: [
-    /* @__PURE__ */ e(t, { bg: "dark", variant: "dark", children: /* @__PURE__ */ o(h, { fluid: !0, children: [
-      /* @__PURE__ */ e(t.Brand, { onClick: () => p("/"), children: /* @__PURE__ */ e(
+    /* @__PURE__ */ e(a, { bg: "dark", variant: "dark", children: /* @__PURE__ */ o(k, { fluid: !0, children: [
+      /* @__PURE__ */ e(a.Brand, { onClick: () => f("/"), children: /* @__PURE__ */ e(
         "img",
         {
-          src: a,
+          src: s,
           height: "30",
           className: "d-inline-block align-top",
-          alt: m
+          alt: l
         }
       ) }),
-      /* @__PURE__ */ e(i, { className: "me-auto", children: l.map((r) => /* @__PURE__ */ e(n, { ...r }, r.title)) }),
-      /* @__PURE__ */ o(i, { className: "me-5 pe-5", children: [
-        /* @__PURE__ */ e(k, { adminApiUrl: c }),
-        !u && !d && /* @__PURE__ */ e(
-          n,
+      /* @__PURE__ */ e(n, { className: "me-auto", children: d.map((i) => /* @__PURE__ */ e(m, { ...i }, i.title)) }),
+      /* @__PURE__ */ o(n, { className: "me-5 pe-5 align-items-center", children: [
+        r && /* @__PURE__ */ o(g, { children: [
+          /* @__PURE__ */ e(x, { onClick: () => t(!0), className: "me-2" }),
+          /* @__PURE__ */ e(D, { show: u, onClose: () => t(!1) })
+        ] }),
+        /* @__PURE__ */ e(b, { adminApiUrl: p }),
+        !h && !r && /* @__PURE__ */ e(
+          m,
           {
             title: "Sign In",
             type: "location",
-            location: s
+            location: c
           }
         )
       ] })
     ] }) }),
-    /* @__PURE__ */ e(b, {})
+    /* @__PURE__ */ e(v, {})
   ] });
 };
 export {
-  M as Header
+  E as Header
 };

package/dist/Components/NotAuthorized/index.js

@@ -4,7 +4,8 @@ import "../../Context/AnalyticsContext.js";
 import "../../Context/MenuContext.js";
 import { useRouter as a } from "../../Context/RouterContext.js";
 import "../../Context/SessionContext.js";
-const u = ({ homePath: e }) => {
+import "../../Context/NotificationContext.js";
+const h = ({ homePath: e }) => {
   const { navigate: r } = a();
   return /* @__PURE__ */ o(i, { className: "d-flex flex-column justify-content-center align-items-center vh-100 text-center", children: [
     /* @__PURE__ */ t("h1", { className: "display-1 fw-bold text-danger", children: "403" }),
@@ -13,5 +14,5 @@ const u = ({ homePath: e }) => {
   ] });
 };
 export {
-  u as NotAuthorized
+  h as NotAuthorized
 };

package/dist/Components/Notifications/NotificationBell.d.ts

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+export interface NotificationBellProps {
+    onClick?: () => void;
+    className?: string;
+}
+export declare const NotificationBell: React.FC<NotificationBellProps>;

package/dist/Components/Notifications/NotificationBell.js

@@ -0,0 +1,36 @@
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { Button as a, Badge as n } from "react-bootstrap";
+import { Bell as l } from "react-bootstrap-icons";
+import { useNotifications as s } from "../../Context/NotificationContext.js";
+const f = ({
+  onClick: o,
+  className: i = ""
+}) => {
+  const { unreadCount: t } = s();
+  return /* @__PURE__ */ r(
+    a,
+    {
+      variant: "link",
+      onClick: o,
+      className: `position-relative p-2 text-light ${i}`,
+      "aria-label": "Notifications",
+      style: { boxShadow: "none" },
+      children: [
+        /* @__PURE__ */ e(l, { size: 22 }),
+        t > 0 && /* @__PURE__ */ e(
+          n,
+          {
+            pill: !0,
+            bg: "danger",
+            className: "position-absolute translate-middle-y start-50 top-0 border border-white",
+            style: { fontSize: "0.65rem", padding: "0.25em 0.5em" },
+            children: t > 99 ? "99+" : t
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  f as NotificationBell
+};

package/dist/Components/Notifications/NotificationDrawer.d.ts

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+export interface NotificationDrawerProps {
+    show: boolean;
+    onClose: () => void;
+}
+export declare const NotificationDrawer: React.FC<NotificationDrawerProps>;

package/dist/Components/Notifications/NotificationDrawer.js

@@ -0,0 +1,202 @@
+import { jsxs as i, jsx as e, Fragment as N } from "react/jsx-runtime";
+import { useState as y, useEffect as L } from "react";
+import { Offcanvas as d, Button as r, Nav as c, Spinner as E } from "react-bootstrap";
+import { ArrowLeft as M, Gear as H, Inbox as I, Trash as b, CheckAll as K, CircleFill as R } from "react-bootstrap-icons";
+import { useNotifications as _ } from "../../Context/NotificationContext.js";
+import { NotificationSettings as B } from "./NotificationSettings.js";
+const F = {
+  review_assigned: {
+    title: "Language Review Assigned",
+    body: "You have been assigned to review the translation for {{languageName}}."
+  },
+  project_created: {
+    title: "Project Created",
+    body: "The project '{{projectName}}' has been created successfully."
+  },
+  test_template: {
+    title: "Notification Test",
+    body: "Hello {{name}}, this is a real-time notification test."
+  },
+  admin_alert: {
+    title: "{{title}}",
+    body: "{{body}}"
+  }
+}, G = ({
+  show: m,
+  onClose: u
+}) => {
+  const {
+    notifications: f,
+    isLoading: v,
+    fetchNotifications: k,
+    markAsRead: w,
+    markAllAsRead: S,
+    emptyTrash: T,
+    deleteNotification: z
+  } = _(), [n, C] = y("inbox"), [p, x] = y(!1);
+  L(() => {
+    m && k(n);
+  }, [m, n]);
+  const g = (t, a) => {
+    let s = t;
+    for (const l of Object.keys(a))
+      s = s.replace(new RegExp(`{{${l}}}`, "g"), String(a[l]));
+    return s;
+  }, j = (t) => {
+    const a = F[t.templateKey] || {
+      title: "New Alert",
+      body: `Notification template: ${t.templateKey}`
+    };
+    return {
+      title: g(a.title, t.variables),
+      body: g(a.body, t.variables)
+    };
+  }, A = (t) => new Date(t).toLocaleDateString(void 0, {
+    hour: "2-digit",
+    minute: "2-digit"
+  });
+  return /* @__PURE__ */ i(d, { show: m, onHide: u, placement: "end", className: "text-dark", children: [
+    /* @__PURE__ */ e(d.Header, { closeButton: !0, className: "border-bottom", children: /* @__PURE__ */ e(d.Title, { className: "d-flex align-items-center w-100", children: p ? /* @__PURE__ */ i(N, { children: [
+      /* @__PURE__ */ e(
+        r,
+        {
+          variant: "link",
+          className: "p-0 me-2 text-dark",
+          onClick: () => x(!1),
+          "aria-label": "Back",
+          children: /* @__PURE__ */ e(M, { size: 20 })
+        }
+      ),
+      /* @__PURE__ */ e("span", { children: "Settings" })
+    ] }) : /* @__PURE__ */ i("div", { className: "d-flex justify-content-between align-items-center w-100 me-3", children: [
+      /* @__PURE__ */ e("span", { children: "Notifications" }),
+      /* @__PURE__ */ e(
+        r,
+        {
+          variant: "link",
+          className: "p-0 text-secondary",
+          onClick: () => x(!0),
+          "aria-label": "Notification Settings",
+          style: { boxShadow: "none" },
+          children: /* @__PURE__ */ e(H, { size: 20 })
+        }
+      )
+    ] }) }) }),
+    /* @__PURE__ */ e(d.Body, { className: "p-0 d-flex flex-column h-100", children: p ? /* @__PURE__ */ e("div", { className: "p-3", children: /* @__PURE__ */ e(B, {}) }) : /* @__PURE__ */ i(N, { children: [
+      /* @__PURE__ */ i(
+        c,
+        {
+          variant: "tabs",
+          activeKey: n,
+          onSelect: (t) => C(t),
+          className: "px-3 pt-2 bg-light border-bottom",
+          children: [
+            /* @__PURE__ */ e(c.Item, { children: /* @__PURE__ */ i(c.Link, { eventKey: "inbox", className: "d-flex align-items-center", children: [
+              /* @__PURE__ */ e(I, { className: "me-2" }),
+              "Inbox"
+            ] }) }),
+            /* @__PURE__ */ e(c.Item, { children: /* @__PURE__ */ i(c.Link, { eventKey: "trash", className: "d-flex align-items-center", children: [
+              /* @__PURE__ */ e(b, { className: "me-2" }),
+              "Trash"
+            ] }) })
+          ]
+        }
+      ),
+      f.length > 0 && /* @__PURE__ */ e("div", { className: "d-flex justify-content-end align-items-center p-2 bg-light border-bottom px-3", children: n === "inbox" ? /* @__PURE__ */ i(
+        r,
+        {
+          variant: "link",
+          size: "sm",
+          className: "p-0 text-primary text-decoration-none d-flex align-items-center",
+          onClick: S,
+          children: [
+            /* @__PURE__ */ e(K, { className: "me-1", size: 18 }),
+            "Mark all as read"
+          ]
+        }
+      ) : /* @__PURE__ */ i(
+        r,
+        {
+          variant: "link",
+          size: "sm",
+          className: "p-0 text-danger text-decoration-none d-flex align-items-center",
+          onClick: T,
+          children: [
+            /* @__PURE__ */ e(b, { className: "me-1", size: 16 }),
+            "Empty Trash"
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ e("div", { className: "flex-grow-1 overflow-auto bg-light pt-3", children: v ? /* @__PURE__ */ e("div", { className: "text-center py-5", children: /* @__PURE__ */ e(E, { animation: "border", variant: "primary" }) }) : f.length === 0 ? /* @__PURE__ */ e("div", { className: "text-center py-5 text-muted", children: /* @__PURE__ */ e("p", { className: "mb-0", children: n === "inbox" ? "Your inbox is empty!" : "No deleted notifications." }) }) : /* @__PURE__ */ e("div", { className: "px-3", children: f.map((t) => {
+        const { title: a, body: s } = j(t), l = n === "inbox" && !t.isRead;
+        return /* @__PURE__ */ e(
+          "div",
+          {
+            className: `p-3 mb-2 rounded border shadow-sm ${l ? "bg-white border-primary-subtle" : "bg-white border-light"}`,
+            style: {
+              transition: "all 0.2s ease-in-out",
+              borderLeft: l ? "4px solid #0d6efd" : "1px solid #dee2e6"
+            },
+            children: /* @__PURE__ */ i("div", { className: "d-flex justify-content-between align-items-start", children: [
+              /* @__PURE__ */ i("div", { className: "pe-2 flex-grow-1", children: [
+                /* @__PURE__ */ e(
+                  "h6",
+                  {
+                    className: `mb-1 ${l ? "fw-bold text-dark" : "text-secondary fw-semibold"}`,
+                    style: { fontSize: "0.9rem", lineHeight: "1.25" },
+                    children: a
+                  }
+                ),
+                /* @__PURE__ */ e(
+                  "p",
+                  {
+                    className: "mb-2 text-muted",
+                    style: { fontSize: "0.8rem", color: "#6c757d", lineHeight: "1.3" },
+                    children: s
+                  }
+                ),
+                /* @__PURE__ */ e("span", { className: "text-muted d-block", style: { fontSize: "0.7rem" }, children: A(t.createdAt) })
+              ] }),
+              /* @__PURE__ */ i("div", { className: "d-flex align-items-center gap-2", children: [
+                l && /* @__PURE__ */ e(
+                  r,
+                  {
+                    variant: "link",
+                    className: "p-1 text-primary border-0 d-flex align-items-center",
+                    onClick: () => w(t.id),
+                    title: "Mark as read",
+                    style: { boxShadow: "none" },
+                    children: /* @__PURE__ */ e(R, { size: 8, className: "text-primary" })
+                  }
+                ),
+                n === "inbox" && /* @__PURE__ */ e(
+                  r,
+                  {
+                    variant: "link",
+                    className: "p-1 text-secondary border-0 d-flex align-items-center",
+                    onClick: () => z(t.id),
+                    title: "Move to trash",
+                    style: { boxShadow: "none" },
+                    onMouseEnter: (h) => {
+                      const o = h.currentTarget.querySelector("svg");
+                      o && (o.style.fill = "#dc3545");
+                    },
+                    onMouseLeave: (h) => {
+                      const o = h.currentTarget.querySelector("svg");
+                      o && (o.style.fill = "currentColor");
+                    },
+                    children: /* @__PURE__ */ e(b, { size: 14, style: { transition: "fill 0.2s" } })
+                  }
+                )
+              ] })
+            ] })
+          },
+          t.id
+        );
+      }) }) })
+    ] }) })
+  ] });
+};
+export {
+  G as NotificationDrawer
+};

package/dist/Components/Notifications/NotificationSettings.d.ts

@@ -0,0 +1,2 @@
+import { default as React } from 'react';
+export declare const NotificationSettings: React.FC;

package/dist/Components/Notifications/NotificationSettings.js

@@ -0,0 +1,68 @@
+import { jsx as t, jsxs as l } from "react/jsx-runtime";
+import { Spinner as u, Alert as b, Card as c, Form as s } from "react-bootstrap";
+import { useNotifications as y } from "../../Context/NotificationContext.js";
+const N = () => {
+  const { preferences: n, updatePreferences: i, isLoading: o } = y(), a = (e) => {
+    n && i({ [e]: !n[e] });
+  }, d = (e) => {
+    if (!n) return;
+    const h = n.mutedEventTypes.includes(e) ? n.mutedEventTypes.filter((p) => p !== e) : [...n.mutedEventTypes, e];
+    i({ mutedEventTypes: h });
+  };
+  if (o && !n)
+    return /* @__PURE__ */ t("div", { className: "text-center py-4", children: /* @__PURE__ */ t(u, { animation: "border", size: "sm" }) });
+  if (!n)
+    return /* @__PURE__ */ t(b, { variant: "warning", children: "Unable to load notification preferences." });
+  const m = [
+    { key: "review_assigned", label: "Review Assignments (Relectures)" },
+    { key: "project_created", label: "Project Creations" },
+    { key: "system_alert", label: "System Alerts" }
+  ];
+  return /* @__PURE__ */ t(c, { className: "border-0 shadow-sm", children: /* @__PURE__ */ l(c.Body, { className: "p-3", children: [
+    /* @__PURE__ */ t("h6", { className: "mb-3 text-secondary font-weight-bold", children: "Notification Channels" }),
+    /* @__PURE__ */ l(s.Group, { className: "mb-3", children: [
+      /* @__PURE__ */ t(
+        s.Check,
+        {
+          type: "switch",
+          id: "channel-inapp",
+          label: "In-App Notifications (Real-Time)",
+          checked: n.inAppEnabled,
+          onChange: () => a("inAppEnabled"),
+          className: "mb-2"
+        }
+      ),
+      /* @__PURE__ */ t(
+        s.Check,
+        {
+          type: "switch",
+          id: "channel-email",
+          label: "Email Alerts",
+          checked: n.emailEnabled,
+          onChange: () => a("emailEnabled")
+        }
+      )
+    ] }),
+    /* @__PURE__ */ t("hr", {}),
+    /* @__PURE__ */ t("h6", { className: "mb-3 text-secondary font-weight-bold", children: "Mute Event Types" }),
+    /* @__PURE__ */ t("p", { className: "text-muted small mb-3", children: "Check events you do NOT want to receive notifications for." }),
+    /* @__PURE__ */ t(s.Group, { children: m.map((e) => {
+      const r = n.mutedEventTypes.includes(e.key);
+      return /* @__PURE__ */ t(
+        s.Check,
+        {
+          type: "checkbox",
+          id: `mute-${e.key}`,
+          label: e.label,
+          checked: r,
+          onChange: () => d(e.key),
+          className: "mb-2 text-dark"
+        },
+        e.key
+      );
+    }) })
+  ] }) });
+};
+export {
+  N as NotificationSettings
+};

package/dist/Components/Notifications/index.d.ts

@@ -0,0 +1,3 @@
+export * from './NotificationBell';
+export * from './NotificationDrawer';
+export * from './NotificationSettings';

package/dist/Components/Notifications/index.js

@@ -0,0 +1,8 @@
+import { NotificationBell as i } from "./NotificationBell.js";
+import { NotificationDrawer as e } from "./NotificationDrawer.js";
+import { NotificationSettings as a } from "./NotificationSettings.js";
+export {
+  i as NotificationBell,
+  e as NotificationDrawer,
+  a as NotificationSettings
+};

package/dist/Components/ProtectedRoute/index.js

@@ -4,29 +4,30 @@ import "../../Context/AnalyticsContext.js";
 import "../../Context/MenuContext.js";
 import { useRouter as h } from "../../Context/RouterContext.js";
 import { useSession as d } from "../../Context/SessionContext.js";
-const F = ({
-  notAuthorizedPath: e,
+import "../../Context/NotificationContext.js";
+const L = ({
+  notAuthorizedPath: r,
   allowedPermissions: i = [],
-  children: c
+  children: p
 }) => {
-  var m;
-  const { isAuthenticated: n, isLoading: r, user: t } = d(), { navigate: s } = h();
+  var s;
+  const { isAuthenticated: e, isLoading: n, user: t } = d(), { navigate: m } = h();
   return g(() => {
-    if (!r && n) {
+    if (!n && e) {
       const o = (t == null ? void 0 : t.permissions) || [];
-      !i.length || o.some((p) => i.includes(p)) || s(e);
+      !i.length || o.some((c) => i.includes(c)) || m(r);
     }
   }, [
-    r,
     n,
     e,
-    s,
+    r,
+    m,
     t,
     i
-  ]), i.length > 0 && !((m = t == null ? void 0 : t.permissions) != null && m.some(
+  ]), i.length > 0 && !((s = t == null ? void 0 : t.permissions) != null && s.some(
     (o) => i.includes(o)
-  )) ? null : /* @__PURE__ */ f(u, { children: c });
+  )) ? null : /* @__PURE__ */ f(u, { children: p });
 };
 export {
-  F as ProtectedRoute
+  L as ProtectedRoute
 };

package/dist/Components/index.d.ts

@@ -5,3 +5,4 @@ export * from './Header';
 export * from './NotAuthorized';
 export * from './Paginator';
 export * from './ProtectedRoute';
+export * from './Notifications';

package/dist/Components/index.js

@@ -1,16 +1,22 @@
 import { AuthWrapper as t } from "./AuthWrapper/index.js";
-import { confirmationModalDefaultProps as p } from "./ConfirmationModal/index.js";
-import { Footer as m } from "./Footer/index.js";
-import { Header as x } from "./Header/index.js";
-import { NotAuthorized as i } from "./NotAuthorized/index.js";
-import { Paginator as n } from "./Paginator/index.js";
-import { ProtectedRoute as c } from "./ProtectedRoute/index.js";
+import { confirmationModalDefaultProps as f } from "./ConfirmationModal/index.js";
+import { Footer as p } from "./Footer/index.js";
+import { Header as m } from "./Header/index.js";
+import { NotAuthorized as n } from "./NotAuthorized/index.js";
+import { Paginator as d } from "./Paginator/index.js";
+import { ProtectedRoute as u } from "./ProtectedRoute/index.js";
+import { NotificationBell as P } from "./Notifications/NotificationBell.js";
+import { NotificationDrawer as h } from "./Notifications/NotificationDrawer.js";
+import { NotificationSettings as A } from "./Notifications/NotificationSettings.js";
 export {
   t as AuthWrapper,
-  m as Footer,
-  x as Header,
-  i as NotAuthorized,
-  n as Paginator,
-  c as ProtectedRoute,
-  p as confirmationModalDefaultProps
+  p as Footer,
+  m as Header,
+  n as NotAuthorized,
+  P as NotificationBell,
+  h as NotificationDrawer,
+  A as NotificationSettings,
+  d as Paginator,
+  u as ProtectedRoute,
+  f as confirmationModalDefaultProps
 };