fansunited-frontend-components 0.0.39 → 0.0.40

package/chunks/Notification-BTtUhfZQ.js

@@ -0,0 +1,615 @@
+import { I as le, L as H, M as P, P as e, N as ue, O as de, _ as S, Q as N, l as W, m as X, R as j, s as A, r as fe, o as pe, p as me, q as ve, t as he, v as M, w as be, x, y as ke, c as ge, j as ye, h as Se, B as De, T as I } from "./PrizeCard-gMp7I66d.js";
+import { jsx as y, jsxs as q } from "react/jsx-runtime";
+import { C as Ee } from "./CheckCircle-ClY-iOQ5.js";
+import * as c from "react";
+import { e as Ce } from "./Spinner-BBA89t5s.js";
+function $(r) {
+  return r.substring(2).toLowerCase();
+}
+function xe(r, n) {
+  return n.documentElement.clientWidth < r.clientX || n.documentElement.clientHeight < r.clientY;
+}
+function R(r) {
+  const {
+    children: n,
+    disableReactTree: f = !1,
+    mouseEvent: o = "onClick",
+    onClickAway: d,
+    touchEvent: i = "onTouchEnd"
+  } = r, v = c.useRef(!1), p = c.useRef(null), h = c.useRef(!1), g = c.useRef(!1);
+  c.useEffect(() => (setTimeout(() => {
+    h.current = !0;
+  }, 0), () => {
+    h.current = !1;
+  }), []);
+  const b = le(
+    // @ts-expect-error TODO upstream fix
+    n.ref,
+    p
+  ), l = H((s) => {
+    const u = g.current;
+    g.current = !1;
+    const k = P(p.current);
+    if (!h.current || !p.current || "clientX" in s && xe(s, k))
+      return;
+    if (v.current) {
+      v.current = !1;
+      return;
+    }
+    let t;
+    s.composedPath ? t = s.composedPath().indexOf(p.current) > -1 : t = !k.documentElement.contains(
+      // @ts-expect-error returns `false` as intended when not dispatched from a Node
+      s.target
+    ) || p.current.contains(
+      // @ts-expect-error returns `false` as intended when not dispatched from a Node
+      s.target
+    ), !t && (f || !u) && d(s);
+  }), D = (s) => (u) => {
+    g.current = !0;
+    const k = n.props[s];
+    k && k(u);
+  }, E = {
+    ref: b
+  };
+  return i !== !1 && (E[i] = D(i)), c.useEffect(() => {
+    if (i !== !1) {
+      const s = $(i), u = P(p.current), k = () => {
+        v.current = !0;
+      };
+      return u.addEventListener(s, l), u.addEventListener("touchmove", k), () => {
+        u.removeEventListener(s, l), u.removeEventListener("touchmove", k);
+      };
+    }
+  }, [l, i]), o !== !1 && (E[o] = D(o)), c.useEffect(() => {
+    if (o !== !1) {
+      const s = $(o), u = P(p.current);
+      return u.addEventListener(s, l), () => {
+        u.removeEventListener(s, l);
+      };
+    }
+  }, [l, o]), /* @__PURE__ */ y(c.Fragment, {
+    children: /* @__PURE__ */ c.cloneElement(n, E)
+  });
+}
+process.env.NODE_ENV !== "production" && (R.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * The wrapped element.
+   */
+  children: Ce.isRequired,
+  /**
+   * If `true`, the React tree is ignored and only the DOM tree is considered.
+   * This prop changes how portaled elements are handled.
+   * @default false
+   */
+  disableReactTree: e.bool,
+  /**
+   * The mouse event to listen to. You can disable the listener by providing `false`.
+   * @default 'onClick'
+   */
+  mouseEvent: e.oneOf(["onClick", "onMouseDown", "onMouseUp", "onPointerDown", "onPointerUp", !1]),
+  /**
+   * Callback fired when a "click away" event is detected.
+   */
+  onClickAway: e.func.isRequired,
+  /**
+   * The touch event to listen to. You can disable the listener by providing `false`.
+   * @default 'onTouchEnd'
+   */
+  touchEvent: e.oneOf(["onTouchEnd", "onTouchStart", !1])
+});
+process.env.NODE_ENV !== "production" && (R.propTypes = ue(R.propTypes));
+function Re(r = {}) {
+  const {
+    autoHideDuration: n = null,
+    disableWindowBlurListener: f = !1,
+    onClose: o,
+    open: d,
+    resumeHideDuration: i
+  } = r, v = de();
+  c.useEffect(() => {
+    if (!d)
+      return;
+    function t(a) {
+      a.defaultPrevented || (a.key === "Escape" || a.key === "Esc") && (o == null || o(a, "escapeKeyDown"));
+    }
+    return document.addEventListener("keydown", t), () => {
+      document.removeEventListener("keydown", t);
+    };
+  }, [d, o]);
+  const p = H((t, a) => {
+    o == null || o(t, a);
+  }), h = H((t) => {
+    !o || t == null || v.start(t, () => {
+      p(null, "timeout");
+    });
+  });
+  c.useEffect(() => (d && h(n), v.clear), [d, n, h, v]);
+  const g = (t) => {
+    o == null || o(t, "clickaway");
+  }, b = v.clear, l = c.useCallback(() => {
+    n != null && h(i ?? n * 0.5);
+  }, [n, i, h]), D = (t) => (a) => {
+    const m = t.onBlur;
+    m == null || m(a), l();
+  }, E = (t) => (a) => {
+    const m = t.onFocus;
+    m == null || m(a), b();
+  }, s = (t) => (a) => {
+    const m = t.onMouseEnter;
+    m == null || m(a), b();
+  }, u = (t) => (a) => {
+    const m = t.onMouseLeave;
+    m == null || m(a), l();
+  };
+  return c.useEffect(() => {
+    if (!f && d)
+      return window.addEventListener("focus", l), window.addEventListener("blur", b), () => {
+        window.removeEventListener("focus", l), window.removeEventListener("blur", b);
+      };
+  }, [f, d, l, b]), {
+    getRootProps: (t = {}) => {
+      const a = S({}, N(r), N(t));
+      return S({
+        // ClickAwayListener adds an `onClick` prop which results in the alert not being announced.
+        // See https://github.com/mui/material-ui/issues/29080
+        role: "presentation"
+      }, t, a, {
+        onBlur: D(a),
+        onFocus: E(a),
+        onMouseEnter: s(a),
+        onMouseLeave: u(a)
+      });
+    },
+    onClickAway: g
+  };
+}
+function Fe(r) {
+  return W("MuiDivider", r);
+}
+const Ue = X("MuiDivider", ["root", "horizontal", "vertical", "insetContext", "insetNone"]);
+function Oe(r) {
+  return W("MuiSnackbar", r);
+}
+X("MuiSnackbar", ["root", "anchorOriginTopCenter", "anchorOriginBottomCenter", "anchorOriginTopRight", "anchorOriginBottomRight", "anchorOriginTopLeft", "anchorOriginBottomLeft", "colorPrimary", "colorDanger", "colorNeutral", "colorSuccess", "colorWarning", "endDecorator", "sizeSm", "sizeMd", "sizeLg", "startDecorator", "variantPlain", "variantOutlined", "variantSoft", "variantSolid"]);
+const Te = ["anchorOrigin", "animationDuration", "autoHideDuration", "color", "children", "className", "component", "disableWindowBlurListener", "endDecorator", "invertedColors", "onBlur", "onClose", "onFocus", "onMouseEnter", "onMouseLeave", "onUnmount", "open", "resumeHideDuration", "size", "slots", "slotProps", "startDecorator", "variant"];
+let V = (r) => r, F, U;
+const ze = (r) => {
+  const {
+    variant: n,
+    color: f,
+    size: o,
+    anchorOrigin: d
+  } = r, i = {
+    root: ["root", o && `size${x(o)}`, f && `color${x(f)}`, n && `variant${x(n)}`, `anchorOrigin${x(d.vertical)}${x(d.horizontal)}`],
+    startDecorator: ["startDecorator"],
+    endDecorator: ["endDecorator"]
+  };
+  return ke(i, Oe, {});
+}, we = j(F || (F = V`
+  0% {
+    transform: translateX(var(--Snackbar-translateX, 0px)) translateY(calc(var(--_Snackbar-anchorBottom, 1) * 100%));
+    opacity: 0;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    transform: translateX(var(--Snackbar-translateX, 0px)) translateY(0);
+  }
+`)), Le = j(U || (U = V`
+  0% {
+    transform: translateX(var(--Snackbar-translateX, 0px)) translateY(0);
+    opacity: 1;
+  }
+  100% {
+    transform: translateX(var(--Snackbar-translateX, 0px)) translateY(calc(var(--_Snackbar-anchorBottom, 1) * 100%));
+    opacity: 0;
+  }
+`)), Pe = A("div", {
+  name: "JoySnackbar",
+  slot: "Root",
+  overridesResolver: (r, n) => n.root
+})(({
+  theme: r,
+  ownerState: n
+}) => {
+  var f, o, d, i, v, p, h;
+  const {
+    p: g,
+    padding: b,
+    borderRadius: l
+  } = fe({
+    theme: r,
+    ownerState: n
+  }, ["p", "padding", "borderRadius"]);
+  return [S({
+    "--Snackbar-radius": r.vars.radius.sm,
+    "--Snackbar-decoratorChildRadius": "max((var(--Snackbar-radius) - var(--variant-borderWidth, 0px)) - var(--Snackbar-padding), min(var(--Snackbar-padding) + var(--variant-borderWidth, 0px), var(--Snackbar-radius) / 2))",
+    "--Button-minHeight": "var(--Snackbar-decoratorChildHeight)",
+    "--IconButton-size": "var(--Snackbar-decoratorChildHeight)",
+    "--Button-radius": "var(--Snackbar-decoratorChildRadius)",
+    "--IconButton-radius": "var(--Snackbar-decoratorChildRadius)",
+    "--Icon-color": "currentColor"
+  }, n.size === "sm" && {
+    "--Snackbar-padding": "0.75rem",
+    "--Snackbar-inset": "0.5rem",
+    "--Snackbar-decoratorChildHeight": "1.5rem",
+    "--Icon-fontSize": r.vars.fontSize.xl,
+    gap: "0.5rem"
+  }, n.size === "md" && {
+    "--Snackbar-padding": "1rem",
+    "--Snackbar-inset": "0.75rem",
+    // the spacing between Snackbar and the viewport
+    "--Snackbar-decoratorChildHeight": "2rem",
+    "--Icon-fontSize": r.vars.fontSize.xl,
+    gap: "0.625rem"
+  }, n.size === "lg" && {
+    "--Snackbar-padding": "1.25rem",
+    "--Snackbar-inset": "1rem",
+    "--Snackbar-decoratorChildHeight": "2.375rem",
+    "--Icon-fontSize": r.vars.fontSize.xl2,
+    gap: "0.875rem"
+  }, {
+    zIndex: r.vars.zIndex.snackbar,
+    position: "fixed",
+    display: "flex",
+    alignItems: "center",
+    minWidth: 300,
+    top: ((f = n.anchorOrigin) == null ? void 0 : f.vertical) === "top" ? "var(--Snackbar-inset)" : void 0,
+    left: ((o = n.anchorOrigin) == null ? void 0 : o.horizontal) === "left" ? "var(--Snackbar-inset)" : void 0,
+    bottom: ((d = n.anchorOrigin) == null ? void 0 : d.vertical) === "bottom" ? "var(--Snackbar-inset)" : void 0,
+    right: ((i = n.anchorOrigin) == null ? void 0 : i.horizontal) === "right" ? "var(--Snackbar-inset)" : void 0
+  }, ((v = n.anchorOrigin) == null ? void 0 : v.horizontal) === "center" && {
+    "--Snackbar-translateX": "-50%",
+    left: "50%",
+    transform: "translateX(var(--Snackbar-translateX))"
+  }, ((p = n.anchorOrigin) == null ? void 0 : p.vertical) === "top" && {
+    "--_Snackbar-anchorBottom": "-1"
+  }, {
+    animation: `${we} ${n.animationDuration}ms forwards`
+  }, !n.open && {
+    animationName: Le
+  }, {
+    boxShadow: r.vars.shadow.lg,
+    backgroundColor: r.vars.palette.background.surface,
+    padding: "var(--Snackbar-padding)",
+    borderRadius: "var(--Snackbar-radius)"
+  }, r.typography[`body-${{
+    sm: "xs",
+    md: "sm",
+    lg: "md"
+  }[n.size]}`], n.variant === "solid" && n.color && n.invertedColors && pe(n.color)(r), n.variant === "soft" && n.color && n.invertedColors && me(n.color)(r), (h = r.variants[n.variant]) == null ? void 0 : h[n.color]), g !== void 0 && {
+    "--Snackbar-padding": g
+  }, b !== void 0 && {
+    "--Snackbar-padding": b
+  }, l !== void 0 && {
+    "--Snackbar-radius": l
+  }];
+}), Me = A("span", {
+  name: "JoySnackbar",
+  slot: "StartDecorator",
+  overridesResolver: (r, n) => n.startDecorator
+})({
+  display: "inherit",
+  flex: "none"
+}), He = A("span", {
+  name: "JoySnackbar",
+  slot: "EndDecorator",
+  overridesResolver: (r, n) => n.endDecorator
+})({
+  display: "inherit",
+  flex: "none",
+  marginLeft: "auto"
+}), Ae = {
+  vertical: "bottom",
+  horizontal: "right"
+}, Y = /* @__PURE__ */ c.forwardRef(function(n, f) {
+  const o = ve({
+    props: n,
+    name: "JoySnackbar"
+  }), {
+    anchorOrigin: d = Ae,
+    animationDuration: i = 300,
+    autoHideDuration: v = null,
+    color: p = "neutral",
+    children: h,
+    className: g,
+    component: b,
+    disableWindowBlurListener: l = !1,
+    endDecorator: D,
+    invertedColors: E = !1,
+    onUnmount: s,
+    open: u,
+    size: k = "md",
+    slots: t = {},
+    slotProps: a,
+    startDecorator: m,
+    variant: J = "outlined"
+  } = o, K = he(o, Te), [Q, B] = c.useState(!0), [G, O] = c.useState(!1), T = c.useRef(s);
+  T.current = s, c.useEffect(() => {
+    if (u)
+      O(!1), B(!1);
+    else {
+      O(!0);
+      const L = setTimeout(() => {
+        var _;
+        B(!0), O(!1), (_ = T.current) == null || _.call(T);
+      }, i);
+      return () => {
+        clearTimeout(L);
+      };
+    }
+  }, [u, i]);
+  const C = S({}, o, {
+    anchorOrigin: d,
+    autoHideDuration: v,
+    color: p,
+    animationDuration: i,
+    disableWindowBlurListener: l,
+    invertedColors: E,
+    size: k,
+    variant: J
+  });
+  delete C.onUnmount;
+  const z = ze(C), {
+    getRootProps: Z,
+    onClickAway: ee
+  } = Re(C), ne = (L) => {
+    G || ee(L);
+  }, w = S({}, K, {
+    component: b,
+    slots: t,
+    slotProps: a
+  }), [re, oe] = M("root", {
+    ref: f,
+    className: be(z.root, g),
+    elementType: Pe,
+    externalForwardedProps: w,
+    getSlotProps: Z,
+    ownerState: C
+  }), [te, ae] = M("startDecorator", {
+    className: z.startDecorator,
+    elementType: Me,
+    externalForwardedProps: w,
+    ownerState: C
+  }), [se, ie] = M("endDecorator", {
+    className: z.endDecorator,
+    elementType: He,
+    externalForwardedProps: w,
+    ownerState: C
+  }), ce = t.clickAway || R;
+  return !u && Q ? null : /* @__PURE__ */ y(ce, S({
+    onClickAway: ne
+  }, typeof (a == null ? void 0 : a.clickAway) == "function" ? a.clickAway(C) : a == null ? void 0 : a.clickAway, {
+    children: /* @__PURE__ */ q(re, S({}, oe, {
+      children: [m && /* @__PURE__ */ y(te, S({}, ae, {
+        children: m
+      })), h, D && /* @__PURE__ */ y(se, S({}, ie, {
+        children: D
+      }))]
+    }))
+  }));
+});
+process.env.NODE_ENV !== "production" && (Y.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * The anchor of the `Snackbar`.
+   * On smaller screens, the component grows to occupy all the available width,
+   * the horizontal alignment is ignored.
+   * @default { vertical: 'bottom', horizontal: 'right' }
+   */
+  anchorOrigin: e.shape({
+    horizontal: e.oneOf(["center", "left", "right"]).isRequired,
+    vertical: e.oneOf(["bottom", "top"]).isRequired
+  }),
+  /**
+   * The duration of the animation in milliseconds. This value is used to control
+   * the length of time it takes for an animation to complete one cycle. It is also
+   * utilized for delaying the unmount of the component.
+   * Provide this value if you have your own animation so that we can precisely
+   * time the component's unmount to match your custom animation.
+   * @default 300
+   */
+  animationDuration: e.number,
+  /**
+   * The number of milliseconds to wait before automatically calling the
+   * `onClose` function. `onClose` should then set the state of the `open`
+   * prop to hide the Snackbar. This behavior is disabled by default with
+   * the `null` value.
+   * @default null
+   */
+  autoHideDuration: e.number,
+  /**
+   * @ignore
+   */
+  children: e.node,
+  /**
+   * @ignore
+   */
+  className: e.string,
+  /**
+   * The color of the component. It supports those theme colors that make sense for this component.
+   * @default 'neutral'
+   */
+  color: e.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: e.elementType,
+  /**
+   * If `true`, the `autoHideDuration` timer will expire even if the window is not focused.
+   * @default false
+   */
+  disableWindowBlurListener: e.bool,
+  /**
+   * Element placed after the children.
+   */
+  endDecorator: e.node,
+  /**
+   * If `true`, the children with an implicit color prop invert their colors to match the component's variant and color.
+   * @default false
+   */
+  invertedColors: e.bool,
+  /**
+   * When displaying multiple consecutive snackbars using a single parent-rendered
+   * `<Snackbar/>`, add the `key` prop to ensure independent treatment of each message.
+   * For instance, use `<Snackbar key={message} />`. Otherwise, messages might update
+   * in place, and features like `autoHideDuration` could be affected.
+   */
+  key: () => null,
+  /**
+   * @ignore
+   */
+  onBlur: e.func,
+  /**
+   * Callback fired when the component requests to be closed.
+   * Typically `onClose` is used to set state in the parent component,
+   * which is used to control the `Snackbar` `open` prop.
+   * The `reason` parameter can optionally be used to control the response to `onClose`,
+   * for example ignoring `clickaway`.
+   *
+   * @param {React.SyntheticEvent<any> | Event} event The event source of the callback.
+   * @param {string} reason Can be: `"timeout"` (`autoHideDuration` expired), `"clickaway"`, or `"escapeKeyDown"`.
+   */
+  onClose: e.func,
+  /**
+   * @ignore
+   */
+  onFocus: e.func,
+  /**
+   * @ignore
+   */
+  onMouseEnter: e.func,
+  /**
+   * @ignore
+   */
+  onMouseLeave: e.func,
+  /**
+   * A callback fired when the component is about to be unmounted.
+   */
+  onUnmount: e.func,
+  /**
+   * If `true`, the component is shown.
+   */
+  open: e.bool.isRequired,
+  /**
+   * The number of milliseconds to wait before dismissing after user interaction.
+   * If `autoHideDuration` prop isn't specified, it does nothing.
+   * If `autoHideDuration` prop is specified but `resumeHideDuration` isn't,
+   * we default to `autoHideDuration / 2` ms.
+   */
+  resumeHideDuration: e.number,
+  /**
+   * The size of the component.
+   * @default 'md'
+   */
+  size: e.oneOf(["sm", "md", "lg"]),
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: e.shape({
+    clickAway: e.oneOfType([e.func, e.shape({
+      children: e.element.isRequired,
+      disableReactTree: e.bool,
+      mouseEvent: e.oneOf(["onClick", "onMouseDown", "onMouseUp", "onPointerDown", "onPointerUp", !1]),
+      onClickAway: e.func.isRequired,
+      touchEvent: e.oneOf(["onTouchEnd", "onTouchStart", !1])
+    })]),
+    endDecorator: e.oneOfType([e.func, e.object]),
+    root: e.oneOfType([e.func, e.object]),
+    startDecorator: e.oneOfType([e.func, e.object])
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: e.shape({
+    clickAway: e.elementType,
+    endDecorator: e.elementType,
+    root: e.elementType,
+    startDecorator: e.elementType
+  }),
+  /**
+   * Element placed before the children.
+   */
+  startDecorator: e.node,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: e.oneOfType([e.arrayOf(e.oneOfType([e.func, e.object, e.bool])), e.func, e.object]),
+  /**
+   * The [global variant](https://mui.com/joy-ui/main-features/global-variants/) to use.
+   * @default 'outlined'
+   */
+  variant: e.oneOf(["outlined", "plain", "soft", "solid"])
+});
+const Be = ge(/* @__PURE__ */ y("path", {
+  d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m1 15h-2v-2h2zm0-4h-2V7h2z"
+}), "Error"), We = ({
+  notification: r,
+  onClose: n
+}) => {
+  const f = ye(), o = Se();
+  return r.open ? /* @__PURE__ */ y(
+    Y,
+    {
+      open: r.open,
+      onClose: n,
+      autoHideDuration: r.variant === "error" ? 5e3 : 3e3,
+      anchorOrigin: { vertical: "top", horizontal: "center" },
+      color: r.variant === "success" ? "success" : "danger",
+      variant: "soft",
+      startDecorator: r.variant === "success" ? /* @__PURE__ */ y(Ee, {}) : /* @__PURE__ */ y(Be, {}),
+      sx: {
+        borderRadius: f.sm,
+        fontFamily: o.secondary,
+        minWidth: "300px",
+        maxWidth: "400px",
+        zIndex: 9999,
+        position: "fixed"
+      },
+      children: /* @__PURE__ */ q(De, { sx: { display: "flex", flexDirection: "column", gap: "4px" }, children: [
+        r.title && /* @__PURE__ */ y(
+          I,
+          {
+            level: "title-md",
+            sx: {
+              fontWeight: 600,
+              fontSize: "16px",
+              lineHeight: 1.2,
+              color: "inherit"
+            },
+            children: r.title
+          }
+        ),
+        r.message && /* @__PURE__ */ y(
+          I,
+          {
+            level: "body-sm",
+            sx: {
+              fontSize: "14px",
+              lineHeight: 1.3,
+              color: "inherit",
+              opacity: 0.9
+            },
+            children: r.message
+          }
+        )
+      ] })
+    }
+  ) : null;
+};
+export {
+  We as N,
+  Ue as d,
+  Fe as g
+};