@edusight/notification-widget 1.0.32 → 1.0.35

package/dist/{components-D8XxiFEB.js → components-Dq8aSwWR.js}

@@ -59,13 +59,13 @@ function I(e) {
   return e;
 }
 function me(e, r, a) {
-  return r = fe(r), r in e ? Object.defineProperty(e, r, { value: a, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = a, e;
+  return r = ge(r), r in e ? Object.defineProperty(e, r, { value: a, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = a, e;
 }
-function fe(e) {
-  var r = ge(e, "string");
+function ge(e) {
+  var r = fe(e, "string");
   return typeof r == "symbol" ? r : r + "";
 }
-function ge(e, r) {
+function fe(e, r) {
   if (typeof e != "object" || !e) return e;
   var a = e[Symbol.toPrimitive];
   if (a !== void 0) {
@@ -91,7 +91,7 @@ function pe(e) {
       attr: n,
       size: s,
       title: o
-    } = e, h = ue(e, ce), g = s || a.size || "1em", m;
+    } = e, h = ue(e, ce), f = s || a.size || "1em", m;
     return a.className && (m = a.className), e.className && (m = (m ? m + " " : "") + e.className), /* @__PURE__ */ z.createElement("svg", T({
       stroke: "currentColor",
       fill: "currentColor",
@@ -101,8 +101,8 @@ function pe(e) {
       style: I(I({
         color: e.color || a.color
       }, a.style), e.style),
-      height: g,
-      width: g,
+      height: f,
+      width: f,
       xmlns: "http://www.w3.org/2000/svg"
     }), o && /* @__PURE__ */ z.createElement("title", null, o), e.children);
   };
@@ -120,7 +120,7 @@ const Fe = ({
 }) => {
   const o = (d) => d === 0 ? "" : d > 99 ? "99+" : d.toString(), h = (d) => {
     s || (d.key === "Enter" || d.key === " ") && (d.preventDefault(), r());
-  }, g = o(e), m = e > 0;
+  }, f = o(e), m = e > 0;
   return /* @__PURE__ */ i(
     "button",
     {
@@ -135,6 +135,7 @@ const Fe = ({
         focus:outline-none focus:ring-1 focus:ring-[var(--widget-primary)] focus:ring-offset-1
         disabled:opacity-70 disabled:cursor-not-allowed
         w-10 h-10
+        mx-widget-bell
         ${n}
       `,
       onClick: r,
@@ -144,8 +145,9 @@ const Fe = ({
       "aria-expanded": !1,
       "aria-haspopup": "dialog",
       "data-testid": "bell-component",
+      "data-mx-widget": "bell",
       children: [
-        /* @__PURE__ */ i("div", { className: "relative inline-flex items-center justify-center", children: [
+        /* @__PURE__ */ i("div", { className: "relative inline-flex items-center justify-center text-align-center", children: [
           /* @__PURE__ */ t(ve, { className: "w-6 h-6" }),
           m && /* @__PURE__ */ t(
             "span",
@@ -155,16 +157,17 @@ const Fe = ({
               flex items-center justify-center\r
               w-[16px] h-[16px]\r
               text-[10px] font-bold leading-none\r
-              text-white bg-red-500\r
+              text-[var(--widget-text)] bg-red-500\r
               rounded-full\r
               border border-white dark:border-gray-900\r
               shadow-sm\r
               pointer-events-none\r
+              text-align-center\r
             `,
               "aria-hidden": "true",
               "data-testid": "unread-badge",
               style: { marginTop: "-25px", marginRight: "-25px" },
-              children: g
+              children: f
             }
           )
         ] }),
@@ -242,7 +245,7 @@ const P = ({
   position: a = "top",
   delay: n = 200
 }) => {
-  const [s, o] = k(!1), [h, g] = k({ x: 0, y: 0 }), m = j(null), d = j(null), y = () => {
+  const [s, o] = k(!1), [h, f] = k({ x: 0, y: 0 }), m = j(null), d = j(null), y = () => {
     m.current && clearTimeout(m.current), m.current = setTimeout(() => {
       if (d.current) {
         const v = d.current.getBoundingClientRect();
@@ -261,7 +264,7 @@ const P = ({
             l = v.right + 8, u = v.top + v.height / 2;
             break;
         }
-        g({ x: l, y: u }), o(!0);
+        f({ x: l, y: u }), o(!0);
       }
     }, n);
   }, c = () => {
@@ -284,16 +287,16 @@ const P = ({
       "div",
       {
         className: `
-            fixed z-50 px-2 py-1 text-xs font-medium text-white rounded-md pointer-events-none
-            bg-[var(--widget-text)] shadow-lg
-            ${{
+                                fixed z-50 px-2 py-1 text-xs font-medium text-[var(--widget-text)] rounded-md pointer-events-none
+                                bg-[var(--widget-text)] shadow-lg
+                                ${{
           top: "-translate-x-1/2 -translate-y-full",
           bottom: "-translate-x-1/2 translate-y-0",
           left: "-translate-x-full -translate-y-1/2",
           right: "translate-x-0 -translate-y-1/2"
         }[a]}
-            animate-in fade-in-0 zoom-in-95 duration-200
-          `,
+                                animate-in fade-in-0 zoom-in-95 duration-200
+                            `,
         style: {
           left: `${h.x}px`,
           top: `${h.y}px`
@@ -324,7 +327,7 @@ const P = ({
   onSelectionChange: a,
   isSelected: n = !1
 }) => {
-  const [s, o] = k(!1), h = Number.isNaN(e.timestamp.getTime()), g = h ? void 0 : e.timestamp.toISOString(), m = He(e.timestamp), d = (c) => {
+  const [s, o] = k(!1), h = Number.isNaN(e.timestamp.getTime()), f = h ? void 0 : e.timestamp.toISOString(), m = He(e.timestamp), d = (c) => {
     r && r(e.id, c), o(!1);
   }, y = () => {
     a && a(!n);
@@ -333,7 +336,7 @@ const P = ({
     "div",
     {
       className: `
-        relative group flex items-start gap-3 px-4 py-3 border-b border-border-light
+        mx-widget-item relative group flex items-start gap-3 px-4 py-3 border-b border-border-light
         transition-all duration-200
         bg-widget-background hover:bg-widget-hover
         min-w-[20rem]
@@ -343,6 +346,7 @@ const P = ({
       onMouseLeave: () => o(!1),
       "data-testid": "notification-item",
       "data-notification-id": e.id,
+      "data-mx-widget": "item",
       children: [
         a && /* @__PURE__ */ t("div", { className: "flex-shrink-0 pt-0.5", children: /* @__PURE__ */ t(
           "input",
@@ -363,7 +367,7 @@ const P = ({
             "aria-hidden": "true",
             loading: "lazy"
           }
-        ) : /* @__PURE__ */ t("div", { className: "w-10 h-10 rounded-full bg-gradient-to-br from-widget-primary to-widget-primary-hover flex items-center justify-center shadow-sm", children: /* @__PURE__ */ t("span", { className: "text-white font-semibold text-base", children: e.subject.charAt(0).toUpperCase() }) }) }),
+        ) : /* @__PURE__ */ t("div", { className: "w-10 h-10 rounded-full bg-gradient-to-br from-widget-primary to-widget-primary-hover flex items-center justify-center shadow-sm", children: /* @__PURE__ */ t("span", { className: "text-[var(--widget-text)] font-semibold text-base", children: e.subject.charAt(0).toUpperCase() }) }) }),
         /* @__PURE__ */ i("div", { className: "flex-1 min-w-0", children: [
           /* @__PURE__ */ i("div", { className: "flex items-start justify-between gap-2 mb-0.5", children: [
             /* @__PURE__ */ t("h3", { className: `text-sm leading-5 text-[var(--widget-text)] ${e.isRead ? "font-medium" : "font-semibold"}`, children: e.subject }),
@@ -378,14 +382,15 @@ const P = ({
               },
               className: `
                   px-3 py-1.5 rounded-md text-sm font-medium transition-colors
-                  ${b === 0 ? "bg-[var(--widget-primary)] text-white hover:bg-[var(--widget-primary-hover)] shadow-sm" : "bg-transparent text-[var(--widget-text-secondary)] hover:bg-[var(--widget-bg-hover)] border border-[var(--widget-border)]"}
+                  ${b === 0 ? "bg-[var(--widget-primary)] text-[var(--widget-text)] hover:bg-[var(--widget-primary-hover)] shadow-sm" : "bg-transparent text-[var(--widget-text-secondary)] hover:bg-[var(--widget-bg-hover)] border border-[var(--widget-border)]"}
                 `,
+              "data-mx-widget": "action",
               children: c.label
             },
             b
           )) }),
           /* @__PURE__ */ i("div", { className: "flex items-center justify-between min-h-[20px]", children: [
-            /* @__PURE__ */ t("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ t("time", { className: "text-xs text-[var(--widget-text-tertiary)]", dateTime: g, children: m }) }),
+            /* @__PURE__ */ t("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ t("time", { className: "text-xs text-[var(--widget-text-tertiary)]", dateTime: f, children: m }) }),
             /* @__PURE__ */ i(
               "div",
               {
@@ -473,7 +478,7 @@ const P = ({
   onClearSelection: o,
   className: h = ""
 }) => {
-  const [g, m] = k(!1), [d, y] = k(null), c = e.length, b = async (v, l) => {
+  const [f, m] = k(!1), [d, y] = k(null), c = e.length, b = async (v, l) => {
     if (c !== 0) {
       m(!0), y(null);
       try {
@@ -527,7 +532,7 @@ const P = ({
               {
                 type: "button",
                 onClick: () => b(r),
-                disabled: g,
+                disabled: f,
                 className: "inline-flex items-center px-2 py-1 text-xs font-medium text-blue-700 bg-white border border-blue-300 rounded hover:bg-blue-50 focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed transition-colors",
                 "data-testid": "bulk-mark-read",
                 children: [
@@ -541,7 +546,7 @@ const P = ({
               {
                 type: "button",
                 onClick: () => b(a),
-                disabled: g,
+                disabled: f,
                 className: "inline-flex items-center px-2 py-1 text-xs font-medium text-blue-700 bg-white border border-blue-300 rounded hover:bg-blue-50 focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed transition-colors",
                 "data-testid": "bulk-mark-unread",
                 children: [
@@ -555,7 +560,7 @@ const P = ({
               {
                 type: "button",
                 onClick: () => b(n),
-                disabled: g,
+                disabled: f,
                 className: "inline-flex items-center px-2 py-1 text-xs font-medium text-text-secondary bg-white border border-border rounded hover:bg-widget-hover focus:outline-none focus:ring-2 focus:ring-text-secondary disabled:opacity-50 disabled:cursor-not-allowed transition-colors",
                 "data-testid": "bulk-archive",
                 children: [
@@ -571,7 +576,7 @@ const P = ({
                 onClick: () => {
                   window.confirm(`Are you sure you want to delete ${c} notification${c !== 1 ? "s" : ""}? This action cannot be undone.`) && b(s);
                 },
-                disabled: g,
+                disabled: f,
                 className: "inline-flex items-center px-2 py-1 text-xs font-medium text-[var(--widget-error)] bg-white border border-[var(--widget-error)]/30 rounded hover:bg-[var(--widget-error)]/10 focus:outline-none focus:ring-2 focus:ring-[var(--widget-error)] disabled:opacity-50 disabled:cursor-not-allowed transition-colors",
                 "data-testid": "bulk-delete",
                 children: [
@@ -585,7 +590,7 @@ const P = ({
               {
                 type: "button",
                 onClick: o,
-                disabled: g,
+                disabled: f,
                 className: "inline-flex items-center px-1 py-1 text-xs font-medium text-text-secondary hover:text-text-primary focus:outline-none focus:ring-2 focus:ring-text-secondary disabled:opacity-50 disabled:cursor-not-allowed transition-colors",
                 "data-testid": "clear-selection",
                 "aria-label": "Clear selection",
@@ -594,7 +599,7 @@ const P = ({
             )
           ] })
         ] }),
-        g && /* @__PURE__ */ i("div", { className: "mt-2 flex items-center gap-2", children: [
+        f && /* @__PURE__ */ i("div", { className: "mt-2 flex items-center gap-2", children: [
           /* @__PURE__ */ t("div", { className: "animate-spin rounded-full h-4 w-4 border-b-2 border-[var(--widget-primary)]" }),
           /* @__PURE__ */ t(
             "span",
@@ -643,16 +648,16 @@ const P = ({
   selectedNotifications: s = [],
   onSelectionChange: o,
   onSelectAll: h,
-  onLoadMore: g,
+  onLoadMore: f,
   hasMore: m = !1,
   className: d = ""
 }) => {
   const y = j(null), c = j(null), [b, v] = k(!1);
   D(() => {
-    if (!(!g || !m || b))
+    if (!(!f || !m || b))
       return y.current = new IntersectionObserver(
-        (f) => {
-          f[0].isIntersecting && m && !b && (v(!0), g(), setTimeout(() => v(!1), 500));
+        (g) => {
+          g[0].isIntersecting && m && !b && (v(!0), f(), setTimeout(() => v(!1), 500));
         },
         {
           root: null,
@@ -662,16 +667,16 @@ const P = ({
       ), c.current && y.current.observe(c.current), () => {
         y.current && y.current.disconnect();
       };
-  }, [g, m, b]);
-  const l = S(async (f, p) => {
+  }, [f, m, b]);
+  const l = S(async (g, p) => {
     try {
-      p.handler && await p.handler(f), n && p.type && n(f, p);
+      p.handler && await p.handler(g), n && p.type && n(g, p);
     } catch {
     }
-  }, [n]), u = S((f, p) => {
-    o && o(f, p);
+  }, [n]), u = S((g, p) => {
+    o && o(g, p);
   }, [o]);
-  return r && e.length === 0 ? /* @__PURE__ */ t("div", { className: `flex flex-col h-full bg-widget-background ${d}`, children: /* @__PURE__ */ t(Y, { count: 5 }) }) : a ? /* @__PURE__ */ t("div", { className: `flex flex-col h-full bg-widget-background ${d}`, children: /* @__PURE__ */ t("div", { className: "flex items-center justify-center flex-1 py-12", children: /* @__PURE__ */ t(
+  return r && e.length === 0 ? /* @__PURE__ */ t("div", { className: `flex flex-col h-full bg-widget-background min-w-[20rem] ${d}`, children: /* @__PURE__ */ t(Y, { count: 5 }) }) : a ? /* @__PURE__ */ t("div", { className: `flex flex-col h-full bg-widget-background min-w-[20rem] ${d}`, children: /* @__PURE__ */ t("div", { className: "flex items-center justify-center flex-1 py-12", children: /* @__PURE__ */ t(
     J,
     {
       title: "Error Loading Notifications",
@@ -695,7 +700,7 @@ const P = ({
         }
       )
     }
-  ) }) }) : e.length === 0 ? /* @__PURE__ */ t("div", { className: `flex flex-col h-full bg-widget-background ${d}`, children: /* @__PURE__ */ t("div", { className: "flex items-center justify-center flex-1 py-12", children: /* @__PURE__ */ t(
+  ) }) }) : e.length === 0 ? /* @__PURE__ */ t("div", { className: `flex flex-col h-full bg-widget-background min-w-[20rem] ${d}`, children: /* @__PURE__ */ t("div", { className: "flex items-center justify-center flex-1 py-12", children: /* @__PURE__ */ t(
     J,
     {
       title: "No Notifications",
@@ -719,19 +724,19 @@ const P = ({
         }
       )
     }
-  ) }) }) : /* @__PURE__ */ i("div", { className: `flex flex-col h-full ${d}`, children: [
+  ) }) }) : /* @__PURE__ */ i("div", { className: `flex flex-col h-full min-w-[20rem] ${d}`, children: [
     h && n && /* @__PURE__ */ t(
       Te,
       {
         selectedNotifications: s,
-        onMarkAllAsRead: async (f) => {
+        onMarkAllAsRead: async (g) => {
           try {
-            for (const p of f)
+            for (const p of g)
               n(p, { type: "mark_read", label: "Mark as read", handler: async () => {
               } });
             return {
               success: !0,
-              processedCount: f.length,
+              processedCount: g.length,
               failedCount: 0,
               errors: []
             };
@@ -739,19 +744,19 @@ const P = ({
             return {
               success: !1,
               processedCount: 0,
-              failedCount: f.length,
+              failedCount: g.length,
               errors: [{ notificationId: "", error: p }]
             };
           }
         },
-        onMarkAllAsUnread: async (f) => {
+        onMarkAllAsUnread: async (g) => {
           try {
-            for (const p of f)
+            for (const p of g)
               n(p, { type: "mark_unread", label: "Mark as unread", handler: async () => {
               } });
             return {
               success: !0,
-              processedCount: f.length,
+              processedCount: g.length,
               failedCount: 0,
               errors: []
             };
@@ -759,19 +764,19 @@ const P = ({
             return {
               success: !1,
               processedCount: 0,
-              failedCount: f.length,
+              failedCount: g.length,
               errors: [{ notificationId: "", error: p }]
             };
           }
         },
-        onArchiveAll: async (f) => {
+        onArchiveAll: async (g) => {
           try {
-            for (const p of f)
+            for (const p of g)
               n(p, { type: "archive", label: "Archive", handler: async () => {
               } });
             return {
               success: !0,
-              processedCount: f.length,
+              processedCount: g.length,
               failedCount: 0,
               errors: []
             };
@@ -779,19 +784,19 @@ const P = ({
             return {
               success: !1,
               processedCount: 0,
-              failedCount: f.length,
+              failedCount: g.length,
               errors: [{ notificationId: "", error: p }]
             };
           }
         },
-        onDeleteAll: async (f) => {
+        onDeleteAll: async (g) => {
           try {
-            for (const p of f)
+            for (const p of g)
               n(p, { type: "delete", label: "Delete", handler: async () => {
               } });
             return {
               success: !0,
-              processedCount: f.length,
+              processedCount: g.length,
               failedCount: 0,
               errors: []
             };
@@ -799,7 +804,7 @@ const P = ({
             return {
               success: !1,
               processedCount: 0,
-              failedCount: f.length,
+              failedCount: g.length,
               errors: [{ notificationId: "", error: p }]
             };
           }
@@ -808,15 +813,15 @@ const P = ({
       }
     ),
     /* @__PURE__ */ t("div", { className: "flex-1", children: /* @__PURE__ */ i("div", { children: [
-      e.map((f) => /* @__PURE__ */ t(
+      e.map((g) => /* @__PURE__ */ t(
         Ee,
         {
-          notification: f,
+          notification: g,
           onActionClick: l,
-          isSelected: s.includes(f.id),
-          onSelectionChange: o ? (p) => u(f.id, p) : void 0
+          isSelected: s.includes(g.id),
+          onSelectionChange: o ? (p) => u(g.id, p) : void 0
         },
-        f.id
+        g.id
       )),
       m && /* @__PURE__ */ t("div", { ref: c, className: "py-2", children: b && /* @__PURE__ */ t(Y, { count: 3 }) })
     ] }) })
@@ -829,7 +834,7 @@ const P = ({
   className: s = ""
 }) => {
   const o = Z(() => {
-    const h = e.length, g = e.filter((c) => !c.isRead).length, m = /* @__PURE__ */ new Map();
+    const h = e.length, f = e.filter((c) => !c.isRead).length, m = /* @__PURE__ */ new Map();
     e.forEach((c) => {
       c.tags.forEach((b) => {
         m.set(b, (m.get(b) || 0) + 1);
@@ -845,7 +850,7 @@ const P = ({
       {
         id: "unread",
         label: "Unread",
-        count: g,
+        count: f,
         icon: /* @__PURE__ */ t(ie, { className: "w-4 h-4" })
       }
     ], y = Array.from(m.entries()).sort(([, c], [, b]) => b - c).slice(0, 5).map(([c, b]) => ({
@@ -860,40 +865,31 @@ const P = ({
     "div",
     {
       className: `
-        flex items-center gap-1 overflow-x-auto widget-scrollbar border-b border-[var(--widget-border)] px-2 py-1.5
+        mx-widget-tabs flex items-center gap-1 overflow-x-auto widget-scrollbar border-b border-[var(--widget-border)] px-2 py-1.5 bg-[var(--widget-background)]
         ${s}
       `,
-      style: { backgroundColor: "var(--widget-background)" },
       role: "tablist",
+      "data-mx-widget": "tabs",
       children: o.map((h) => {
-        const g = r === h.id;
+        const f = r === h.id;
         return /* @__PURE__ */ i(
           "button",
           {
             onClick: () => a(h.id),
             className: `
               flex items-center gap-2 px-3 py-1.5 rounded-full text-sm font-medium transition-all whitespace-nowrap outline-none focus:ring-2 focus:ring-offset-1
-              ${g ? "shadow-sm" : "tab-inactive"}
+              ${f ? "shadow-sm bg-[var(--widget-primary)] text-[var(--widget-text)]" : "tab-inactive text-[var(--widget-text-secondary)]"}
             `,
-            style: g ? {
-              backgroundColor: "var(--widget-primary)",
-              color: "#ffffff"
-            } : {
-              color: "var(--widget-text-secondary)"
-            },
             role: "tab",
-            "aria-selected": g,
+            "aria-selected": f,
             "data-testid": `tab-${h.id}`,
             children: [
-              h.icon && /* @__PURE__ */ t("span", { style: { color: g ? "#ffffff" : "var(--widget-text-tertiary)" }, children: h.icon }),
+              h.icon && /* @__PURE__ */ t("span", { className: f ? "text-[var(--widget-text)]" : "text-[var(--widget-text-tertiary)]", children: h.icon }),
               /* @__PURE__ */ t("span", { children: h.label }),
               h.count !== void 0 && h.count > 0 && /* @__PURE__ */ i(
                 "span",
                 {
-                  className: "ml-1 text-[10px] font-semibold",
-                  style: {
-                    color: g ? "#ffffff" : "var(--widget-text-tertiary)"
-                  },
+                  className: `ml-1 text-[10px] font-semibold ${f ? "text-[var(--widget-text)]" : "text-[var(--widget-text-tertiary)]"}`,
                   children: [
                     "(",
                     h.count > 99 ? "99+" : h.count,
@@ -928,27 +924,25 @@ const P = ({
       role: "switch",
       "aria-checked": a,
       disabled: s,
-      className: `
-          relative inline-flex h-5 w-9 flex-shrink-0 rounded-full border-2 border-transparent 
-          transition-colors duration-200 ease-in-out
-          focus:outline-none focus:ring-2 focus:ring-widget-primary focus:ring-offset-2
-          ${a ? "bg-widget-primary" : "bg-gray-300 dark:bg-gray-600"}
-          ${s ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}
-        `,
+      className: `relative inline-flex h-5 w-9 flex-shrink-0 rounded-full border-2 border-transparent 
+                            transition-colors duration-200 ease-in-out
+                            focus:outline-none focus:ring-2 focus:ring-widget-primary focus:ring-offset-2
+                            ${a ? "bg-widget-primary" : "bg-gray-300 dark:bg-gray-600"}
+                            ${s ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}
+                            `,
       onClick: () => !s && n(!a),
       children: /* @__PURE__ */ t(
         "span",
         {
-          className: `
-            pointer-events-none inline-block h-4 w-4 transform rounded-full bg-white shadow-md ring-0 
-            transition duration-200 ease-in-out
-            ${a ? "translate-x-4" : "translate-x-0"}
-          `
+          className: `pointer-events-none inline-block h-4 w-4 transform rounded-full bg-white shadow-md ring-0 
+                                transition duration-200 ease-in-out
+                                ${a ? "translate-x-4" : "translate-x-0"}
+                            `
         }
       )
     }
   )
-] }), Oe = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"], $e = ({
+] }), $e = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"], Oe = ({
   preferences: e,
   onPreferenceChange: r,
   isLoading: a
@@ -956,7 +950,7 @@ const P = ({
   const [n, s] = k({
     global: !0,
     schedule: !1
-  }), [o, h] = k({}), g = (l) => {
+  }), [o, h] = k({}), f = (l) => {
     s((u) => ({ ...u, [l]: !u[l] }));
   }, m = (l) => {
     h((u) => ({ ...u, [l]: !u[l] }));
@@ -964,8 +958,8 @@ const P = ({
     r(`channels.${l}`, u);
   }, y = (l, u) => {
     r(`subscriptions.${l}.enabled`, u);
-  }, c = (l, u, f) => {
-    r(`subscriptions.${l}.channels.${u}`, f);
+  }, c = (l, u, g) => {
+    r(`subscriptions.${l}.channels.${u}`, g);
   }, b = (l) => {
     const u = [...e.deliverySchedule.weekdays];
     u[l] = !u[l], r("deliverySchedule.weekdays", u);
@@ -983,7 +977,7 @@ const P = ({
         return null;
     }
   };
-  return /* @__PURE__ */ i("div", { className: "h-full overflow-y-auto widget-scrollbar p-2", style: { backgroundColor: "var(--widget-background)" }, "data-testid": "preferences-view", children: [
+  return /* @__PURE__ */ i("div", { className: "h-full overflow-y-auto widget-scrollbar p-2 bg-[var(--widget-background)]", "data-testid": "preferences-view", children: [
     a && /* @__PURE__ */ t("div", { className: "absolute inset-0 bg-[var(--widget-bg)]/75 backdrop-blur-sm flex items-center justify-center z-10", children: /* @__PURE__ */ t("div", { className: "w-8 h-8 border-2 border-[var(--widget-primary)] border-t-transparent rounded-full animate-spin" }) }),
     /* @__PURE__ */ i("div", { className: "space-y-2", children: [
       /* @__PURE__ */ i("div", { className: "border border-[var(--widget-border)] rounded-lg overflow-hidden", children: [
@@ -991,7 +985,7 @@ const P = ({
           "button",
           {
             type: "button",
-            onClick: () => g("global"),
+            onClick: () => f("global"),
             className: "w-full flex items-center justify-between px-2 py-1.5 bg-[var(--widget-bg-secondary)] hover:bg-[var(--widget-bg-hover)] transition-colors",
             children: [
               /* @__PURE__ */ i("div", { className: "flex items-center gap-2", children: [
@@ -1002,7 +996,7 @@ const P = ({
             ]
           }
         ),
-        n.global && /* @__PURE__ */ i("div", { className: "px-2 pb-1.5 divide-y divide-border-light", style: { backgroundColor: "var(--widget-background)" }, children: [
+        n.global && /* @__PURE__ */ i("div", { className: "px-2 pb-1.5 divide-y divide-border-light bg-[var(--widget-background)]", children: [
           /* @__PURE__ */ t(
             M,
             {
@@ -1038,12 +1032,12 @@ const P = ({
           )
         ] })
       ] }),
-      /* @__PURE__ */ i("div", { className: "border border-[var(--widget-border)] rounded-lg overflow-hidden", style: { backgroundColor: "var(--widget-background)" }, children: [
+      /* @__PURE__ */ i("div", { className: "border border-[var(--widget-border)] rounded-lg overflow-hidden bg-[var(--widget-background)]", children: [
         /* @__PURE__ */ i(
           "button",
           {
             type: "button",
-            onClick: () => g("schedule"),
+            onClick: () => f("schedule"),
             className: "w-full flex items-center justify-between px-2 py-1.5 bg-[var(--widget-bg-secondary)] hover:bg-[var(--widget-bg-hover)] transition-colors",
             children: [
               /* @__PURE__ */ i("div", { className: "flex items-center gap-2", children: [
@@ -1073,25 +1067,25 @@ const P = ({
             ]
           }
         ),
-        n.schedule && /* @__PURE__ */ i("div", { className: "px-2 py-1.5 space-y-2 animate-in slide-in-from-top-2 duration-200", style: { backgroundColor: "var(--widget-background)" }, children: [
+        n.schedule && /* @__PURE__ */ i("div", { className: "px-2 py-1.5 space-y-2 animate-in slide-in-from-top-2 duration-200 bg-[var(--widget-background)]", children: [
           /* @__PURE__ */ t("div", { className: "text-sm text-[var(--widget-text-secondary)]", children: "Allow notifications between:" }),
           /* @__PURE__ */ i("div", { className: "grid grid-cols-[auto_1fr_auto_auto] gap-x-4 gap-y-3 items-center", children: [
             /* @__PURE__ */ t("div", { className: "col-span-2 text-xs font-semibold text-[var(--widget-text-tertiary)] pl-1", children: "Days" }),
             /* @__PURE__ */ t("div", { className: "text-xs font-semibold text-[var(--widget-text-tertiary)] w-[88px]", children: "From" }),
             /* @__PURE__ */ t("div", { className: "text-xs font-semibold text-[var(--widget-text-tertiary)] w-[88px]", children: "To" }),
-            Oe.map((l, u) => {
-              const f = e.deliverySchedule.weekdays[u];
+            $e.map((l, u) => {
+              const g = e.deliverySchedule.weekdays[u];
               return /* @__PURE__ */ i(z.Fragment, { children: [
                 /* @__PURE__ */ t("div", { className: "flex items-center h-8", children: /* @__PURE__ */ t(
                   M,
                   {
                     id: `day-${u}`,
-                    checked: f,
+                    checked: g,
                     onChange: () => b(u),
                     disabled: a
                   }
                 ) }),
-                /* @__PURE__ */ t("div", { className: `text-sm ${f ? "text-text-primary" : "text-text-tertiary"}`, children: l }),
+                /* @__PURE__ */ t("div", { className: `text-sm ${g ? "text-text-primary" : "text-text-tertiary"}`, children: l }),
                 /* @__PURE__ */ t("div", { className: "w-[88px]", children: /* @__PURE__ */ t(
                   "input",
                   {
@@ -1099,7 +1093,7 @@ const P = ({
                     className: "w-full px-2 py-1 bg-widget-background border border-border rounded text-sm text-text-primary focus:outline-none focus:ring-1 focus:ring-widget-primary disabled:opacity-50 disabled:bg-widget-hover",
                     value: e.deliverySchedule.quietHours.start,
                     onChange: (p) => r("deliverySchedule.quietHours.start", p.target.value),
-                    disabled: a || !f
+                    disabled: a || !g
                   }
                 ) }),
                 /* @__PURE__ */ t("div", { className: "w-[88px]", children: /* @__PURE__ */ t(
@@ -1109,7 +1103,7 @@ const P = ({
                     className: "w-full px-2 py-1 bg-widget-background border border-border rounded text-sm text-text-primary focus:outline-none focus:ring-1 focus:ring-widget-primary disabled:opacity-50 disabled:bg-widget-hover",
                     value: e.deliverySchedule.quietHours.end,
                     onChange: (p) => r("deliverySchedule.quietHours.end", p.target.value),
-                    disabled: a || !f
+                    disabled: a || !g
                   }
                 ) })
               ] }, l);
@@ -1141,7 +1135,7 @@ const P = ({
             ]
           }
         ),
-        o[l.workflowId] && l.enabled && /* @__PURE__ */ i("div", { className: "px-2 pb-1.5 divide-y divide-border-light", style: { backgroundColor: "var(--widget-background)" }, children: [
+        o[l.workflowId] && l.enabled && /* @__PURE__ */ i("div", { className: "px-2 pb-1.5 divide-y divide-border-light bg-[var(--widget-background)]", children: [
           /* @__PURE__ */ t(
             M,
             {
@@ -1357,12 +1351,12 @@ const Le = ({ onRetry: e, error: r }) => /* @__PURE__ */ i(
   onViewChange: s,
   notifications: o,
   onNotificationAction: h,
-  preferences: g,
+  preferences: f,
   onPreferenceChange: m,
   isPreferencesLoading: d = !1,
   size: y = "medium"
 }) => {
-  const c = j(null), b = j(null), [v, l] = k("all"), [u, f] = k([]), [p, A] = k(""), _ = S(() => {
+  const c = j(null), b = j(null), [v, l] = k("all"), [u, g] = k([]), [p, A] = k(""), _ = S(() => {
     const x = window.__notificationSDK?.config, N = window.__notificationSDK?.client;
     if (!x || !N) return null;
     const { tenantId: C, environmentId: H, subscriberId: W } = x;
@@ -1377,9 +1371,9 @@ const Le = ({ onRetry: e, error: r }) => /* @__PURE__ */ i(
     } catch (C) {
       return { success: !1, processedCount: 0, failedCount: x.length, errors: [{ notificationId: "", error: C }] };
     }
-  }, [_]), le = Z(() => De(o, v, p), [o, v, p]), O = S((x) => {
+  }, [_]), le = Z(() => De(o, v, p), [o, v, p]), $ = S((x) => {
     c.current && !c.current.contains(x.target) && r();
-  }, [r]), $ = S((x) => {
+  }, [r]), O = S((x) => {
     x.key === "Escape" && r();
   }, [r]), L = S((x) => {
     if (!(!e || !c.current) && x.key === "Tab") {
@@ -1391,13 +1385,13 @@ const Le = ({ onRetry: e, error: r }) => /* @__PURE__ */ i(
       x.shiftKey ? document.activeElement === C && (H.focus(), x.preventDefault()) : document.activeElement === H && (C.focus(), x.preventDefault());
     }
   }, [e]);
-  if (D(() => (e ? (b.current = document.activeElement, document.addEventListener("mousedown", O), document.addEventListener("keydown", $), document.addEventListener("keydown", L), setTimeout(() => {
+  if (D(() => (e ? (b.current = document.activeElement, document.addEventListener("mousedown", $), document.addEventListener("keydown", O), document.addEventListener("keydown", L), setTimeout(() => {
     c.current?.querySelector(
       'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
     )?.focus();
-  }, 0)) : (b.current && b.current.focus(), l("all"), f([]), A("")), () => {
-    document.removeEventListener("mousedown", O), document.removeEventListener("keydown", $), document.removeEventListener("keydown", L);
-  }), [e, O, $, L]), !e) return null;
+  }, 0)) : (b.current && b.current.focus(), l("all"), g([]), A("")), () => {
+    document.removeEventListener("mousedown", $), document.removeEventListener("keydown", O), document.removeEventListener("keydown", L);
+  }), [e, $, O, L]), !e) return null;
   const oe = {
     left: "left-0 origin-top-left",
     right: "right-0 origin-top-right"
@@ -1416,23 +1410,23 @@ const Le = ({ onRetry: e, error: r }) => /* @__PURE__ */ i(
       {
         ref: c,
         className: `
-          absolute top-full mt-2 ${oe[a]}
+          mx-widget-popover absolute top-full mt-2 ${oe[a]}
           w-[var(--widget-popover-width,400px)] max-h-[var(--widget-popover-max-height,580px)]
           border border-[var(--widget-border)] rounded-2xl overflow-hidden
-          shadow-[var(--widget-shadow-xl)]
+          shadow-[var(--widget-shadow-xl)] bg-[var(--widget-background)]
           z-50 flex flex-col
           animate-in fade-in-0 zoom-in-95 duration-200
           max-sm:fixed max-sm:inset-x-4 max-sm:top-16 max-sm:bottom-4
           max-sm:w-auto max-sm:max-w-none max-sm:max-h-[calc(100vh-120px)]
         `,
-        style: { backgroundColor: "var(--widget-background)" },
         role: "dialog",
         "aria-modal": "true",
         "aria-label": "Notifications",
         "data-testid": "inbox-popover",
+        "data-mx-widget": "popover",
         children: [
-          /* @__PURE__ */ i("div", { className: "flex-shrink-0 flex items-center justify-between px-4 py-3 border-b border-[var(--widget-border)]", style: { backgroundColor: "var(--widget-background)" }, children: [
-            /* @__PURE__ */ t("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ t("h2", { className: "text-base font-semibold", style: { color: "var(--widget-text)" }, children: n === "notifications" ? "Notifications" : "Preferences" }) }),
+          /* @__PURE__ */ i("div", { className: "flex-shrink-0 flex items-center justify-between px-4 py-3 border-b border-[var(--widget-border)] bg-[var(--widget-background)]", children: [
+            /* @__PURE__ */ t("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ t("h2", { className: "text-base font-semibold text-[var(--widget-text)]", children: n === "notifications" ? "Notifications" : "Preferences" }) }),
             /* @__PURE__ */ i("div", { className: "flex items-center gap-1", children: [
               n === "notifications" && /* @__PURE__ */ t(
                 "button",
@@ -1470,7 +1464,7 @@ const Le = ({ onRetry: e, error: r }) => /* @__PURE__ */ i(
             ] })
           ] }),
           n === "notifications" ? /* @__PURE__ */ i(E, { children: [
-            /* @__PURE__ */ t("div", { className: "flex-shrink-0 px-4 py-2.5 border-b border-[var(--widget-border)]", style: { backgroundColor: "var(--widget-background)" }, children: /* @__PURE__ */ i("div", { className: "relative", children: [
+            /* @__PURE__ */ t("div", { className: "flex-shrink-0 px-4 py-2.5 border-b border-[var(--widget-border)] bg-[var(--widget-background)]", children: /* @__PURE__ */ i("div", { className: "relative", children: [
               /* @__PURE__ */ t("div", { className: "absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none", children: /* @__PURE__ */ t(we, { className: "w-5 h-5 text-[var(--widget-text-tertiary)]" }) }),
               /* @__PURE__ */ t(
                 "input",
@@ -1502,14 +1496,14 @@ const Le = ({ onRetry: e, error: r }) => /* @__PURE__ */ i(
                 size: y
               }
             ),
-            /* @__PURE__ */ t("div", { className: "flex-1 overflow-y-auto widget-scrollbar", style: { backgroundColor: "var(--widget-background)", maxHeight: "calc(var(--widget-popover-max-height) - 200px)" }, children: /* @__PURE__ */ t(Q, { fallback: /* @__PURE__ */ t(Le, {}), children: /* @__PURE__ */ t(
+            /* @__PURE__ */ t("div", { className: "flex-1 overflow-y-auto widget-scrollbar bg-[var(--widget-background)] max-h-[calc(var(--widget-popover-max-height)-200px)]", children: /* @__PURE__ */ t(Q, { fallback: /* @__PURE__ */ t(Le, {}), children: /* @__PURE__ */ t(
               Ie,
               {
                 notifications: le,
                 onNotificationAction: h
               }
             ) }) }),
-            F > 0 && /* @__PURE__ */ t("div", { className: "flex-shrink-0 px-4 py-2.5 border-t border-[var(--widget-border)]", style: { backgroundColor: "var(--widget-bg-hover)" }, children: /* @__PURE__ */ t(
+            F > 0 && /* @__PURE__ */ t("div", { className: "flex-shrink-0 px-4 py-2.5 border-t border-[var(--widget-border)] bg-[var(--widget-bg-hover)]", children: /* @__PURE__ */ t(
               "button",
               {
                 type: "button",
@@ -1522,10 +1516,10 @@ const Le = ({ onRetry: e, error: r }) => /* @__PURE__ */ i(
                 children: "Mark all as read"
               }
             ) })
-          ] }) : /* @__PURE__ */ t("div", { className: "flex-1 overflow-y-auto widget-scrollbar", children: /* @__PURE__ */ t(Q, { fallback: /* @__PURE__ */ t(X, {}), children: g && m ? /* @__PURE__ */ t(
-            $e,
+          ] }) : /* @__PURE__ */ t("div", { className: "flex-1 overflow-y-auto widget-scrollbar", children: /* @__PURE__ */ t(Q, { fallback: /* @__PURE__ */ t(X, {}), children: f && m ? /* @__PURE__ */ t(
+            Oe,
             {
-              preferences: g,
+              preferences: f,
               onPreferenceChange: m,
               isLoading: d,
               onBack: () => s("notifications")
@@ -1543,8 +1537,8 @@ export {
   qe as L,
   We as M,
   Ee as N,
-  $e as P,
+  Oe as P,
   Ke as S,
   Ue as a
 };
-//# sourceMappingURL=components-D8XxiFEB.js.map
+//# sourceMappingURL=components-Dq8aSwWR.js.map