fansunited-frontend-components 0.0.38 → 0.0.39

package/Discussion.js

@@ -1,42 +1,41 @@
-import { jsx as r, jsxs as L, Fragment as De } from "react/jsx-runtime";
-import * as y from "react";
-import ho, { useState as w, useEffect as Ce, useCallback as go } from "react";
-import { _ as x, j as _e, ad as fe, l as $e, G as Le, af as we, s as J, p as ie, k as ae, q as Y, H as Ae, P as o, r as U, t as ce, n as ve, m as he, K as yo, L as bo, av as xo, ah as Co, aw as Ro, as as Po, at as So, g as Mo, a0 as ne, x as Z, w as de, v as ue, B as A, a5 as Q, T as K, c as G, au as Be, a1 as ze, aj as Te, ak as Io, ae as Do } from "./chunks/ConstantsProvider-YKCgQ1mh.js";
-import { P as zo } from "./chunks/Portal-CfeOliT5.js";
-import { C as To, M as ko, d as Eo, a as He, b as je, S as Oo } from "./chunks/Spinner-kT93nizf.js";
-import "react-dom";
-import { C as $o, u as Vo, T as Ue } from "./chunks/Textarea-EApa88SY.js";
-import { L as pe, l as Fo, a as No, d as _o, g as Pe, C as Lo, e as ke, f as wo, b as Ao, i as Bo, s as Ho, V as jo, G as Uo, j as Ko, S as Wo, R as Go, p as Jo, h as qo, F as Se, x as Ke, v as Xo, w as Yo } from "./chunks/Select-DSxMtwH4.js";
-import { g as Qo, A as Zo, S as et } from "./chunks/Snackbar-DIH2D4Gx.js";
-const Ee = /* @__PURE__ */ y.createContext(null);
-process.env.NODE_ENV !== "production" && (Ee.displayName = "DropdownContext");
-const Me = {
+import { jsx as r, jsxs as F, Fragment as Me } from "react/jsx-runtime";
+import * as I from "react";
+import q, { useState as H, useEffect as be, useCallback as Ae, useRef as Ie } from "react";
+import { _ as M, j as Ke, ad as xe, l as Be, Z as We, af as Ge, s as Q, p as ue, k as pe, q as Z, K as Je, P as t, r as G, t as me, n as Ce, m as Re, Q as Co, R as Ro, av as Po, ak as So, aw as Io, as as Mo, at as Do, g as zo, a0 as le, x as te, w as ae, v as De, f as re, B as L, a5 as oe, T as W, d as J, a1 as we, am as Ne, an as To, i as Eo, c as Oo, C as $o, a as ko, E as Vo, b as wo } from "./chunks/ConstantsProvider-BPJJz9fq.js";
+import { C as No, M as _o, d as Lo, a as qe, b as Xe, S as Ee } from "./chunks/Spinner-m59ZJZ35.js";
+import { createPortal as Fo } from "react-dom";
+import { C as Ao, u as Bo, T as Ye } from "./chunks/Textarea-Bzlb89Zp.js";
+import { L as ye, l as Ho, a as jo, e as Uo, h as Oe, b as Ko, f as _e, g as Wo, d as Go, j as Jo, s as qo, V as Xo, G as Yo, k as Qo, S as Zo, R as et, q as ot, i as tt, F as $e, y as Qe, w as rt, x as nt } from "./chunks/CheckCircle-D-GH16Lb.js";
+import { g as st, A as it, N as Ze } from "./chunks/Notification-Bwcoljir.js";
+const Le = /* @__PURE__ */ I.createContext(null);
+process.env.NODE_ENV !== "production" && (Le.displayName = "DropdownContext");
+const ke = {
   blur: "dropdown:blur",
   escapeKeyDown: "dropdown:escapeKeyDown",
   toggle: "dropdown:toggle",
   open: "dropdown:open",
   close: "dropdown:close"
 };
-function ot(t, e) {
-  if (e.type === pe.itemHover)
-    return x({}, t, {
+function lt(o, e) {
+  if (e.type === ye.itemHover)
+    return M({}, o, {
       highlightedValue: e.item
     });
-  const n = Fo(t, e);
+  const n = Ho(o, e);
   if (n.highlightedValue === null && e.context.items.length > 0)
-    return x({}, n, {
+    return M({}, n, {
       highlightedValue: e.context.items[0]
     });
-  if (e.type === pe.keyDown && e.event.key === "Escape")
-    return x({}, n, {
+  if (e.type === ye.keyDown && e.event.key === "Escape")
+    return M({}, n, {
       open: !1
     });
-  if (e.type === pe.blur) {
+  if (e.type === ye.blur) {
     var a;
     if (!((a = e.context.listboxRef.current) != null && a.contains(e.event.relatedTarget))) {
-      var l, s;
-      const c = (l = e.context.listboxRef.current) == null ? void 0 : l.getAttribute("id"), i = (s = e.event.relatedTarget) == null ? void 0 : s.getAttribute("aria-controls");
-      return c && i && c === i ? n : x({}, n, {
+      var l, i;
+      const c = (l = e.context.listboxRef.current) == null ? void 0 : l.getAttribute("id"), s = (i = e.event.relatedTarget) == null ? void 0 : i.getAttribute("aria-controls");
+      return c && s && c === s ? n : M({}, n, {
         open: !1,
         highlightedValue: e.context.items[0]
       });
@@ -44,7 +43,7 @@ function ot(t, e) {
   }
   return n;
 }
-const tt = {
+const at = {
   dispatch: () => {
   },
   popupId: "",
@@ -58,151 +57,151 @@ const tt = {
   },
   triggerElement: null
 };
-function nt(t = {}) {
+function ct(o = {}) {
   var e, n;
   const {
     listboxRef: a,
     onItemsChange: l,
-    id: s,
+    id: i,
     disabledItemsFocusable: c = !0,
-    disableListWrap: i = !1,
-    autoFocus: d = !0,
-    componentName: p = "useMenu"
-  } = t, f = y.useRef(null), g = _e(f, a), m = (e = fe(s)) != null ? e : "", {
+    disableListWrap: s = !1,
+    autoFocus: u = !0,
+    componentName: d = "useMenu"
+  } = o, p = I.useRef(null), g = Ke(p, a), x = (e = xe(i)) != null ? e : "", {
     state: {
-      open: v,
-      changeReason: C
+      open: f,
+      changeReason: b
     },
-    dispatch: S,
-    triggerElement: P,
-    registerPopup: b
-  } = (n = y.useContext(Ee)) != null ? n : tt, M = y.useRef(v), {
-    subitems: u,
-    contextValue: E
-  } = No(), F = y.useMemo(() => Array.from(u.keys()), [u]), I = y.useCallback((h) => {
-    var O, k;
-    return h == null ? null : (O = (k = u.get(h)) == null ? void 0 : k.ref.current) != null ? O : null;
-  }, [u]), D = y.useCallback((h) => {
-    var O;
-    return (u == null || (O = u.get(h)) == null ? void 0 : O.disabled) || !1;
-  }, [u]), z = y.useCallback((h) => {
-    var O, k;
-    return ((O = u.get(h)) == null ? void 0 : O.label) || ((k = u.get(h)) == null || (k = k.ref.current) == null ? void 0 : k.innerText);
-  }, [u]), B = y.useMemo(() => ({
-    listboxRef: f
-  }), [f]), {
-    dispatch: H,
-    getRootProps: $,
-    contextValue: T,
+    dispatch: C,
+    triggerElement: R,
+    registerPopup: S
+  } = (n = I.useContext(Le)) != null ? n : at, T = I.useRef(f), {
+    subitems: y,
+    contextValue: $
+  } = jo(), v = I.useMemo(() => Array.from(y.keys()), [y]), E = I.useCallback((m) => {
+    var D, z;
+    return m == null ? null : (D = (z = y.get(m)) == null ? void 0 : z.ref.current) != null ? D : null;
+  }, [y]), h = I.useCallback((m) => {
+    var D;
+    return (y == null || (D = y.get(m)) == null ? void 0 : D.disabled) || !1;
+  }, [y]), O = I.useCallback((m) => {
+    var D, z;
+    return ((D = y.get(m)) == null ? void 0 : D.label) || ((z = y.get(m)) == null || (z = z.ref.current) == null ? void 0 : z.innerText);
+  }, [y]), N = I.useMemo(() => ({
+    listboxRef: p
+  }), [p]), {
+    dispatch: A,
+    getRootProps: j,
+    contextValue: U,
     state: {
-      highlightedValue: R
+      highlightedValue: B
     },
-    rootRef: V
-  } = _o({
+    rootRef: K
+  } = Uo({
     disabledItemsFocusable: c,
-    disableListWrap: i,
+    disableListWrap: s,
     focusManagement: "DOM",
-    getItemDomElement: I,
+    getItemDomElement: E,
     getInitialState: () => ({
       selectedValues: [],
       highlightedValue: null
     }),
-    isItemDisabled: D,
-    items: F,
-    getItemAsString: z,
+    isItemDisabled: h,
+    items: v,
+    getItemAsString: O,
     rootRef: g,
     onItemsChange: l,
-    reducerActionContext: B,
+    reducerActionContext: N,
     selectionMode: "none",
-    stateReducer: ot,
-    componentName: p
+    stateReducer: lt,
+    componentName: d
   });
-  $e(() => {
-    b(m);
-  }, [m, b]), $e(() => {
-    v && (C == null ? void 0 : C.type) === "keydown" && C.key === "ArrowUp" && H({
-      type: pe.highlightLast,
-      event: C
+  Be(() => {
+    S(x);
+  }, [x, S]), Be(() => {
+    f && (b == null ? void 0 : b.type) === "keydown" && b.key === "ArrowUp" && A({
+      type: ye.highlightLast,
+      event: b
     });
-  }, [v, C, H]), y.useEffect(() => {
-    if (v && d && R && !M.current) {
-      var h;
-      (h = u.get(R)) == null || (h = h.ref) == null || (h = h.current) == null || h.focus();
+  }, [f, b, A]), I.useEffect(() => {
+    if (f && u && B && !T.current) {
+      var m;
+      (m = y.get(B)) == null || (m = m.ref) == null || (m = m.current) == null || m.focus();
     }
-  }, [v, d, R, u, F]), y.useEffect(() => {
-    var h;
-    if ((h = f.current) != null && h.contains(document.activeElement) && R !== null) {
-      var O;
-      u == null || (O = u.get(R)) == null || (O = O.ref.current) == null || O.focus();
+  }, [f, u, B, y, v]), I.useEffect(() => {
+    var m;
+    if ((m = p.current) != null && m.contains(document.activeElement) && B !== null) {
+      var D;
+      y == null || (D = y.get(B)) == null || (D = D.ref.current) == null || D.focus();
     }
-  }, [R, u]);
-  const N = (h) => (O) => {
-    var k, ee;
-    (k = h.onBlur) == null || k.call(h, O), !O.defaultMuiPrevented && ((ee = f.current) != null && ee.contains(O.relatedTarget) || O.relatedTarget === P || S({
-      type: Me.blur,
-      event: O
+  }, [B, y]);
+  const k = (m) => (D) => {
+    var z, ee;
+    (z = m.onBlur) == null || z.call(m, D), !D.defaultMuiPrevented && ((ee = p.current) != null && ee.contains(D.relatedTarget) || D.relatedTarget === R || C({
+      type: ke.blur,
+      event: D
     }));
-  }, j = (h) => (O) => {
-    var k;
-    (k = h.onKeyDown) == null || k.call(h, O), !O.defaultMuiPrevented && O.key === "Escape" && S({
-      type: Me.escapeKeyDown,
-      event: O
+  }, _ = (m) => (D) => {
+    var z;
+    (z = m.onKeyDown) == null || z.call(m, D), !D.defaultMuiPrevented && D.key === "Escape" && C({
+      type: ke.escapeKeyDown,
+      event: D
     });
-  }, q = (h = {}) => ({
-    onBlur: N(h),
-    onKeyDown: j(h)
-  }), X = (h = {}) => {
-    const O = Pe(q, $), k = Le(h);
-    return x({}, h, k, O(k), {
-      id: m,
+  }, P = (m = {}) => ({
+    onBlur: k(m),
+    onKeyDown: _(m)
+  }), V = (m = {}) => {
+    const D = Oe(P, j), z = We(m);
+    return M({}, m, z, D(z), {
+      id: x,
       role: "menu"
     });
   };
-  return y.useDebugValue({
-    subitems: u,
-    highlightedValue: R
+  return I.useDebugValue({
+    subitems: y,
+    highlightedValue: B
   }), {
-    contextValue: x({}, E, T),
-    dispatch: H,
-    getListboxProps: X,
-    highlightedValue: R,
-    listboxRef: V,
-    menuItems: u,
-    open: v,
-    triggerElement: P
+    contextValue: M({}, $, U),
+    dispatch: A,
+    getListboxProps: V,
+    highlightedValue: B,
+    listboxRef: K,
+    menuItems: y,
+    open: f,
+    triggerElement: R
   };
 }
-function rt(t) {
+function dt(o) {
   const {
     value: e,
     children: n
-  } = t, {
+  } = o, {
     dispatch: a,
     getItemIndex: l,
-    getItemState: s,
+    getItemState: i,
     registerItem: c,
-    totalSubitemCount: i
-  } = e, d = y.useMemo(() => ({
+    totalSubitemCount: s
+  } = e, u = I.useMemo(() => ({
     dispatch: a,
-    getItemState: s,
+    getItemState: i,
     getItemIndex: l
-  }), [a, l, s]), p = y.useMemo(() => ({
+  }), [a, l, i]), d = I.useMemo(() => ({
     getItemIndex: l,
     registerItem: c,
-    totalSubitemCount: i
-  }), [c, l, i]);
-  return /* @__PURE__ */ r(Lo.Provider, {
-    value: p,
-    children: /* @__PURE__ */ r(ke.Provider, {
-      value: d,
+    totalSubitemCount: s
+  }), [c, l, s]);
+  return /* @__PURE__ */ r(Ko.Provider, {
+    value: d,
+    children: /* @__PURE__ */ r(_e.Provider, {
+      value: u,
       children: n
     })
   });
 }
-function st(t) {
-  return `menu-item-${t.size}`;
+function ut(o) {
+  return `menu-item-${o.size}`;
 }
-const lt = {
+const pt = {
   dispatch: () => {
   },
   popupId: "",
@@ -216,132 +215,132 @@ const lt = {
   },
   triggerElement: null
 };
-function it(t) {
+function mt(o) {
   var e;
   const {
     disabled: n = !1,
     id: a,
     rootRef: l,
-    label: s,
+    label: i,
     disableFocusOnHover: c = !1
-  } = t, i = fe(a), d = y.useRef(null), p = y.useMemo(() => ({
+  } = o, s = xe(a), u = I.useRef(null), d = I.useMemo(() => ({
     disabled: n,
-    id: i ?? "",
-    label: s,
-    ref: d
-  }), [n, i, s]), {
-    dispatch: f
-  } = (e = y.useContext(Ee)) != null ? e : lt, {
+    id: s ?? "",
+    label: i,
+    ref: u
+  }), [n, s, i]), {
+    dispatch: p
+  } = (e = I.useContext(Le)) != null ? e : pt, {
     getRootProps: g,
-    highlighted: m
-  } = wo({
-    item: i,
+    highlighted: x
+  } = Wo({
+    item: s,
     handlePointerOverEvents: !c
   }), {
-    index: v,
-    totalItemCount: C
-  } = Ao(i ?? st, p), {
-    getRootProps: S,
-    focusVisible: P,
-    rootRef: b
-  } = we({
+    index: f,
+    totalItemCount: b
+  } = Go(s ?? ut, d), {
+    getRootProps: C,
+    focusVisible: R,
+    rootRef: S
+  } = Ge({
     disabled: n,
     focusableWhenDisabled: !0
-  }), M = _e(b, l, d);
-  y.useDebugValue({
-    id: i,
-    highlighted: m,
+  }), T = Ke(S, l, u);
+  I.useDebugValue({
+    id: s,
+    highlighted: x,
     disabled: n,
-    label: s
+    label: i
   });
-  const u = (I) => (D) => {
-    var z;
-    (z = I.onClick) == null || z.call(I, D), !D.defaultMuiPrevented && f({
-      type: Me.close,
-      event: D
+  const y = (E) => (h) => {
+    var O;
+    (O = E.onClick) == null || O.call(E, h), !h.defaultMuiPrevented && p({
+      type: ke.close,
+      event: h
     });
-  }, E = (I = {}) => x({}, I, {
-    onClick: u(I)
+  }, $ = (E = {}) => M({}, E, {
+    onClick: y(E)
   });
-  function F(I = {}) {
-    const D = Le(I), z = Pe(E, Pe(S, g));
-    return x({}, I, D, z(D), {
-      id: i,
-      ref: M,
+  function v(E = {}) {
+    const h = We(E), O = Oe($, Oe(C, g));
+    return M({}, E, h, O(h), {
+      id: s,
+      ref: T,
       role: "menuitem"
     });
   }
-  return i === void 0 ? {
-    getRootProps: F,
+  return s === void 0 ? {
+    getRootProps: v,
     disabled: !1,
-    focusVisible: P,
+    focusVisible: R,
     highlighted: !1,
     index: -1,
     totalItemCount: 0,
-    rootRef: M
+    rootRef: T
   } : {
-    getRootProps: F,
+    getRootProps: v,
     disabled: n,
-    focusVisible: P,
-    highlighted: m,
-    index: v,
-    totalItemCount: C,
-    rootRef: M
+    focusVisible: R,
+    highlighted: x,
+    index: f,
+    totalItemCount: b,
+    rootRef: T
   };
 }
-function at(t) {
-  const e = y.useContext(ke);
+function ft(o) {
+  const e = I.useContext(_e);
   if (!e)
     throw new Error("MenuItem: ListContext was not found.");
-  const n = fe(t), {
+  const n = xe(o), {
     getItemState: a,
     dispatch: l
   } = e;
-  let s;
-  n != null ? s = a(n) : s = {
+  let i;
+  n != null ? i = a(n) : i = {
     focusable: !0,
     highlighted: !1,
     selected: !1
   };
   const {
     highlighted: c,
-    selected: i,
-    focusable: d
-  } = s, p = y.useCallback((g) => {
+    selected: s,
+    focusable: u
+  } = i, d = I.useCallback((g) => {
     if (g !== n)
       throw new Error(["Base UI MenuItem: Tried to access the state of another MenuItem.", `itemValue: ${g} | id: ${n}`, "This is unsupported when the MenuItem uses the MenuItemContextStabilizer as a performance optimization."].join("/n"));
     return {
       highlighted: c,
-      selected: i,
-      focusable: d
+      selected: s,
+      focusable: u
     };
-  }, [c, i, d, n]);
+  }, [c, s, u, n]);
   return {
-    contextValue: y.useMemo(() => ({
+    contextValue: I.useMemo(() => ({
       dispatch: l,
-      getItemState: p
-    }), [l, p]),
+      getItemState: d
+    }), [l, d]),
     id: n
   };
 }
-const ct = ["className", "children", "component", "inset", "orientation", "role", "slots", "slotProps"], dt = (t) => {
+const vt = ["className", "children", "component", "inset", "orientation", "role", "slots", "slotProps"], ht = (o) => {
   const {
     orientation: e,
     inset: n
-  } = t, a = {
-    root: ["root", e, n && `inset${U(n)}`]
+  } = o, a = {
+    root: ["root", e, n && `inset${G(n)}`]
   };
-  return ce(a, Qo, {});
-}, ut = J("hr", {
+  return me(a, st, {});
+}, yt = Q("hr", {
   name: "JoyDivider",
   slot: "Root",
-  overridesResolver: (t, e) => e.root
+  overridesResolver: (o, e) => e.root
 })(({
-  theme: t,
+  theme: o,
   ownerState: e
-}) => x({
+}) => M({
   "--Divider-thickness": "1px",
-  "--Divider-lineColor": t.vars.palette.divider
+  "--Divider-lineColor": o.vars.palette.divider
 }, e.inset === "none" && {
   "--_Divider-inset": "0px"
 }, e.inset === "context" && {
@@ -354,8 +353,8 @@ const ct = ["className", "children", "component", "inset", "orientation", "role"
   position: "relative",
   alignSelf: "stretch",
   flexShrink: 0
-}, e.children ? x({
-  "--Divider-gap": t.spacing(1),
+}, e.children ? M({
+  "--Divider-gap": o.spacing(1),
   "--Divider-childPosition": "50%",
   display: "flex",
   flexDirection: e.orientation === "vertical" ? "column" : "row",
@@ -363,7 +362,7 @@ const ct = ["className", "children", "component", "inset", "orientation", "role"
   whiteSpace: "nowrap",
   textAlign: "center",
   border: 0
-}, t.typography["body-sm"], {
+}, o.typography["body-sm"], {
   "&::before, &::after": {
     position: "relative",
     inlineSize: e.orientation === "vertical" ? "var(--Divider-thickness)" : "initial",
@@ -390,48 +389,48 @@ const ct = ["className", "children", "component", "inset", "orientation", "role"
   // use logical size + background is better than border because they work with gradient.
   inlineSize: e.orientation === "vertical" ? "var(--Divider-thickness)" : "initial",
   blockSize: e.orientation === "vertical" ? "initial" : "var(--Divider-thickness)"
-})), Oe = /* @__PURE__ */ y.forwardRef(function(e, n) {
-  const a = ie({
+})), Fe = /* @__PURE__ */ I.forwardRef(function(e, n) {
+  const a = ue({
     props: e,
     name: "JoyDivider"
   }), {
     className: l,
-    children: s,
-    component: c = s != null ? "div" : "hr",
-    inset: i,
-    orientation: d = "horizontal",
-    role: p = c !== "hr" ? "separator" : void 0,
-    slots: f = {},
+    children: i,
+    component: c = i != null ? "div" : "hr",
+    inset: s,
+    orientation: u = "horizontal",
+    role: d = c !== "hr" ? "separator" : void 0,
+    slots: p = {},
     slotProps: g = {}
-  } = a, m = ae(a, ct), v = x({}, a, {
-    inset: i,
-    role: p,
-    orientation: d,
+  } = a, x = pe(a, vt), f = M({}, a, {
+    inset: s,
+    role: d,
+    orientation: u,
     component: c
-  }), C = dt(v), S = x({}, m, {
+  }), b = ht(f), C = M({}, x, {
     component: c,
-    slots: f,
+    slots: p,
     slotProps: g
-  }), [P, b] = Y("root", {
+  }), [R, S] = Z("root", {
     ref: n,
-    className: Ae(C.root, l),
-    elementType: ut,
-    externalForwardedProps: S,
-    ownerState: v,
-    additionalProps: x({
+    className: Je(b.root, l),
+    elementType: yt,
+    externalForwardedProps: C,
+    ownerState: f,
+    additionalProps: M({
       as: c,
-      role: p
-    }, p === "separator" && d === "vertical" && {
+      role: d
+    }, d === "separator" && u === "vertical" && {
       // The implicit aria-orientation of separator is 'horizontal'
       // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/separator_role
       "aria-orientation": "vertical"
     })
   });
-  return /* @__PURE__ */ r(P, x({}, b, {
-    children: s
+  return /* @__PURE__ */ r(R, M({}, S, {
+    children: i
   }));
 });
-process.env.NODE_ENV !== "production" && (Oe.propTypes = {
+process.env.NODE_ENV !== "production" && (Fe.propTypes = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │
   // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
@@ -439,173 +438,173 @@ process.env.NODE_ENV !== "production" && (Oe.propTypes = {
   /**
    * The content of the component.
    */
-  children: o.node,
+  children: t.node,
   /**
    * @ignore
    */
-  className: o.string,
+  className: t.string,
   /**
    * The component used for the root node.
    * Either a string to use a HTML element or a component.
    */
-  component: o.elementType,
+  component: t.elementType,
   /**
    * Class name applied to the divider to shrink or stretch the line based on the orientation.
    */
-  inset: o.oneOfType([o.oneOf(["none", "context"]), o.string]),
+  inset: t.oneOfType([t.oneOf(["none", "context"]), t.string]),
   /**
    * The component orientation.
    * @default 'horizontal'
    */
-  orientation: o.oneOf(["horizontal", "vertical"]),
+  orientation: t.oneOf(["horizontal", "vertical"]),
   /**
    * @ignore
    */
-  role: o.string,
+  role: t.string,
   /**
    * The props used for each slot inside.
    * @default {}
    */
-  slotProps: o.shape({
-    root: o.oneOfType([o.func, o.object])
+  slotProps: t.shape({
+    root: t.oneOfType([t.func, t.object])
   }),
   /**
    * The components used for each slot inside.
    * @default {}
    */
-  slots: o.shape({
-    root: o.elementType
+  slots: t.shape({
+    root: t.elementType
   }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: o.oneOfType([o.arrayOf(o.oneOfType([o.func, o.object, o.bool])), o.func, o.object])
+  sx: t.oneOfType([t.arrayOf(t.oneOfType([t.func, t.object, t.bool])), t.func, t.object])
 });
-Oe.muiName = "Divider";
-function pt(t) {
-  return ve("MuiMenu", t);
+Fe.muiName = "Divider";
+function gt(o) {
+  return Ce("MuiMenu", o);
 }
-he("MuiMenu", ["root", "listbox", "expanded", "colorPrimary", "colorNeutral", "colorDanger", "colorSuccess", "colorWarning", "colorContext", "variantPlain", "variantOutlined", "variantSoft", "variantSolid", "sizeSm", "sizeMd", "sizeLg"]);
-const mt = ["actions", "children", "color", "component", "disablePortal", "keepMounted", "id", "invertedColors", "onItemsChange", "modifiers", "variant", "size", "slots", "slotProps"], ft = (t) => {
+Re("MuiMenu", ["root", "listbox", "expanded", "colorPrimary", "colorNeutral", "colorDanger", "colorSuccess", "colorWarning", "colorContext", "variantPlain", "variantOutlined", "variantSoft", "variantSolid", "sizeSm", "sizeMd", "sizeLg"]);
+const bt = ["actions", "children", "color", "component", "disablePortal", "keepMounted", "id", "invertedColors", "onItemsChange", "modifiers", "variant", "size", "slots", "slotProps"], xt = (o) => {
   const {
     open: e,
     variant: n,
     color: a,
     size: l
-  } = t, s = {
-    root: ["root", e && "expanded", n && `variant${U(n)}`, a && `color${U(a)}`, l && `size${U(l)}`],
+  } = o, i = {
+    root: ["root", e && "expanded", n && `variant${G(n)}`, a && `color${G(a)}`, l && `size${G(l)}`],
     listbox: ["listbox"]
   };
-  return ce(s, pt, {});
-}, Ve = J(Bo, {
+  return me(i, gt, {});
+}, He = Q(Jo, {
   name: "JoyMenu",
   slot: "Root",
-  overridesResolver: (t, e) => e.root
+  overridesResolver: (o, e) => e.root
 })(({
-  theme: t,
+  theme: o,
   ownerState: e
 }) => {
   var n, a;
-  const l = (n = t.variants[e.variant]) == null ? void 0 : n[e.color];
-  return [x({
-    "--focus-outline-offset": `calc(${t.vars.focus.thickness} * -1)`,
+  const l = (n = o.variants[e.variant]) == null ? void 0 : n[e.color];
+  return [M({
+    "--focus-outline-offset": `calc(${o.vars.focus.thickness} * -1)`,
     // to prevent the focus outline from being cut by overflow
-    "--ListItem-stickyBackground": (l == null ? void 0 : l.backgroundColor) || (l == null ? void 0 : l.background) || t.vars.palette.background.popup,
+    "--ListItem-stickyBackground": (l == null ? void 0 : l.backgroundColor) || (l == null ? void 0 : l.background) || o.vars.palette.background.popup,
     "--ListItem-stickyTop": "calc(var(--List-padding, var(--ListDivider-gap)) * -1)"
-  }, Ho, {
-    borderRadius: `var(--List-radius, ${t.vars.radius.sm})`,
-    boxShadow: t.shadow.md,
+  }, qo, {
+    borderRadius: `var(--List-radius, ${o.vars.radius.sm})`,
+    boxShadow: o.shadow.md,
     overflow: "auto",
     // `unstable_popup-zIndex` is a private variable that lets other component, for example Modal, to override the z-index so that the listbox can be displayed above the Modal.
-    zIndex: `var(--unstable_popup-zIndex, ${t.vars.zIndex.popup})`
+    zIndex: `var(--unstable_popup-zIndex, ${o.vars.zIndex.popup})`
   }, !(l != null && l.backgroundColor) && {
-    backgroundColor: t.vars.palette.background.popup
-  }, e.variant === "solid" && e.color && e.invertedColors && yo(e.color)(t), e.variant === "soft" && e.color && e.invertedColors && bo(e.color)(t), (a = t.variants[e.variant]) == null ? void 0 : a[e.color])];
-}), We = /* @__PURE__ */ y.forwardRef(function(e, n) {
+    backgroundColor: o.vars.palette.background.popup
+  }, e.variant === "solid" && e.color && e.invertedColors && Co(e.color)(o), e.variant === "soft" && e.color && e.invertedColors && Ro(e.color)(o), (a = o.variants[e.variant]) == null ? void 0 : a[e.color])];
+}), eo = /* @__PURE__ */ I.forwardRef(function(e, n) {
   var a;
-  const l = ie({
+  const l = ue({
     props: e,
     name: "JoyMenu"
   }), {
-    actions: s,
+    actions: i,
     children: c,
-    color: i = "neutral",
-    component: d,
-    disablePortal: p = !1,
-    keepMounted: f = !1,
+    color: s = "neutral",
+    component: u,
+    disablePortal: d = !1,
+    keepMounted: p = !1,
     id: g,
-    invertedColors: m = !1,
-    onItemsChange: v,
-    modifiers: C,
-    variant: S = "outlined",
-    size: P = "md",
-    slots: b = {},
-    slotProps: M = {}
-  } = l, u = ae(l, mt), {
-    contextValue: E,
-    getListboxProps: F,
-    dispatch: I,
-    open: D,
-    triggerElement: z
-  } = nt({
-    onItemsChange: v,
+    invertedColors: x = !1,
+    onItemsChange: f,
+    modifiers: b,
+    variant: C = "outlined",
+    size: R = "md",
+    slots: S = {},
+    slotProps: T = {}
+  } = l, y = pe(l, bt), {
+    contextValue: $,
+    getListboxProps: v,
+    dispatch: E,
+    open: h,
+    triggerElement: O
+  } = ct({
+    onItemsChange: f,
     id: g,
     listboxRef: n
   });
-  y.useImperativeHandle(s, () => ({
-    dispatch: I,
-    resetHighlight: () => I({
-      type: pe.resetHighlight,
+  I.useImperativeHandle(i, () => ({
+    dispatch: E,
+    resetHighlight: () => E({
+      type: ye.resetHighlight,
       event: null
     })
-  }), [I]);
-  const B = x({}, l, {
-    disablePortal: p,
-    invertedColors: m,
-    color: i,
-    variant: S,
-    size: P,
-    open: D,
+  }), [E]);
+  const N = M({}, l, {
+    disablePortal: d,
+    invertedColors: x,
+    color: s,
+    variant: C,
+    size: R,
+    open: h,
     nesting: !1,
     row: !1
-  }), H = ft(B), $ = x({}, u, {
-    component: d,
-    slots: b,
-    slotProps: M
-  }), T = y.useMemo(() => [{
+  }), A = xt(N), j = M({}, y, {
+    component: u,
+    slots: S,
+    slotProps: T
+  }), U = I.useMemo(() => [{
     name: "offset",
     options: {
       offset: [0, 4]
     }
-  }, ...C || []], [C]), R = xo({
-    elementType: Ve,
-    getSlotProps: F,
-    externalForwardedProps: $,
+  }, ...b || []], [b]), B = Po({
+    elementType: He,
+    getSlotProps: v,
+    externalForwardedProps: j,
     externalSlotProps: {},
-    ownerState: B,
+    ownerState: N,
     additionalProps: {
-      anchorEl: z,
-      open: D && z !== null,
-      disablePortal: p,
-      keepMounted: f,
-      modifiers: T
+      anchorEl: O,
+      open: h && O !== null,
+      disablePortal: d,
+      keepMounted: p,
+      modifiers: U
     },
-    className: H.root
+    className: A.root
   });
-  return /* @__PURE__ */ r(Ve, x({}, R, !((a = l.slots) != null && a.root) && {
-    as: Co,
+  return /* @__PURE__ */ r(He, M({}, B, !((a = l.slots) != null && a.root) && {
+    as: So,
     slots: {
-      root: d || "ul"
+      root: u || "ul"
     }
   }, {
-    children: /* @__PURE__ */ r(rt, {
-      value: E,
-      children: /* @__PURE__ */ r(jo, {
-        variant: m ? void 0 : S,
-        color: i,
-        children: /* @__PURE__ */ r(Uo.Provider, {
+    children: /* @__PURE__ */ r(dt, {
+      value: $,
+      children: /* @__PURE__ */ r(Xo, {
+        variant: x ? void 0 : C,
+        color: s,
+        children: /* @__PURE__ */ r(Yo.Provider, {
           value: "menu",
-          children: /* @__PURE__ */ r(Ko, {
+          children: /* @__PURE__ */ r(Qo, {
             nested: !0,
             children: c
           })
@@ -614,7 +613,7 @@ const mt = ["actions", "children", "color", "component", "disablePortal", "keepM
     })
   }));
 });
-process.env.NODE_ENV !== "production" && (We.propTypes = {
+process.env.NODE_ENV !== "production" && (eo.propTypes = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │
   // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
@@ -623,42 +622,42 @@ process.env.NODE_ENV !== "production" && (We.propTypes = {
    * A ref with imperative actions.
    * It allows to select the first or last menu item.
    */
-  actions: Ro,
+  actions: Io,
   /**
    * @ignore
    */
-  children: o.node,
+  children: t.node,
   /**
    * The color of the component. It supports those theme colors that make sense for this component.
    * @default 'neutral'
    */
-  color: o.oneOf(["danger", "neutral", "primary", "success", "warning"]),
+  color: t.oneOf(["danger", "neutral", "primary", "success", "warning"]),
   /**
    * The component used for the root node.
    * Either a string to use a HTML element or a component.
    */
-  component: o.elementType,
+  component: t.elementType,
   /**
    * The `children` will be under the DOM hierarchy of the parent component.
    * @default false
    */
-  disablePortal: o.bool,
+  disablePortal: t.bool,
   /**
    * @ignore
    */
-  id: o.string,
+  id: t.string,
   /**
    * If `true`, the children with an implicit color prop invert their colors to match the component's variant and color.
    * @default false
    */
-  invertedColors: o.bool,
+  invertedColors: t.bool,
   /**
    * Always keep the children in the DOM.
    * This prop can be useful in SEO situation or
    * when you want to maximize the responsiveness of the Popper.
    * @default false
    */
-  keepMounted: o.bool,
+  keepMounted: t.bool,
   /**
    * Popper.js is based on a "plugin-like" architecture,
    * most of its features are fully encapsulated "modifiers".
@@ -668,145 +667,145 @@ process.env.NODE_ENV !== "production" && (We.propTypes = {
    * For this reason, modifiers should be very performant to avoid bottlenecks.
    * To learn how to create a modifier, [read the modifiers documentation](https://popper.js.org/docs/v2/modifiers/).
    */
-  modifiers: o.arrayOf(o.shape({
-    data: o.object,
-    effect: o.func,
-    enabled: o.bool,
-    fn: o.func,
-    name: o.any,
-    options: o.object,
-    phase: o.oneOf(["afterMain", "afterRead", "afterWrite", "beforeMain", "beforeRead", "beforeWrite", "main", "read", "write"]),
-    requires: o.arrayOf(o.string),
-    requiresIfExists: o.arrayOf(o.string)
+  modifiers: t.arrayOf(t.shape({
+    data: t.object,
+    effect: t.func,
+    enabled: t.bool,
+    fn: t.func,
+    name: t.any,
+    options: t.object,
+    phase: t.oneOf(["afterMain", "afterRead", "afterWrite", "beforeMain", "beforeRead", "beforeWrite", "main", "read", "write"]),
+    requires: t.arrayOf(t.string),
+    requiresIfExists: t.arrayOf(t.string)
   })),
   /**
    * Triggered when focus leaves the menu and the menu should close.
    */
-  onClose: o.func,
+  onClose: t.func,
   /**
    * Function called when the items displayed in the menu change.
    */
-  onItemsChange: o.func,
+  onItemsChange: t.func,
   /**
    * Controls whether the menu is displayed.
    * @default false
    */
-  open: o.bool,
+  open: t.bool,
   /**
    * The size of the component (affect other nested list* components because the `Menu` inherits `List`).
    * @default 'md'
    */
-  size: o.oneOfType([o.oneOf(["sm", "md", "lg"]), o.string]),
+  size: t.oneOfType([t.oneOf(["sm", "md", "lg"]), t.string]),
   /**
    * The props used for each slot inside.
    * @default {}
    */
-  slotProps: o.shape({
-    root: o.oneOfType([o.func, o.object])
+  slotProps: t.shape({
+    root: t.oneOfType([t.func, t.object])
   }),
   /**
    * The components used for each slot inside.
    * @default {}
    */
-  slots: o.shape({
-    root: o.elementType
+  slots: t.shape({
+    root: t.elementType
   }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: o.oneOfType([o.arrayOf(o.oneOfType([o.func, o.object, o.bool])), o.func, o.object]),
+  sx: t.oneOfType([t.arrayOf(t.oneOfType([t.func, t.object, t.bool])), t.func, t.object]),
   /**
    * The [global variant](https://mui.com/joy-ui/main-features/global-variants/) to use.
    * @default 'outlined'
    */
-  variant: o.oneOfType([o.oneOf(["outlined", "plain", "soft", "solid"]), o.string])
+  variant: t.oneOfType([t.oneOf(["outlined", "plain", "soft", "solid"]), t.string])
 });
-function vt(t) {
-  return ve("MuiMenuItem", t);
+function Ct(o) {
+  return Ce("MuiMenuItem", o);
 }
-he("MuiMenuItem", ["root", "focusVisible", "disabled", "selected", "colorPrimary", "colorNeutral", "colorDanger", "colorSuccess", "colorWarning", "colorContext", "variantPlain", "variantSoft", "variantOutlined", "variantSolid"]);
-const ht = ["children", "disabled", "component", "selected", "color", "orientation", "variant", "slots", "slotProps", "id"], gt = (t) => {
+Re("MuiMenuItem", ["root", "focusVisible", "disabled", "selected", "colorPrimary", "colorNeutral", "colorDanger", "colorSuccess", "colorWarning", "colorContext", "variantPlain", "variantSoft", "variantOutlined", "variantSolid"]);
+const Rt = ["children", "disabled", "component", "selected", "color", "orientation", "variant", "slots", "slotProps", "id"], Pt = (o) => {
   const {
     focusVisible: e,
     disabled: n,
     selected: a,
     color: l,
-    variant: s
-  } = t, c = {
-    root: ["root", e && "focusVisible", n && "disabled", a && "selected", l && `color${U(l)}`, s && `variant${U(s)}`]
+    variant: i
+  } = o, c = {
+    root: ["root", e && "focusVisible", n && "disabled", a && "selected", l && `color${G(l)}`, i && `variant${G(i)}`]
   };
-  return ce(c, vt, {});
-}, yt = J(Wo, {
+  return me(c, Ct, {});
+}, St = Q(Zo, {
   name: "JoyMenuItem",
   slot: "Root",
-  overridesResolver: (t, e) => e.root
-})({}), bt = /* @__PURE__ */ y.memo(/* @__PURE__ */ y.forwardRef(function(e, n) {
-  const a = ie({
+  overridesResolver: (o, e) => e.root
+})({}), It = /* @__PURE__ */ I.memo(/* @__PURE__ */ I.forwardRef(function(e, n) {
+  const a = ue({
     props: e,
     name: "JoyMenuItem"
-  }), l = y.useContext(Go), {
-    children: s,
+  }), l = I.useContext(et), {
+    children: i,
     disabled: c = !1,
-    component: i = "li",
-    selected: d = !1,
-    color: p = "neutral",
-    orientation: f = "horizontal",
+    component: s = "li",
+    selected: u = !1,
+    color: d = "neutral",
+    orientation: p = "horizontal",
     variant: g = "plain",
-    slots: m = {},
-    slotProps: v = {},
-    id: C
-  } = a, S = ae(a, ht), {
-    variant: P = g,
-    color: b = p
-  } = Jo(e.variant, e.color), {
-    getRootProps: M,
-    disabled: u,
-    focusVisible: E
-  } = it({
-    id: C,
+    slots: x = {},
+    slotProps: f = {},
+    id: b
+  } = a, C = pe(a, Rt), {
+    variant: R = g,
+    color: S = d
+  } = ot(e.variant, e.color), {
+    getRootProps: T,
+    disabled: y,
+    focusVisible: $
+  } = mt({
+    id: b,
     disabled: c,
     rootRef: n
-  }), F = x({}, a, {
-    component: i,
-    color: b,
-    disabled: u,
-    focusVisible: E,
-    orientation: f,
-    selected: d,
+  }), v = M({}, a, {
+    component: s,
+    color: S,
+    disabled: y,
+    focusVisible: $,
+    orientation: p,
+    selected: u,
     row: l,
-    variant: P
-  }), I = gt(F), D = x({}, S, {
-    component: i,
-    slots: m,
-    slotProps: v
-  }), [z, B] = Y("root", {
+    variant: R
+  }), E = Pt(v), h = M({}, C, {
+    component: s,
+    slots: x,
+    slotProps: f
+  }), [O, N] = Z("root", {
     ref: n,
-    elementType: yt,
-    getSlotProps: M,
-    externalForwardedProps: D,
-    className: I.root,
-    ownerState: F
+    elementType: St,
+    getSlotProps: T,
+    externalForwardedProps: h,
+    className: E.root,
+    ownerState: v
   });
-  return /* @__PURE__ */ r(qo.Provider, {
-    value: f,
-    children: /* @__PURE__ */ r(z, x({}, B, {
-      children: s
+  return /* @__PURE__ */ r(tt.Provider, {
+    value: p,
+    children: /* @__PURE__ */ r(O, M({}, N, {
+      children: i
     }))
   });
-})), Ie = /* @__PURE__ */ y.forwardRef(function(e, n) {
+})), Ve = /* @__PURE__ */ I.forwardRef(function(e, n) {
   const {
     contextValue: a,
     id: l
-  } = at(e.id);
-  return /* @__PURE__ */ r(ke.Provider, {
+  } = ft(e.id);
+  return /* @__PURE__ */ r(_e.Provider, {
     value: a,
-    children: /* @__PURE__ */ r(bt, x({}, e, {
+    children: /* @__PURE__ */ r(It, M({}, e, {
       id: l,
       ref: n
     }))
   });
 });
-process.env.NODE_ENV !== "production" && (Ie.propTypes = {
+process.env.NODE_ENV !== "production" && (Ve.propTypes = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │
   // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
@@ -814,39 +813,39 @@ process.env.NODE_ENV !== "production" && (Ie.propTypes = {
   /**
    * The content of the component.
    */
-  children: o.node,
-  id: o.string
+  children: t.node,
+  id: t.string
 });
-function xt(t) {
-  return ve("MuiModalClose", t);
+function Mt(o) {
+  return Ce("MuiModalClose", o);
 }
-he("MuiModalClose", ["root", "colorPrimary", "colorNeutral", "colorDanger", "colorSuccess", "colorWarning", "colorContext", "variantPlain", "variantOutlined", "variantSoft", "variantSolid", "sizeSm", "sizeMd", "sizeLg"]);
-var Fe;
-const Ct = ["component", "color", "variant", "size", "onClick", "slots", "slotProps"], Rt = (t) => {
+Re("MuiModalClose", ["root", "colorPrimary", "colorNeutral", "colorDanger", "colorSuccess", "colorWarning", "colorContext", "variantPlain", "variantOutlined", "variantSoft", "variantSolid", "sizeSm", "sizeMd", "sizeLg"]);
+var je;
+const Dt = ["component", "color", "variant", "size", "onClick", "slots", "slotProps"], zt = (o) => {
   const {
     variant: e,
     color: n,
     disabled: a,
     focusVisible: l,
-    size: s
-  } = t, c = {
-    root: ["root", a && "disabled", l && "focusVisible", e && `variant${U(e)}`, n && `color${U(n)}`, s && `size${U(s)}`]
+    size: i
+  } = o, c = {
+    root: ["root", a && "disabled", l && "focusVisible", e && `variant${G(e)}`, n && `color${G(n)}`, i && `size${G(i)}`]
   };
-  return ce(c, xt, {});
-}, Pt = J(Po, {
+  return me(c, Mt, {});
+}, Tt = Q(Mo, {
   name: "JoyModalClose",
   slot: "Root",
-  overridesResolver: (t, e) => e.root
+  overridesResolver: (o, e) => e.root
 })(({
-  ownerState: t,
+  ownerState: o,
   theme: e
 }) => {
   var n;
-  return x({}, t.size === "sm" && {
+  return M({}, o.size === "sm" && {
     "--IconButton-size": "1.75rem"
-  }, t.size === "md" && {
+  }, o.size === "md" && {
     "--IconButton-size": "2rem"
-  }, t.size === "lg" && {
+  }, o.size === "lg" && {
     "--IconButton-size": "2.25rem"
   }, {
     position: "absolute",
@@ -855,59 +854,59 @@ const Ct = ["component", "color", "variant", "size", "onClick", "slots", "slotPr
     top: "var(--ModalClose-inset, 0.625rem)",
     right: "var(--ModalClose-inset, 0.625rem)",
     borderRadius: `var(--ModalClose-radius, ${e.vars.radius.sm})`
-  }, !((n = e.variants[t.variant]) != null && (n = n[t.color]) != null && n.backgroundColor) && {
+  }, !((n = e.variants[o.variant]) != null && (n = n[o.color]) != null && n.backgroundColor) && {
     color: e.vars.palette.text.secondary
   });
-}), St = {
+}), Et = {
   plain: "plain",
   outlined: "plain",
   soft: "soft",
   solid: "solid"
-}, Ge = /* @__PURE__ */ y.forwardRef(function(e, n) {
-  var a, l, s, c, i, d;
-  const p = ie({
+}, oo = /* @__PURE__ */ I.forwardRef(function(e, n) {
+  var a, l, i, c, s, u;
+  const d = ue({
     props: e,
     name: "JoyModalClose"
   }), {
-    component: f = "button",
+    component: p = "button",
     color: g = "neutral",
-    variant: m = "plain",
-    size: v = "md",
-    onClick: C,
-    slots: S = {},
-    slotProps: P = {}
-  } = p, b = ae(p, Ct), M = y.useContext(To), u = y.useContext(ko), E = (a = (l = e.variant) != null ? l : St[u == null ? void 0 : u.variant]) != null ? a : m, F = (s = (c = e.color) != null ? c : u == null ? void 0 : u.color) != null ? s : g, I = y.useContext(Eo), D = (i = (d = e.size) != null ? d : I) != null ? i : v, {
-    focusVisible: z,
-    getRootProps: B
-  } = we(x({}, p, {
+    variant: x = "plain",
+    size: f = "md",
+    onClick: b,
+    slots: C = {},
+    slotProps: R = {}
+  } = d, S = pe(d, Dt), T = I.useContext(No), y = I.useContext(_o), $ = (a = (l = e.variant) != null ? l : Et[y == null ? void 0 : y.variant]) != null ? a : x, v = (i = (c = e.color) != null ? c : y == null ? void 0 : y.color) != null ? i : g, E = I.useContext(Lo), h = (s = (u = e.size) != null ? u : E) != null ? s : f, {
+    focusVisible: O,
+    getRootProps: N
+  } = Ge(M({}, d, {
     rootRef: n
-  })), H = x({}, p, {
-    color: F,
-    component: f,
-    variant: E,
-    size: D,
-    focusVisible: z
-  }), $ = Rt(H), [T, R] = Y("root", {
+  })), A = M({}, d, {
+    color: v,
+    component: p,
+    variant: $,
+    size: h,
+    focusVisible: O
+  }), j = zt(A), [U, B] = Z("root", {
     ref: n,
-    elementType: Pt,
-    getSlotProps: B,
-    externalForwardedProps: x({
-      onClick: (V) => {
-        M == null || M(V, "closeClick"), C == null || C(V);
+    elementType: Tt,
+    getSlotProps: N,
+    externalForwardedProps: M({
+      onClick: (K) => {
+        T == null || T(K, "closeClick"), b == null || b(K);
       }
-    }, b, {
-      component: f,
-      slots: S,
-      slotProps: P
+    }, S, {
+      component: p,
+      slots: C,
+      slotProps: R
     }),
-    className: $.root,
-    ownerState: H
+    className: j.root,
+    ownerState: A
   });
-  return /* @__PURE__ */ r(T, x({}, R, {
-    children: Fe || (Fe = /* @__PURE__ */ r($o, {}))
+  return /* @__PURE__ */ r(U, M({}, B, {
+    children: je || (je = /* @__PURE__ */ r(Ao, {}))
   }));
 });
-process.env.NODE_ENV !== "production" && (Ge.propTypes = {
+process.env.NODE_ENV !== "production" && (oo.propTypes = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │
   // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
@@ -915,64 +914,64 @@ process.env.NODE_ENV !== "production" && (Ge.propTypes = {
   /**
    * @ignore
    */
-  children: o.node,
+  children: t.node,
   /**
    * The color of the component. It supports those theme colors that make sense for this component.
    * @default 'neutral'
    */
-  color: o.oneOfType([o.oneOf(["danger", "neutral", "primary", "success", "warning"]), o.string]),
+  color: t.oneOfType([t.oneOf(["danger", "neutral", "primary", "success", "warning"]), t.string]),
   /**
    * The component used for the root node.
    * Either a string to use a HTML element or a component.
    */
-  component: o.elementType,
+  component: t.elementType,
   /**
    * @ignore
    */
-  onClick: o.func,
+  onClick: t.func,
   /**
    * The size of the component.
    * @default 'md'
    */
-  size: o.oneOfType([o.oneOf(["sm", "md", "lg"]), o.string]),
+  size: t.oneOfType([t.oneOf(["sm", "md", "lg"]), t.string]),
   /**
    * The props used for each slot inside.
    * @default {}
    */
-  slotProps: o.shape({
-    root: o.oneOfType([o.func, o.object])
+  slotProps: t.shape({
+    root: t.oneOfType([t.func, t.object])
   }),
   /**
    * The components used for each slot inside.
    * @default {}
    */
-  slots: o.shape({
-    root: o.elementType
+  slots: t.shape({
+    root: t.elementType
   }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: o.oneOfType([o.arrayOf(o.oneOfType([o.func, o.object, o.bool])), o.func, o.object]),
+  sx: t.oneOfType([t.arrayOf(t.oneOfType([t.func, t.object, t.bool])), t.func, t.object]),
   /**
    * The [global variant](https://mui.com/joy-ui/main-features/global-variants/) to use.
    * @default 'plain'
    */
-  variant: o.oneOfType([o.oneOf(["outlined", "plain", "soft", "solid"]), o.string])
+  variant: t.oneOfType([t.oneOf(["outlined", "plain", "soft", "solid"]), t.string])
 });
-function Mt(t) {
-  return ve("MuiRadio", t);
+function Ot(o) {
+  return Ce("MuiRadio", o);
 }
-const me = he("MuiRadio", ["root", "radio", "icon", "action", "input", "label", "checked", "disabled", "focusVisible", "colorPrimary", "colorDanger", "colorNeutral", "colorSuccess", "colorWarning", "colorContext", "sizeSm", "sizeMd", "sizeLg", "variantOutlined", "variantSoft", "variantSolid"]), It = ["checked", "checkedIcon", "defaultChecked", "disabled", "disableIcon", "overlay", "label", "id", "name", "onBlur", "onChange", "onFocus", "onFocusVisible", "readOnly", "required", "color", "variant", "size", "uncheckedIcon", "value", "component", "slots", "slotProps"], Dt = (t) => {
+const ge = Re("MuiRadio", ["root", "radio", "icon", "action", "input", "label", "checked", "disabled", "focusVisible", "colorPrimary", "colorDanger", "colorNeutral", "colorSuccess", "colorWarning", "colorContext", "sizeSm", "sizeMd", "sizeLg", "variantOutlined", "variantSoft", "variantSolid"]), $t = ["checked", "checkedIcon", "defaultChecked", "disabled", "disableIcon", "overlay", "label", "id", "name", "onBlur", "onChange", "onFocus", "onFocusVisible", "readOnly", "required", "color", "variant", "size", "uncheckedIcon", "value", "component", "slots", "slotProps"], kt = (o) => {
   const {
     checked: e,
     disabled: n,
     disableIcon: a,
     focusVisible: l,
-    color: s,
+    color: i,
     variant: c,
-    size: i
-  } = t, d = {
-    root: ["root", e && "checked", n && "disabled", l && "focusVisible", c && `variant${U(c)}`, s && `color${U(s)}`, i && `size${U(i)}`],
+    size: s
+  } = o, u = {
+    root: ["root", e && "checked", n && "disabled", l && "focusVisible", c && `variant${G(c)}`, i && `color${G(i)}`, s && `size${G(s)}`],
     radio: ["radio", e && "checked", n && "disabled"],
     // disabled class is necessary for displaying global variant
     icon: ["icon"],
@@ -986,24 +985,24 @@ const me = he("MuiRadio", ["root", "radio", "icon", "action", "input", "label",
     input: ["input"],
     label: ["label"]
   };
-  return ce(d, Mt, {});
+  return me(u, Ot, {});
 };
-function zt(t, e) {
-  return typeof e == "object" && e !== null ? t === e : String(t) === String(e);
+function Vt(o, e) {
+  return typeof e == "object" && e !== null ? o === e : String(o) === String(e);
 }
-const Tt = J("span", {
+const wt = Q("span", {
   name: "JoyRadio",
   slot: "Root",
-  overridesResolver: (t, e) => e.root
+  overridesResolver: (o, e) => e.root
 })(({
-  ownerState: t,
+  ownerState: o,
   theme: e
 }) => {
   var n, a, l;
-  return [x({
+  return [M({
     "--Icon-fontSize": "var(--Radio-size)",
     "--Icon-color": "currentColor"
-  }, t.size === "sm" && {
+  }, o.size === "sm" && {
     "--Radio-size": "1rem",
     // --FormHelperText-margin is equal to --Radio-size + --Radio-gap but we can't use calc() with CSS variables because the FormHelperText is a sibling element
     "& ~ *": {
@@ -1011,14 +1010,14 @@ const Tt = J("span", {
     },
     fontSize: e.vars.fontSize.sm,
     gap: "var(--Radio-gap, 0.5rem)"
-  }, t.size === "md" && {
+  }, o.size === "md" && {
     "--Radio-size": "1.25rem",
     "& ~ *": {
       "--FormHelperText-margin": "0.25rem 0 0 1.875rem"
     },
     fontSize: e.vars.fontSize.md,
     gap: "var(--Radio-gap, 0.625rem)"
-  }, t.size === "lg" && {
+  }, o.size === "lg" && {
     "--Radio-size": "1.5rem",
     "& ~ *": {
       "--FormHelperText-margin": "0.375rem 0 0 2.25rem"
@@ -1026,7 +1025,7 @@ const Tt = J("span", {
     fontSize: e.vars.fontSize.lg,
     gap: "var(--Radio-gap, 0.75rem)"
   }, {
-    position: t.overlay ? "initial" : "relative",
+    position: o.overlay ? "initial" : "relative",
     display: "inline-flex",
     boxSizing: "border-box",
     minWidth: 0,
@@ -1034,30 +1033,30 @@ const Tt = J("span", {
     lineHeight: "var(--Radio-size)",
     // prevent label from having larger height than the checkbox
     color: e.vars.palette.text.primary,
-    [`&.${me.disabled}`]: {
-      color: (n = e.variants.plainDisabled) == null || (n = n[t.color]) == null ? void 0 : n.color
+    [`&.${ge.disabled}`]: {
+      color: (n = e.variants.plainDisabled) == null || (n = n[o.color]) == null ? void 0 : n.color
     }
-  }, t.disableIcon && {
-    color: (a = e.variants[t.variant]) == null || (a = a[t.color]) == null ? void 0 : a.color,
-    [`&.${me.disabled}`]: {
-      color: (l = e.variants[`${t.variant}Disabled`]) == null || (l = l[t.color]) == null ? void 0 : l.color
+  }, o.disableIcon && {
+    color: (a = e.variants[o.variant]) == null || (a = a[o.color]) == null ? void 0 : a.color,
+    [`&.${ge.disabled}`]: {
+      color: (l = e.variants[`${o.variant}Disabled`]) == null || (l = l[o.color]) == null ? void 0 : l.color
     }
-  }, t["data-parent"] === "RadioGroup" && t["data-first-child"] === void 0 && {
-    marginInlineStart: t.orientation === "horizontal" ? "var(--RadioGroup-gap)" : void 0,
-    marginBlockStart: t.orientation === "horizontal" ? void 0 : "var(--RadioGroup-gap)"
+  }, o["data-parent"] === "RadioGroup" && o["data-first-child"] === void 0 && {
+    marginInlineStart: o.orientation === "horizontal" ? "var(--RadioGroup-gap)" : void 0,
+    marginBlockStart: o.orientation === "horizontal" ? void 0 : "var(--RadioGroup-gap)"
   })];
-}), kt = J("span", {
+}), Nt = Q("span", {
   name: "JoyRadio",
   slot: "Radio",
-  overridesResolver: (t, e) => e.radio
+  overridesResolver: (o, e) => e.radio
 })(({
-  ownerState: t,
+  ownerState: o,
   theme: e
 }) => {
-  var n, a, l, s, c;
-  const i = (n = e.variants[`${t.variant}`]) == null ? void 0 : n[t.color];
-  return [x({
-    "--Icon-color": t.color !== "neutral" || t.variant === "solid" ? "currentColor" : e.vars.palette.text.icon,
+  var n, a, l, i, c;
+  const s = (n = e.variants[`${o.variant}`]) == null ? void 0 : n[o.color];
+  return [M({
+    "--Icon-color": o.color !== "neutral" || o.variant === "solid" ? "currentColor" : e.vars.palette.text.icon,
     margin: 0,
     boxSizing: "border-box",
     width: "var(--Radio-size)",
@@ -1067,32 +1066,32 @@ const Tt = J("span", {
     justifyContent: "center",
     alignItems: "center",
     flexShrink: 0
-  }, t.disableIcon && {
+  }, o.disableIcon && {
     display: "contents"
   }, {
-    [`&.${me.checked}`]: {
+    [`&.${ge.checked}`]: {
       "--Icon-color": "currentColor"
     }
-  }), ...t.disableIcon ? [] : [x({}, i, {
-    backgroundColor: (a = i == null ? void 0 : i.backgroundColor) != null ? a : e.vars.palette.background.surface
+  }), ...o.disableIcon ? [] : [M({}, s, {
+    backgroundColor: (a = s == null ? void 0 : s.backgroundColor) != null ? a : e.vars.palette.background.surface
   }), {
     "&:hover": {
-      "@media (hover: hover)": (l = e.variants[`${t.variant}Hover`]) == null ? void 0 : l[t.color]
+      "@media (hover: hover)": (l = e.variants[`${o.variant}Hover`]) == null ? void 0 : l[o.color]
     }
   }, {
-    "&:active": (s = e.variants[`${t.variant}Active`]) == null ? void 0 : s[t.color]
+    "&:active": (i = e.variants[`${o.variant}Active`]) == null ? void 0 : i[o.color]
   }, {
-    [`&.${me.disabled}`]: (c = e.variants[`${t.variant}Disabled`]) == null ? void 0 : c[t.color]
+    [`&.${ge.disabled}`]: (c = e.variants[`${o.variant}Disabled`]) == null ? void 0 : c[o.color]
   }]];
-}), Et = J("span", {
+}), _t = Q("span", {
   name: "JoyRadio",
   slot: "Action",
-  overridesResolver: (t, e) => e.action
+  overridesResolver: (o, e) => e.action
 })(({
-  theme: t,
+  theme: o,
   ownerState: e
 }) => {
-  var n, a, l, s;
+  var n, a, l, i;
   return [{
     position: "absolute",
     textAlign: "left",
@@ -1106,20 +1105,20 @@ const Tt = J("span", {
     right: "calc(-1 * var(--variant-borderWidth, 0px))",
     zIndex: 1,
     // The action element usually cover the area of nearest positioned parent
-    [t.focus.selector]: t.focus.default
-  }, ...e.disableIcon ? [(n = t.variants[e.variant]) == null ? void 0 : n[e.color], {
+    [o.focus.selector]: o.focus.default
+  }, ...e.disableIcon ? [(n = o.variants[e.variant]) == null ? void 0 : n[e.color], {
     "&:hover": {
-      "@media (hover: hover)": (a = t.variants[`${e.variant}Hover`]) == null ? void 0 : a[e.color]
+      "@media (hover: hover)": (a = o.variants[`${e.variant}Hover`]) == null ? void 0 : a[e.color]
     }
   }, {
-    "&:active": (l = t.variants[`${e.variant}Active`]) == null ? void 0 : l[e.color]
+    "&:active": (l = o.variants[`${e.variant}Active`]) == null ? void 0 : l[e.color]
   }, {
-    [`&.${me.disabled}`]: (s = t.variants[`${e.variant}Disabled`]) == null ? void 0 : s[e.color]
+    [`&.${ge.disabled}`]: (i = o.variants[`${e.variant}Disabled`]) == null ? void 0 : i[e.color]
   }] : []];
-}), Ot = J("input", {
+}), Lt = Q("input", {
   name: "JoyRadio",
   slot: "Input",
-  overridesResolver: (t, e) => e.input
+  overridesResolver: (o, e) => e.input
 })(() => ({
   margin: 0,
   opacity: 0,
@@ -1127,159 +1126,159 @@ const Tt = J("span", {
   height: "100%",
   width: "100%",
   cursor: "pointer"
-})), $t = J("label", {
+})), Ft = Q("label", {
   name: "JoyRadio",
   slot: "Label",
-  overridesResolver: (t, e) => e.label
+  overridesResolver: (o, e) => e.label
 })(({
-  ownerState: t
-}) => x({
+  ownerState: o
+}) => M({
   flex: 1,
   minWidth: 0
-}, t.disableIcon && {
+}, o.disableIcon && {
   zIndex: 1,
   // label should stay on top of the action.
   pointerEvents: "none"
   // makes hover ineffect.
-})), Vt = J("span", {
+})), At = Q("span", {
   name: "JoyRadio",
   slot: "Icon",
-  overridesResolver: (t, e) => e.icon
+  overridesResolver: (o, e) => e.icon
 })(({
-  ownerState: t
+  ownerState: o
 }) => ({
   width: "calc(var(--Radio-size) / 2)",
   height: "calc(var(--Radio-size) / 2)",
   borderRadius: "inherit",
   color: "inherit",
   backgroundColor: "currentColor",
-  transform: t.checked ? "scale(1)" : "scale(0)"
-})), Je = /* @__PURE__ */ y.forwardRef(function(e, n) {
-  var a, l, s, c, i, d, p;
-  const f = ie({
+  transform: o.checked ? "scale(1)" : "scale(0)"
+})), to = /* @__PURE__ */ I.forwardRef(function(e, n) {
+  var a, l, i, c, s, u, d;
+  const p = ue({
     props: e,
     name: "JoyRadio"
   }), {
     checked: g,
-    checkedIcon: m,
-    defaultChecked: v,
-    disabled: C,
-    disableIcon: S = !1,
-    overlay: P = !1,
-    label: b,
-    id: M,
-    name: u,
-    onBlur: E,
-    onChange: F,
-    onFocus: I,
-    onFocusVisible: D,
-    readOnly: z,
-    required: B,
-    color: H,
-    variant: $ = "outlined",
-    size: T = "md",
-    uncheckedIcon: R,
-    value: V,
-    component: N,
-    slots: j = {},
-    slotProps: q = {}
-  } = f, X = ae(f, It), h = y.useContext(Se);
+    checkedIcon: x,
+    defaultChecked: f,
+    disabled: b,
+    disableIcon: C = !1,
+    overlay: R = !1,
+    label: S,
+    id: T,
+    name: y,
+    onBlur: $,
+    onChange: v,
+    onFocus: E,
+    onFocusVisible: h,
+    readOnly: O,
+    required: N,
+    color: A,
+    variant: j = "outlined",
+    size: U = "md",
+    uncheckedIcon: B,
+    value: K,
+    component: k,
+    slots: _ = {},
+    slotProps: P = {}
+  } = p, V = pe(p, $t), m = I.useContext($e);
   if (process.env.NODE_ENV !== "production") {
-    const Re = h == null ? void 0 : h.registerEffect;
-    y.useEffect(() => {
-      if (Re)
-        return Re();
-    }, [Re]);
+    const Te = m == null ? void 0 : m.registerEffect;
+    I.useEffect(() => {
+      if (Te)
+        return Te();
+    }, [Te]);
   }
-  const O = fe(M ?? (h == null ? void 0 : h.htmlFor)), k = y.useContext(Ke), ee = h != null && h.error ? "danger" : (a = (l = (s = e.color) != null ? s : h == null ? void 0 : h.color) != null ? l : H) != null ? a : "primary", ge = h != null && h.error ? "danger" : (c = (i = (d = e.color) != null ? d : h == null ? void 0 : h.color) != null ? i : H) != null ? c : "neutral", ye = e.size || (h == null ? void 0 : h.size) || (k == null ? void 0 : k.size) || T, _ = e.name || (k == null ? void 0 : k.name) || u, W = e.disableIcon || (k == null ? void 0 : k.disableIcon) || S, re = e.overlay || (k == null ? void 0 : k.overlay) || P, oe = {
-    checked: typeof g > "u" && V != null ? zt(k == null ? void 0 : k.value, V) : g,
-    defaultChecked: v,
-    disabled: e.disabled || (h == null ? void 0 : h.disabled) || C,
-    onBlur: E,
-    onChange: F,
-    onFocus: I,
-    onFocusVisible: D
+  const D = xe(T ?? (m == null ? void 0 : m.htmlFor)), z = I.useContext(Qe), ee = m != null && m.error ? "danger" : (a = (l = (i = e.color) != null ? i : m == null ? void 0 : m.color) != null ? l : A) != null ? a : "primary", fe = m != null && m.error ? "danger" : (c = (s = (u = e.color) != null ? u : m == null ? void 0 : m.color) != null ? s : A) != null ? c : "neutral", ve = e.size || (m == null ? void 0 : m.size) || (z == null ? void 0 : z.size) || U, Pe = e.name || (z == null ? void 0 : z.name) || y, ne = e.disableIcon || (z == null ? void 0 : z.disableIcon) || C, Se = e.overlay || (z == null ? void 0 : z.overlay) || R, w = {
+    checked: typeof g > "u" && K != null ? Vt(z == null ? void 0 : z.value, K) : g,
+    defaultChecked: f,
+    disabled: e.disabled || (m == null ? void 0 : m.disabled) || b,
+    onBlur: $,
+    onChange: v,
+    onFocus: E,
+    onFocusVisible: h
   }, {
-    getInputProps: Ze,
-    checked: xe,
-    disabled: eo,
-    focusVisible: oo
-  } = Vo(oe), to = (p = e.color) != null ? p : xe ? ee : ge, te = x({}, f, {
-    checked: xe,
-    disabled: eo,
-    focusVisible: oo,
-    color: to,
-    variant: $,
-    size: ye,
-    disableIcon: W,
-    overlay: re,
-    orientation: k == null ? void 0 : k.orientation
-  }), se = Dt(te), le = x({}, X, {
-    component: N,
-    slots: j,
-    slotProps: q
-  }), [no, ro] = Y("root", {
+    getInputProps: X,
+    checked: Y,
+    disabled: he,
+    focusVisible: se
+  } = Bo(w), lo = (d = e.color) != null ? d : Y ? ee : fe, ie = M({}, p, {
+    checked: Y,
+    disabled: he,
+    focusVisible: se,
+    color: lo,
+    variant: j,
+    size: ve,
+    disableIcon: ne,
+    overlay: Se,
+    orientation: z == null ? void 0 : z.orientation
+  }), ce = kt(ie), de = M({}, V, {
+    component: k,
+    slots: _,
+    slotProps: P
+  }), [ao, co] = Z("root", {
     ref: n,
-    className: se.root,
-    elementType: Tt,
-    externalForwardedProps: le,
-    ownerState: te
-  }), [so, lo] = Y("radio", {
-    className: se.radio,
-    elementType: kt,
-    externalForwardedProps: le,
-    ownerState: te
-  }), [io, ao] = Y("icon", {
-    className: se.icon,
-    elementType: Vt,
-    externalForwardedProps: le,
-    ownerState: te
-  }), [co, uo] = Y("action", {
-    className: se.action,
-    elementType: Et,
-    externalForwardedProps: le,
-    ownerState: te
-  }), [po, mo] = Y("input", {
+    className: ce.root,
+    elementType: wt,
+    externalForwardedProps: de,
+    ownerState: ie
+  }), [uo, po] = Z("radio", {
+    className: ce.radio,
+    elementType: Nt,
+    externalForwardedProps: de,
+    ownerState: ie
+  }), [mo, fo] = Z("icon", {
+    className: ce.icon,
+    elementType: At,
+    externalForwardedProps: de,
+    ownerState: ie
+  }), [vo, ho] = Z("action", {
+    className: ce.action,
+    elementType: _t,
+    externalForwardedProps: de,
+    ownerState: ie
+  }), [yo, go] = Z("input", {
     additionalProps: {
       type: "radio",
       role: void 0,
-      id: O,
-      name: _,
-      readOnly: z,
-      required: B ?? (h == null ? void 0 : h.required),
-      value: String(V),
-      "aria-describedby": h == null ? void 0 : h["aria-describedby"]
+      id: D,
+      name: Pe,
+      readOnly: O,
+      required: N ?? (m == null ? void 0 : m.required),
+      value: String(K),
+      "aria-describedby": m == null ? void 0 : m["aria-describedby"]
     },
-    className: se.input,
-    elementType: Ot,
-    externalForwardedProps: le,
-    getSlotProps: () => Ze({
-      onChange: k == null ? void 0 : k.onChange
+    className: ce.input,
+    elementType: Lt,
+    externalForwardedProps: de,
+    getSlotProps: () => X({
+      onChange: z == null ? void 0 : z.onChange
     }),
-    ownerState: te
-  }), [fo, vo] = Y("label", {
+    ownerState: ie
+  }), [bo, xo] = Z("label", {
     additionalProps: {
-      htmlFor: O
+      htmlFor: D
     },
-    className: se.label,
-    elementType: $t,
-    externalForwardedProps: le,
-    ownerState: te
+    className: ce.label,
+    elementType: Ft,
+    externalForwardedProps: de,
+    ownerState: ie
   });
-  return /* @__PURE__ */ L(no, x({}, ro, {
-    children: [/* @__PURE__ */ L(so, x({}, lo, {
-      children: [xe && !W && m, !xe && !W && R, !m && !R && !W && /* @__PURE__ */ r(io, x({}, ao)), /* @__PURE__ */ r(co, x({}, uo, {
-        children: /* @__PURE__ */ r(po, x({}, mo))
+  return /* @__PURE__ */ F(ao, M({}, co, {
+    children: [/* @__PURE__ */ F(uo, M({}, po, {
+      children: [Y && !ne && x, !Y && !ne && B, !x && !B && !ne && /* @__PURE__ */ r(mo, M({}, fo)), /* @__PURE__ */ r(vo, M({}, ho, {
+        children: /* @__PURE__ */ r(yo, M({}, go))
       }))]
-    })), b && /* @__PURE__ */ r(fo, x({}, vo, {
-      children: /* @__PURE__ */ r(So.Provider, {
+    })), S && /* @__PURE__ */ r(bo, M({}, xo, {
+      children: /* @__PURE__ */ r(Do.Provider, {
         value: !0,
-        children: b
+        children: S
       })
     }))]
   }));
 });
-process.env.NODE_ENV !== "production" && (Je.propTypes = {
+process.env.NODE_ENV !== "production" && (to.propTypes = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │
   // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
@@ -1287,58 +1286,58 @@ process.env.NODE_ENV !== "production" && (Je.propTypes = {
   /**
    * If `true`, the component is checked.
    */
-  checked: o.bool,
+  checked: t.bool,
   /**
    * The icon to display when the component is checked.
    */
-  checkedIcon: o.node,
+  checkedIcon: t.node,
   /**
    * @ignore
    */
-  children: o.node,
+  children: t.node,
   /**
    * Class name applied to the root element.
    */
-  className: o.string,
+  className: t.string,
   /**
    * The color of the component. It supports those theme colors that make sense for this component.
    * @default 'neutral'
    */
-  color: o.oneOfType([o.oneOf(["danger", "primary", "success", "warning"]), o.string]),
+  color: t.oneOfType([t.oneOf(["danger", "primary", "success", "warning"]), t.string]),
   /**
    * The component used for the root node.
    * Either a string to use a HTML element or a component.
    */
-  component: o.elementType,
+  component: t.elementType,
   /**
    * The default checked state. Use when the component is not controlled.
    */
-  defaultChecked: o.bool,
+  defaultChecked: t.bool,
   /**
    * If `true`, the component is disabled.
    */
-  disabled: o.bool,
+  disabled: t.bool,
   /**
    * If `true`, the checked icon is removed and the selected variant is applied on the `action` element instead.
    * @default false
    */
-  disableIcon: o.bool,
+  disableIcon: t.bool,
   /**
    * @ignore
    */
-  id: o.string,
+  id: t.string,
   /**
    * The label element at the end the radio.
    */
-  label: o.node,
+  label: t.node,
   /**
    * The `name` attribute of the input.
    */
-  name: o.string,
+  name: t.string,
   /**
    * @ignore
    */
-  onBlur: o.func,
+  onBlur: t.func,
   /**
    * Callback fired when the state is changed.
    *
@@ -1346,198 +1345,198 @@ process.env.NODE_ENV !== "production" && (Je.propTypes = {
    * You can pull out the new value by accessing `event.target.value` (string).
    * You can pull out the new checked state by accessing `event.target.checked` (boolean).
    */
-  onChange: o.func,
+  onChange: t.func,
   /**
    * @ignore
    */
-  onFocus: o.func,
+  onFocus: t.func,
   /**
    * @ignore
    */
-  onFocusVisible: o.func,
+  onFocusVisible: t.func,
   /**
    * If `true`, the root element's position is set to initial which allows the action area to fill the nearest positioned parent.
    * This prop is useful for composing Radio with ListItem component.
    * @default false
    */
-  overlay: o.bool,
+  overlay: t.bool,
   /**
    * If `true`, the component is read only.
    */
-  readOnly: o.bool,
+  readOnly: t.bool,
   /**
    * If `true`, the `input` element is required.
    */
-  required: o.bool,
+  required: t.bool,
   /**
    * The size of the component.
    * @default 'md'
    */
-  size: o.oneOfType([o.oneOf(["sm", "md", "lg"]), o.string]),
+  size: t.oneOfType([t.oneOf(["sm", "md", "lg"]), t.string]),
   /**
    * The props used for each slot inside.
    * @default {}
    */
-  slotProps: o.shape({
-    action: o.oneOfType([o.func, o.object]),
-    icon: o.oneOfType([o.func, o.object]),
-    input: o.oneOfType([o.func, o.object]),
-    label: o.oneOfType([o.func, o.object]),
-    radio: o.oneOfType([o.func, o.object]),
-    root: o.oneOfType([o.func, o.object])
+  slotProps: t.shape({
+    action: t.oneOfType([t.func, t.object]),
+    icon: t.oneOfType([t.func, t.object]),
+    input: t.oneOfType([t.func, t.object]),
+    label: t.oneOfType([t.func, t.object]),
+    radio: t.oneOfType([t.func, t.object]),
+    root: t.oneOfType([t.func, t.object])
   }),
   /**
    * The components used for each slot inside.
    * @default {}
    */
-  slots: o.shape({
-    action: o.elementType,
-    icon: o.elementType,
-    input: o.elementType,
-    label: o.elementType,
-    radio: o.elementType,
-    root: o.elementType
+  slots: t.shape({
+    action: t.elementType,
+    icon: t.elementType,
+    input: t.elementType,
+    label: t.elementType,
+    radio: t.elementType,
+    root: t.elementType
   }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: o.oneOfType([o.arrayOf(o.oneOfType([o.func, o.object, o.bool])), o.func, o.object]),
+  sx: t.oneOfType([t.arrayOf(t.oneOfType([t.func, t.object, t.bool])), t.func, t.object]),
   /**
    * The icon to display when the component is not checked.
    */
-  uncheckedIcon: o.node,
+  uncheckedIcon: t.node,
   /**
    * The value of the component. The DOM API casts this to a string.
    */
-  value: o.any,
+  value: t.any,
   /**
    * The [global variant](https://mui.com/joy-ui/main-features/global-variants/) to use.
    * @default 'outlined'
    */
-  variant: o.oneOfType([o.oneOf(["outlined", "plain", "soft", "solid"]), o.string])
+  variant: t.oneOfType([t.oneOf(["outlined", "plain", "soft", "solid"]), t.string])
 });
-function Ft(t) {
-  return ve("MuiRadioGroup", t);
+function Bt(o) {
+  return Ce("MuiRadioGroup", o);
 }
-he("MuiRadioGroup", ["root", "colorPrimary", "colorNeutral", "colorDanger", "colorSuccess", "colorWarning", "variantPlain", "variantOutlined", "variantSoft", "variantSolid", "sizeSm", "sizeMd", "sizeLg", "horizontal", "vertical"]);
-const Nt = ["className", "component", "children", "name", "defaultValue", "disableIcon", "overlay", "value", "onChange", "color", "variant", "size", "orientation", "role", "slots", "slotProps"], _t = (t) => {
+Re("MuiRadioGroup", ["root", "colorPrimary", "colorNeutral", "colorDanger", "colorSuccess", "colorWarning", "variantPlain", "variantOutlined", "variantSoft", "variantSolid", "sizeSm", "sizeMd", "sizeLg", "horizontal", "vertical"]);
+const Ht = ["className", "component", "children", "name", "defaultValue", "disableIcon", "overlay", "value", "onChange", "color", "variant", "size", "orientation", "role", "slots", "slotProps"], jt = (o) => {
   const {
     orientation: e,
     size: n,
     variant: a,
     color: l
-  } = t, s = {
-    root: ["root", e, a && `variant${U(a)}`, l && `color${U(l)}`, n && `size${U(n)}`]
+  } = o, i = {
+    root: ["root", e, a && `variant${G(a)}`, l && `color${G(l)}`, n && `size${G(n)}`]
   };
-  return ce(s, Ft, {});
-}, Lt = J("div", {
+  return me(i, Bt, {});
+}, Ut = Q("div", {
   name: "JoyRadioGroup",
   slot: "Root",
-  overridesResolver: (t, e) => e.root
+  overridesResolver: (o, e) => e.root
 })(({
-  ownerState: t,
+  ownerState: o,
   theme: e
 }) => {
   var n;
-  return x({}, t.size === "sm" && {
+  return M({}, o.size === "sm" && {
     "--RadioGroup-gap": "0.625rem"
-  }, t.size === "md" && {
+  }, o.size === "md" && {
     "--RadioGroup-gap": "0.875rem"
-  }, t.size === "lg" && {
+  }, o.size === "lg" && {
     "--RadioGroup-gap": "1.25rem"
   }, {
     display: "flex",
     margin: "var(--unstable_RadioGroup-margin)",
-    flexDirection: t.orientation === "horizontal" ? "row" : "column",
+    flexDirection: o.orientation === "horizontal" ? "row" : "column",
     borderRadius: e.vars.radius.sm
-  }, (n = e.variants[t.variant]) == null ? void 0 : n[t.color]);
-}), qe = /* @__PURE__ */ y.forwardRef(function(e, n) {
-  const a = ie({
+  }, (n = e.variants[o.variant]) == null ? void 0 : n[o.color]);
+}), ro = /* @__PURE__ */ I.forwardRef(function(e, n) {
+  const a = ue({
     props: e,
     name: "JoyRadioGroup"
   }), {
     className: l,
-    component: s,
+    component: i,
     children: c,
-    name: i,
-    defaultValue: d,
-    disableIcon: p = !1,
-    overlay: f,
+    name: s,
+    defaultValue: u,
+    disableIcon: d = !1,
+    overlay: p,
     value: g,
-    onChange: m,
-    color: v = "neutral",
-    variant: C = "plain",
-    size: S = "md",
-    orientation: P = "vertical",
-    role: b = "radiogroup",
-    slots: M = {},
-    slotProps: u = {}
-  } = a, E = ae(a, Nt), [F, I] = Mo({
+    onChange: x,
+    color: f = "neutral",
+    variant: b = "plain",
+    size: C = "md",
+    orientation: R = "vertical",
+    role: S = "radiogroup",
+    slots: T = {},
+    slotProps: y = {}
+  } = a, $ = pe(a, Ht), [v, E] = zo({
     controlled: g,
-    default: d,
+    default: u,
     name: "RadioGroup"
-  }), D = y.useContext(Se), z = e.size || (D == null ? void 0 : D.size) || S, B = x({
-    orientation: P,
-    size: z,
-    variant: C,
-    color: v,
-    role: b
-  }, a), H = _t(B), $ = fe(i);
+  }), h = I.useContext($e), O = e.size || (h == null ? void 0 : h.size) || C, N = M({
+    orientation: R,
+    size: O,
+    variant: b,
+    color: f,
+    role: S
+  }, a), A = jt(N), j = xe(s);
   if (process.env.NODE_ENV !== "production") {
-    const N = D == null ? void 0 : D.registerEffect;
-    y.useEffect(() => {
-      if (N)
-        return N();
-    }, [N]);
+    const k = h == null ? void 0 : h.registerEffect;
+    I.useEffect(() => {
+      if (k)
+        return k();
+    }, [k]);
   }
-  const T = y.useMemo(() => ({
-    disableIcon: p,
-    overlay: f,
-    orientation: P,
-    size: z,
-    name: $,
-    value: F,
-    onChange: (N) => {
-      I(N.target.value), m && m(N);
+  const U = I.useMemo(() => ({
+    disableIcon: d,
+    overlay: p,
+    orientation: R,
+    size: O,
+    name: j,
+    value: v,
+    onChange: (k) => {
+      E(k.target.value), x && x(k);
     }
-  }), [p, $, m, f, P, I, z, F]), [R, V] = Y("root", {
+  }), [d, j, x, p, R, E, O, v]), [B, K] = Z("root", {
     ref: n,
-    className: Ae(H.root, l),
-    elementType: Lt,
-    externalForwardedProps: x({}, E, {
-      component: s,
-      slots: M,
-      slotProps: u
+    className: Je(A.root, l),
+    elementType: Ut,
+    externalForwardedProps: M({}, $, {
+      component: i,
+      slots: T,
+      slotProps: y
     }),
-    ownerState: B,
+    ownerState: N,
     additionalProps: {
-      as: s,
-      role: b,
+      as: i,
+      role: S,
       // The `id` is just for the completeness, it does not have any effect because RadioGroup (div) is non-labelable element
       // MDN: "If it is not a labelable element, then the for attribute has no effect"
       // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#attr-for
-      id: D == null ? void 0 : D.htmlFor,
-      "aria-labelledby": D == null ? void 0 : D.labelId,
-      "aria-describedby": D == null ? void 0 : D["aria-describedby"]
+      id: h == null ? void 0 : h.htmlFor,
+      "aria-labelledby": h == null ? void 0 : h.labelId,
+      "aria-describedby": h == null ? void 0 : h["aria-describedby"]
     }
   });
-  return /* @__PURE__ */ r(Ke.Provider, {
-    value: T,
-    children: /* @__PURE__ */ r(R, x({}, V, {
-      children: /* @__PURE__ */ r(Se.Provider, {
+  return /* @__PURE__ */ r(Qe.Provider, {
+    value: U,
+    children: /* @__PURE__ */ r(B, M({}, K, {
+      children: /* @__PURE__ */ r($e.Provider, {
         value: void 0,
-        children: y.Children.map(c, (N, j) => /* @__PURE__ */ y.isValidElement(N) ? /* @__PURE__ */ y.cloneElement(N, x({}, j === 0 && {
+        children: I.Children.map(c, (k, _) => /* @__PURE__ */ I.isValidElement(k) ? /* @__PURE__ */ I.cloneElement(k, M({}, _ === 0 && {
           "data-first-child": ""
-        }, j === y.Children.count(c) - 1 && {
+        }, _ === I.Children.count(c) - 1 && {
           "data-last-child": ""
         }, {
           "data-parent": "RadioGroup"
-        })) : N)
+        })) : k)
       })
     }))
   });
 });
-process.env.NODE_ENV !== "production" && (qe.propTypes = {
+process.env.NODE_ENV !== "production" && (ro.propTypes = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │
   // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
@@ -1545,153 +1544,159 @@ process.env.NODE_ENV !== "production" && (qe.propTypes = {
   /**
    * @ignore
    */
-  children: o.node,
+  children: t.node,
   /**
    * Class name applied to the root element.
    */
-  className: o.string,
+  className: t.string,
   /**
    * The color of the component. It supports those theme colors that make sense for this component.
    * @default 'neutral'
    */
-  color: o.oneOfType([o.oneOf(["danger", "primary", "success", "warning"]), o.string]),
+  color: t.oneOfType([t.oneOf(["danger", "primary", "success", "warning"]), t.string]),
   /**
    * The component used for the root node.
    * Either a string to use a HTML element or a component.
    */
-  component: o.elementType,
+  component: t.elementType,
   /**
    * The default value. Use when the component is not controlled.
    */
-  defaultValue: o.any,
+  defaultValue: t.any,
   /**
    * The radio's `disabledIcon` prop. If specified, the value is passed down to every radios under this element.
    * @default false
    */
-  disableIcon: o.bool,
+  disableIcon: t.bool,
   /**
    * The name used to reference the value of the control.
    * If you don't provide this prop, it falls back to a randomly generated name.
    */
-  name: o.string,
+  name: t.string,
   /**
    * Callback fired when a radio button is selected.
    *
    * @param {React.ChangeEvent<HTMLInputElement>} event The event source of the callback.
    * You can pull out the new value by accessing `event.target.value` (string).
    */
-  onChange: o.func,
+  onChange: t.func,
   /**
    * The component orientation.
    * @default 'vertical'
    */
-  orientation: o.oneOf(["horizontal", "vertical"]),
+  orientation: t.oneOf(["horizontal", "vertical"]),
   /**
    * The radio's `overlay` prop. If specified, the value is passed down to every radios under this element.
    * @default false
    */
-  overlay: o.bool,
+  overlay: t.bool,
   /**
    * @ignore
    */
-  role: o.string,
+  role: t.string,
   /**
    * The size of the component.
    * @default 'md'
    */
-  size: o.oneOfType([o.oneOf(["sm", "md", "lg"]), o.string]),
+  size: t.oneOfType([t.oneOf(["sm", "md", "lg"]), t.string]),
   /**
    * The props used for each slot inside.
    * @default {}
    */
-  slotProps: o.shape({
-    root: o.oneOfType([o.func, o.object])
+  slotProps: t.shape({
+    root: t.oneOfType([t.func, t.object])
   }),
   /**
    * The components used for each slot inside.
    * @default {}
    */
-  slots: o.shape({
-    root: o.elementType
+  slots: t.shape({
+    root: t.elementType
   }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: o.oneOfType([o.arrayOf(o.oneOfType([o.func, o.object, o.bool])), o.func, o.object]),
+  sx: t.oneOfType([t.arrayOf(t.oneOfType([t.func, t.object, t.bool])), t.func, t.object]),
   /**
    * Value of the selected radio button. The DOM API casts this to a string.
    */
-  value: o.any,
+  value: t.any,
   /**
    * The [global variant](https://mui.com/joy-ui/main-features/global-variants/) to use.
    * @default 'plain'
    */
-  variant: o.oneOfType([o.oneOf(["outlined", "plain", "soft", "solid"]), o.string])
+  variant: t.oneOfType([t.oneOf(["outlined", "plain", "soft", "solid"]), t.string])
 });
-const wt = (t, e) => {
-  const [n, a] = w(null), [l, s] = w(!0), [c, i] = w(null), [d, p] = w(!1);
-  return Ce(() => {
+const Kt = (o, e) => {
+  const [n, a] = H(null), [l, i] = H(!0), [c, s] = H(null), [u, d] = H(!1);
+  return be(() => {
     e && (async () => {
       try {
-        s(!0);
-        const g = await t.discussions.getById(e);
-        a(g), i(null), p(!1);
+        i(!0);
+        const g = await o.discussions.getById(e);
+        a(g), s(null), d(!1);
       } catch (g) {
-        (t.helpers.getSDKConfiguration().errorHandlingMode === "standard" ? g.error.code === 404 : g.data.error.code === 404) ? (p(!0), i(null), a(null)) : (i(c), a(null), p(!1));
+        (o.helpers.getSDKConfiguration().errorHandlingMode === "standard" ? g.error.code === 404 : g.data.error.code === 404) ? (d(!0), s(null), a(null)) : (s(c), a(null), d(!1));
       } finally {
-        s(!1);
+        i(!1);
       }
     })();
-  }, [t, e]), { discussion: n, isLoading: l, error: c, isNotFound: d };
-}, At = (t, e, n, a = "", l = "LATEST", s = 20) => {
-  const [c, i] = w([]), [d, p] = w(!0), [f, g] = w(!1), [m, v] = w(null), [C, S] = w(l), [P, b] = w(
+  }, [o, e]), { discussion: n, setDiscussion: a, isLoading: l, error: c, isNotFound: u };
+}, Wt = (o, e, n = null, a = "", l = "LATEST", i = 20, c, s = !1) => {
+  const [u, d] = H([]), [p, g] = H(!0), [x, f] = H(!1), [b, C] = H(null), [R, S] = H(l), [T, y] = H(
     null
-  ), [M, u] = w(!1), E = go(
-    async ($, T, R = !1) => {
-      var V, N;
+  ), [$, v] = H(!1), E = Ae(
+    async (k, _, P = !1) => {
+      var V, m;
       try {
-        p(!0);
-        const j = await t.discussions.getPosts(e, {
-          sort: $,
-          limit: s,
-          startAfter: T,
+        g(!0);
+        const D = await o.discussions.getPosts(e, {
+          sort: k,
+          limit: i,
+          startAfter: _,
           skipDeleted: !0,
-          skipModerated: !0
-        }), q = j.data;
-        i(R ? (h) => [...h, ...q] : q);
-        const X = !!((V = j.meta.pagination) != null && V.nextPageStartsAfter) && q.length === s;
-        b(
-          ((N = j.meta.pagination) == null ? void 0 : N.nextPageStartsAfter) || null
-        ), u(X), v(null);
-      } catch (j) {
-        (t.helpers.getSDKConfiguration().errorHandlingMode === "standard" ? j.error.code === 404 : j.data.error.code === 404) ? (i([]), u(!1), b(null), v(null)) : v(m);
+          skipModerated: !s
+        }), z = D.data;
+        d(P ? (fe) => [...fe, ...z] : z);
+        const ee = !!((V = D.meta.pagination) != null && V.nextPageStartsAfter) && z.length === i;
+        y(
+          ((m = D.meta.pagination) == null ? void 0 : m.nextPageStartsAfter) || null
+        ), v(ee), C(null);
+      } catch (D) {
+        (o.helpers.getSDKConfiguration().errorHandlingMode === "standard" ? D.error.code === 404 : D.data.error.code === 404) ? (d([]), v(!1), y(null), C(null)) : C(b);
       } finally {
-        p(!1);
+        g(!1);
       }
     },
-    [t, e, s]
+    [o, e, i, s]
   );
-  return Ce(() => {
-    e && E(C);
-  }, [e, C, E]), {
-    posts: c,
-    isLoading: d,
-    isSubmitting: f,
-    error: m,
-    currentSort: C,
-    hasMore: M,
-    handleSortChange: ($) => {
-      S($), b(null);
-    },
-    handleLoadMore: () => {
-      P && !d && E(C, P, !0);
-    },
-    handleCreatePost: async ($, T) => {
+  be(() => {
+    e && E(R);
+  }, [e, R, E]);
+  const h = (k) => {
+    S(k), y(null);
+  }, O = Ie(p);
+  O.current = p;
+  const N = Ie(T);
+  N.current = T;
+  const A = Ae(() => {
+    N.current && !O.current && E(R, N.current, !0);
+  }, [E, R]);
+  return {
+    posts: u,
+    isLoading: p,
+    isSubmitting: x,
+    error: b,
+    currentSort: R,
+    hasMore: $,
+    handleSortChange: h,
+    handleLoadMore: A,
+    handleCreatePost: async (k, _) => {
       try {
-        g(!0);
-        let V = await t.discussions.createPost(e, {
-          content: $,
-          replyId: T || null,
+        f(!0);
+        let V = await o.discussions.createPost(e, {
+          content: k,
+          replyId: _ || null,
           userNickname: null,
           discussionLabel: n,
           discussionUrl: a,
@@ -1702,164 +1707,188 @@ const wt = (t, e) => {
           }
         });
         try {
-          const N = await t.profile.getOwn().getInfo();
-          V = { ...V, userModel: N };
+          const m = await o.profile.getOwn().getInfo();
+          V = { ...V, userModel: m };
         } catch {
         }
-        T || i((N) => [V, ...N]), v(null);
-      } catch (R) {
-        throw v(
-          R
-        ), R;
+        d(
+          _ ? (m) => m.map(
+            (D) => D.id === _ ? { ...D, repliesCount: (D.repliesCount || 0) + 1 } : D
+          ) : (m) => [V, ...m]
+        ), c == null || c(1), C(null);
+      } catch (P) {
+        throw C(
+          P
+        ), P;
       } finally {
-        g(!1);
+        f(!1);
       }
     },
-    handleReact: async ($, T) => {
+    handleReact: async (k, _) => {
       try {
-        const R = await t.discussions.react($, T);
-        return i(
-          (V) => V.map((N) => N.id === $ ? R : N)
-        ), v(null), R;
-      } catch (R) {
-        throw console.error("Error reacting to post:", R), v(
-          R
-        ), R;
+        const P = await o.discussions.react(k, _);
+        return d(
+          (V) => V.map((m) => m.id === k ? P : m)
+        ), C(null), P;
+      } catch (P) {
+        throw console.error("Error reacting to post:", P), C(
+          P
+        ), P;
       }
     },
-    handleDeletePost: async ($) => {
+    handleDeletePost: async (k, _) => {
       try {
-        await t.discussions.deletePost($), i((T) => T.filter((R) => R.id !== $)), v(null);
-      } catch (T) {
-        throw v(
-          T
-        ), T;
+        await o.discussions.deletePost(k), d((P) => P.filter((V) => V.id !== k)), _ && d(
+          (P) => P.map(
+            (V) => V.id === _ ? { ...V, repliesCount: Math.max(0, (V.repliesCount || 0) - 1) } : V
+          )
+        ), c == null || c(-1), C(null);
+      } catch (P) {
+        throw C(
+          P
+        ), P;
       }
     },
-    handleReportPost: async ($, T, R) => {
+    handleReportPost: async (k, _, P) => {
       try {
-        await t.discussions.reportPost($, T, R), v(null);
+        await o.discussions.reportPost(k, _, P), C(null);
       } catch (V) {
-        throw v(
+        throw C(
           V
         ), V;
       }
     }
   };
-}, Xe = ({
-  onSubmit: t,
+}, no = ({
+  onSubmit: o,
   userIsLoggedIn: e,
   onSignInClick: n,
   placeholder: a,
   isSubmitting: l,
-  replyTo: s,
+  replyTo: i,
   onCancel: c
 }) => {
-  const { t: i } = ne(), [d, p] = w(""), f = Z(), g = de(), m = ue(), v = f.palette.primary.plainColor, C = f.palette.primary.onPrimary, S = async (P) => {
-    if (P.preventDefault(), !!d.trim())
+  const { t: s } = le(), [u, d] = H(""), p = te(), g = ae(), x = De(), f = re(), b = p.palette.primary.plainColor, C = p.palette.primary.onPrimary, R = async (S) => {
+    if (S.preventDefault(), !!u.trim())
       try {
-        await t(d), p("");
-      } catch (b) {
-        console.error("Failed to submit comment:", b);
+        await o(u), d("");
+      } catch (T) {
+        console.error("Failed to submit comment:", T);
       }
   };
-  return e ? /* @__PURE__ */ L(A, { component: "form", onSubmit: S, sx: { mb: 3 }, children: [
-    s && /* @__PURE__ */ r(K, { level: "body-sm", sx: { mb: 1, color: f.textSecondary }, children: i("discussion.replyingTo", "Replying to {{name}}", {
-      name: s
+  return e ? /* @__PURE__ */ F(L, { component: "form", onSubmit: R, sx: { mb: f.lg }, children: [
+    i && /* @__PURE__ */ r(W, { level: "body-sm", sx: { mb: f.xs, color: p.textSecondary }, children: s("discussion.replyingTo", "Replying to {{name}}", {
+      name: i
     }) }),
     /* @__PURE__ */ r(
-      Ue,
+      Ye,
       {
-        placeholder: a || i("discussion.writeComment", "Write a comment..."),
-        value: d,
-        onChange: (P) => p(P.target.value),
+        placeholder: a || s("discussion.writeComment", "Write a comment..."),
+        value: u,
+        onChange: (S) => d(S.target.value),
         minRows: 3,
         maxRows: 8,
         disabled: l,
-        sx: { mb: 1.5 }
+        sx: {
+          mb: f.sm,
+          bgcolor: p.surfaceVariant,
+          color: p.textPrimary,
+          border: `1px solid ${p.outlineEnabledBorder}`,
+          borderRadius: g.sm,
+          boxShadow: "none",
+          "&::before": { display: "none" },
+          "&::placeholder": { color: p.textSecondary, opacity: 0.6 },
+          "&:focus-within": {
+            border: `1px solid ${b}`,
+            boxShadow: "none",
+            outline: "none"
+          }
+        }
       }
     ),
-    /* @__PURE__ */ L(A, { sx: { display: "flex", gap: 1, justifyContent: "flex-end" }, children: [
+    /* @__PURE__ */ F(L, { sx: { display: "flex", gap: f.xs, justifyContent: "flex-end" }, children: [
       c && /* @__PURE__ */ r(
-        Q,
+        oe,
         {
           variant: "plain",
           onClick: c,
           disabled: l,
           sx: {
-            fontFamily: m.primary,
-            color: f.textPrimary,
+            fontFamily: x.primary,
+            color: p.textPrimary,
             borderRadius: g.sm,
             "&:hover": {
-              bgcolor: `${f.textPrimary}14`
+              bgcolor: `${p.textPrimary}14`
             }
           },
-          children: i("common.cancel", "Cancel")
+          children: s("common.cancel", "Cancel")
         }
       ),
       /* @__PURE__ */ r(
-        Q,
+        oe,
         {
           type: "submit",
           variant: "solid",
-          disabled: !d.trim() || l,
+          disabled: !u.trim() || l,
           loading: l,
           sx: {
-            fontFamily: m.primary,
-            bgcolor: v,
+            fontFamily: x.primary,
+            bgcolor: b,
             color: C,
             borderRadius: g.sm,
             "&:hover": {
-              bgcolor: v,
+              bgcolor: b,
               opacity: 0.9
             },
             "&:disabled": {
-              bgcolor: v,
+              bgcolor: b,
               color: C,
               opacity: 0.4
             }
           },
-          children: s ? i("discussion.reply", "Reply") : i("discussion.post", "Post")
+          children: i ? s("discussion.reply", "Reply") : s("discussion.post", "Post")
         }
       )
     ] })
-  ] }) : /* @__PURE__ */ r(A, { sx: { mb: 3 }, children: /* @__PURE__ */ r(
-    Q,
+  ] }) : /* @__PURE__ */ r(L, { sx: { mb: f.lg }, children: /* @__PURE__ */ r(
+    oe,
     {
       fullWidth: !0,
       variant: "outlined",
       onClick: n,
       sx: {
-        py: 1.5,
-        fontFamily: m.primary,
-        borderColor: v,
-        color: v,
+        py: f.sm,
+        fontFamily: x.primary,
+        borderColor: b,
+        color: b,
         borderRadius: g.sm,
         "&:hover": {
-          bgcolor: `${v}14`,
-          borderColor: v
+          bgcolor: `${b}14`,
+          borderColor: b
         }
       },
-      children: i("discussion.signInToPost", "Sign in to post")
+      children: s("discussion.signInToPost", "Sign in to post")
     }
   ) });
-}, Bt = G(/* @__PURE__ */ r("path", {
+}, Gt = J(/* @__PURE__ */ r("path", {
   d: "M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6zM19 4h-3.5l-1-1h-5l-1 1H5v2h14z"
-}), "Delete"), Ht = G(/* @__PURE__ */ r("path", {
+}), "Delete"), Jt = J(/* @__PURE__ */ r("path", {
   d: "M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2M8.5 8c.83 0 1.5.67 1.5 1.5S9.33 11 8.5 11 7 10.33 7 9.5 7.67 8 8.5 8M12 18c-2.28 0-4.22-1.66-5-4h10c-.78 2.34-2.72 4-5 4m3.5-7c-.83 0-1.5-.67-1.5-1.5S14.67 8 15.5 8s1.5.67 1.5 1.5-.67 1.5-1.5 1.5"
-}), "EmojiEmotions"), jt = G(/* @__PURE__ */ r("path", {
+}), "EmojiEmotions"), qt = J(/* @__PURE__ */ r("path", {
   d: "m12 21.35-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54z"
-}), "Favorite"), Ut = G(/* @__PURE__ */ r("path", {
+}), "Favorite"), Xt = J(/* @__PURE__ */ r("path", {
   d: "M16.5 3c-1.74 0-3.41.81-4.5 2.09C10.91 3.81 9.24 3 7.5 3 4.42 3 2 5.42 2 8.5c0 3.78 3.4 6.86 8.55 11.54L12 21.35l1.45-1.32C18.6 15.36 22 12.28 22 8.5 22 5.42 19.58 3 16.5 3m-4.4 15.55-.1.1-.1-.1C7.14 14.24 4 11.39 4 8.5 4 6.5 5.5 5 7.5 5c1.54 0 3.04.99 3.57 2.36h1.87C13.46 5.99 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5 0 2.89-3.14 5.74-7.9 10.05"
-}), "FavoriteBorder"), Kt = G(/* @__PURE__ */ r("path", {
+}), "FavoriteBorder"), Yt = J(/* @__PURE__ */ r("path", {
   d: "M14.4 6 14 4H5v17h2v-7h5.6l.4 2h7V6z"
-}), "Flag"), Wt = G(/* @__PURE__ */ r("path", {
+}), "Flag"), Qt = J(/* @__PURE__ */ r("path", {
   d: "M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2M12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8m3.5-9c.83 0 1.5-.67 1.5-1.5S16.33 8 15.5 8 14 8.67 14 9.5s.67 1.5 1.5 1.5m-7 0c.83 0 1.5-.67 1.5-1.5S9.33 8 8.5 8 7 8.67 7 9.5 7.67 11 8.5 11m3.5 3c-2.33 0-4.31 1.46-5.11 3.5h10.22c-.8-2.04-2.78-3.5-5.11-3.5"
-}), "MoodBad"), Gt = G(/* @__PURE__ */ r("path", {
+}), "MoodBad"), Zt = J(/* @__PURE__ */ r("path", {
   d: "M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2m0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2"
-}), "MoreVert"), Jt = G(/* @__PURE__ */ r("path", {
+}), "MoreVert"), er = J(/* @__PURE__ */ r("path", {
+  d: "M7 11v2h10v-2zm5-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8"
+}), "RemoveCircleOutline"), or = J(/* @__PURE__ */ r("path", {
   d: "M10 9V5l-7 7 7 7v-4.1c5 0 8.5 1.6 11 5.1-1-5-4-10-11-11"
-}), "Reply"), qt = G([/* @__PURE__ */ r("circle", {
+}), "Reply"), tr = J([/* @__PURE__ */ r("circle", {
   cx: "15.5",
   cy: "9.5",
   r: "1.5"
@@ -1869,7 +1898,7 @@ const wt = (t, e) => {
   r: "1.5"
 }, "1"), /* @__PURE__ */ r("path", {
   d: "M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2M12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8m0-4c-.73 0-1.38-.18-1.96-.52-.12.14-.86.98-1.01 1.15.86.55 1.87.87 2.97.87 1.11 0 2.12-.33 2.98-.88-.97-1.09-.01-.02-1.01-1.15-.59.35-1.24.53-1.97.53"
-}, "2")], "SentimentSatisfied"), Xt = G([/* @__PURE__ */ r("circle", {
+}, "2")], "SentimentSatisfied"), rr = J([/* @__PURE__ */ r("circle", {
   cx: "15.5",
   cy: "9.5",
   r: "1.5"
@@ -1879,55 +1908,55 @@ const wt = (t, e) => {
   r: "1.5"
 }, "1"), /* @__PURE__ */ r("path", {
   d: "M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2M12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8m0-6c-2.33 0-4.32 1.45-5.12 3.5h1.67c.69-1.19 1.97-2 3.45-2s2.75.81 3.45 2h1.67c-.8-2.05-2.79-3.5-5.12-3.5"
-}, "2")], "SentimentVeryDissatisfied"), Yt = G(/* @__PURE__ */ r("path", {
+}, "2")], "SentimentVeryDissatisfied"), nr = J(/* @__PURE__ */ r("path", {
   d: "M15 3H6c-.83 0-1.54.5-1.84 1.22l-3.02 7.05c-.09.23-.14.47-.14.73v2c0 1.1.9 2 2 2h6.31l-.95 4.57-.03.32c0 .41.17.79.44 1.06L9.83 23l6.59-6.59c.36-.36.58-.86.58-1.41V5c0-1.1-.9-2-2-2m4 0v12h4V3z"
-}), "ThumbDown"), Qt = G(/* @__PURE__ */ r("path", {
+}), "ThumbDown"), sr = J(/* @__PURE__ */ r("path", {
   d: "M1 21h4V9H1zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73z"
-}), "ThumbUp"), Zt = {
-  LIKE: /* @__PURE__ */ r(Qt, { fontSize: "small" }),
-  DISLIKE: /* @__PURE__ */ r(Yt, { fontSize: "small" }),
-  LOVE: /* @__PURE__ */ r(jt, { fontSize: "small" }),
-  LAUGH: /* @__PURE__ */ r(qt, { fontSize: "small" }),
-  CARE: /* @__PURE__ */ r(Ut, { fontSize: "small" }),
-  WOW: /* @__PURE__ */ r(Ht, { fontSize: "small" }),
-  SAD: /* @__PURE__ */ r(Xt, { fontSize: "small" }),
-  ANGRY: /* @__PURE__ */ r(Wt, { fontSize: "small" })
-}, Ne = ({
-  reaction: t,
+}), "ThumbUp"), ir = {
+  LIKE: /* @__PURE__ */ r(sr, { fontSize: "small" }),
+  DISLIKE: /* @__PURE__ */ r(nr, { fontSize: "small" }),
+  LOVE: /* @__PURE__ */ r(qt, { fontSize: "small" }),
+  LAUGH: /* @__PURE__ */ r(tr, { fontSize: "small" }),
+  CARE: /* @__PURE__ */ r(Xt, { fontSize: "small" }),
+  WOW: /* @__PURE__ */ r(Jt, { fontSize: "small" }),
+  SAD: /* @__PURE__ */ r(rr, { fontSize: "small" }),
+  ANGRY: /* @__PURE__ */ r(Qt, { fontSize: "small" })
+}, Ue = ({
+  reaction: o,
   count: e,
   isActive: n,
   onClick: a,
   disabled: l
 }) => {
-  const s = Z(), c = (d) => d >= 1e6 ? (d / 1e6).toFixed(1).replace(/\.0$/, "") + "M" : d >= 1e3 ? (d / 1e3).toFixed(1).replace(/\.0$/, "") + "K" : d.toString(), i = () => {
-    if (!n) return s.textSecondary;
-    switch (t) {
+  const i = te(), c = re(), s = (d) => d >= 1e6 ? (d / 1e6).toFixed(1).replace(/\.0$/, "") + "M" : d >= 1e3 ? (d / 1e3).toFixed(1).replace(/\.0$/, "") + "K" : d.toString(), u = () => {
+    if (!n) return i.textSecondary;
+    switch (o) {
       case "LIKE":
-        return s.palette.primary.plainColor;
+        return i.palette.primary.plainColor;
       case "DISLIKE":
-        return s.palette.primary.plainColor;
+        return i.palette.primary.plainColor;
       case "LOVE":
-        return s.palette.danger.plainColor;
+        return i.palette.danger.plainColor;
       case "ANGRY":
-        return s.palette.danger.plainColor;
+        return i.palette.danger.plainColor;
       default:
-        return s.palette.primary.plainColor;
+        return i.palette.primary.plainColor;
     }
   };
-  return /* @__PURE__ */ L(
-    A,
+  return /* @__PURE__ */ F(
+    L,
     {
       sx: {
         display: "inline-flex",
         alignItems: "center",
-        gap: 0.5,
-        px: 1.5,
-        py: 0.5,
+        gap: c["2xs"],
+        px: c.sm,
+        py: c["2xs"],
         borderRadius: "18px",
-        backgroundColor: n ? `${s.palette.neutral.softBg}` : "transparent",
-        color: i(),
+        backgroundColor: n ? `${i.palette.neutral.softBg}` : "transparent",
+        color: u(),
         "&:hover": {
-          backgroundColor: `${s.palette.neutral.softHoverBg}`
+          backgroundColor: `${i.palette.neutral.softHoverBg}`
         },
         cursor: l ? "not-allowed" : "pointer",
         opacity: l ? 0.5 : 1
@@ -1935,7 +1964,7 @@ const wt = (t, e) => {
       onClick: l ? void 0 : a,
       children: [
         /* @__PURE__ */ r(
-          A,
+          L,
           {
             sx: {
               display: "flex",
@@ -1943,192 +1972,204 @@ const wt = (t, e) => {
               fontSize: "1.25rem",
               color: "inherit"
             },
-            children: Zt[t]
+            children: ir[o]
           }
         ),
         e > 0 && /* @__PURE__ */ r(
-          K,
+          W,
           {
             level: "body-sm",
             sx: {
-              color: n ? i() : s.textPrimary,
+              color: n ? u() : i.textPrimary,
               fontWeight: 500
             },
-            children: c(e)
+            children: s(e)
           }
         )
       ]
     }
   );
-}, Ye = (t, e) => {
-  const [n, a] = w(null);
-  return Ce(() => {
+}, so = (o, e) => {
+  const [n, a] = H(null);
+  return be(() => {
     (async () => {
       if (e)
         try {
-          const s = await t.profile.getOwn().getInfo();
-          a(s.id);
-        } catch (s) {
-          console.error("Failed to get current user ID:", s);
+          const i = await o.profile.getOwn().getInfo();
+          a(i.id);
+        } catch (i) {
+          console.error("Failed to get current user ID:", i);
         }
     })();
-  }, [e, t]), n;
-}, en = ({
-  post: t,
+  }, [e, o]), n;
+}, lr = ({
+  post: o,
   sdk: e,
   userIsLoggedIn: n,
   onSignInClick: a,
   onReact: l,
-  showReactions: s = !0,
+  showReactions: i = !0,
   showReplyButton: c = !0,
-  onReplyClick: i
+  onReplyClick: s
 }) => {
-  var P, b, M, u;
-  const { t: d } = ne(), p = Z(), f = de(), g = ue(), m = Ye(e, n), C = (() => {
-    if (!m || !t.reactions)
+  var S, T, y, $;
+  const { t: u } = le(), d = te(), p = ae(), g = De(), x = re(), f = so(e, n), C = (() => {
+    if (!f || !o.reactions)
       return null;
-    for (const E of t.reactions)
-      if (E.userIds.includes(m))
-        return E.type;
+    for (const v of o.reactions)
+      if (v.userIds.includes(f))
+        return v.type;
     return null;
-  })(), S = (E) => {
+  })(), R = (v) => {
     if (!n) {
       a == null || a();
       return;
     }
-    l(t.id, E);
+    l(o.id, v);
   };
-  return /* @__PURE__ */ L(
-    A,
+  return /* @__PURE__ */ F(
+    L,
     {
       sx: {
         display: "flex",
-        gap: 1,
+        gap: x.xs,
         alignItems: "center",
         flexWrap: "wrap",
-        mb: 1
+        mb: x.xs
       },
       children: [
-        s && /* @__PURE__ */ L(De, { children: [
+        i && /* @__PURE__ */ F(Me, { children: [
           /* @__PURE__ */ r(
-            Ne,
+            Ue,
             {
               reaction: "LIKE",
-              count: ((b = (P = t.reactions) == null ? void 0 : P.find((E) => E.type === "LIKE")) == null ? void 0 : b.reactionCount) || 0,
+              count: ((T = (S = o.reactions) == null ? void 0 : S.find((v) => v.type === "LIKE")) == null ? void 0 : T.reactionCount) || 0,
               isActive: C === "LIKE",
-              onClick: () => S("LIKE"),
+              onClick: () => R("LIKE"),
               disabled: !n
             }
           ),
           /* @__PURE__ */ r(
-            Ne,
+            Ue,
             {
               reaction: "DISLIKE",
-              count: ((u = (M = t.reactions) == null ? void 0 : M.find((E) => E.type === "DISLIKE")) == null ? void 0 : u.reactionCount) || 0,
+              count: (($ = (y = o.reactions) == null ? void 0 : y.find((v) => v.type === "DISLIKE")) == null ? void 0 : $.reactionCount) || 0,
               isActive: C === "DISLIKE",
-              onClick: () => S("DISLIKE"),
+              onClick: () => R("DISLIKE"),
               disabled: !n
             }
           )
         ] }),
         c && /* @__PURE__ */ r(
-          Q,
+          oe,
           {
             size: "sm",
             variant: "plain",
-            onClick: i,
-            startDecorator: /* @__PURE__ */ r(Jt, { fontSize: "small" }),
+            onClick: s,
+            startDecorator: /* @__PURE__ */ r(or, { fontSize: "small" }),
             sx: {
-              ml: 1,
+              ml: x.xs,
               fontFamily: g.primary,
-              color: p.textPrimary,
+              color: d.textPrimary,
               fontWeight: 600,
               fontSize: "0.8125rem",
-              borderRadius: f.sm,
-              px: 1,
-              py: 0.5,
+              borderRadius: p.sm,
+              px: x.xs,
+              py: x["2xs"],
               minHeight: "unset",
-              "--Icon-color": p.textPrimary,
+              "--Icon-color": d.textPrimary,
               "&:hover": {
-                bgcolor: `${p.textPrimary}14`
+                bgcolor: `${d.textPrimary}14`
               }
             },
-            children: d("discussion.reply", "Reply")
+            children: u("discussion.reply", "Reply")
           }
         )
       ]
     }
   );
-}, on = ({
-  isOwnPost: t,
+}, ar = ({
+  isOwnPost: o,
   canReport: e,
   onDelete: n,
   onReport: a
 }) => {
-  const { t: l } = ne(), s = Be(), { shadowRootElement: c } = ze(Te), i = de(), d = Z(), [p, f] = ho.useState(null);
-  if (!t && !e) return null;
-  const g = {
+  const { t: l } = le(), { shadowRootElement: i } = we(Ne), c = ae(), s = te(), u = re(), [d, p] = q.useState(null), g = q.useRef(null);
+  if (q.useEffect(() => {
+    if (!d) return;
+    const b = (R) => {
+      const S = R.composedPath();
+      d && S.includes(d) || g.current && S.includes(g.current) || p(null);
+    }, C = setTimeout(() => {
+      document.addEventListener("click", b, !0);
+    }, 0);
+    return () => {
+      clearTimeout(C), document.removeEventListener("click", b, !0);
+    };
+  }, [d]), !o && !e) return null;
+  const x = {
     zIndex: 1300,
-    bgcolor: s.colorSchemes.light.palette.background.popup,
-    border: `1px solid ${s.colorSchemes.light.palette.neutral.outlinedBorder}`,
-    borderRadius: i.sm,
-    boxShadow: "0 4px 6px -1px rgb(0 0 0 / 0.1)"
-  }, m = {
-    color: `${s.colorSchemes.light.palette.neutral.outlinedColor} !important`,
-    bgcolor: `${s.colorSchemes.light.palette.background.popup} !important`,
+    bgcolor: s.surface,
+    border: `1px solid ${s.outlineEnabledBorder}`,
+    borderRadius: c.sm,
+    boxShadow: "none"
+  }, f = {
+    color: `${s.textPrimary} !important`,
+    bgcolor: `${s.surface} !important`,
     "&:hover": {
-      bgcolor: `${s.colorSchemes.light.palette.neutral.outlinedHoverBg} !important`,
-      color: `${s.colorSchemes.light.palette.neutral.outlinedColor} !important`
+      bgcolor: `${s.surfaceVariant} !important`,
+      color: `${s.textPrimary} !important`
     }
   };
-  return /* @__PURE__ */ L(De, { children: [
+  return /* @__PURE__ */ F(Me, { children: [
     /* @__PURE__ */ r(
-      Io,
+      To,
       {
         size: "sm",
         variant: "plain",
-        onClick: (v) => f(v.currentTarget),
+        onClick: (b) => p(d ? null : b.currentTarget),
         sx: {
           ml: "auto",
-          color: d.textPrimary,
+          color: s.textPrimary,
           "&:hover": {
-            bgcolor: `${d.textPrimary}14`
+            bgcolor: `${s.textPrimary}14`
           }
         },
-        children: /* @__PURE__ */ r(Gt, { fontSize: "small" })
+        children: /* @__PURE__ */ r(Zt, { fontSize: "small" })
       }
     ),
-    /* @__PURE__ */ L(
-      We,
+    /* @__PURE__ */ F(
+      eo,
       {
-        anchorEl: p,
-        open: !!p,
-        onClose: () => f(null),
-        container: c,
-        sx: g,
+        ref: g,
+        anchorEl: d,
+        open: !!d,
+        onClose: () => p(null),
+        container: i,
+        sx: x,
         children: [
-          t && /* @__PURE__ */ L(
-            Ie,
+          o && /* @__PURE__ */ F(
+            Ve,
             {
               onClick: () => {
-                f(null), n();
+                p(null), n();
               },
-              sx: m,
+              sx: f,
               children: [
-                /* @__PURE__ */ r(Bt, { fontSize: "small", sx: { mr: 1 } }),
+                /* @__PURE__ */ r(Gt, { fontSize: "small", sx: { mr: u.xs } }),
                 l("discussion.delete.action", "Delete")
               ]
             }
           ),
-          e && /* @__PURE__ */ L(
-            Ie,
+          e && /* @__PURE__ */ F(
+            Ve,
             {
               onClick: () => {
-                f(null), a();
+                p(null), a();
               },
-              sx: m,
+              sx: f,
               children: [
-                /* @__PURE__ */ r(Kt, { fontSize: "small", sx: { mr: 1 } }),
+                /* @__PURE__ */ r(Yt, { fontSize: "small", sx: { mr: u.xs } }),
                 l("discussion.report.action", "Report")
               ]
             }
@@ -2137,127 +2178,143 @@ const wt = (t, e) => {
       }
     )
   ] });
-}, tn = ({
-  open: t,
+}, cr = ({
+  open: o,
   onClose: e,
   onConfirm: n,
   onError: a,
   container: l
 }) => {
-  const { t: s } = ne(), c = Z(), i = de(), d = ue(), p = c.palette.primary.onPrimary, [f, g] = w(!1), m = async () => {
-    g(!0);
+  const { t: i } = le(), c = te(), s = ae(), u = De(), d = re(), p = c.palette.primary.plainColor, g = c.palette.primary.onPrimary, [x, f] = H(!1), b = async () => {
+    f(!0);
     try {
       await n(), e();
     } catch {
       a(
-        s(
+        i(
           "discussion.delete.error",
           "Failed to delete comment. Please try again."
         )
       );
     } finally {
-      g(!1);
+      f(!1);
     }
   };
-  return /* @__PURE__ */ r(He, { open: t, onClose: e, container: l, children: /* @__PURE__ */ L(
-    je,
+  return /* @__PURE__ */ r(qe, { open: o, onClose: e, container: l, children: /* @__PURE__ */ F(
+    Xe,
     {
       sx: {
         bgcolor: c.surface,
         color: c.textPrimary,
-        borderRadius: i.md,
-        p: 3,
+        borderRadius: s.md,
+        p: d.lg,
         minWidth: 320,
         maxWidth: 400
       },
       children: [
         /* @__PURE__ */ r(
-          K,
+          W,
           {
             level: "title-lg",
-            sx: { mb: 1, fontFamily: d.primary },
-            children: s("discussion.delete.title", "Delete comment")
+            sx: { mb: d.xs, fontFamily: u.primary },
+            children: i("discussion.delete.title", "Delete comment")
           }
         ),
-        /* @__PURE__ */ r(K, { level: "body-sm", sx: { mb: 3, color: c.textSecondary }, children: s(
+        /* @__PURE__ */ r(W, { level: "body-sm", sx: { mb: d.lg, color: c.textSecondary }, children: i(
           "discussion.delete.description",
           "Are you sure you want to delete this comment? This action cannot be undone."
         ) }),
-        /* @__PURE__ */ L(A, { sx: { display: "flex", gap: 1, justifyContent: "flex-end" }, children: [
+        /* @__PURE__ */ F(L, { sx: { display: "flex", gap: d.xs, justifyContent: "flex-end" }, children: [
           /* @__PURE__ */ r(
-            Q,
+            oe,
             {
               variant: "plain",
               onClick: e,
               sx: {
-                fontFamily: d.primary,
+                fontFamily: u.primary,
                 color: c.textPrimary,
-                borderRadius: i.sm,
+                borderRadius: s.sm,
                 "&:hover": { bgcolor: `${c.textPrimary}14` }
               },
-              children: s("common.cancel", "Cancel")
+              children: i("common.cancel", "Cancel")
             }
           ),
           /* @__PURE__ */ r(
-            Q,
+            oe,
             {
               variant: "solid",
-              loading: f,
-              disabled: f,
-              onClick: m,
+              loading: x,
+              disabled: x,
+              onClick: b,
               sx: {
-                fontFamily: d.primary,
-                bgcolor: c.palette.danger.plainColor,
-                color: p,
-                borderRadius: i.sm,
+                fontFamily: u.primary,
+                bgcolor: p,
+                color: g,
+                borderRadius: s.sm,
                 "&:hover": {
-                  bgcolor: c.palette.danger.plainColor,
+                  bgcolor: p,
                   opacity: 0.9
                 },
                 "&:disabled": {
-                  bgcolor: c.palette.danger.plainColor,
-                  color: p,
+                  bgcolor: p,
+                  color: g,
                   opacity: 0.4
                 }
               },
-              children: s("discussion.delete.action", "Delete")
+              children: i("discussion.delete.action", "Delete")
             }
           )
         ] })
       ]
     }
   ) });
-}, nn = [
+}, dr = [
   { value: "SPAM", labelKey: "discussion.report.spam", fallback: "Spam" },
-  { value: "NOT_ON_THE_SUBJECT", labelKey: "discussion.report.offTopic", fallback: "Off topic" },
+  {
+    value: "NOT_ON_THE_SUBJECT",
+    labelKey: "discussion.report.offTopic",
+    fallback: "Off topic"
+  },
   { value: "AD", labelKey: "discussion.report.ad", fallback: "Advertisement" },
-  { value: "COPYRIGHT", labelKey: "discussion.report.copyright", fallback: "Copyright violation" },
-  { value: "EXPLICIT_SEXUAL_CONTENT", labelKey: "discussion.report.explicit", fallback: "Explicit sexual content" },
-  { value: "HATEFUL_SPEECH", labelKey: "discussion.report.hateful", fallback: "Hateful speech" },
+  {
+    value: "COPYRIGHT",
+    labelKey: "discussion.report.copyright",
+    fallback: "Copyright violation"
+  },
+  {
+    value: "EXPLICIT_SEXUAL_CONTENT",
+    labelKey: "discussion.report.explicit",
+    fallback: "Explicit sexual content"
+  },
+  {
+    value: "HATEFUL_SPEECH",
+    labelKey: "discussion.report.hateful",
+    fallback: "Hateful speech"
+  },
   { value: "INSULT", labelKey: "discussion.report.insult", fallback: "Insult" },
   { value: "OTHER", labelKey: "discussion.report.other", fallback: "Other" }
-], rn = ({
-  open: t,
+], ur = ({
+  open: o,
   onClose: e,
   onSubmit: n,
   onSuccess: a,
   onError: l,
-  container: s
+  container: i
 }) => {
-  const { t: c } = ne(), i = Z(), d = de(), p = ue(), f = i.palette.primary.onPrimary, [g, m] = w(""), [v, C] = w(""), [S, P] = w(!1), b = () => {
-    e(), m(""), C("");
-  }, M = async () => {
-    P(!0);
+  const { t: c } = le(), s = te(), u = ae(), d = De(), p = re(), g = s.palette.primary.plainColor, x = s.palette.primary.onPrimary, [f, b] = H(""), [C, R] = H(""), [S, T] = H(!1), y = () => {
+    e(), b(""), R("");
+  }, $ = async () => {
+    T(!0);
     try {
       await n(
-        g,
-        g === "OTHER" ? v : void 0
+        f,
+        f === "OTHER" ? C : void 0
       ), a(
         c(
           "discussion.report.success",
           "Post reported successfully. Thank you."
         )
-      ), b();
+      ), y();
     } catch {
       l(
         c(
@@ -2266,117 +2323,134 @@ const wt = (t, e) => {
         )
       );
     } finally {
-      P(!1);
+      T(!1);
     }
   };
-  return /* @__PURE__ */ r(He, { open: t, onClose: b, container: s, children: /* @__PURE__ */ L(
-    je,
+  return /* @__PURE__ */ r(qe, { open: o, onClose: y, container: i, children: /* @__PURE__ */ F(
+    Xe,
     {
       sx: {
-        bgcolor: i.surface,
-        color: i.textPrimary,
-        borderRadius: d.md,
-        p: 3,
+        bgcolor: s.surface,
+        color: s.textPrimary,
+        borderRadius: u.md,
+        p: p.lg,
         minWidth: 320,
         maxWidth: 440
       },
       children: [
         /* @__PURE__ */ r(
-          Ge,
+          oo,
           {
             sx: {
-              color: i.textPrimary,
-              "&:hover": { bgcolor: `${i.textPrimary}14` }
+              color: s.textPrimary,
+              "&:hover": { bgcolor: `${s.textPrimary}14` }
             }
           }
         ),
         /* @__PURE__ */ r(
-          K,
+          W,
           {
             level: "title-lg",
-            sx: { mb: 2, fontFamily: p.primary },
+            sx: { mb: p.md, fontFamily: d.primary },
             children: c("discussion.report.title", "Report post")
           }
         ),
+        /* @__PURE__ */ r(W, { level: "body-sm", sx: { mb: p.md, color: s.textSecondary }, children: c(
+          "discussion.report.description",
+          "Why are you reporting this post?"
+        ) }),
         /* @__PURE__ */ r(
-          K,
-          {
-            level: "body-sm",
-            sx: { mb: 2, color: i.textSecondary },
-            children: c(
-              "discussion.report.description",
-              "Why are you reporting this post?"
-            )
-          }
-        ),
-        /* @__PURE__ */ r(
-          qe,
+          ro,
           {
-            value: g,
-            onChange: (u) => m(u.target.value),
-            sx: { gap: 1, mb: 2 },
-            children: nn.map((u) => /* @__PURE__ */ r(
-              Je,
+            value: f,
+            onChange: (v) => b(v.target.value),
+            sx: { gap: p.xs, mb: p.md },
+            children: dr.map((v) => /* @__PURE__ */ r(
+              to,
               {
-                value: u.value,
-                label: c(u.labelKey, u.fallback),
+                value: v.value,
+                label: c(v.labelKey, v.fallback),
+                slotProps: {
+                  radio: {
+                    sx: {
+                      bgcolor: s.surfaceVariant,
+                      borderColor: s.outlineEnabledBorder,
+                      "&:hover": {
+                        bgcolor: s.surface,
+                        borderColor: s.outlineEnabledBorder
+                      }
+                    }
+                  }
+                },
                 sx: {
-                  fontFamily: p.primary,
-                  color: i.textPrimary
+                  fontFamily: d.primary,
+                  color: s.textPrimary
                 }
               },
-              u.value
+              v.value
             ))
           }
         ),
-        g === "OTHER" && /* @__PURE__ */ r(
-          Ue,
+        f === "OTHER" && /* @__PURE__ */ r(
+          Ye,
           {
             placeholder: c(
               "discussion.report.detailsPlaceholder",
               "Please provide more details..."
             ),
-            value: v,
-            onChange: (u) => C(u.target.value),
+            value: C,
+            onChange: (v) => R(v.target.value),
             minRows: 2,
             maxRows: 4,
-            sx: { mb: 2 }
+            sx: {
+              mb: p.md,
+              bgcolor: s.surfaceVariant,
+              color: s.textPrimary,
+              border: `1px solid ${s.outlineEnabledBorder}`,
+              borderRadius: u.sm,
+              boxShadow: "none",
+              "&::before": { display: "none" },
+              "&:focus-within": {
+                border: `1px solid ${g}`,
+                boxShadow: "none"
+              }
+            }
           }
         ),
-        /* @__PURE__ */ L(A, { sx: { display: "flex", gap: 1, justifyContent: "flex-end" }, children: [
+        /* @__PURE__ */ F(L, { sx: { display: "flex", gap: p.xs, justifyContent: "flex-end" }, children: [
           /* @__PURE__ */ r(
-            Q,
+            oe,
             {
               variant: "plain",
-              onClick: b,
+              onClick: y,
               sx: {
-                fontFamily: p.primary,
-                color: i.textPrimary,
-                borderRadius: d.sm,
-                "&:hover": { bgcolor: `${i.textPrimary}14` }
+                fontFamily: d.primary,
+                color: s.textPrimary,
+                borderRadius: u.sm,
+                "&:hover": { bgcolor: `${s.textPrimary}14` }
               },
               children: c("common.cancel", "Cancel")
             }
           ),
           /* @__PURE__ */ r(
-            Q,
+            oe,
             {
               variant: "solid",
-              disabled: !g || S,
+              disabled: !f || S,
               loading: S,
-              onClick: M,
+              onClick: $,
               sx: {
-                fontFamily: p.primary,
-                bgcolor: i.palette.danger.plainColor,
-                color: f,
-                borderRadius: d.sm,
+                fontFamily: d.primary,
+                bgcolor: g,
+                color: x,
+                borderRadius: u.sm,
                 "&:hover": {
-                  bgcolor: i.palette.danger.plainColor,
+                  bgcolor: g,
                   opacity: 0.9
                 },
                 "&:disabled": {
-                  bgcolor: i.palette.danger.plainColor,
-                  color: f,
+                  bgcolor: g,
+                  color: x,
                   opacity: 0.4
                 }
               },
@@ -2387,387 +2461,487 @@ const wt = (t, e) => {
       ]
     }
   ) });
-}, sn = (t, e) => {
-  const n = new Date(t), l = (/* @__PURE__ */ new Date()).getTime() - n.getTime(), s = Math.floor(l / 6e4), c = Math.floor(l / 36e5), i = Math.floor(l / 864e5);
-  return s < 1 ? e("discussion.justNow", "Just now") : s < 60 ? e("discussion.minutesAgo", "{{count}}m ago", { count: s }) : c < 24 ? e("discussion.hoursAgo", "{{count}}h ago", { count: c }) : i < 7 ? e("discussion.daysAgo", "{{count}}d ago", { count: i }) : n.toLocaleDateString();
-}, Qe = ({
-  post: t,
+}, pr = (o, e) => {
+  const n = new Date(o), l = (/* @__PURE__ */ new Date()).getTime() - n.getTime(), i = Math.floor(l / 6e4), c = Math.floor(l / 36e5), s = Math.floor(l / 864e5);
+  return i < 1 ? e("discussion.justNow", "Just now") : i < 60 ? e("discussion.minutesAgo", "{{count}}m ago", { count: i }) : c < 24 ? e("discussion.hoursAgo", "{{count}}h ago", { count: c }) : s < 7 ? e("discussion.daysAgo", "{{count}}d ago", { count: s }) : n.toLocaleDateString();
+}, io = ({
+  post: o,
   sdk: e,
   userIsLoggedIn: n,
   onSignInClick: a,
   showReactions: l = !0,
-  showReplies: s = !0,
+  showReplies: i = !0,
   showReportPost: c = !0,
-  onReply: i,
-  onReact: d,
-  onDelete: p,
-  onReport: f,
+  onReply: s,
+  onReact: u,
+  onDelete: d,
+  onReport: p,
   isSubmitting: g,
-  depth: m = 0,
-  parentPostId: v,
-  onReplyCreated: C
+  showModeratedPosts: x = !1,
+  depth: f = 0,
+  parentPostId: b,
+  onReplyCreated: C,
+  onDeleteSuccess: R
 }) => {
-  var k, ee, ge, ye;
-  const { t: S } = ne(), { shadowRootElement: P } = ze(Te), b = Z(), M = ue(), u = Ye(e, n), [E, F] = w(!1), [I, D] = w([]), [z, B] = w(!1), [H, $] = w(!1), [T, R] = w(!1), [V, N] = w({ open: !1, message: "", color: "success" }), j = !!(n && u && t.userId === u), q = async (_) => {
-    var oe;
-    const W = m === 1 && v || t.id, re = ((oe = t.userModel) == null ? void 0 : oe.name) || t.anonymousNickname || S("discussion.anonymous", "Anonymous"), be = m === 1 ? `@${re} ${_}` : _;
-    await i(W, be), F(!1), m === 1 && C ? C() : m === 0 && X();
-  }, X = async () => {
-    if (!(!s || m >= 2))
+  var Pe, ne, Se, ze;
+  const { t: S } = le(), { shadowRootElement: T } = we(Ne), y = te(), $ = ae(), v = re(), E = so(e, n), [h, O] = H(!1), [N, A] = H([]), [j, U] = H(!1), [B, K] = H(!1), [k, _] = H(!1), [P, V] = H({ open: !1, variant: "success", title: "", message: "" }), m = !!(n && E && o.userId === E), D = async (w) => {
+    var se;
+    const X = f === 1 && b || o.id, Y = ((se = o.userModel) == null ? void 0 : se.name) || o.anonymousNickname || S("discussion.anonymous", "Anonymous"), he = f === 1 ? `@${Y} ${w}` : w;
+    await s(X, he), O(!1), f === 1 && C ? C() : f === 0 && (U(!0), z());
+  }, z = async () => {
+    if (!(!i || f >= 2))
       try {
-        const _ = await e.discussions.getPostReplies(t.id, {
+        const w = await e.discussions.getPostReplies(o.id, {
           limit: 25,
           skipDeleted: !0,
-          skipModerated: !0
+          skipModerated: !x
         });
-        D(_.data);
-      } catch (_) {
-        console.error("Failed to load replies:", _);
+        A(w.data);
+      } catch (w) {
+        console.error("Failed to load replies:", w);
       }
   };
-  Ce(() => {
-    z && I.length === 0 && X();
-  }, [z]);
-  const h = async (_, W) => {
-    const re = await d(_, W);
-    re && I.length > 0 && D(
-      (be) => be.map((oe) => oe.id === _ ? re : oe)
+  be(() => {
+    j && N.length === 0 && z();
+  }, [j]);
+  const ee = async (w) => {
+    await d(w, o.id), A((X) => X.filter((Y) => Y.id !== w));
+  }, fe = async (w, X) => {
+    const Y = await u(w, X);
+    Y && N.length > 0 && A(
+      (he) => he.map((se) => se.id === w ? Y : se)
     );
-  }, O = (_, W) => {
-    N({ open: !0, message: _, color: W });
+  }, ve = (w, X) => {
+    V({ open: !0, variant: X, title: "", message: w });
   };
-  return /* @__PURE__ */ L(A, { sx: { mb: 2, ml: m > 0 ? 4 : 0 }, children: [
-    /* @__PURE__ */ L(A, { sx: { display: "flex", gap: 1.5 }, children: [
+  return /* @__PURE__ */ F(L, { sx: { mb: v.md, ml: f > 0 ? v.xl : 0 }, children: [
+    /* @__PURE__ */ F(L, { sx: { display: "flex", gap: v.sm }, children: [
       /* @__PURE__ */ r(
-        Zo,
+        it,
         {
-          src: (k = t.userModel) == null ? void 0 : k.avatar,
-          alt: ((ee = t.userModel) == null ? void 0 : ee.name) || t.anonymousNickname || "User",
-          size: "sm"
+          src: (Pe = o.userModel) == null ? void 0 : Pe.avatar,
+          alt: ((ne = o.userModel) == null ? void 0 : ne.name) || o.anonymousNickname || "User",
+          size: "sm",
+          sx: { bgcolor: y.surfaceVariant, color: y.textPrimary }
         }
       ),
-      /* @__PURE__ */ L(A, { sx: { flex: 1, minWidth: 0 }, children: [
-        /* @__PURE__ */ L(A, { sx: { display: "flex", alignItems: "center", gap: 1, mb: 0.5 }, children: [
-          /* @__PURE__ */ r(K, { level: "title-sm", children: ((ge = t.userModel) == null ? void 0 : ge.name) || t.anonymousNickname || S("discussion.anonymous", "Anonymous") }),
-          /* @__PURE__ */ r(K, { level: "body-xs", sx: { color: b.textSecondary }, children: sn(t.createdAt, S) }),
+      /* @__PURE__ */ F(L, { sx: { flex: 1, minWidth: 0 }, children: [
+        /* @__PURE__ */ F(L, { sx: { display: "flex", alignItems: "center", gap: v.xs, mb: v["2xs"] }, children: [
+          /* @__PURE__ */ r(W, { level: "title-sm", sx: { color: y.textPrimary }, children: ((Se = o.userModel) == null ? void 0 : Se.name) || o.anonymousNickname || S("discussion.anonymous", "Anonymous") }),
+          /* @__PURE__ */ r(W, { level: "body-xs", sx: { color: y.textSecondary }, children: pr(o.createdAt, S) }),
           /* @__PURE__ */ r(
-            on,
+            ar,
             {
-              isOwnPost: j,
-              canReport: !!(c && n && !j),
-              onDelete: () => $(!0),
-              onReport: () => R(!0)
+              isOwnPost: m,
+              canReport: !!(c && n && !m),
+              onDelete: () => K(!0),
+              onReport: () => _(!0)
             }
           )
         ] }),
-        /* @__PURE__ */ r(K, { level: "body-sm", sx: { mb: 1, whiteSpace: "pre-wrap" }, children: t.content }),
+        o.moderated && x ? /* @__PURE__ */ F(
+          L,
+          {
+            sx: {
+              mb: v.xs,
+              mr: v.md,
+              px: v.sm,
+              py: v.xs,
+              borderRadius: $.xs,
+              borderLeft: `3px solid ${y.outlineEnabledBorder}`,
+              bgcolor: y.surfaceVariant,
+              display: "flex",
+              alignItems: "flex-start",
+              gap: v.xs
+            },
+            children: [
+              /* @__PURE__ */ r(
+                er,
+                {
+                  sx: {
+                    fontSize: 15,
+                    color: y.textSecondary,
+                    mt: "2px",
+                    flexShrink: 0
+                  }
+                }
+              ),
+              /* @__PURE__ */ r(
+                W,
+                {
+                  level: "body-sm",
+                  sx: { fontStyle: "italic", color: y.textSecondary, lineHeight: 1.5 },
+                  children: o.moderatedReason || S(
+                    "discussion.moderatedPost",
+                    "This comment has been moderated"
+                  )
+                }
+              )
+            ]
+          }
+        ) : /* @__PURE__ */ r(
+          W,
+          {
+            level: "body-sm",
+            sx: { mb: v.xs, whiteSpace: "pre-wrap", color: y.textBody },
+            children: o.content
+          }
+        ),
         /* @__PURE__ */ r(
-          en,
+          lr,
           {
-            post: t,
+            post: o,
             sdk: e,
             userIsLoggedIn: n,
             onSignInClick: a,
-            onReact: d,
+            onReact: u,
             showReactions: l,
-            showReplyButton: s && m < 2,
-            onReplyClick: () => F(!E)
+            showReplyButton: i && f < 2,
+            onReplyClick: () => O(!h)
           }
         ),
-        s && t.repliesCount > 0 && /* @__PURE__ */ r(A, { sx: { mb: 1 }, children: /* @__PURE__ */ L(
-          K,
+        i && o.repliesCount > 0 && /* @__PURE__ */ r(L, { sx: { mb: v.xs }, children: /* @__PURE__ */ F(
+          W,
           {
             level: "body-sm",
             sx: {
-              color: b.palette.primary.plainColor,
+              color: y.palette.primary.plainColor,
               cursor: "pointer",
               fontWeight: 600,
               display: "flex",
               alignItems: "center",
-              gap: 0.5
+              gap: v["2xs"]
             },
-            onClick: () => B(!z),
+            onClick: () => U(!j),
             children: [
-              z ? S("discussion.hideReplies", "Hide replies") : S("discussion.repliesCount", "{{count}} replies", {
-                count: t.repliesCount
+              j ? S("discussion.hideReplies", "Hide replies") : S("discussion.repliesCount", "{{count}} replies", {
+                count: o.repliesCount
               }),
-              !z && " ▼"
+              !j && " ▼"
             ]
           }
         ) }),
-        E && /* @__PURE__ */ r(A, { sx: { mt: 2 }, children: /* @__PURE__ */ r(
-          Xe,
+        h && /* @__PURE__ */ r(L, { sx: { mt: v.md }, children: /* @__PURE__ */ r(
+          no,
           {
-            onSubmit: q,
+            onSubmit: D,
             userIsLoggedIn: n,
             onSignInClick: a,
             placeholder: S("discussion.writeReply", "Write a reply..."),
             isSubmitting: g,
-            replyTo: ((ye = t.userModel) == null ? void 0 : ye.name) || t.anonymousNickname,
-            onCancel: () => F(!1)
+            replyTo: ((ze = o.userModel) == null ? void 0 : ze.name) || o.anonymousNickname,
+            onCancel: () => O(!1)
           }
         ) }),
-        z && I.length > 0 && /* @__PURE__ */ r(A, { sx: { mt: 2 }, children: I.map((_) => /* @__PURE__ */ r(
-          Qe,
+        j && N.length > 0 && /* @__PURE__ */ r(L, { sx: { mt: v.md }, children: N.map((w) => /* @__PURE__ */ r(
+          io,
           {
-            post: _,
+            post: w,
             sdk: e,
             userIsLoggedIn: n,
             onSignInClick: a,
             showReactions: l,
-            showReplies: s,
+            showReplies: i,
             showReportPost: c,
-            onReply: i,
-            onReact: h,
-            onDelete: p,
-            onReport: f,
+            onReply: s,
+            onReact: fe,
+            onDelete: ee,
+            onReport: p,
             isSubmitting: g,
-            depth: m + 1,
-            parentPostId: m === 0 ? t.id : v,
-            onReplyCreated: m === 0 ? X : void 0
+            showModeratedPosts: x,
+            depth: f + 1,
+            parentPostId: f === 0 ? o.id : b,
+            onReplyCreated: f === 0 ? z : void 0,
+            onDeleteSuccess: R
           },
-          _.id
+          w.id
         )) })
       ] })
     ] }),
     /* @__PURE__ */ r(
-      tn,
+      cr,
       {
-        open: H,
-        onClose: () => $(!1),
-        onConfirm: () => p(t.id),
-        onError: (_) => O(_, "danger"),
-        container: P
+        open: B,
+        onClose: () => K(!1),
+        onConfirm: async () => {
+          await d(o.id), R == null || R();
+        },
+        onError: (w) => ve(w, "error"),
+        container: T
       }
     ),
     /* @__PURE__ */ r(
-      rn,
+      ur,
       {
-        open: T,
-        onClose: () => R(!1),
-        onSubmit: (_, W) => f(t.id, _, W),
-        onSuccess: (_) => O(_, "success"),
-        onError: (_) => O(_, "danger"),
-        container: P
+        open: k,
+        onClose: () => _(!1),
+        onSubmit: (w, X) => p(o.id, w, X),
+        onSuccess: (w) => ve(w, "success"),
+        onError: (w) => ve(w, "error"),
+        container: T
       }
     ),
     /* @__PURE__ */ r(
-      et,
+      Ze,
       {
-        open: V.open,
-        autoHideDuration: 4e3,
-        onClose: () => N((_) => ({ ..._, open: !1 })),
-        color: V.color,
-        variant: "soft",
-        sx: {
-          fontFamily: M.primary,
-          bgcolor: V.color === "success" ? b.palette.success.softBg : b.palette.danger.softBg,
-          color: V.color === "success" ? b.palette.success.plainColor : b.palette.danger.plainColor
-        },
-        children: V.message
+        notification: P,
+        onClose: () => V((w) => ({ ...w, open: !1 }))
       }
     )
   ] });
-}, ln = ({
-  discussion: t,
+}, mr = ({
+  discussion: o,
   posts: e,
   sdk: n,
   userIsLoggedIn: a,
   onSignInClick: l,
-  showReactions: s,
+  showReactions: i,
   showReplies: c,
-  showReportPost: i,
-  currentSort: d,
-  onSortChange: p,
-  onCreatePost: f,
+  showReportPost: s,
+  currentSort: u,
+  onSortChange: d,
+  onCreatePost: p,
   onReact: g,
-  onDeletePost: m,
-  onReportPost: v,
-  onLoadMore: C,
-  hasMore: S,
-  isLoading: P,
-  isSubmitting: b
+  onDeletePost: x,
+  onReportPost: f,
+  onLoadMore: b,
+  hasMore: C,
+  isLoading: R,
+  isSubmitting: S,
+  infiniteScroll: T = !1,
+  showModeratedPosts: y = !1
 }) => {
-  const { t: M } = ne(), u = Be(), { shadowRootElement: E } = ze(Te), F = de(), I = Z(), D = ue(), z = I.palette.primary.plainColor, B = [
-    { value: "LATEST", label: M("discussion.sort.latest", "Latest") },
-    { value: "OLDEST", label: M("discussion.sort.oldest", "Oldest") },
-    { value: "POPULAR", label: M("discussion.sort.popular", "Popular") },
+  const { t: $ } = le(), { shadowRootElement: v } = we(Ne), E = ae(), h = te(), O = re(), N = Ie(null), A = Ie(null);
+  be(() => {
+    if (!T || !A.current) return;
+    const P = new IntersectionObserver(
+      (V) => {
+        V[0].isIntersecting && C && !R && b();
+      },
+      { root: N.current, threshold: 0.1 }
+    );
+    return P.observe(A.current), () => P.disconnect();
+  }, [T, C, R, b]);
+  const [j, U] = H({ open: !1, variant: "success", title: "", message: "" }), B = () => {
+    U({
+      open: !0,
+      variant: "success",
+      title: "",
+      message: $("discussion.delete.success", "Comment deleted successfully.")
+    });
+  }, K = [
+    { value: "LATEST", label: $("discussion.sort.latest", "Latest") },
+    { value: "OLDEST", label: $("discussion.sort.oldest", "Oldest") },
+    { value: "POPULAR", label: $("discussion.sort.popular", "Popular") },
     {
       value: "INTERACTED",
-      label: M("discussion.sort.interacted", "Most Interacted")
+      label: $("discussion.sort.interacted", "Most Interacted")
     }
-  ], H = {
+  ], k = {
     listbox: {
-      container: E,
+      container: v,
       sx: {
         zIndex: 1300,
-        bgcolor: u.colorSchemes.light.palette.background.popup,
-        border: `1px solid ${u.colorSchemes.light.palette.neutral.outlinedBorder}`,
-        borderRadius: F.sm,
+        bgcolor: h.surface,
+        border: `1px solid ${h.outlineEnabledBorder}`,
+        borderRadius: E.sm,
         boxShadow: "0 4px 6px -1px rgb(0 0 0 / 0.1)"
       }
     }
-  }, $ = {
-    color: `${u.colorSchemes.light.palette.neutral.outlinedColor} !important`,
-    bgcolor: `${u.colorSchemes.light.palette.background.popup} !important`,
+  }, _ = {
+    color: `${h.textPrimary} !important`,
+    bgcolor: `${h.surface} !important`,
     "&:hover": {
-      bgcolor: `${u.colorSchemes.light.palette.neutral.outlinedHoverBg} !important`,
-      color: `${u.colorSchemes.light.palette.neutral.outlinedColor} !important`
+      bgcolor: `${h.surfaceVariant} !important`,
+      color: `${h.textPrimary} !important`
     },
     "&.Mui-selected": {
-      bgcolor: `${u.colorSchemes.light.palette.neutral.plainActiveBg} !important`,
-      color: `${u.colorSchemes.light.palette.neutral.outlinedColor} !important`
+      bgcolor: `${h.surfaceVariant} !important`,
+      color: `${h.textPrimary} !important`
     },
     "&.Mui-selected:hover": {
-      bgcolor: `${u.colorSchemes.light.palette.neutral.outlinedHoverBg} !important`,
-      color: `${u.colorSchemes.light.palette.neutral.outlinedColor} !important`
+      bgcolor: `${h.surfaceVariant} !important`,
+      color: `${h.textPrimary} !important`
     }
   };
-  return /* @__PURE__ */ L(
-    A,
+  return /* @__PURE__ */ F(
+    L,
     {
+      ref: N,
       sx: {
         mx: "auto",
-        bgcolor: I.surface,
+        maxHeight: "100%",
+        overflowY: "auto",
+        bgcolor: h.surface,
         borderRadius: "md",
         boxShadow: "sm"
       },
       children: [
-        /* @__PURE__ */ L(A, { sx: { mb: 3 }, children: [
-          /* @__PURE__ */ r(K, { level: "h3", sx: { mb: 1 }, children: t.label || M("discussion.title", "Discussion") }),
-          /* @__PURE__ */ r(K, { level: "body-sm", sx: { color: I.textSecondary }, children: M("discussion.postsCount", "{{count}} posts", {
-            count: t.postsCount || 0
+        /* @__PURE__ */ F(L, { sx: { mb: O.lg }, children: [
+          /* @__PURE__ */ r(W, { level: "h3", sx: { mb: O.xs }, children: o.label || $("discussion.title", "Discussion") }),
+          /* @__PURE__ */ r(W, { level: "body-sm", sx: { color: h.textSecondary }, children: $("discussion.postsCount", "{{count}} posts", {
+            count: o.postsCount || 0
           }) })
         ] }),
         /* @__PURE__ */ r(
-          Xe,
+          no,
           {
-            onSubmit: (T) => f(T),
+            onSubmit: (P) => p(P),
             userIsLoggedIn: a,
             onSignInClick: l,
-            isSubmitting: b
+            isSubmitting: S
           }
         ),
-        /* @__PURE__ */ r(Oe, { sx: { my: 3 } }),
-        /* @__PURE__ */ L(
-          A,
+        /* @__PURE__ */ r(Fe, { sx: { my: O.lg } }),
+        /* @__PURE__ */ F(
+          L,
           {
             sx: {
-              mb: 3,
+              mb: O.lg,
               display: "flex",
               justifyContent: "space-between",
               alignItems: "center"
             },
             children: [
-              /* @__PURE__ */ r(K, { level: "title-md", children: M("discussion.comments", "Comments") }),
+              /* @__PURE__ */ r(W, { level: "title-md", children: $("discussion.comments", "Comments") }),
               /* @__PURE__ */ r(
-                Xo,
+                rt,
                 {
-                  value: d,
-                  onChange: (T, R) => R && p(R),
+                  value: u,
+                  onChange: (P, V) => V && d(V),
                   size: "sm",
-                  sx: { minWidth: 150 },
-                  slotProps: H,
-                  children: B.map((T) => /* @__PURE__ */ r(Yo, { value: T.value, sx: $, children: T.label }, T.value))
+                  sx: {
+                    minWidth: 150,
+                    bgcolor: h.surfaceVariant,
+                    color: h.textPrimary,
+                    border: `1px solid ${h.outlineEnabledBorder}`,
+                    borderRadius: E.sm,
+                    boxShadow: "none",
+                    "&:hover": {
+                      bgcolor: h.surfaceVariant,
+                      boxShadow: "none"
+                    }
+                  },
+                  slotProps: k,
+                  children: K.map((P) => /* @__PURE__ */ r(nt, { value: P.value, sx: _, children: P.label }, P.value))
                 }
               )
             ]
           }
         ),
-        P && e.length === 0 ? /* @__PURE__ */ r(A, { sx: { display: "flex", justifyContent: "center", py: 4 }, children: /* @__PURE__ */ r(Do, {}) }) : e.length === 0 ? /* @__PURE__ */ r(A, { sx: { textAlign: "center", py: 4 }, children: /* @__PURE__ */ r(K, { level: "body-md", sx: { color: I.textSecondary }, children: M(
+        R && e.length === 0 ? /* @__PURE__ */ r(L, { sx: { py: O.xl }, children: /* @__PURE__ */ r(Ee, { my: 4 }) }) : e.length === 0 ? /* @__PURE__ */ r(L, { sx: { textAlign: "center", py: O.xl }, children: /* @__PURE__ */ r(W, { level: "body-md", sx: { color: h.textSecondary }, children: $(
           "discussion.noPosts",
           "No comments yet. Be the first to comment!"
-        ) }) }) : /* @__PURE__ */ L(De, { children: [
-          /* @__PURE__ */ r(A, { children: e.map((T) => /* @__PURE__ */ r(
-            Qe,
+        ) }) }) : /* @__PURE__ */ F(Me, { children: [
+          /* @__PURE__ */ r(L, { children: e.map((P) => /* @__PURE__ */ r(
+            io,
             {
-              post: T,
+              post: P,
               sdk: n,
               userIsLoggedIn: a,
               onSignInClick: l,
-              showReactions: s,
+              showReactions: i,
               showReplies: c,
-              showReportPost: i,
-              onReply: (R, V) => f(V, R),
+              showReportPost: s,
+              onReply: (V, m) => p(m, V),
               onReact: g,
-              onDelete: m,
-              onReport: v,
-              isSubmitting: b
+              onDelete: x,
+              onReport: f,
+              isSubmitting: S,
+              showModeratedPosts: y,
+              onDeleteSuccess: B
             },
-            T.id
+            P.id
           )) }),
-          S && /* @__PURE__ */ r(A, { sx: { display: "flex", justifyContent: "center", mt: 3 }, children: /* @__PURE__ */ r(
-            Q,
-            {
-              variant: "outlined",
-              onClick: C,
-              loading: P,
-              disabled: P,
-              sx: {
-                fontFamily: D.primary,
-                borderColor: z,
-                color: z,
-                borderRadius: F.sm,
-                "&:hover": {
-                  bgcolor: `${z}14`,
-                  borderColor: z
-                },
-                "&:disabled": {
-                  borderColor: z,
-                  color: z,
-                  opacity: 0.4
-                }
+          T && /* @__PURE__ */ r(L, { ref: A, sx: { height: 1 } })
+        ] }),
+        T && R && e.length > 0 && /* @__PURE__ */ r(L, { sx: { py: O.md }, children: /* @__PURE__ */ r(Ee, { my: 2 }) }),
+        !T && C && /* @__PURE__ */ r(L, { sx: { display: "flex", justifyContent: "center", mt: O.lg }, children: /* @__PURE__ */ r(
+          oe,
+          {
+            variant: "outlined",
+            onClick: b,
+            loading: R,
+            disabled: R,
+            sx: {
+              borderColor: h.palette.primary.plainColor,
+              color: h.palette.primary.plainColor,
+              borderRadius: E.sm,
+              "&:hover": {
+                bgcolor: `${h.palette.primary.plainColor}14`,
+                borderColor: h.palette.primary.plainColor
               },
-              children: M("discussion.loadMore", "Load More")
-            }
-          ) })
-        ] })
+              "&:disabled": {
+                borderColor: h.palette.primary.plainColor,
+                color: h.palette.primary.plainColor,
+                opacity: 0.4
+              }
+            },
+            children: $("discussion.loadMore", "Load More")
+          }
+        ) }),
+        /* @__PURE__ */ r(
+          Ze,
+          {
+            notification: j,
+            onClose: () => U((P) => ({ ...P, open: !1 }))
+          }
+        )
       ]
     }
   );
-}, an = (t) => {
+}, fr = (o) => {
   const {
     entityId: e,
     sdk: n,
     discussionLabel: a,
     discussionUrl: l = "",
-    defaultSort: s = "LATEST",
+    defaultSort: i = "LATEST",
     postsPerPage: c = 20,
-    showReactions: i = !0,
-    showReplies: d = !0,
-    showReportPost: p = !0,
-    userIsLoggedIn: f = !1,
-    onSignInClick: g
-  } = t, {
-    discussion: m,
+    showReactions: s = !0,
+    showReplies: u = !0,
+    showReportPost: d = !0,
+    infiniteScroll: p = !1,
+    showModeratedPosts: g = !1,
+    userIsLoggedIn: x = !1,
+    onSignInClick: f
+  } = o, {
+    discussion: b,
+    setDiscussion: C,
+    isLoading: R,
+    error: S,
+    isNotFound: T
+  } = Kt(n, e), y = (_) => {
+    C(
+      (P) => P && { ...P, postsCount: Math.max(0, P.postsCount + _) }
+    );
+  }, {
+    posts: $,
     isLoading: v,
-    error: C,
-    isNotFound: S
-  } = wt(n, e), {
-    posts: P,
-    isLoading: b,
-    isSubmitting: M,
-    currentSort: u,
-    hasMore: E,
-    handleSortChange: F,
-    handleLoadMore: I,
-    handleCreatePost: D,
-    handleReact: z,
+    isSubmitting: E,
+    currentSort: h,
+    hasMore: O,
+    handleSortChange: N,
+    handleLoadMore: A,
+    handleCreatePost: j,
+    handleReact: U,
     handleDeletePost: B,
-    handleReportPost: H
-  } = At(
+    handleReportPost: K
+  } = Wt(
     n,
     e,
-    a,
+    a ?? null,
     l,
-    s,
-    c
+    i,
+    c,
+    y,
+    g
   );
-  if (v || !m && !S && b)
-    return /* @__PURE__ */ r(Oo, { my: 20 });
-  if (C)
+  if (R || !b && !T && v)
+    return /* @__PURE__ */ r(Ee, { my: 20 });
+  if (S)
     return /* @__PURE__ */ r("div", { style: { padding: "20px", textAlign: "center" }, children: /* @__PURE__ */ r("p", { children: "Failed to load discussion. Please try again later." }) });
-  const $ = m || {
+  const k = b || {
     id: e,
     title: "",
     description: "",
@@ -2776,29 +2950,74 @@ const wt = (t, e) => {
     updatedAt: (/* @__PURE__ */ new Date()).toISOString()
   };
   return /* @__PURE__ */ r(
-    ln,
+    mr,
     {
-      discussion: $,
-      posts: P,
+      discussion: k,
+      posts: $,
       sdk: n,
-      userIsLoggedIn: f,
-      onSignInClick: g,
-      showReactions: i,
-      showReplies: d,
-      showReportPost: p,
-      currentSort: u,
-      onSortChange: F,
-      onCreatePost: D,
-      onReact: z,
+      userIsLoggedIn: x,
+      onSignInClick: f,
+      showReactions: s,
+      showReplies: u,
+      showReportPost: d,
+      currentSort: h,
+      onSortChange: N,
+      onCreatePost: j,
+      onReact: U,
       onDeletePost: B,
-      onReportPost: H,
-      onLoadMore: I,
-      hasMore: E,
-      isLoading: b,
-      isSubmitting: M
+      onReportPost: K,
+      onLoadMore: A,
+      hasMore: O,
+      isLoading: v,
+      isSubmitting: E,
+      infiniteScroll: p,
+      showModeratedPosts: g
     }
   );
-}, cn = (t) => /* @__PURE__ */ r(zo, { packageName: "discussion", ...t, children: /* @__PURE__ */ r(an, { ...t }) }), bn = cn;
+}, vr = (o) => {
+  const [e, n] = q.useState(!1), [a, l] = q.useState(!1), i = q.useRef(
+    `$discussion-shadow-root-${Math.random().toString(36).substring(2, 11)}`
+  ), c = q.useRef(null), s = q.useRef(null), u = q.useRef(null), d = q.useRef(null);
+  q.useEffect(() => {
+    Eo(o.language || "en").finally(() => l(!0));
+  }, [o.language]), q.useEffect(() => {
+    if (c.current)
+      return c.current.shadowRoot ? (s.current = c.current.shadowRoot, u.current = s.current.getElementById(
+        i.current
+      ), u.current || (u.current = document.createElement("div"), u.current.id = i.current, u.current.style.height = "100%", s.current.appendChild(u.current))) : (s.current = c.current.attachShadow({ mode: "open" }), u.current = document.createElement("div"), u.current.id = i.current, u.current.style.height = "100%", s.current.appendChild(u.current)), d.current || (d.current = Oo({
+        key: "discussion-css",
+        prepend: !0,
+        container: s.current
+      })), n(!0), () => {
+        n(!1);
+      };
+  }, []);
+  const p = o.themeOptions, g = /* @__PURE__ */ r(L, { ref: c, sx: { height: "100%", display: "block" } }), x = e && a && u.current && d.current ? Fo(
+    /* @__PURE__ */ r($o, { value: d.current, children: /* @__PURE__ */ r(ko, { containerRef: c, children: /* @__PURE__ */ r(
+      Vo,
+      {
+        customTheme: p,
+        mode: p == null ? void 0 : p.mode,
+        shadowRootElement: u.current,
+        children: /* @__PURE__ */ r(
+          wo,
+          {
+            shadowRootElement: u.current,
+            leadPhoneCountryCode: null,
+            language: o.language,
+            optionsLayout: null,
+            children: o.children
+          }
+        )
+      }
+    ) }) }),
+    u.current
+  ) : null;
+  return /* @__PURE__ */ F(Me, { children: [
+    g,
+    x
+  ] });
+}, hr = (o) => /* @__PURE__ */ r(vr, { ...o, children: /* @__PURE__ */ r(fr, { ...o }) }), Ir = hr;
 export {
-  bn as Discussion
+  Ir as Discussion
 };