import { jsx as r, jsxs as _, Fragment as Me } from "react/jsx-runtime";
import * as I from "react";
import J, { useState as H, useEffect as ve, useCallback as _e, useRef as Ie } from "react";
import { _ as T, I as ye, N as Ae, s as be, r as ge, t as xe, P as t, J as G, v as go, f as ae, a as te, b as ie, c as ze, e as re, B as F, l as Y, g as Ve, C as Ne, n as xo, z as Co, A as Ro, D as Po, E as So, F as Io } from "./PrizeCard-C2El3VOB.js";
import { S as $e } from "./Spinner-DWJCKaY5.js";
import { createPortal as Mo } from "react-dom";
import { d as je, f as Ke, e as We, s as Q, t as zo, v as Eo, u as Ce, c as Re, a as ee, S as To, l as $o, B as oe, T as W, I as Do } from "./Button-DPGn5NZd.js";
import { u as Oo, T as Ge } from "./Textarea-CfUzSon9.js";
import { F as ko, a as wo } from "./FavoriteBorder-DdzKOJK4.js";
import { L as fe, l as Vo, u as No, c as Lo, f as De, C as Fo, d as Le, e as _o, b as Ao, i as Bo, s as Ho, V as Uo, G as jo, j as Ko, g as Wo, R as Go, p as Jo, h as qo, v as Je, S as Xo, a as Yo } from "./Select-BtID79ha.js";
import { u as Qo, P as Zo, r as et } from "./Popper-DlJYI9q0.js";
import { C as ot, b as tt, d as rt, M as qe, a as Xe } from "./ModalDialog-CmE2hP2R.js";
import { C as nt } from "./Close-RflsWFtK.js";
import { F as Oe } from "./CheckCircle-DSloUas8.js";
import { u as st } from "./useEventCallback-Dqgs56Ox.js";
import { N as Ye } from "./Notification-BG5P1Xiq.js";
import { A as lt } from "./Avatar-Cm5QOeVC.js";
import { D as at } from "./Divider-CX-Q07Pb.js";
const Fe = /* @__PURE__ */ I.createContext(null);
process.env.NODE_ENV !== "production" && (Fe.displayName = "DropdownContext");
const ke = {
  blur: "dropdown:blur",
  escapeKeyDown: "dropdown:escapeKeyDown",
  toggle: "dropdown:toggle",
  open: "dropdown:open",
  close: "dropdown:close"
};
function it(e, o) {
  if (o.type === fe.itemHover)
    return T({}, e, {
      highlightedValue: o.item
    });
  const n = Vo(e, o);
  if (n.highlightedValue === null && o.context.items.length > 0)
    return T({}, n, {
      highlightedValue: o.context.items[0]
    });
  if (o.type === fe.keyDown && o.event.key === "Escape")
    return T({}, n, {
      open: !1
    });
  if (o.type === fe.blur) {
    var i;
    if (!((i = o.context.listboxRef.current) != null && i.contains(o.event.relatedTarget))) {
      var a, l;
      const c = (a = o.context.listboxRef.current) == null ? void 0 : a.getAttribute("id"), s = (l = o.event.relatedTarget) == null ? void 0 : l.getAttribute("aria-controls");
      return c && s && c === s ? n : T({}, n, {
        open: !1,
        highlightedValue: o.context.items[0]
      });
    }
  }
  return n;
}
const ct = {
  dispatch: () => {
  },
  popupId: "",
  registerPopup: () => {
  },
  registerTrigger: () => {
  },
  state: {
    open: !0,
    changeReason: null
  },
  triggerElement: null
};
function dt(e = {}) {
  var o, n;
  const {
    listboxRef: i,
    onItemsChange: a,
    id: l,
    disabledItemsFocusable: c = !0,
    disableListWrap: s = !1,
    autoFocus: u = !0,
    componentName: d = "useMenu"
  } = e, p = I.useRef(null), b = je(p, i), x = (o = ye(l)) != null ? o : "", {
    state: {
      open: f,
      changeReason: g
    },
    dispatch: C,
    triggerElement: R,
    registerPopup: S
  } = (n = I.useContext(Fe)) != null ? n : ct, E = I.useRef(f), {
    subitems: y,
    contextValue: O
  } = No(), h = I.useMemo(() => Array.from(y.keys()), [y]), $ = I.useCallback((m) => {
    var M, z;
    return m == null ? null : (M = (z = y.get(m)) == null ? void 0 : z.ref.current) != null ? M : null;
  }, [y]), v = I.useCallback((m) => {
    var M;
    return (y == null || (M = y.get(m)) == null ? void 0 : M.disabled) || !1;
  }, [y]), D = I.useCallback((m) => {
    var M, z;
    return ((M = y.get(m)) == null ? void 0 : M.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: U,
    contextValue: j,
    state: {
      highlightedValue: B
    },
    rootRef: K
  } = Lo({
    disabledItemsFocusable: c,
    disableListWrap: s,
    focusManagement: "DOM",
    getItemDomElement: $,
    getInitialState: () => ({
      selectedValues: [],
      highlightedValue: null
    }),
    isItemDisabled: v,
    items: h,
    getItemAsString: D,
    rootRef: b,
    onItemsChange: a,
    reducerActionContext: N,
    selectionMode: "none",
    stateReducer: it,
    componentName: d
  });
  Ae(() => {
    S(x);
  }, [x, S]), Ae(() => {
    f && (g == null ? void 0 : g.type) === "keydown" && g.key === "ArrowUp" && A({
      type: fe.highlightLast,
      event: g
    });
  }, [f, g, A]), I.useEffect(() => {
    if (f && u && B && !E.current) {
      var m;
      (m = y.get(B)) == null || (m = m.ref) == null || (m = m.current) == null || m.focus();
    }
  }, [f, u, B, y, h]), I.useEffect(() => {
    var m;
    if ((m = p.current) != null && m.contains(document.activeElement) && B !== null) {
      var M;
      y == null || (M = y.get(B)) == null || (M = M.ref.current) == null || M.focus();
    }
  }, [B, y]);
  const k = (m) => (M) => {
    var z, Z;
    (z = m.onBlur) == null || z.call(m, M), !M.defaultMuiPrevented && ((Z = p.current) != null && Z.contains(M.relatedTarget) || M.relatedTarget === R || C({
      type: ke.blur,
      event: M
    }));
  }, L = (m) => (M) => {
    var z;
    (z = m.onKeyDown) == null || z.call(m, M), !M.defaultMuiPrevented && M.key === "Escape" && C({
      type: ke.escapeKeyDown,
      event: M
    });
  }, P = (m = {}) => ({
    onBlur: k(m),
    onKeyDown: L(m)
  }), w = (m = {}) => {
    const M = De(P, U), z = Ke(m);
    return T({}, m, z, M(z), {
      id: x,
      role: "menu"
    });
  };
  return I.useDebugValue({
    subitems: y,
    highlightedValue: B
  }), {
    contextValue: T({}, O, j),
    dispatch: A,
    getListboxProps: w,
    highlightedValue: B,
    listboxRef: K,
    menuItems: y,
    open: f,
    triggerElement: R
  };
}
function ut(e) {
  const {
    value: o,
    children: n
  } = e, {
    dispatch: i,
    getItemIndex: a,
    getItemState: l,
    registerItem: c,
    totalSubitemCount: s
  } = o, u = I.useMemo(() => ({
    dispatch: i,
    getItemState: l,
    getItemIndex: a
  }), [i, a, l]), d = I.useMemo(() => ({
    getItemIndex: a,
    registerItem: c,
    totalSubitemCount: s
  }), [c, a, s]);
  return /* @__PURE__ */ r(Fo.Provider, {
    value: d,
    children: /* @__PURE__ */ r(Le.Provider, {
      value: u,
      children: n
    })
  });
}
function pt(e) {
  return `menu-item-${e.size}`;
}
const mt = {
  dispatch: () => {
  },
  popupId: "",
  registerPopup: () => {
  },
  registerTrigger: () => {
  },
  state: {
    open: !0,
    changeReason: null
  },
  triggerElement: null
};
function ft(e) {
  var o;
  const {
    disabled: n = !1,
    id: i,
    rootRef: a,
    label: l,
    disableFocusOnHover: c = !1
  } = e, s = ye(i), u = I.useRef(null), d = I.useMemo(() => ({
    disabled: n,
    id: s ?? "",
    label: l,
    ref: u
  }), [n, s, l]), {
    dispatch: p
  } = (o = I.useContext(Fe)) != null ? o : mt, {
    getRootProps: b,
    highlighted: x
  } = _o({
    item: s,
    handlePointerOverEvents: !c
  }), {
    index: f,
    totalItemCount: g
  } = Ao(s ?? pt, d), {
    getRootProps: C,
    focusVisible: R,
    rootRef: S
  } = We({
    disabled: n,
    focusableWhenDisabled: !0
  }), E = je(S, a, u);
  I.useDebugValue({
    id: s,
    highlighted: x,
    disabled: n,
    label: l
  });
  const y = ($) => (v) => {
    var D;
    (D = $.onClick) == null || D.call($, v), !v.defaultMuiPrevented && p({
      type: ke.close,
      event: v
    });
  }, O = ($ = {}) => T({}, $, {
    onClick: y($)
  });
  function h($ = {}) {
    const v = Ke($), D = De(O, De(C, b));
    return T({}, $, v, D(v), {
      id: s,
      ref: E,
      role: "menuitem"
    });
  }
  return s === void 0 ? {
    getRootProps: h,
    disabled: !1,
    focusVisible: R,
    highlighted: !1,
    index: -1,
    totalItemCount: 0,
    rootRef: E
  } : {
    getRootProps: h,
    disabled: n,
    focusVisible: R,
    highlighted: x,
    index: f,
    totalItemCount: g,
    rootRef: E
  };
}
function ht(e) {
  const o = I.useContext(Le);
  if (!o)
    throw new Error("MenuItem: ListContext was not found.");
  const n = ye(e), {
    getItemState: i,
    dispatch: a
  } = o;
  let l;
  n != null ? l = i(n) : l = {
    focusable: !0,
    highlighted: !1,
    selected: !1
  };
  const {
    highlighted: c,
    selected: s,
    focusable: u
  } = l, d = I.useCallback((b) => {
    if (b !== n)
      throw new Error(["Base UI MenuItem: Tried to access the state of another MenuItem.", `itemValue: ${b} | id: ${n}`, "This is unsupported when the MenuItem uses the MenuItemContextStabilizer as a performance optimization."].join("/n"));
    return {
      highlighted: c,
      selected: s,
      focusable: u
    };
  }, [c, s, u, n]);
  return {
    contextValue: I.useMemo(() => ({
      dispatch: a,
      getItemState: d
    }), [a, d]),
    id: n
  };
}
function vt(e) {
  return be("MuiMenu", e);
}
ge("MuiMenu", ["root", "listbox", "expanded", "colorPrimary", "colorNeutral", "colorDanger", "colorSuccess", "colorWarning", "colorContext", "variantPlain", "variantOutlined", "variantSoft", "variantSolid", "sizeSm", "sizeMd", "sizeLg"]);
const yt = ["actions", "children", "color", "component", "disablePortal", "keepMounted", "id", "invertedColors", "onItemsChange", "modifiers", "variant", "size", "slots", "slotProps"], bt = (e) => {
  const {
    open: o,
    variant: n,
    color: i,
    size: a
  } = e, l = {
    root: ["root", o && "expanded", n && `variant${G(n)}`, i && `color${G(i)}`, a && `size${G(a)}`],
    listbox: ["listbox"]
  };
  return Re(l, vt, {});
}, Be = Q(Bo, {
  name: "JoyMenu",
  slot: "Root",
  overridesResolver: (e, o) => o.root
})(({
  theme: e,
  ownerState: o
}) => {
  var n, i;
  const a = (n = e.variants[o.variant]) == null ? void 0 : n[o.color];
  return [T({
    "--focus-outline-offset": `calc(${e.vars.focus.thickness} * -1)`,
    // to prevent the focus outline from being cut by overflow
    "--ListItem-stickyBackground": (a == null ? void 0 : a.backgroundColor) || (a == null ? void 0 : a.background) || e.vars.palette.background.popup,
    "--ListItem-stickyTop": "calc(var(--List-padding, var(--ListDivider-gap)) * -1)"
  }, Ho, {
    borderRadius: `var(--List-radius, ${e.vars.radius.sm})`,
    boxShadow: e.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, ${e.vars.zIndex.popup})`
  }, !(a != null && a.backgroundColor) && {
    backgroundColor: e.vars.palette.background.popup
  }, o.variant === "solid" && o.color && o.invertedColors && zo(o.color)(e), o.variant === "soft" && o.color && o.invertedColors && Eo(o.color)(e), (i = e.variants[o.variant]) == null ? void 0 : i[o.color])];
}), Qe = /* @__PURE__ */ I.forwardRef(function(o, n) {
  var i;
  const a = Ce({
    props: o,
    name: "JoyMenu"
  }), {
    actions: l,
    children: c,
    color: s = "neutral",
    component: u,
    disablePortal: d = !1,
    keepMounted: p = !1,
    id: b,
    invertedColors: x = !1,
    onItemsChange: f,
    modifiers: g,
    variant: C = "outlined",
    size: R = "md",
    slots: S = {},
    slotProps: E = {}
  } = a, y = xe(a, yt), {
    contextValue: O,
    getListboxProps: h,
    dispatch: $,
    open: v,
    triggerElement: D
  } = dt({
    onItemsChange: f,
    id: b,
    listboxRef: n
  });
  I.useImperativeHandle(l, () => ({
    dispatch: $,
    resetHighlight: () => $({
      type: fe.resetHighlight,
      event: null
    })
  }), [$]);
  const N = T({}, a, {
    disablePortal: d,
    invertedColors: x,
    color: s,
    variant: C,
    size: R,
    open: v,
    nesting: !1,
    row: !1
  }), A = bt(N), U = T({}, y, {
    component: u,
    slots: S,
    slotProps: E
  }), j = I.useMemo(() => [{
    name: "offset",
    options: {
      offset: [0, 4]
    }
  }, ...g || []], [g]), B = Qo({
    elementType: Be,
    getSlotProps: h,
    externalForwardedProps: U,
    externalSlotProps: {},
    ownerState: N,
    additionalProps: {
      anchorEl: D,
      open: v && D !== null,
      disablePortal: d,
      keepMounted: p,
      modifiers: j
    },
    className: A.root
  });
  return /* @__PURE__ */ r(Be, T({}, B, !((i = a.slots) != null && i.root) && {
    as: Zo,
    slots: {
      root: u || "ul"
    }
  }, {
    children: /* @__PURE__ */ r(ut, {
      value: O,
      children: /* @__PURE__ */ r(Uo, {
        variant: x ? void 0 : C,
        color: s,
        children: /* @__PURE__ */ r(jo.Provider, {
          value: "menu",
          children: /* @__PURE__ */ r(Ko, {
            nested: !0,
            children: c
          })
        })
      })
    })
  }));
});
process.env.NODE_ENV !== "production" && (Qe.propTypes = {
  // ┌────────────────────────────── Warning ──────────────────────────────┐
  // │ These PropTypes are generated from the TypeScript type definitions. │
  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
  // └─────────────────────────────────────────────────────────────────────┘
  /**
   * A ref with imperative actions.
   * It allows to select the first or last menu item.
   */
  actions: et,
  /**
   * @ignore
   */
  children: t.node,
  /**
   * The color of the component. It supports those theme colors that make sense for this component.
   * @default 'neutral'
   */
  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: t.elementType,
  /**
   * The `children` will be under the DOM hierarchy of the parent component.
   * @default false
   */
  disablePortal: t.bool,
  /**
   * @ignore
   */
  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: 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: t.bool,
  /**
   * Popper.js is based on a "plugin-like" architecture,
   * most of its features are fully encapsulated "modifiers".
   *
   * A modifier is a function that is called each time Popper.js needs to
   * compute the position of the popper.
   * 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: 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: t.func,
  /**
   * Function called when the items displayed in the menu change.
   */
  onItemsChange: t.func,
  /**
   * Controls whether the menu is displayed.
   * @default false
   */
  open: t.bool,
  /**
   * The size of the component (affect other nested list* components because the `Menu` inherits `List`).
   * @default 'md'
   */
  size: t.oneOfType([t.oneOf(["sm", "md", "lg"]), t.string]),
  /**
   * The props used for each slot inside.
   * @default {}
   */
  slotProps: t.shape({
    root: t.oneOfType([t.func, t.object])
  }),
  /**
   * The components used for each slot inside.
   * @default {}
   */
  slots: t.shape({
    root: t.elementType
  }),
  /**
   * The system prop that allows defining system overrides as well as additional CSS styles.
   */
  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: t.oneOfType([t.oneOf(["outlined", "plain", "soft", "solid"]), t.string])
});
function gt(e) {
  return be("MuiMenuItem", e);
}
ge("MuiMenuItem", ["root", "focusVisible", "disabled", "selected", "colorPrimary", "colorNeutral", "colorDanger", "colorSuccess", "colorWarning", "colorContext", "variantPlain", "variantSoft", "variantOutlined", "variantSolid"]);
const xt = ["children", "disabled", "component", "selected", "color", "orientation", "variant", "slots", "slotProps", "id"], Ct = (e) => {
  const {
    focusVisible: o,
    disabled: n,
    selected: i,
    color: a,
    variant: l
  } = e, c = {
    root: ["root", o && "focusVisible", n && "disabled", i && "selected", a && `color${G(a)}`, l && `variant${G(l)}`]
  };
  return Re(c, gt, {});
}, Rt = Q(Wo, {
  name: "JoyMenuItem",
  slot: "Root",
  overridesResolver: (e, o) => o.root
})({}), Pt = /* @__PURE__ */ I.memo(/* @__PURE__ */ I.forwardRef(function(o, n) {
  const i = Ce({
    props: o,
    name: "JoyMenuItem"
  }), a = I.useContext(Go), {
    children: l,
    disabled: c = !1,
    component: s = "li",
    selected: u = !1,
    color: d = "neutral",
    orientation: p = "horizontal",
    variant: b = "plain",
    slots: x = {},
    slotProps: f = {},
    id: g
  } = i, C = xe(i, xt), {
    variant: R = b,
    color: S = d
  } = Jo(o.variant, o.color), {
    getRootProps: E,
    disabled: y,
    focusVisible: O
  } = ft({
    id: g,
    disabled: c,
    rootRef: n
  }), h = T({}, i, {
    component: s,
    color: S,
    disabled: y,
    focusVisible: O,
    orientation: p,
    selected: u,
    row: a,
    variant: R
  }), $ = Ct(h), v = T({}, C, {
    component: s,
    slots: x,
    slotProps: f
  }), [D, N] = ee("root", {
    ref: n,
    elementType: Rt,
    getSlotProps: E,
    externalForwardedProps: v,
    className: $.root,
    ownerState: h
  });
  return /* @__PURE__ */ r(qo.Provider, {
    value: p,
    children: /* @__PURE__ */ r(D, T({}, N, {
      children: l
    }))
  });
})), we = /* @__PURE__ */ I.forwardRef(function(o, n) {
  const {
    contextValue: i,
    id: a
  } = ht(o.id);
  return /* @__PURE__ */ r(Le.Provider, {
    value: i,
    children: /* @__PURE__ */ r(Pt, T({}, o, {
      id: a,
      ref: n
    }))
  });
});
process.env.NODE_ENV !== "production" && (we.propTypes = {
  // ┌────────────────────────────── Warning ──────────────────────────────┐
  // │ These PropTypes are generated from the TypeScript type definitions. │
  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
  // └─────────────────────────────────────────────────────────────────────┘
  /**
   * The content of the component.
   */
  children: t.node,
  id: t.string
});
function St(e) {
  return be("MuiModalClose", e);
}
ge("MuiModalClose", ["root", "colorPrimary", "colorNeutral", "colorDanger", "colorSuccess", "colorWarning", "colorContext", "variantPlain", "variantOutlined", "variantSoft", "variantSolid", "sizeSm", "sizeMd", "sizeLg"]);
var He;
const It = ["component", "color", "variant", "size", "onClick", "slots", "slotProps"], Mt = (e) => {
  const {
    variant: o,
    color: n,
    disabled: i,
    focusVisible: a,
    size: l
  } = e, c = {
    root: ["root", i && "disabled", a && "focusVisible", o && `variant${G(o)}`, n && `color${G(n)}`, l && `size${G(l)}`]
  };
  return Re(c, St, {});
}, zt = Q(To, {
  name: "JoyModalClose",
  slot: "Root",
  overridesResolver: (e, o) => o.root
})(({
  ownerState: e,
  theme: o
}) => {
  var n;
  return T({}, e.size === "sm" && {
    "--IconButton-size": "1.75rem"
  }, e.size === "md" && {
    "--IconButton-size": "2rem"
  }, e.size === "lg" && {
    "--IconButton-size": "2.25rem"
  }, {
    position: "absolute",
    zIndex: 1,
    // stay on top of the title in case it is positioned relatively
    top: "var(--ModalClose-inset, 0.625rem)",
    right: "var(--ModalClose-inset, 0.625rem)",
    borderRadius: `var(--ModalClose-radius, ${o.vars.radius.sm})`
  }, !((n = o.variants[e.variant]) != null && (n = n[e.color]) != null && n.backgroundColor) && {
    color: o.vars.palette.text.secondary
  });
}), Et = {
  plain: "plain",
  outlined: "plain",
  soft: "soft",
  solid: "solid"
}, Ze = /* @__PURE__ */ I.forwardRef(function(o, n) {
  var i, a, l, c, s, u;
  const d = Ce({
    props: o,
    name: "JoyModalClose"
  }), {
    component: p = "button",
    color: b = "neutral",
    variant: x = "plain",
    size: f = "md",
    onClick: g,
    slots: C = {},
    slotProps: R = {}
  } = d, S = xe(d, It), E = I.useContext(ot), y = I.useContext(tt), O = (i = (a = o.variant) != null ? a : Et[y == null ? void 0 : y.variant]) != null ? i : x, h = (l = (c = o.color) != null ? c : y == null ? void 0 : y.color) != null ? l : b, $ = I.useContext(rt), v = (s = (u = o.size) != null ? u : $) != null ? s : f, {
    focusVisible: D,
    getRootProps: N
  } = We(T({}, d, {
    rootRef: n
  })), A = T({}, d, {
    color: h,
    component: p,
    variant: O,
    size: v,
    focusVisible: D
  }), U = Mt(A), [j, B] = ee("root", {
    ref: n,
    elementType: zt,
    getSlotProps: N,
    externalForwardedProps: T({
      onClick: (K) => {
        E == null || E(K, "closeClick"), g == null || g(K);
      }
    }, S, {
      component: p,
      slots: C,
      slotProps: R
    }),
    className: U.root,
    ownerState: A
  });
  return /* @__PURE__ */ r(j, T({}, B, {
    children: He || (He = /* @__PURE__ */ r(nt, {}))
  }));
});
process.env.NODE_ENV !== "production" && (Ze.propTypes = {
  // ┌────────────────────────────── Warning ──────────────────────────────┐
  // │ These PropTypes are generated from the TypeScript type definitions. │
  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
  // └─────────────────────────────────────────────────────────────────────┘
  /**
   * @ignore
   */
  children: t.node,
  /**
   * The color of the component. It supports those theme colors that make sense for this component.
   * @default 'neutral'
   */
  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: t.elementType,
  /**
   * @ignore
   */
  onClick: t.func,
  /**
   * The size of the component.
   * @default 'md'
   */
  size: t.oneOfType([t.oneOf(["sm", "md", "lg"]), t.string]),
  /**
   * The props used for each slot inside.
   * @default {}
   */
  slotProps: t.shape({
    root: t.oneOfType([t.func, t.object])
  }),
  /**
   * The components used for each slot inside.
   * @default {}
   */
  slots: t.shape({
    root: t.elementType
  }),
  /**
   * The system prop that allows defining system overrides as well as additional CSS styles.
   */
  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: t.oneOfType([t.oneOf(["outlined", "plain", "soft", "solid"]), t.string])
});
function Tt(e) {
  return be("MuiRadio", e);
}
const he = ge("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"], Dt = (e) => {
  const {
    checked: o,
    disabled: n,
    disableIcon: i,
    focusVisible: a,
    color: l,
    variant: c,
    size: s
  } = e, u = {
    root: ["root", o && "checked", n && "disabled", a && "focusVisible", c && `variant${G(c)}`, l && `color${G(l)}`, s && `size${G(s)}`],
    radio: ["radio", o && "checked", n && "disabled"],
    // disabled class is necessary for displaying global variant
    icon: ["icon"],
    action: [
      "action",
      o && "checked",
      i && n && "disabled",
      // add disabled class to action element for displaying global variant
      a && "focusVisible"
    ],
    input: ["input"],
    label: ["label"]
  };
  return Re(u, Tt, {});
};
function Ot(e, o) {
  return typeof o == "object" && o !== null ? e === o : String(e) === String(o);
}
const kt = Q("span", {
  name: "JoyRadio",
  slot: "Root",
  overridesResolver: (e, o) => o.root
})(({
  ownerState: e,
  theme: o
}) => {
  var n, i, a;
  return [T({
    "--Icon-fontSize": "var(--Radio-size)",
    "--Icon-color": "currentColor"
  }, e.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
    "& ~ *": {
      "--FormHelperText-margin": "0 0 0 1.5rem"
    },
    fontSize: o.vars.fontSize.sm,
    gap: "var(--Radio-gap, 0.5rem)"
  }, e.size === "md" && {
    "--Radio-size": "1.25rem",
    "& ~ *": {
      "--FormHelperText-margin": "0.25rem 0 0 1.875rem"
    },
    fontSize: o.vars.fontSize.md,
    gap: "var(--Radio-gap, 0.625rem)"
  }, e.size === "lg" && {
    "--Radio-size": "1.5rem",
    "& ~ *": {
      "--FormHelperText-margin": "0.375rem 0 0 2.25rem"
    },
    fontSize: o.vars.fontSize.lg,
    gap: "var(--Radio-gap, 0.75rem)"
  }, {
    position: e.overlay ? "initial" : "relative",
    display: "inline-flex",
    boxSizing: "border-box",
    minWidth: 0,
    fontFamily: o.vars.fontFamily.body,
    lineHeight: "var(--Radio-size)",
    // prevent label from having larger height than the checkbox
    color: o.vars.palette.text.primary,
    [`&.${he.disabled}`]: {
      color: (n = o.variants.plainDisabled) == null || (n = n[e.color]) == null ? void 0 : n.color
    }
  }, e.disableIcon && {
    color: (i = o.variants[e.variant]) == null || (i = i[e.color]) == null ? void 0 : i.color,
    [`&.${he.disabled}`]: {
      color: (a = o.variants[`${e.variant}Disabled`]) == null || (a = a[e.color]) == null ? void 0 : a.color
    }
  }, e["data-parent"] === "RadioGroup" && e["data-first-child"] === void 0 && {
    marginInlineStart: e.orientation === "horizontal" ? "var(--RadioGroup-gap)" : void 0,
    marginBlockStart: e.orientation === "horizontal" ? void 0 : "var(--RadioGroup-gap)"
  })];
}), wt = Q("span", {
  name: "JoyRadio",
  slot: "Radio",
  overridesResolver: (e, o) => o.radio
})(({
  ownerState: e,
  theme: o
}) => {
  var n, i, a, l, c;
  const s = (n = o.variants[`${e.variant}`]) == null ? void 0 : n[e.color];
  return [T({
    "--Icon-color": e.color !== "neutral" || e.variant === "solid" ? "currentColor" : o.vars.palette.text.icon,
    margin: 0,
    boxSizing: "border-box",
    width: "var(--Radio-size)",
    height: "var(--Radio-size)",
    borderRadius: "var(--Radio-size)",
    display: "inline-flex",
    justifyContent: "center",
    alignItems: "center",
    flexShrink: 0
  }, e.disableIcon && {
    display: "contents"
  }, {
    [`&.${he.checked}`]: {
      "--Icon-color": "currentColor"
    }
  }), ...e.disableIcon ? [] : [T({}, s, {
    backgroundColor: (i = s == null ? void 0 : s.backgroundColor) != null ? i : o.vars.palette.background.surface
  }), {
    "&:hover": {
      "@media (hover: hover)": (a = o.variants[`${e.variant}Hover`]) == null ? void 0 : a[e.color]
    }
  }, {
    "&:active": (l = o.variants[`${e.variant}Active`]) == null ? void 0 : l[e.color]
  }, {
    [`&.${he.disabled}`]: (c = o.variants[`${e.variant}Disabled`]) == null ? void 0 : c[e.color]
  }]];
}), Vt = Q("span", {
  name: "JoyRadio",
  slot: "Action",
  overridesResolver: (e, o) => o.action
})(({
  theme: e,
  ownerState: o
}) => {
  var n, i, a, l;
  return [{
    position: "absolute",
    textAlign: "left",
    // prevent text-align inheritance
    borderRadius: `var(--Radio-actionRadius, ${// Automatic radius adjustment when composing with ListItem or Sheet
    o.overlay ? "var(--unstable_actionRadius, inherit)" : "inherit"})`,
    top: "calc(-1 * var(--variant-borderWidth, 0px))",
    // clickable on the border and focus outline does not move when checked/unchecked
    left: "calc(-1 * var(--variant-borderWidth, 0px))",
    bottom: "calc(-1 * var(--variant-borderWidth, 0px))",
    right: "calc(-1 * var(--variant-borderWidth, 0px))",
    zIndex: 1,
    // The action element usually cover the area of nearest positioned parent
    [e.focus.selector]: e.focus.default
  }, ...o.disableIcon ? [(n = e.variants[o.variant]) == null ? void 0 : n[o.color], {
    "&:hover": {
      "@media (hover: hover)": (i = e.variants[`${o.variant}Hover`]) == null ? void 0 : i[o.color]
    }
  }, {
    "&:active": (a = e.variants[`${o.variant}Active`]) == null ? void 0 : a[o.color]
  }, {
    [`&.${he.disabled}`]: (l = e.variants[`${o.variant}Disabled`]) == null ? void 0 : l[o.color]
  }] : []];
}), Nt = Q("input", {
  name: "JoyRadio",
  slot: "Input",
  overridesResolver: (e, o) => o.input
})(() => ({
  margin: 0,
  opacity: 0,
  position: "absolute",
  height: "100%",
  width: "100%",
  cursor: "pointer"
})), Lt = Q("label", {
  name: "JoyRadio",
  slot: "Label",
  overridesResolver: (e, o) => o.label
})(({
  ownerState: e
}) => T({
  flex: 1,
  minWidth: 0
}, e.disableIcon && {
  zIndex: 1,
  // label should stay on top of the action.
  pointerEvents: "none"
  // makes hover ineffect.
})), Ft = Q("span", {
  name: "JoyRadio",
  slot: "Icon",
  overridesResolver: (e, o) => o.icon
})(({
  ownerState: e
}) => ({
  width: "calc(var(--Radio-size) / 2)",
  height: "calc(var(--Radio-size) / 2)",
  borderRadius: "inherit",
  color: "inherit",
  backgroundColor: "currentColor",
  transform: e.checked ? "scale(1)" : "scale(0)"
})), eo = /* @__PURE__ */ I.forwardRef(function(o, n) {
  var i, a, l, c, s, u, d;
  const p = Ce({
    props: o,
    name: "JoyRadio"
  }), {
    checked: b,
    checkedIcon: x,
    defaultChecked: f,
    disabled: g,
    disableIcon: C = !1,
    overlay: R = !1,
    label: S,
    id: E,
    name: y,
    onBlur: O,
    onChange: h,
    onFocus: $,
    onFocusVisible: v,
    readOnly: D,
    required: N,
    color: A,
    variant: U = "outlined",
    size: j = "md",
    uncheckedIcon: B,
    value: K,
    component: k,
    slots: L = {},
    slotProps: P = {}
  } = p, w = xe(p, $t), m = I.useContext(Oe);
  if (process.env.NODE_ENV !== "production") {
    const Te = m == null ? void 0 : m.registerEffect;
    I.useEffect(() => {
      if (Te)
        return Te();
    }, [Te]);
  }
  const M = ye(E ?? (m == null ? void 0 : m.htmlFor)), z = I.useContext(Je), Z = m != null && m.error ? "danger" : (i = (a = (l = o.color) != null ? l : m == null ? void 0 : m.color) != null ? a : A) != null ? i : "primary", ue = m != null && m.error ? "danger" : (c = (s = (u = o.color) != null ? u : m == null ? void 0 : m.color) != null ? s : A) != null ? c : "neutral", pe = o.size || (m == null ? void 0 : m.size) || (z == null ? void 0 : z.size) || j, Pe = o.name || (z == null ? void 0 : z.name) || y, ne = o.disableIcon || (z == null ? void 0 : z.disableIcon) || C, Se = o.overlay || (z == null ? void 0 : z.overlay) || R, V = {
    checked: typeof b > "u" && K != null ? Ot(z == null ? void 0 : z.value, K) : b,
    defaultChecked: f,
    disabled: o.disabled || (m == null ? void 0 : m.disabled) || g,
    onBlur: O,
    onChange: h,
    onFocus: $,
    onFocusVisible: v
  }, {
    getInputProps: q,
    checked: X,
    disabled: me,
    focusVisible: se
  } = Oo(V), so = (d = o.color) != null ? d : X ? Z : ue, le = T({}, p, {
    checked: X,
    disabled: me,
    focusVisible: se,
    color: so,
    variant: U,
    size: pe,
    disableIcon: ne,
    overlay: Se,
    orientation: z == null ? void 0 : z.orientation
  }), ce = Dt(le), de = T({}, w, {
    component: k,
    slots: L,
    slotProps: P
  }), [lo, ao] = ee("root", {
    ref: n,
    className: ce.root,
    elementType: kt,
    externalForwardedProps: de,
    ownerState: le
  }), [io, co] = ee("radio", {
    className: ce.radio,
    elementType: wt,
    externalForwardedProps: de,
    ownerState: le
  }), [uo, po] = ee("icon", {
    className: ce.icon,
    elementType: Ft,
    externalForwardedProps: de,
    ownerState: le
  }), [mo, fo] = ee("action", {
    className: ce.action,
    elementType: Vt,
    externalForwardedProps: de,
    ownerState: le
  }), [ho, vo] = ee("input", {
    additionalProps: {
      type: "radio",
      role: void 0,
      id: M,
      name: Pe,
      readOnly: D,
      required: N ?? (m == null ? void 0 : m.required),
      value: String(K),
      "aria-describedby": m == null ? void 0 : m["aria-describedby"]
    },
    className: ce.input,
    elementType: Nt,
    externalForwardedProps: de,
    getSlotProps: () => q({
      onChange: z == null ? void 0 : z.onChange
    }),
    ownerState: le
  }), [yo, bo] = ee("label", {
    additionalProps: {
      htmlFor: M
    },
    className: ce.label,
    elementType: Lt,
    externalForwardedProps: de,
    ownerState: le
  });
  return /* @__PURE__ */ _(lo, T({}, ao, {
    children: [/* @__PURE__ */ _(io, T({}, co, {
      children: [X && !ne && x, !X && !ne && B, !x && !B && !ne && /* @__PURE__ */ r(uo, T({}, po)), /* @__PURE__ */ r(mo, T({}, fo, {
        children: /* @__PURE__ */ r(ho, T({}, vo))
      }))]
    })), S && /* @__PURE__ */ r(yo, T({}, bo, {
      children: /* @__PURE__ */ r($o.Provider, {
        value: !0,
        children: S
      })
    }))]
  }));
});
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`. │
  // └─────────────────────────────────────────────────────────────────────┘
  /**
   * If `true`, the component is checked.
   */
  checked: t.bool,
  /**
   * The icon to display when the component is checked.
   */
  checkedIcon: t.node,
  /**
   * @ignore
   */
  children: t.node,
  /**
   * Class name applied to the root element.
   */
  className: t.string,
  /**
   * The color of the component. It supports those theme colors that make sense for this component.
   * @default 'neutral'
   */
  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: t.elementType,
  /**
   * The default checked state. Use when the component is not controlled.
   */
  defaultChecked: t.bool,
  /**
   * If `true`, the component is disabled.
   */
  disabled: t.bool,
  /**
   * If `true`, the checked icon is removed and the selected variant is applied on the `action` element instead.
   * @default false
   */
  disableIcon: t.bool,
  /**
   * @ignore
   */
  id: t.string,
  /**
   * The label element at the end the radio.
   */
  label: t.node,
  /**
   * The `name` attribute of the input.
   */
  name: t.string,
  /**
   * @ignore
   */
  onBlur: t.func,
  /**
   * Callback fired when the state is changed.
   *
   * @param {React.ChangeEvent<HTMLInputElement>} event The event source of the callback.
   * 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: t.func,
  /**
   * @ignore
   */
  onFocus: t.func,
  /**
   * @ignore
   */
  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: t.bool,
  /**
   * If `true`, the component is read only.
   */
  readOnly: t.bool,
  /**
   * If `true`, the `input` element is required.
   */
  required: t.bool,
  /**
   * The size of the component.
   * @default 'md'
   */
  size: t.oneOfType([t.oneOf(["sm", "md", "lg"]), t.string]),
  /**
   * The props used for each slot inside.
   * @default {}
   */
  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: 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: 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: t.node,
  /**
   * The value of the component. The DOM API casts this to a string.
   */
  value: t.any,
  /**
   * The [global variant](https://mui.com/joy-ui/main-features/global-variants/) to use.
   * @default 'outlined'
   */
  variant: t.oneOfType([t.oneOf(["outlined", "plain", "soft", "solid"]), t.string])
});
function _t(e) {
  return be("MuiRadioGroup", e);
}
ge("MuiRadioGroup", ["root", "colorPrimary", "colorNeutral", "colorDanger", "colorSuccess", "colorWarning", "variantPlain", "variantOutlined", "variantSoft", "variantSolid", "sizeSm", "sizeMd", "sizeLg", "horizontal", "vertical"]);
const At = ["className", "component", "children", "name", "defaultValue", "disableIcon", "overlay", "value", "onChange", "color", "variant", "size", "orientation", "role", "slots", "slotProps"], Bt = (e) => {
  const {
    orientation: o,
    size: n,
    variant: i,
    color: a
  } = e, l = {
    root: ["root", o, i && `variant${G(i)}`, a && `color${G(a)}`, n && `size${G(n)}`]
  };
  return Re(l, _t, {});
}, Ht = Q("div", {
  name: "JoyRadioGroup",
  slot: "Root",
  overridesResolver: (e, o) => o.root
})(({
  ownerState: e,
  theme: o
}) => {
  var n;
  return T({}, e.size === "sm" && {
    "--RadioGroup-gap": "0.625rem"
  }, e.size === "md" && {
    "--RadioGroup-gap": "0.875rem"
  }, e.size === "lg" && {
    "--RadioGroup-gap": "1.25rem"
  }, {
    display: "flex",
    margin: "var(--unstable_RadioGroup-margin)",
    flexDirection: e.orientation === "horizontal" ? "row" : "column",
    borderRadius: o.vars.radius.sm
  }, (n = o.variants[e.variant]) == null ? void 0 : n[e.color]);
}), oo = /* @__PURE__ */ I.forwardRef(function(o, n) {
  const i = Ce({
    props: o,
    name: "JoyRadioGroup"
  }), {
    className: a,
    component: l,
    children: c,
    name: s,
    defaultValue: u,
    disableIcon: d = !1,
    overlay: p,
    value: b,
    onChange: x,
    color: f = "neutral",
    variant: g = "plain",
    size: C = "md",
    orientation: R = "vertical",
    role: S = "radiogroup",
    slots: E = {},
    slotProps: y = {}
  } = i, O = xe(i, At), [h, $] = st({
    controlled: b,
    default: u,
    name: "RadioGroup"
  }), v = I.useContext(Oe), D = o.size || (v == null ? void 0 : v.size) || C, N = T({
    orientation: R,
    size: D,
    variant: g,
    color: f,
    role: S
  }, i), A = Bt(N), U = ye(s);
  if (process.env.NODE_ENV !== "production") {
    const k = v == null ? void 0 : v.registerEffect;
    I.useEffect(() => {
      if (k)
        return k();
    }, [k]);
  }
  const j = I.useMemo(() => ({
    disableIcon: d,
    overlay: p,
    orientation: R,
    size: D,
    name: U,
    value: h,
    onChange: (k) => {
      $(k.target.value), x && x(k);
    }
  }), [d, U, x, p, R, $, D, h]), [B, K] = ee("root", {
    ref: n,
    className: go(A.root, a),
    elementType: Ht,
    externalForwardedProps: T({}, O, {
      component: l,
      slots: E,
      slotProps: y
    }),
    ownerState: N,
    additionalProps: {
      as: l,
      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: v == null ? void 0 : v.htmlFor,
      "aria-labelledby": v == null ? void 0 : v.labelId,
      "aria-describedby": v == null ? void 0 : v["aria-describedby"]
    }
  });
  return /* @__PURE__ */ r(Je.Provider, {
    value: j,
    children: /* @__PURE__ */ r(B, T({}, K, {
      children: /* @__PURE__ */ r(Oe.Provider, {
        value: void 0,
        children: I.Children.map(c, (k, L) => /* @__PURE__ */ I.isValidElement(k) ? /* @__PURE__ */ I.cloneElement(k, T({}, L === 0 && {
          "data-first-child": ""
        }, L === I.Children.count(c) - 1 && {
          "data-last-child": ""
        }, {
          "data-parent": "RadioGroup"
        })) : k)
      })
    }))
  });
});
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`. │
  // └─────────────────────────────────────────────────────────────────────┘
  /**
   * @ignore
   */
  children: t.node,
  /**
   * Class name applied to the root element.
   */
  className: t.string,
  /**
   * The color of the component. It supports those theme colors that make sense for this component.
   * @default 'neutral'
   */
  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: t.elementType,
  /**
   * The default value. Use when the component is not controlled.
   */
  defaultValue: t.any,
  /**
   * The radio's `disabledIcon` prop. If specified, the value is passed down to every radios under this element.
   * @default false
   */
  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: 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: t.func,
  /**
   * The component orientation.
   * @default '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: t.bool,
  /**
   * @ignore
   */
  role: t.string,
  /**
   * The size of the component.
   * @default 'md'
   */
  size: t.oneOfType([t.oneOf(["sm", "md", "lg"]), t.string]),
  /**
   * The props used for each slot inside.
   * @default {}
   */
  slotProps: t.shape({
    root: t.oneOfType([t.func, t.object])
  }),
  /**
   * The components used for each slot inside.
   * @default {}
   */
  slots: t.shape({
    root: t.elementType
  }),
  /**
   * The system prop that allows defining system overrides as well as additional CSS styles.
   */
  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: t.any,
  /**
   * The [global variant](https://mui.com/joy-ui/main-features/global-variants/) to use.
   * @default 'plain'
   */
  variant: t.oneOfType([t.oneOf(["outlined", "plain", "soft", "solid"]), t.string])
});
const Ut = (e, o) => {
  const [n, i] = H(null), [a, l] = H(!0), [c, s] = H(null), [u, d] = H(!1);
  return ve(() => {
    o && (async () => {
      try {
        l(!0);
        const b = await e.discussions.getById(o);
        i(b), s(null), d(!1);
      } catch (b) {
        (e.helpers.getSDKConfiguration().errorHandlingMode === "standard" ? b.error.code === 404 : b.data.error.code === 404) ? (d(!0), s(null), i(null)) : (s(c), i(null), d(!1));
      } finally {
        l(!1);
      }
    })();
  }, [e, o]), { discussion: n, setDiscussion: i, isLoading: a, error: c, isNotFound: u };
}, jt = (e, o, n = null, i = "", a = "LATEST", l = 20, c, s = !1) => {
  const [u, d] = H([]), [p, b] = H(!0), [x, f] = H(!1), [g, C] = H(null), [R, S] = H(a), [E, y] = H(
    null
  ), [O, h] = H(!1), $ = _e(
    async (k, L, P = !1) => {
      var w, m;
      try {
        b(!0);
        const M = await e.discussions.getPosts(o, {
          sort: k,
          limit: l,
          startAfter: L,
          skipDeleted: !0,
          skipModerated: !s
        }), z = M.data;
        d(P ? (ue) => [...ue, ...z] : z);
        const Z = !!((w = M.meta.pagination) != null && w.nextPageStartsAfter) && z.length === l;
        y(
          ((m = M.meta.pagination) == null ? void 0 : m.nextPageStartsAfter) || null
        ), h(Z), C(null);
      } catch (M) {
        (e.helpers.getSDKConfiguration().errorHandlingMode === "standard" ? M.error.code === 404 : M.data.error.code === 404) ? (d([]), h(!1), y(null), C(null)) : C(g);
      } finally {
        b(!1);
      }
    },
    [e, o, l, s]
  );
  ve(() => {
    o && $(R);
  }, [o, R, $]);
  const v = (k) => {
    S(k), y(null);
  }, D = Ie(p);
  D.current = p;
  const N = Ie(E);
  N.current = E;
  const A = _e(() => {
    N.current && !D.current && $(R, N.current, !0);
  }, [$, R]);
  return {
    posts: u,
    isLoading: p,
    isSubmitting: x,
    error: g,
    currentSort: R,
    hasMore: O,
    handleSortChange: v,
    handleLoadMore: A,
    handleCreatePost: async (k, L) => {
      try {
        f(!0);
        let w = await e.discussions.createPost(o, {
          content: k,
          replyId: L || null,
          userNickname: null,
          discussionLabel: n,
          discussionUrl: i,
          context: {
            content: null,
            tags: [],
            campaign: null
          }
        });
        try {
          const m = await e.profile.getOwn().getInfo();
          w = { ...w, userModel: m };
        } catch {
        }
        d(
          L ? (m) => m.map(
            (M) => M.id === L ? { ...M, repliesCount: (M.repliesCount || 0) + 1 } : M
          ) : (m) => [w, ...m]
        ), c == null || c(1), C(null);
      } catch (P) {
        throw C(
          P
        ), P;
      } finally {
        f(!1);
      }
    },
    handleReact: async (k, L) => {
      try {
        const P = await e.discussions.react(k, L);
        return d(
          (w) => w.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 (k, L) => {
      try {
        await e.discussions.deletePost(k), d((P) => P.filter((w) => w.id !== k)), L && d(
          (P) => P.map(
            (w) => w.id === L ? { ...w, repliesCount: Math.max(0, (w.repliesCount || 0) - 1) } : w
          )
        ), c == null || c(-1), C(null);
      } catch (P) {
        throw C(
          P
        ), P;
      }
    },
    handleReportPost: async (k, L, P) => {
      try {
        await e.discussions.reportPost(k, L, P), C(null);
      } catch (w) {
        throw C(
          w
        ), w;
      }
    }
  };
}, to = ({
  onSubmit: e,
  userIsLoggedIn: o,
  onSignInClick: n,
  placeholder: i,
  isSubmitting: a,
  replyTo: l,
  onCancel: c
}) => {
  const { t: s } = ae(), [u, d] = H(""), p = te(), b = ie(), x = ze(), f = re(), g = p.palette.primary.plainColor, C = p.palette.primary.onPrimary, R = async (S) => {
    if (S.preventDefault(), !!u.trim())
      try {
        await e(u), d("");
      } catch (E) {
        console.error("Failed to submit comment:", E);
      }
  };
  return o ? /* @__PURE__ */ _(F, { component: "form", onSubmit: R, sx: { mb: f.lg }, children: [
    l && /* @__PURE__ */ r(W, { level: "body-sm", sx: { mb: f.xs, color: p.textSecondary }, children: s("discussion.replyingTo", "Replying to {{name}}", {
      name: l
    }) }),
    /* @__PURE__ */ r(
      Ge,
      {
        placeholder: i || s("discussion.writeComment", "Write a comment..."),
        value: u,
        onChange: (S) => d(S.target.value),
        minRows: 3,
        maxRows: 8,
        disabled: a,
        sx: {
          mb: f.sm,
          bgcolor: p.surfaceVariant,
          color: p.textPrimary,
          border: `1px solid ${p.outlineEnabledBorder}`,
          borderRadius: b.sm,
          boxShadow: "none",
          "&::before": { display: "none" },
          "&::placeholder": { color: p.textSecondary, opacity: 0.6 },
          "&:focus-within": {
            border: `1px solid ${g}`,
            boxShadow: "none",
            outline: "none"
          }
        }
      }
    ),
    /* @__PURE__ */ _(F, { sx: { display: "flex", gap: f.xs, justifyContent: "flex-end" }, children: [
      c && /* @__PURE__ */ r(
        oe,
        {
          variant: "plain",
          onClick: c,
          disabled: a,
          sx: {
            fontFamily: x.primary,
            color: p.textPrimary,
            borderRadius: b.sm,
            "&:hover": {
              bgcolor: `${p.textPrimary}14`
            }
          },
          children: s("common.cancel", "Cancel")
        }
      ),
      /* @__PURE__ */ r(
        oe,
        {
          type: "submit",
          variant: "solid",
          disabled: !u.trim() || a,
          loading: a,
          sx: {
            fontFamily: x.primary,
            bgcolor: g,
            color: C,
            borderRadius: b.sm,
            "&:hover": {
              bgcolor: g,
              opacity: 0.9
            },
            "&:disabled": {
              bgcolor: g,
              color: C,
              opacity: 0.4
            }
          },
          children: l ? s("discussion.reply", "Reply") : s("discussion.post", "Post")
        }
      )
    ] })
  ] }) : /* @__PURE__ */ r(F, { sx: { mb: f.lg }, children: /* @__PURE__ */ r(
    oe,
    {
      fullWidth: !0,
      variant: "outlined",
      onClick: n,
      sx: {
        py: f.sm,
        fontFamily: x.primary,
        borderColor: g,
        color: g,
        borderRadius: b.sm,
        "&:hover": {
          bgcolor: `${g}14`,
          borderColor: g
        }
      },
      children: s("discussion.signInToPost", "Sign in to post")
    }
  ) });
}, Kt = Y(/* @__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"), Wt = Y(/* @__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"), Gt = Y(/* @__PURE__ */ r("path", {
  d: "M14.4 6 14 4H5v17h2v-7h5.6l.4 2h7V6z"
}), "Flag"), Jt = Y(/* @__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"), qt = Y(/* @__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"), Xt = Y(/* @__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"), Yt = Y(/* @__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 = Y([/* @__PURE__ */ r("circle", {
  cx: "15.5",
  cy: "9.5",
  r: "1.5"
}, "0"), /* @__PURE__ */ r("circle", {
  cx: "8.5",
  cy: "9.5",
  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"), Zt = Y([/* @__PURE__ */ r("circle", {
  cx: "15.5",
  cy: "9.5",
  r: "1.5"
}, "0"), /* @__PURE__ */ r("circle", {
  cx: "8.5",
  cy: "9.5",
  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"), er = Y(/* @__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"), or = Y(/* @__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"), tr = {
  LIKE: /* @__PURE__ */ r(or, { fontSize: "small" }),
  DISLIKE: /* @__PURE__ */ r(er, { fontSize: "small" }),
  LOVE: /* @__PURE__ */ r(ko, { fontSize: "small" }),
  LAUGH: /* @__PURE__ */ r(Qt, { fontSize: "small" }),
  CARE: /* @__PURE__ */ r(wo, { fontSize: "small" }),
  WOW: /* @__PURE__ */ r(Wt, { fontSize: "small" }),
  SAD: /* @__PURE__ */ r(Zt, { fontSize: "small" }),
  ANGRY: /* @__PURE__ */ r(Jt, { fontSize: "small" })
}, Ue = ({
  reaction: e,
  count: o,
  isActive: n,
  onClick: i,
  disabled: a
}) => {
  const l = 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 l.textSecondary;
    switch (e) {
      case "LIKE":
        return l.palette.primary.plainColor;
      case "DISLIKE":
        return l.palette.primary.plainColor;
      case "LOVE":
        return l.palette.danger.plainColor;
      case "ANGRY":
        return l.palette.danger.plainColor;
      default:
        return l.palette.primary.plainColor;
    }
  };
  return /* @__PURE__ */ _(
    F,
    {
      sx: {
        display: "inline-flex",
        alignItems: "center",
        gap: c["2xs"],
        px: c.sm,
        py: c["2xs"],
        borderRadius: "18px",
        backgroundColor: n ? `${l.palette.neutral.softBg}` : "transparent",
        color: u(),
        "&:hover": {
          backgroundColor: `${l.palette.neutral.softHoverBg}`
        },
        cursor: a ? "not-allowed" : "pointer",
        opacity: a ? 0.5 : 1
      },
      onClick: a ? void 0 : i,
      children: [
        /* @__PURE__ */ r(
          F,
          {
            sx: {
              display: "flex",
              alignItems: "center",
              fontSize: "1.25rem",
              color: "inherit"
            },
            children: tr[e]
          }
        ),
        o > 0 && /* @__PURE__ */ r(
          W,
          {
            level: "body-sm",
            sx: {
              color: n ? u() : l.textPrimary,
              fontWeight: 500
            },
            children: s(o)
          }
        )
      ]
    }
  );
}, ro = (e, o) => {
  const [n, i] = H(null);
  return ve(() => {
    (async () => {
      if (o)
        try {
          const l = await e.profile.getOwn().getInfo();
          i(l.id);
        } catch (l) {
          console.error("Failed to get current user ID:", l);
        }
    })();
  }, [o, e]), n;
}, rr = ({
  post: e,
  sdk: o,
  userIsLoggedIn: n,
  onSignInClick: i,
  onReact: a,
  showReactions: l = !0,
  showReplyButton: c = !0,
  onReplyClick: s
}) => {
  var S, E, y, O;
  const { t: u } = ae(), d = te(), p = ie(), b = ze(), x = re(), f = ro(o, n), C = (() => {
    if (!f || !e.reactions)
      return null;
    for (const h of e.reactions)
      if (h.userIds.includes(f))
        return h.type;
    return null;
  })(), R = (h) => {
    if (!n) {
      i == null || i();
      return;
    }
    a(e.id, h);
  };
  return /* @__PURE__ */ _(
    F,
    {
      sx: {
        display: "flex",
        gap: x.xs,
        alignItems: "center",
        flexWrap: "wrap",
        mb: x.xs
      },
      children: [
        l && /* @__PURE__ */ _(Me, { children: [
          /* @__PURE__ */ r(
            Ue,
            {
              reaction: "LIKE",
              count: ((E = (S = e.reactions) == null ? void 0 : S.find((h) => h.type === "LIKE")) == null ? void 0 : E.reactionCount) || 0,
              isActive: C === "LIKE",
              onClick: () => R("LIKE"),
              disabled: !n
            }
          ),
          /* @__PURE__ */ r(
            Ue,
            {
              reaction: "DISLIKE",
              count: ((O = (y = e.reactions) == null ? void 0 : y.find((h) => h.type === "DISLIKE")) == null ? void 0 : O.reactionCount) || 0,
              isActive: C === "DISLIKE",
              onClick: () => R("DISLIKE"),
              disabled: !n
            }
          )
        ] }),
        c && /* @__PURE__ */ r(
          oe,
          {
            size: "sm",
            variant: "plain",
            onClick: s,
            startDecorator: /* @__PURE__ */ r(Yt, { fontSize: "small" }),
            sx: {
              ml: x.xs,
              fontFamily: b.primary,
              color: d.textPrimary,
              fontWeight: 600,
              fontSize: "0.8125rem",
              borderRadius: p.sm,
              px: x.xs,
              py: x["2xs"],
              minHeight: "unset",
              "--Icon-color": d.textPrimary,
              "&:hover": {
                bgcolor: `${d.textPrimary}14`
              }
            },
            children: u("discussion.reply", "Reply")
          }
        )
      ]
    }
  );
}, nr = ({
  isOwnPost: e,
  canReport: o,
  onDelete: n,
  onReport: i
}) => {
  const { t: a } = ae(), { shadowRootElement: l } = Ve(Ne), c = ie(), s = te(), u = re(), [d, p] = J.useState(null), b = J.useRef(null);
  if (J.useEffect(() => {
    if (!d) return;
    const g = (R) => {
      const S = R.composedPath();
      d && S.includes(d) || b.current && S.includes(b.current) || p(null);
    }, C = setTimeout(() => {
      document.addEventListener("click", g, !0);
    }, 0);
    return () => {
      clearTimeout(C), document.removeEventListener("click", g, !0);
    };
  }, [d]), !e && !o) return null;
  const x = {
    zIndex: 1300,
    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.surfaceVariant} !important`,
      color: `${s.textPrimary} !important`
    }
  };
  return /* @__PURE__ */ _(Me, { children: [
    /* @__PURE__ */ r(
      Do,
      {
        size: "sm",
        variant: "plain",
        onClick: (g) => p(d ? null : g.currentTarget),
        sx: {
          ml: "auto",
          color: s.textPrimary,
          "&:hover": {
            bgcolor: `${s.textPrimary}14`
          }
        },
        children: /* @__PURE__ */ r(qt, { fontSize: "small" })
      }
    ),
    /* @__PURE__ */ _(
      Qe,
      {
        ref: b,
        anchorEl: d,
        open: !!d,
        onClose: () => p(null),
        container: l,
        sx: x,
        children: [
          e && /* @__PURE__ */ _(
            we,
            {
              onClick: () => {
                p(null), n();
              },
              sx: f,
              children: [
                /* @__PURE__ */ r(Kt, { fontSize: "small", sx: { mr: u.xs } }),
                a("discussion.delete.action", "Delete")
              ]
            }
          ),
          o && /* @__PURE__ */ _(
            we,
            {
              onClick: () => {
                p(null), i();
              },
              sx: f,
              children: [
                /* @__PURE__ */ r(Gt, { fontSize: "small", sx: { mr: u.xs } }),
                a("discussion.report.action", "Report")
              ]
            }
          )
        ]
      }
    )
  ] });
}, sr = ({
  open: e,
  onClose: o,
  onConfirm: n,
  onError: i,
  container: a
}) => {
  const { t: l } = ae(), c = te(), s = ie(), u = ze(), d = re(), p = c.palette.primary.plainColor, b = c.palette.primary.onPrimary, [x, f] = H(!1), g = async () => {
    f(!0);
    try {
      await n(), o();
    } catch {
      i(
        l(
          "discussion.delete.error",
          "Failed to delete comment. Please try again."
        )
      );
    } finally {
      f(!1);
    }
  };
  return /* @__PURE__ */ r(qe, { open: e, onClose: o, container: a, children: /* @__PURE__ */ _(
    Xe,
    {
      sx: {
        bgcolor: c.surface,
        color: c.textPrimary,
        borderRadius: s.md,
        p: d.lg,
        minWidth: 320,
        maxWidth: 400
      },
      children: [
        /* @__PURE__ */ r(
          W,
          {
            level: "title-lg",
            sx: { mb: d.xs, fontFamily: u.primary },
            children: l("discussion.delete.title", "Delete comment")
          }
        ),
        /* @__PURE__ */ r(W, { level: "body-sm", sx: { mb: d.lg, color: c.textSecondary }, children: l(
          "discussion.delete.description",
          "Are you sure you want to delete this comment? This action cannot be undone."
        ) }),
        /* @__PURE__ */ _(F, { sx: { display: "flex", gap: d.xs, justifyContent: "flex-end" }, children: [
          /* @__PURE__ */ r(
            oe,
            {
              variant: "plain",
              onClick: o,
              sx: {
                fontFamily: u.primary,
                color: c.textPrimary,
                borderRadius: s.sm,
                "&:hover": { bgcolor: `${c.textPrimary}14` }
              },
              children: l("common.cancel", "Cancel")
            }
          ),
          /* @__PURE__ */ r(
            oe,
            {
              variant: "solid",
              loading: x,
              disabled: x,
              onClick: g,
              sx: {
                fontFamily: u.primary,
                bgcolor: p,
                color: b,
                borderRadius: s.sm,
                "&:hover": {
                  bgcolor: p,
                  opacity: 0.9
                },
                "&:disabled": {
                  bgcolor: p,
                  color: b,
                  opacity: 0.4
                }
              },
              children: l("discussion.delete.action", "Delete")
            }
          )
        ] })
      ]
    }
  ) });
}, lr = [
  { value: "SPAM", labelKey: "discussion.report.spam", fallback: "Spam" },
  {
    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: "INSULT", labelKey: "discussion.report.insult", fallback: "Insult" },
  { value: "OTHER", labelKey: "discussion.report.other", fallback: "Other" }
], ar = ({
  open: e,
  onClose: o,
  onSubmit: n,
  onSuccess: i,
  onError: a,
  container: l
}) => {
  const { t: c } = ae(), s = te(), u = ie(), d = ze(), p = re(), b = s.palette.primary.plainColor, x = s.palette.primary.onPrimary, [f, g] = H(""), [C, R] = H(""), [S, E] = H(!1), y = () => {
    o(), g(""), R("");
  }, O = async () => {
    E(!0);
    try {
      await n(
        f,
        f === "OTHER" ? C : void 0
      ), i(
        c(
          "discussion.report.success",
          "Post reported successfully. Thank you."
        )
      ), y();
    } catch {
      a(
        c(
          "discussion.report.error",
          "Failed to report post. Please try again."
        )
      );
    } finally {
      E(!1);
    }
  };
  return /* @__PURE__ */ r(qe, { open: e, onClose: y, container: l, children: /* @__PURE__ */ _(
    Xe,
    {
      sx: {
        bgcolor: s.surface,
        color: s.textPrimary,
        borderRadius: u.md,
        p: p.lg,
        minWidth: 320,
        maxWidth: 440
      },
      children: [
        /* @__PURE__ */ r(
          Ze,
          {
            sx: {
              color: s.textPrimary,
              "&:hover": { bgcolor: `${s.textPrimary}14` }
            }
          }
        ),
        /* @__PURE__ */ r(
          W,
          {
            level: "title-lg",
            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(
          oo,
          {
            value: f,
            onChange: (h) => g(h.target.value),
            sx: { gap: p.xs, mb: p.md },
            children: lr.map((h) => /* @__PURE__ */ r(
              eo,
              {
                value: h.value,
                label: c(h.labelKey, h.fallback),
                slotProps: {
                  radio: {
                    sx: {
                      bgcolor: s.surfaceVariant,
                      borderColor: s.outlineEnabledBorder,
                      "&:hover": {
                        bgcolor: s.surface,
                        borderColor: s.outlineEnabledBorder
                      }
                    }
                  }
                },
                sx: {
                  fontFamily: d.primary,
                  color: s.textPrimary
                }
              },
              h.value
            ))
          }
        ),
        f === "OTHER" && /* @__PURE__ */ r(
          Ge,
          {
            placeholder: c(
              "discussion.report.detailsPlaceholder",
              "Please provide more details..."
            ),
            value: C,
            onChange: (h) => R(h.target.value),
            minRows: 2,
            maxRows: 4,
            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 ${b}`,
                boxShadow: "none"
              }
            }
          }
        ),
        /* @__PURE__ */ _(F, { sx: { display: "flex", gap: p.xs, justifyContent: "flex-end" }, children: [
          /* @__PURE__ */ r(
            oe,
            {
              variant: "plain",
              onClick: y,
              sx: {
                fontFamily: d.primary,
                color: s.textPrimary,
                borderRadius: u.sm,
                "&:hover": { bgcolor: `${s.textPrimary}14` }
              },
              children: c("common.cancel", "Cancel")
            }
          ),
          /* @__PURE__ */ r(
            oe,
            {
              variant: "solid",
              disabled: !f || S,
              loading: S,
              onClick: O,
              sx: {
                fontFamily: d.primary,
                bgcolor: b,
                color: x,
                borderRadius: u.sm,
                "&:hover": {
                  bgcolor: b,
                  opacity: 0.9
                },
                "&:disabled": {
                  bgcolor: b,
                  color: x,
                  opacity: 0.4
                }
              },
              children: c("discussion.report.action", "Report")
            }
          )
        ] })
      ]
    }
  ) });
}, ir = (e, o) => {
  const n = new Date(e), a = (/* @__PURE__ */ new Date()).getTime() - n.getTime(), l = Math.floor(a / 6e4), c = Math.floor(a / 36e5), s = Math.floor(a / 864e5);
  return l < 1 ? o("discussion.justNow", "Just now") : l < 60 ? o("discussion.minutesAgo", "{{count}}m ago", { count: l }) : c < 24 ? o("discussion.hoursAgo", "{{count}}h ago", { count: c }) : s < 7 ? o("discussion.daysAgo", "{{count}}d ago", { count: s }) : n.toLocaleDateString();
}, no = ({
  post: e,
  sdk: o,
  userIsLoggedIn: n,
  onSignInClick: i,
  showReactions: a = !0,
  showReplies: l = !0,
  showReportPost: c = !0,
  onReply: s,
  onReact: u,
  onDelete: d,
  onReport: p,
  isSubmitting: b,
  showModeratedPosts: x = !1,
  depth: f = 0,
  parentPostId: g,
  onReplyCreated: C,
  onDeleteSuccess: R
}) => {
  var Pe, ne, Se, Ee;
  const { t: S } = ae(), { shadowRootElement: E } = Ve(Ne), y = te(), O = ie(), h = re(), $ = ro(o, n), [v, D] = H(!1), [N, A] = H([]), [U, j] = H(!1), [B, K] = H(!1), [k, L] = H(!1), [P, w] = H({ open: !1, variant: "success", title: "", message: "" }), m = !!(n && $ && e.userId === $), M = async (V) => {
    var se;
    const q = f === 1 && g || e.id, X = ((se = e.userModel) == null ? void 0 : se.name) || e.anonymousNickname || S("discussion.anonymous", "Anonymous"), me = f === 1 ? `@${X} ${V}` : V;
    await s(q, me), D(!1), f === 1 && C ? C() : f === 0 && (j(!0), z());
  }, z = async () => {
    if (!(!l || f >= 2))
      try {
        const V = await o.discussions.getPostReplies(e.id, {
          limit: 25,
          skipDeleted: !0,
          skipModerated: !x
        });
        A(V.data);
      } catch (V) {
        console.error("Failed to load replies:", V);
      }
  };
  ve(() => {
    U && N.length === 0 && z();
  }, [U]);
  const Z = async (V) => {
    await d(V, e.id), A((q) => q.filter((X) => X.id !== V));
  }, ue = async (V, q) => {
    const X = await u(V, q);
    X && N.length > 0 && A(
      (me) => me.map((se) => se.id === V ? X : se)
    );
  }, pe = (V, q) => {
    w({ open: !0, variant: q, title: "", message: V });
  };
  return /* @__PURE__ */ _(F, { sx: { mb: h.md, ml: f > 0 ? h.xl : 0 }, children: [
    /* @__PURE__ */ _(F, { sx: { display: "flex", gap: h.sm }, children: [
      /* @__PURE__ */ r(
        lt,
        {
          src: (Pe = e.userModel) == null ? void 0 : Pe.avatar,
          alt: ((ne = e.userModel) == null ? void 0 : ne.name) || e.anonymousNickname || "User",
          size: "sm",
          sx: { bgcolor: y.surfaceVariant, color: y.textPrimary }
        }
      ),
      /* @__PURE__ */ _(F, { sx: { flex: 1, minWidth: 0 }, children: [
        /* @__PURE__ */ _(F, { sx: { display: "flex", alignItems: "center", gap: h.xs, mb: h["2xs"] }, children: [
          /* @__PURE__ */ r(W, { level: "title-sm", sx: { color: y.textPrimary }, children: ((Se = e.userModel) == null ? void 0 : Se.name) || e.anonymousNickname || S("discussion.anonymous", "Anonymous") }),
          /* @__PURE__ */ r(W, { level: "body-xs", sx: { color: y.textSecondary }, children: ir(e.createdAt, S) }),
          /* @__PURE__ */ r(
            nr,
            {
              isOwnPost: m,
              canReport: !!(c && n && !m),
              onDelete: () => K(!0),
              onReport: () => L(!0)
            }
          )
        ] }),
        e.moderated && x ? /* @__PURE__ */ _(
          F,
          {
            sx: {
              mb: h.xs,
              mr: h.md,
              px: h.sm,
              py: h.xs,
              borderRadius: O.xs,
              borderLeft: `3px solid ${y.outlineEnabledBorder}`,
              bgcolor: y.surfaceVariant,
              display: "flex",
              alignItems: "flex-start",
              gap: h.xs
            },
            children: [
              /* @__PURE__ */ r(
                Xt,
                {
                  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: e.moderatedReason || S(
                    "discussion.moderatedPost",
                    "This comment has been moderated"
                  )
                }
              )
            ]
          }
        ) : /* @__PURE__ */ r(
          W,
          {
            level: "body-sm",
            sx: { mb: h.xs, whiteSpace: "pre-wrap", color: y.textBody },
            children: e.content
          }
        ),
        /* @__PURE__ */ r(
          rr,
          {
            post: e,
            sdk: o,
            userIsLoggedIn: n,
            onSignInClick: i,
            onReact: u,
            showReactions: a,
            showReplyButton: l && f < 2,
            onReplyClick: () => D(!v)
          }
        ),
        l && e.repliesCount > 0 && /* @__PURE__ */ r(F, { sx: { mb: h.xs }, children: /* @__PURE__ */ _(
          W,
          {
            level: "body-sm",
            sx: {
              color: y.palette.primary.plainColor,
              cursor: "pointer",
              fontWeight: 600,
              display: "flex",
              alignItems: "center",
              gap: h["2xs"]
            },
            onClick: () => j(!U),
            children: [
              U ? S("discussion.hideReplies", "Hide replies") : S("discussion.repliesCount", "{{count}} replies", {
                count: e.repliesCount
              }),
              !U && " ▼"
            ]
          }
        ) }),
        v && /* @__PURE__ */ r(F, { sx: { mt: h.md }, children: /* @__PURE__ */ r(
          to,
          {
            onSubmit: M,
            userIsLoggedIn: n,
            onSignInClick: i,
            placeholder: S("discussion.writeReply", "Write a reply..."),
            isSubmitting: b,
            replyTo: ((Ee = e.userModel) == null ? void 0 : Ee.name) || e.anonymousNickname,
            onCancel: () => D(!1)
          }
        ) }),
        U && N.length > 0 && /* @__PURE__ */ r(F, { sx: { mt: h.md }, children: N.map((V) => /* @__PURE__ */ r(
          no,
          {
            post: V,
            sdk: o,
            userIsLoggedIn: n,
            onSignInClick: i,
            showReactions: a,
            showReplies: l,
            showReportPost: c,
            onReply: s,
            onReact: ue,
            onDelete: Z,
            onReport: p,
            isSubmitting: b,
            showModeratedPosts: x,
            depth: f + 1,
            parentPostId: f === 0 ? e.id : g,
            onReplyCreated: f === 0 ? z : void 0,
            onDeleteSuccess: R
          },
          V.id
        )) })
      ] })
    ] }),
    /* @__PURE__ */ r(
      sr,
      {
        open: B,
        onClose: () => K(!1),
        onConfirm: async () => {
          await d(e.id), R == null || R();
        },
        onError: (V) => pe(V, "error"),
        container: E
      }
    ),
    /* @__PURE__ */ r(
      ar,
      {
        open: k,
        onClose: () => L(!1),
        onSubmit: (V, q) => p(e.id, V, q),
        onSuccess: (V) => pe(V, "success"),
        onError: (V) => pe(V, "error"),
        container: E
      }
    ),
    /* @__PURE__ */ r(
      Ye,
      {
        notification: P,
        onClose: () => w((V) => ({ ...V, open: !1 }))
      }
    )
  ] });
}, cr = ({
  discussion: e,
  posts: o,
  sdk: n,
  userIsLoggedIn: i,
  onSignInClick: a,
  showReactions: l,
  showReplies: c,
  showReportPost: s,
  currentSort: u,
  onSortChange: d,
  onCreatePost: p,
  onReact: b,
  onDeletePost: x,
  onReportPost: f,
  onLoadMore: g,
  hasMore: C,
  isLoading: R,
  isSubmitting: S,
  infiniteScroll: E = !1,
  showModeratedPosts: y = !1
}) => {
  const { t: O } = ae(), { shadowRootElement: h } = Ve(Ne), $ = ie(), v = te(), D = re(), N = Ie(null), A = Ie(null);
  ve(() => {
    if (!E || !A.current) return;
    const P = new IntersectionObserver(
      (w) => {
        w[0].isIntersecting && C && !R && g();
      },
      { root: N.current, threshold: 0.1 }
    );
    return P.observe(A.current), () => P.disconnect();
  }, [E, C, R, g]);
  const [U, j] = H({ open: !1, variant: "success", title: "", message: "" }), B = () => {
    j({
      open: !0,
      variant: "success",
      title: "",
      message: O("discussion.delete.success", "Comment deleted successfully.")
    });
  }, K = [
    { value: "LATEST", label: O("discussion.sort.latest", "Latest") },
    { value: "OLDEST", label: O("discussion.sort.oldest", "Oldest") },
    { value: "POPULAR", label: O("discussion.sort.popular", "Popular") },
    {
      value: "INTERACTED",
      label: O("discussion.sort.interacted", "Most Interacted")
    }
  ], k = {
    listbox: {
      container: h,
      sx: {
        zIndex: 1300,
        bgcolor: v.surface,
        border: `1px solid ${v.outlineEnabledBorder}`,
        borderRadius: $.sm,
        boxShadow: "0 4px 6px -1px rgb(0 0 0 / 0.1)"
      }
    }
  }, L = {
    color: `${v.textPrimary} !important`,
    bgcolor: `${v.surface} !important`,
    "&:hover": {
      bgcolor: `${v.surfaceVariant} !important`,
      color: `${v.textPrimary} !important`
    },
    "&.Mui-selected": {
      bgcolor: `${v.surfaceVariant} !important`,
      color: `${v.textPrimary} !important`
    },
    "&.Mui-selected:hover": {
      bgcolor: `${v.surfaceVariant} !important`,
      color: `${v.textPrimary} !important`
    }
  };
  return /* @__PURE__ */ _(
    F,
    {
      ref: N,
      sx: {
        mx: "auto",
        maxHeight: "100%",
        overflowY: "auto",
        bgcolor: v.surface
      },
      children: [
        /* @__PURE__ */ _(F, { sx: { mb: D.lg }, children: [
          /* @__PURE__ */ r(W, { level: "h3", sx: { mb: D.xs }, children: e.label || O("discussion.title", "Discussion") }),
          /* @__PURE__ */ r(W, { level: "body-sm", sx: { color: v.textSecondary }, children: O("discussion.postsCount", "{{count}} posts", {
            count: e.postsCount || 0
          }) })
        ] }),
        /* @__PURE__ */ r(
          to,
          {
            onSubmit: (P) => p(P),
            userIsLoggedIn: i,
            onSignInClick: a,
            isSubmitting: S
          }
        ),
        /* @__PURE__ */ r(at, { sx: { my: D.lg } }),
        /* @__PURE__ */ _(
          F,
          {
            sx: {
              mb: D.lg,
              display: "flex",
              justifyContent: "space-between",
              alignItems: "center"
            },
            children: [
              /* @__PURE__ */ r(W, { level: "title-md", children: O("discussion.comments", "Comments") }),
              /* @__PURE__ */ r(
                Xo,
                {
                  value: u,
                  onChange: (P, w) => w && d(w),
                  size: "sm",
                  sx: {
                    minWidth: 150,
                    bgcolor: v.surfaceVariant,
                    color: v.textPrimary,
                    border: `1px solid ${v.outlineEnabledBorder}`,
                    borderRadius: $.sm,
                    boxShadow: "none",
                    "&:hover": {
                      bgcolor: v.surfaceVariant,
                      boxShadow: "none"
                    }
                  },
                  slotProps: k,
                  children: K.map((P) => /* @__PURE__ */ r(Yo, { value: P.value, sx: L, children: P.label }, P.value))
                }
              )
            ]
          }
        ),
        R && o.length === 0 ? /* @__PURE__ */ r(F, { sx: { py: D.xl }, children: /* @__PURE__ */ r($e, { my: 4 }) }) : o.length === 0 ? /* @__PURE__ */ r(F, { sx: { textAlign: "center", py: D.xl }, children: /* @__PURE__ */ r(W, { level: "body-md", sx: { color: v.textSecondary }, children: O(
          "discussion.noPosts",
          "No comments yet. Be the first to comment!"
        ) }) }) : /* @__PURE__ */ _(Me, { children: [
          /* @__PURE__ */ r(F, { children: o.map((P) => /* @__PURE__ */ r(
            no,
            {
              post: P,
              sdk: n,
              userIsLoggedIn: i,
              onSignInClick: a,
              showReactions: l,
              showReplies: c,
              showReportPost: s,
              onReply: (w, m) => p(m, w),
              onReact: b,
              onDelete: x,
              onReport: f,
              isSubmitting: S,
              showModeratedPosts: y,
              onDeleteSuccess: B
            },
            P.id
          )) }),
          E && /* @__PURE__ */ r(F, { ref: A, sx: { height: 1 } })
        ] }),
        E && R && o.length > 0 && /* @__PURE__ */ r(F, { sx: { py: D.md }, children: /* @__PURE__ */ r($e, { my: 2 }) }),
        !E && C && /* @__PURE__ */ r(F, { sx: { display: "flex", justifyContent: "center", mt: D.lg }, children: /* @__PURE__ */ r(
          oe,
          {
            variant: "outlined",
            onClick: g,
            loading: R,
            disabled: R,
            sx: {
              borderColor: v.palette.primary.plainColor,
              color: v.palette.primary.plainColor,
              borderRadius: $.sm,
              "&:hover": {
                bgcolor: `${v.palette.primary.plainColor}14`,
                borderColor: v.palette.primary.plainColor
              },
              "&:disabled": {
                borderColor: v.palette.primary.plainColor,
                color: v.palette.primary.plainColor,
                opacity: 0.4
              }
            },
            children: O("discussion.loadMore", "Load More")
          }
        ) }),
        /* @__PURE__ */ r(
          Ye,
          {
            notification: U,
            onClose: () => j((P) => ({ ...P, open: !1 }))
          }
        )
      ]
    }
  );
}, dr = (e) => {
  const {
    entityId: o,
    sdk: n,
    discussionLabel: i,
    discussionUrl: a = "",
    defaultSort: l = "LATEST",
    postsPerPage: c = 20,
    showReactions: s = !0,
    showReplies: u = !0,
    showReportPost: d = !0,
    infiniteScroll: p = !1,
    showModeratedPosts: b = !1,
    userIsLoggedIn: x = !1,
    onSignInClick: f
  } = e, {
    discussion: g,
    setDiscussion: C,
    isLoading: R,
    error: S,
    isNotFound: E
  } = Ut(n, o), y = (L) => {
    C(
      (P) => P && { ...P, postsCount: Math.max(0, P.postsCount + L) }
    );
  }, {
    posts: O,
    isLoading: h,
    isSubmitting: $,
    currentSort: v,
    hasMore: D,
    handleSortChange: N,
    handleLoadMore: A,
    handleCreatePost: U,
    handleReact: j,
    handleDeletePost: B,
    handleReportPost: K
  } = jt(
    n,
    o,
    i ?? null,
    a,
    l,
    c,
    y,
    b
  );
  if (R || !g && !E && h)
    return /* @__PURE__ */ r($e, { 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 k = g || {
    id: o,
    title: "",
    description: "",
    postsCount: 0,
    createdAt: (/* @__PURE__ */ new Date()).toISOString(),
    updatedAt: (/* @__PURE__ */ new Date()).toISOString()
  };
  return /* @__PURE__ */ r(
    cr,
    {
      discussion: k,
      posts: O,
      sdk: n,
      userIsLoggedIn: x,
      onSignInClick: f,
      showReactions: s,
      showReplies: u,
      showReportPost: d,
      currentSort: v,
      onSortChange: N,
      onCreatePost: U,
      onReact: j,
      onDeletePost: B,
      onReportPost: K,
      onLoadMore: A,
      hasMore: D,
      isLoading: h,
      isSubmitting: $,
      infiniteScroll: p,
      showModeratedPosts: b
    }
  );
}, ur = (e) => {
  const [o, n] = J.useState(!1), [i, a] = J.useState(!1), l = J.useRef(
    `$discussion-shadow-root-${Math.random().toString(36).substring(2, 11)}`
  ), c = J.useRef(null), s = J.useRef(null), u = J.useRef(null), d = J.useRef(null);
  J.useEffect(() => {
    xo(e.language || "en").finally(() => a(!0));
  }, [e.language]), J.useEffect(() => {
    if (c.current)
      return c.current.shadowRoot ? (s.current = c.current.shadowRoot, u.current = s.current.getElementById(
        l.current
      ), u.current || (u.current = document.createElement("div"), u.current.id = l.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 = l.current, u.current.style.height = "100%", s.current.appendChild(u.current)), d.current || (d.current = Co({
        key: "discussion-css",
        prepend: !0,
        container: s.current
      })), n(!0), () => {
        n(!1);
      };
  }, []);
  const p = e.themeOptions, b = /* @__PURE__ */ r(F, { ref: c, sx: { height: "100%", display: "block" } }), x = o && i && u.current && d.current ? Mo(
    /* @__PURE__ */ r(Ro, { value: d.current, children: /* @__PURE__ */ r(Po, { containerRef: c, children: /* @__PURE__ */ r(
      So,
      {
        customTheme: p,
        mode: p == null ? void 0 : p.mode,
        shadowRootElement: u.current,
        children: /* @__PURE__ */ r(
          Io,
          {
            shadowRootElement: u.current,
            leadPhoneCountryCode: null,
            language: e.language,
            optionsLayout: null,
            children: e.children
          }
        )
      }
    ) }) }),
    u.current
  ) : null;
  return /* @__PURE__ */ _(Me, { children: [
    b,
    x
  ] });
}, Tr = (e) => /* @__PURE__ */ r(ur, { ...e, children: /* @__PURE__ */ r(dr, { ...e }) });
export {
  Tr as M
};
