fansunited-frontend-components 0.0.31-RC5 → 0.0.31-RC6

package/packages/common/src/components/Rules.js

@@ -1,299 +0,0 @@
-import { j as t } from "../../../../node_modules/react/jsx-runtime.js";
-import { useState as C } from "react";
-import { Tooltip as c, IconButton as l, Modal as j, ModalDialog as y, DialogContent as k, Typography as v, Box as S, Button as w } from "@mui/joy";
-import d from "../../../../node_modules/@mui/icons-material/esm/InfoOutlined.js";
-import P from "../../../../node_modules/@mui/icons-material/esm/Close.js";
-import { useConstantContext as I } from "../hooks/useConstantContext.js";
-import { ConstantsContext as R } from "../providers/ConstantsProvider.js";
-import { useColors as B, useCornerRadius as z, useFontFamily as F, useSpacingScale as T, isMobile as H } from "../functions/theme.js";
-import { useTranslation as M } from "../../../../node_modules/react-i18next/dist/es/useTranslation.js";
-const J = ({
-  rules: f,
-  rulesDisplay: e,
-  isOverlayVariant: h = !1
-}) => {
-  const { t: r } = M(), { shadowRootElement: g } = I(R), o = B(), u = z(), a = F(), n = T(), m = H(), [p, s] = C(!1);
-  if (!f)
-    return null;
-  if (e != null && e.component)
-    return e.component;
-  if (((e == null ? void 0 : e.type) || "modal") === "link" && (e != null && e.url)) {
-    const i = e.target || "_blank", x = {
-      backgroundColor: "transparent",
-      color: h ? o.palette.neutral.plainColor : o.textSecondary,
-      border: "none",
-      borderRadius: "50%",
-      width: "2em",
-      height: "2em",
-      minHeight: "2em",
-      minWidth: "2em",
-      padding: 0,
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      cursor: "pointer",
-      transition: "all 0.2s ease-in-out",
-      "&: hover": {
-        backgroundColor: "transparent",
-        transform: "scale(1.05)"
-      },
-      "&:focus-visible": {
-        outline: "none"
-      },
-      "& svg": {
-        fontSize: "1.25em"
-      }
-    };
-    return typeof window > "u" ? /* @__PURE__ */ t.jsx(
-      c,
-      {
-        title: r("common.rules.info"),
-        placement: "right",
-        variant: "soft",
-        disablePortal: !0,
-        children: /* @__PURE__ */ t.jsx(
-          l,
-          {
-            component: "a",
-            href: e.url,
-            target: i,
-            rel: "noopener noreferrer",
-            sx: x,
-            "aria-label": r("common.rules.info"),
-            children: /* @__PURE__ */ t.jsx(d, {})
-          }
-        )
-      }
-    ) : /* @__PURE__ */ t.jsx(
-      c,
-      {
-        title: r("common.rules.info"),
-        placement: "right",
-        variant: "soft",
-        disablePortal: !0,
-        children: /* @__PURE__ */ t.jsx(
-          l,
-          {
-            onClick: (b) => {
-              b.stopPropagation(), window.open(e.url, i, "noopener,noreferrer");
-            },
-            sx: x,
-            "aria-label": r("common.rules.info"),
-            children: /* @__PURE__ */ t.jsx(d, {})
-          }
-        )
-      }
-    );
-  }
-  return /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-    /* @__PURE__ */ t.jsx(
-      c,
-      {
-        title: r("common.rules.info"),
-        placement: "right",
-        variant: "soft",
-        disablePortal: !0,
-        children: /* @__PURE__ */ t.jsx(
-          l,
-          {
-            onClick: (i) => {
-              i.stopPropagation(), s(!0);
-            },
-            sx: {
-              backgroundColor: "transparent",
-              color: o.palette.neutral[500],
-              border: "none",
-              borderRadius: "50%",
-              width: "2em",
-              height: "2em",
-              minHeight: "2em",
-              minWidth: "2em",
-              padding: 0,
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              cursor: "pointer",
-              transition: "all 0.2s ease-in-out",
-              "&:hover": {
-                backgroundColor: "transparent",
-                color: o.palette.neutral[500],
-                transform: "scale(1.05)"
-              },
-              "&:focus-visible": {
-                outline: "none"
-              },
-              "& svg": {
-                fontSize: "1.25em"
-              }
-            },
-            "aria-label": r("common.rules.info"),
-            children: /* @__PURE__ */ t.jsx(d, {})
-          }
-        )
-      }
-    ),
-    /* @__PURE__ */ t.jsx(
-      j,
-      {
-        open: p,
-        onClose: () => s(!1),
-        container: g,
-        sx: { zIndex: 1300 },
-        children: /* @__PURE__ */ t.jsxs(
-          y,
-          {
-            sx: {
-              width: "100%",
-              maxWidth: m ? "90vw" : "600px",
-              maxHeight: m ? "90vh" : "80vh",
-              p: m ? 2 : 3,
-              borderRadius: u.md,
-              backgroundColor: o.surface
-            },
-            children: [
-              /* @__PURE__ */ t.jsx(
-                l,
-                {
-                  onClick: (i) => {
-                    i.stopPropagation(), s(!1);
-                  },
-                  sx: {
-                    position: "absolute",
-                    top: n.sm,
-                    right: n.sm,
-                    backgroundColor: "transparent",
-                    color: o.textSecondary,
-                    border: "none",
-                    borderRadius: "50%",
-                    width: "2em",
-                    height: "2em",
-                    minHeight: "2em",
-                    minWidth: "2em",
-                    padding: 0,
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    cursor: "pointer",
-                    transition: "all 0.2s ease-in-out",
-                    zIndex: 1e3,
-                    "&:hover": {
-                      backgroundColor: `${o.textSecondary}15`,
-                      color: o.textPrimary,
-                      transform: "scale(1.05)"
-                    },
-                    "&:focus-visible": {
-                      outline: "none"
-                    },
-                    "& svg": {
-                      fontSize: "1.25em"
-                    }
-                  },
-                  children: /* @__PURE__ */ t.jsx(P, {})
-                }
-              ),
-              /* @__PURE__ */ t.jsxs(
-                k,
-                {
-                  sx: {
-                    display: "flex",
-                    flexDirection: "column",
-                    gap: n.md
-                  },
-                  children: [
-                    /* @__PURE__ */ t.jsx(
-                      v,
-                      {
-                        sx: {
-                          fontFamily: a.primary,
-                          fontWeight: 600,
-                          fontSize: "1.25em",
-                          lineHeight: 1.2,
-                          color: o.textPrimary,
-                          textAlign: "center",
-                          marginBottom: n.sm
-                        },
-                        children: r("common.rules.title")
-                      }
-                    ),
-                    /* @__PURE__ */ t.jsx(
-                      S,
-                      {
-                        sx: {
-                          fontFamily: a.secondary,
-                          fontSize: "1em",
-                          lineHeight: 1.5,
-                          color: o.textSecondary,
-                          overflow: "auto",
-                          // Custom scrollbar styling for dark theme
-                          "&::-webkit-scrollbar": {
-                            width: "8px"
-                          },
-                          "&::-webkit-scrollbar-track": {
-                            backgroundColor: "transparent"
-                          },
-                          "&::-webkit-scrollbar-thumb": {
-                            backgroundColor: o.secondaryContainer,
-                            borderRadius: "4px",
-                            "&:hover": {
-                              backgroundColor: o.textSecondary
-                            }
-                          },
-                          // Firefox scrollbar styling
-                          scrollbarWidth: "thin",
-                          scrollbarColor: `${o.secondaryContainer} transparent`,
-                          "& p": {
-                            marginBottom: n.sm
-                          },
-                          "& ul, & ol": {
-                            marginLeft: n.md,
-                            marginBottom: n.sm
-                          },
-                          "& li": {
-                            marginBottom: n.xs
-                          },
-                          "& h1, & h2, & h3, & h4, & h5, & h6": {
-                            fontFamily: a.primary,
-                            color: o.textPrimary,
-                            marginTop: n.md,
-                            marginBottom: n.sm
-                          }
-                        },
-                        dangerouslySetInnerHTML: { __html: f }
-                      }
-                    ),
-                    /* @__PURE__ */ t.jsx(
-                      w,
-                      {
-                        variant: "outlined",
-                        onClick: (i) => {
-                          i.stopPropagation(), s(!1);
-                        },
-                        sx: {
-                          marginTop: n.md,
-                          borderColor: o.textPrimary,
-                          color: o.textPrimary,
-                          fontFamily: a.secondary,
-                          fontSize: "0.875em",
-                          borderRadius: u.sm,
-                          "&:hover": {
-                            borderColor: o.textPrimary,
-                            color: o.textPrimary,
-                            backgroundColor: o.surfaceVariant
-                          }
-                        },
-                        children: r("common.rules.close")
-                      }
-                    )
-                  ]
-                }
-              )
-            ]
-          }
-        )
-      }
-    )
-  ] });
-};
-export {
-  J as default
-};

package/packages/common/src/components/Skeletons/NotFoundSkeleton.js

@@ -1,83 +0,0 @@
-import { j as o } from "../../../../../node_modules/react/jsx-runtime.js";
-import { Box as e, Typography as l } from "@mui/joy";
-import { useColors as s, useSpacingScale as y, useFontFamily as a } from "../../functions/theme.js";
-const u = ({
-  notFoundTitle: c,
-  notFoundMessage: x
-}) => {
-  var r, i;
-  const t = (i = (r = s().palette) == null ? void 0 : r.danger) == null ? void 0 : i.plainColor, d = s().textSecondary, m = y(), n = a().primary, p = a().secondary;
-  return /* @__PURE__ */ o.jsxs(
-    e,
-    {
-      sx: {
-        display: "flex",
-        flexDirection: "column",
-        justifyContent: "center",
-        alignItems: "center",
-        width: "100%",
-        minHeight: "300px",
-        padding: "32px 24px",
-        textAlign: "center"
-      },
-      children: [
-        /* @__PURE__ */ o.jsx(
-          e,
-          {
-            sx: {
-              width: "80px",
-              height: "80px",
-              borderRadius: "50%",
-              backgroundColor: `${t}15`,
-              // 15% opacity
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              marginBottom: "24px"
-            },
-            children: /* @__PURE__ */ o.jsx(
-              e,
-              {
-                sx: {
-                  fontSize: "32px",
-                  color: t,
-                  fontWeight: "bold",
-                  fontFamily: n
-                },
-                children: "?"
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ o.jsx(
-          l,
-          {
-            level: "h4",
-            sx: {
-              color: t,
-              marginBottom: m.xs,
-              fontWeight: "600",
-              fontFamily: n
-            },
-            children: c
-          }
-        ),
-        /* @__PURE__ */ o.jsx(
-          l,
-          {
-            level: "body-md",
-            sx: {
-              color: d,
-              lineHeight: 1.5,
-              fontFamily: p
-            },
-            children: x
-          }
-        )
-      ]
-    }
-  );
-};
-export {
-  u as default
-};

package/packages/common/src/components/Skeletons/Overlay/ApiError/OverlayApiErrorSkeleton.js

@@ -1,80 +0,0 @@
-import { j as e } from "../../../../../../../node_modules/react/jsx-runtime.js";
-import { Box as n, Typography as s, Button as E } from "@mui/joy";
-import { useSpacingScale as F, useInternalTheme as R, isMobile as v, useImageBackgroundGradient as P } from "../../../../functions/theme.js";
-import { extractBrandingProperties as V, sanitizeBackgroundUrl as M, stripHtmlTags as O } from "../../../../functions/helpers.js";
-import "../../../../../../../node_modules/i18next/dist/esm/i18next.js";
-import "../../../../../../../node_modules/i18next-browser-languagedetector/dist/esm/i18nextBrowserLanguageDetector.js";
-import { WidgetTemplate as l } from "../../../../enums/enums.js";
-import z from "../../../Rules.js";
-import "react";
-import "../../../../providers/ConstantsProvider.js";
-import L from "../../../AlertMessage.js";
-import D from "../../../../../../../node_modules/@mui/icons-material/esm/Replay.js";
-import { createStyles as G } from "./OverlayApiErrorSkeleton.styles.js";
-import { useImageVariant as U } from "../../../../hooks/useImageVariant.js";
-import "../../../../providers/ContainerProvider.js";
-import { useTranslation as Y } from "../../../../../../../node_modules/react-i18next/dist/es/useTranslation.js";
-const oe = (t) => {
-  const c = F(), o = R(), m = v(), { t: a } = Y(), d = P(
-    l.OVERLAY
-  ), { brandingImage: x, brandingColors: i, brandingLogo: g } = V(t.entity.branding || null), u = x || U(
-    {
-      images: t.entity.images || null,
-      imagePlaceholder: t.defaultImagePlaceholderUrl || ""
-    },
-    l.OVERLAY
-  ), h = M(u), y = (i == null ? void 0 : i.contentColor) || o.colorSchemes.dark.textColor, f = o.customFontFamily.dark.primary, j = o.customFontFamily.dark.secondary, k = o.customRadius.dark, S = o.border.dark.size, A = (i == null ? void 0 : i.backgroundColor) || o.colorSchemes.dark.surfaceVariant, C = o.colorSchemes.dark.onSurface, T = o.colorSchemes.dark.surfaceVariant, b = o.colorSchemes.dark.textPrimary, B = t.isApiError ? a("common.error.title") : a("common.authentication.accessRequired"), I = t.isApiError ? t.apiErrorMessage || a("common.error.message") : a("common.authentication.invalidOrMissingAuth"), r = G({
-    spacingScale: c,
-    brandingColors: i,
-    secondaryColor: y,
-    fontFamilyPrimary: f,
-    fontFamilySecondary: j,
-    borderRadius: k,
-    borderSize: S,
-    darkTextColor: o.colorSchemes.dark.textColor,
-    backgroundImage: h,
-    imageBackgroundGradient: d,
-    contentBgColor: A,
-    onSurfaceColor: C,
-    surfaceVariantColor: T,
-    textPrimary: b,
-    isMobile: m
-  }), p = () => t.isApiError ? /* @__PURE__ */ e.jsx(n, { sx: r.ctaSection, children: /* @__PURE__ */ e.jsx(n, { sx: r.buttonsContainer, children: /* @__PURE__ */ e.jsx(E, { sx: r.tryAgainButton, onClick: t.toggleTryAgain, children: /* @__PURE__ */ e.jsxs(n, { sx: r.tryAgainButtonContent, children: [
-    /* @__PURE__ */ e.jsx(D, { sx: r.tryAgainIcon }),
-    /* @__PURE__ */ e.jsx(s, { sx: r.tryAgainText, children: t.tryAgainButtonText })
-  ] }) }) }) }) : /* @__PURE__ */ e.jsx(e.Fragment, {});
-  return /* @__PURE__ */ e.jsxs(n, { sx: r.mainContainer, children: [
-    /* @__PURE__ */ e.jsx(n, { children: /* @__PURE__ */ e.jsx(n, { sx: r.headlineSection, children: /* @__PURE__ */ e.jsx(n, { sx: r.headlineContent, children: /* @__PURE__ */ e.jsxs(n, { sx: r.headlineContentInner, children: [
-      /* @__PURE__ */ e.jsxs(n, { sx: { display: "flex", alignItems: "center", gap: c["3xs"] }, children: [
-        /* @__PURE__ */ e.jsx(s, { level: "body-sm", sx: r.headlineText, children: t.headline }),
-        /* @__PURE__ */ e.jsx(
-          z,
-          {
-            rulesDisplay: t.rulesDisplay,
-            isOverlayVariant: !0,
-            rules: t.entity.rules || ""
-          }
-        )
-      ] }),
-      /* @__PURE__ */ e.jsxs(n, { sx: r.contentContainer, children: [
-        /* @__PURE__ */ e.jsx(s, { level: "h4", sx: r.titleText, children: t.entity.title }),
-        /* @__PURE__ */ e.jsx(s, { level: "body-lg", sx: r.descriptionText, children: O(t.entity.description) })
-      ] })
-    ] }) }) }) }),
-    /* @__PURE__ */ e.jsxs(n, { sx: r.bottomSection, children: [
-      /* @__PURE__ */ e.jsx(
-        L,
-        {
-          variant: "error",
-          title: B,
-          message: I
-        }
-      ),
-      p(),
-      g ? /* @__PURE__ */ e.jsx(n, { sx: r.footerContainer, children: t.renderPresentedBy(o.colorSchemes.dark.textColor) }) : /* @__PURE__ */ e.jsx(e.Fragment, {})
-    ] })
-  ] });
-};
-export {
-  oe as default
-};

package/packages/common/src/components/Skeletons/Overlay/ApiError/OverlayApiErrorSkeleton.styles.js

@@ -1,190 +0,0 @@
-const n = (e) => {
-  var t;
-  return {
-    // Main container with background overlay
-    mainContainer: {
-      display: "flex",
-      flexDirection: "column",
-      justifyContent: "space-between",
-      gap: "40px",
-      p: e.spacingScale.xl,
-      boxShadow: "md",
-      border: (t = e.brandingColors) != null && t.borderColor ? `${e.borderSize} solid ${e.brandingColors.borderColor}` : "none",
-      overflow: "hidden",
-      backgroundImage: e.backgroundImage,
-      backgroundSize: "cover",
-      backgroundPosition: "center",
-      position: "relative",
-      borderRadius: e.borderRadius.md,
-      minHeight: "250px",
-      "&::before": {
-        content: '""',
-        position: "absolute",
-        background: e.imageBackgroundGradient,
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        borderRadius: "inherit",
-        zIndex: 0
-      }
-    },
-    // Headline section wrapper
-    headlineSection: {
-      display: "flex",
-      justifyContent: "space-between",
-      flex: "1 0 0",
-      alignSelf: "stretch"
-    },
-    // Headline content container
-    headlineContent: {
-      display: "flex",
-      flexDirection: "column",
-      alignItems: "flex-start",
-      flex: "1 0 0",
-      gap: "16px"
-    },
-    // Headline content with z-index
-    headlineContentInner: {
-      zIndex: 10
-    },
-    // Headline typography
-    headlineText: {
-      fontWeight: 500,
-      lineHeight: "166%",
-      letterSpacing: "1px",
-      textAlign: e.isMobile ? "center" : "left",
-      color: e.secondaryColor,
-      opacity: "70%",
-      textTransform: "uppercase",
-      fontFamily: e.fontFamilySecondary,
-      fontSize: "0.75em"
-    },
-    // Content container
-    contentContainer: {
-      display: "flex",
-      flexDirection: "column",
-      gap: e.spacingScale["3xs"]
-    },
-    // Title typography
-    titleText: {
-      fontWeight: 700,
-      lineHeight: "133%",
-      letterSpacing: "0px",
-      textAlign: e.isMobile ? "center" : "left",
-      fontSize: "1.5em",
-      color: e.darkTextColor,
-      fontFamily: e.fontFamilyPrimary
-    },
-    // Description typography
-    descriptionText: {
-      fontWeight: 400,
-      lineHeight: "140%",
-      letterSpacing: "0.15px",
-      fontSize: "1.25em",
-      textAlign: e.isMobile ? "center" : "left",
-      color: e.secondaryColor,
-      opacity: "70%",
-      fontFamily: e.fontFamilyPrimary
-    },
-    // Bottom section container
-    bottomSection: {
-      display: "flex",
-      flexDirection: "column",
-      gap: "24px",
-      zIndex: 1
-    },
-    // Footer container
-    footerContainer: {
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "space-between",
-      flexDirection: e.isMobile ? "column-reverse" : "row",
-      gap: e.spacingScale.md
-    },
-    ctaSection: {
-      borderRadius: e.borderRadius.md,
-      py: e.spacingScale.md,
-      display: "flex",
-      flexDirection: "column",
-      alignItems: "center",
-      alignSelf: "stretch",
-      gap: e.spacingScale.md,
-      backdropFilter: "blur(4px)",
-      position: "relative",
-      "&::before": {
-        content: '""',
-        position: "absolute",
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        backgroundColor: e.contentBgColor,
-        opacity: 0.25,
-        borderRadius: "inherit",
-        zIndex: 0,
-        backdropFilter: "blur(4px)"
-      },
-      "& > *": {
-        position: "relative",
-        zIndex: 1
-      }
-    },
-    // Buttons container
-    buttonsContainer: {
-      display: "flex",
-      flexDirection: "column",
-      gap: e.spacingScale.md
-    },
-    // Try again button
-    tryAgainButton: {
-      display: "flex",
-      minHeight: "48px",
-      py: "12px",
-      pr: "24px",
-      pl: "16px",
-      flexDirection: "column",
-      justifyContent: "center",
-      alignItems: "center",
-      gap: "8px",
-      borderRadius: e.borderRadius.xl,
-      bgcolor: e.onSurfaceColor,
-      "&:hover": {
-        bgcolor: e.surfaceVariantColor
-      },
-      fontSize: "0.9375em"
-    },
-    // Try again button content
-    tryAgainButtonContent: {
-      display: "flex",
-      justifyContent: "center",
-      alignItems: "center",
-      gap: "8px",
-      alignSelf: "stretch"
-    },
-    // Try again icon
-    tryAgainIcon: {
-      display: "flex",
-      width: "24px",
-      height: "24px",
-      justifyContent: "center",
-      alignItems: "center",
-      color: e.textPrimary
-    },
-    // Try again text
-    tryAgainText: {
-      color: e.textPrimary,
-      textAlign: "center",
-      fontFamily: e.fontFamilyPrimary,
-      fontSize: "0.9375em",
-      fontStyle: "normal",
-      fontWeight: 500,
-      lineHeight: "24px",
-      letterSpacing: "0.46px",
-      textTransform: "uppercase"
-    }
-  };
-};
-export {
-  n as createStyles
-};