fansunited-frontend-components 0.0.31-RC4 → 0.0.31-RC5

package/packages/poll-vote/src/components/PollVote.js

@@ -0,0 +1,270 @@
+import { j as t } from "../../../../node_modules/react/jsx-runtime.js";
+import { useState as n, useMemo as q, useEffect as N } from "react";
+import { WidgetTemplate as o } from "../../../common/src/enums/enums.js";
+import "../../../common/src/providers/ContainerProvider.js";
+import { initializeI18n as W } from "../../../common/src/functions/i18n.js";
+import B from "../../../common/src/components/Spinner.js";
+import "@mui/joy";
+import "../../../common/src/providers/ConstantsProvider.js";
+import { usePollById as G } from "../hooks/usePollById.js";
+import { useMyPollVote as H } from "../hooks/useMyPollVote.js";
+import K from "./Variants/Overlay/PollOverlayVariant.js";
+import J from "./Variants/Standard/PollStandardVariant.js";
+import Q from "./Variants/Split/PollSplitVariant.js";
+import X from "./Variants/Standard/ScoreState/PollStandardScoreState.js";
+import Z from "./Variants/Split/ScoreState/PollSplitScoreState.js";
+import _ from "./Variants/Overlay/ScoreState/PollOverlayScoreState.js";
+import $ from "./PollNotFound.js";
+import p from "./Variants/Standard/Error/PollStandardError.js";
+import ee from "./Variants/Split/Error/PollSplitError.js";
+import le from "./Variants/Overlay/Error/PollOverlayError.js";
+import te from "./Variants/Standard/SignIn/PollStandardSignIn.js";
+import ae from "./Variants/Split/SignIn/PollSplitSignIn.js";
+import ie from "./Variants/Overlay/SignIn/PollOverlaySignIn.js";
+import re from "./Variants/Standard/LeadCollection/StandardLeadAfterCollection.js";
+import de from "./Variants/Split/LeadCollection/SplitLeadAfterCollection.js";
+import ne from "./Variants/Overlay/LeadCollection/OverlayLeadAfterCollection.js";
+function m(e) {
+  return e.template === o.STANDARD;
+}
+const ve = (e) => {
+  const [s, P] = n([]), [R, T] = n(!1), [I, V] = n(!1), [L, b] = n(!1), [h, y] = n(!1), [v, E] = n(!1), [w, S] = n(!1), { poll: l, setPoll: F } = G(e.entityId, e.sdk), {
+    myVote: i,
+    setMyVote: M,
+    isUnauthorized: f,
+    isApiError: c,
+    setIsApiError: A,
+    setIsUnauthorized: U
+  } = H(e.entityId, e.sdk, L), g = q(() => !l || !i || !(i != null && i.id) || l.maxAttempts === -1 || l.maxAttempts === null || i.attempts === null ? !1 : (l == null ? void 0 : l.maxAttempts) <= (i == null ? void 0 : i.attempts), [l, i]);
+  if (N(() => {
+    W(e.language || "en");
+  }, [e.language]), !l || !i)
+    return /* @__PURE__ */ t.jsx(B, { my: 20 });
+  if (!l.id)
+    return /* @__PURE__ */ t.jsx($, {});
+  if (l.authRequirement === "REGISTERED" && !e.userIsLoggedIn)
+    return m(e) ? /* @__PURE__ */ t.jsx(
+      te,
+      {
+        poll: l,
+        imagePosition: e.imagePosition,
+        defaultImagePlaceholderUrl: e.defaultImagePlaceholderUrl,
+        signInCTA: e.signInCTA,
+        rulesDisplay: e.rulesDisplay
+      }
+    ) : e.template === o.OVERLAY ? /* @__PURE__ */ t.jsx(
+      ie,
+      {
+        poll: l,
+        defaultImagePlaceholderUrl: e.defaultImagePlaceholderUrl,
+        signInCTA: e.signInCTA,
+        rulesDisplay: e.rulesDisplay
+      }
+    ) : /* @__PURE__ */ t.jsx(
+      ae,
+      {
+        poll: l,
+        defaultImagePlaceholderUrl: e.defaultImagePlaceholderUrl,
+        signInCTA: e.signInCTA,
+        rulesDisplay: e.rulesDisplay
+      }
+    );
+  const D = () => {
+    A(!1), U(!1), b(!L);
+  };
+  if (f || c)
+    return m(e) ? /* @__PURE__ */ t.jsx(
+      p,
+      {
+        poll: l,
+        imagePosition: e.imagePosition,
+        defaultImagePlaceholderUrl: e.defaultImagePlaceholderUrl,
+        isApiError: c,
+        toggleTryAgain: D,
+        rulesDisplay: e.rulesDisplay
+      }
+    ) : e.template === o.OVERLAY ? /* @__PURE__ */ t.jsx(
+      le,
+      {
+        poll: l,
+        defaultImagePlaceholderUrl: e.defaultImagePlaceholderUrl,
+        isApiError: c,
+        toggleTryAgain: D,
+        rulesDisplay: e.rulesDisplay
+      }
+    ) : /* @__PURE__ */ t.jsx(
+      ee,
+      {
+        poll: l,
+        defaultImagePlaceholderUrl: e.defaultImagePlaceholderUrl,
+        isApiError: c,
+        toggleTryAgain: D,
+        rulesDisplay: e.rulesDisplay
+      }
+    );
+  const u = l.multipleChoice && l.maxMultipleChoiceOptions || 1, x = (r) => {
+    if (u === 1)
+      P(r);
+    else {
+      const d = r[0];
+      P((a) => a.includes(d) ? a.filter((z) => z !== d) : a.length < u ? [...a, d] : a);
+    }
+  }, k = async () => {
+    var r;
+    if (((r = e.leads) == null ? void 0 : r.position) === "after" && l.authRequirement === "LEAD" && !v) {
+      S(!0);
+      return;
+    }
+    await O();
+  }, O = async () => {
+    V(!0);
+    try {
+      const r = await e.sdk.voting.voteForPoll(
+        e.entityId,
+        s
+      ), d = { ...l };
+      d.options = l.options.map((a) => s.includes(a.id) ? {
+        ...a,
+        votes: a.votes + 1
+      } : a), d.totalVotes = (l.totalVotes || 0) + s.length, F(d), M(r), T(!0);
+    } catch (r) {
+      if (e.sdk.helpers.getSDKConfiguration().errorHandlingMode === "standard") {
+        const a = r;
+        a.error.code === 401 || a.error.code === 403 ? U(!0) : A(!0);
+      } else {
+        const a = r;
+        a.data.error.code === 401 || a.data.error.code === 403 ? U(!0) : A(!0);
+      }
+    } finally {
+      V(!1);
+    }
+  }, C = async () => {
+    E(!0), y(!0), await O(), y(!1), S(!1);
+  }, j = () => {
+    T(!1), P([]), y(!1), E(!1), S(!1);
+  }, Y = () => e.template === o.OVERLAY ? /* @__PURE__ */ t.jsx(
+    K,
+    {
+      sdk: e.sdk,
+      leads: e.leads,
+      poll: l,
+      options: l.options,
+      selectedOptions: s,
+      answerPoll: x,
+      voteForPoll: k,
+      defaultImagePlaceholderUrl: e.defaultImagePlaceholderUrl,
+      optionChoices: u,
+      isVoting: I,
+      rulesDisplay: e.rulesDisplay
+    }
+  ) : m(e) ? /* @__PURE__ */ t.jsx(
+    J,
+    {
+      sdk: e.sdk,
+      leads: e.leads,
+      poll: l,
+      options: l.options,
+      selectedOptions: s,
+      answerPoll: x,
+      voteForPoll: k,
+      defaultImagePlaceholderUrl: e.defaultImagePlaceholderUrl,
+      imagePosition: e.imagePosition,
+      optionChoices: u,
+      isVoting: I,
+      rulesDisplay: e.rulesDisplay
+    }
+  ) : /* @__PURE__ */ t.jsx(
+    Q,
+    {
+      sdk: e.sdk,
+      leads: e.leads,
+      poll: l,
+      options: l.options,
+      selectedOptions: s,
+      answerPoll: x,
+      voteForPoll: k,
+      defaultImagePlaceholderUrl: e.defaultImagePlaceholderUrl,
+      optionChoices: u,
+      isVoting: I,
+      rulesDisplay: e.rulesDisplay
+    }
+  );
+  return w ? e.template === o.OVERLAY ? /* @__PURE__ */ t.jsx(
+    ne,
+    {
+      poll: l,
+      sdk: e.sdk,
+      leads: e.leads,
+      defaultImagePlaceholderUrl: e.defaultImagePlaceholderUrl,
+      onLeadSubmitted: C,
+      isSubmitting: h
+    }
+  ) : m(e) ? /* @__PURE__ */ t.jsx(
+    re,
+    {
+      poll: l,
+      sdk: e.sdk,
+      leads: e.leads,
+      defaultImagePlaceholderUrl: e.defaultImagePlaceholderUrl,
+      imagePosition: e.imagePosition,
+      onLeadSubmitted: C,
+      isSubmitting: h
+    }
+  ) : /* @__PURE__ */ t.jsx(
+    de,
+    {
+      poll: l,
+      sdk: e.sdk,
+      leads: e.leads,
+      defaultImagePlaceholderUrl: e.defaultImagePlaceholderUrl,
+      onLeadSubmitted: C,
+      isSubmitting: h
+    }
+  ) : R || g ? e.template === o.OVERLAY ? /* @__PURE__ */ t.jsx(
+    _,
+    {
+      userVote: i,
+      poll: l,
+      maxAttemptsReached: g,
+      voteAgain: j,
+      sdk: e.sdk,
+      leads: e.leads,
+      defaultImagePlaceholderUrl: e.defaultImagePlaceholderUrl,
+      isUnauthorized: f,
+      additionalCTA: e.additionalCTA,
+      rulesDisplay: e.rulesDisplay
+    }
+  ) : m(e) ? /* @__PURE__ */ t.jsx(
+    X,
+    {
+      imagePosition: e.imagePosition || "left",
+      userVote: i,
+      poll: l,
+      maxAttemptsReached: g,
+      voteAgain: j,
+      sdk: e.sdk,
+      leads: e.leads,
+      defaultImagePlaceholderUrl: e.defaultImagePlaceholderUrl,
+      isUnauthorized: f,
+      additionalCTA: e.additionalCTA,
+      rulesDisplay: e.rulesDisplay
+    }
+  ) : /* @__PURE__ */ t.jsx(
+    Z,
+    {
+      userVote: i,
+      poll: l,
+      maxAttemptsReached: g,
+      voteAgain: j,
+      sdk: e.sdk,
+      leads: e.leads,
+      defaultImagePlaceholderUrl: e.defaultImagePlaceholderUrl,
+      isUnauthorized: f,
+      additionalCTA: e.additionalCTA,
+      rulesDisplay: e.rulesDisplay
+    }
+  ) : Y();
+};
+export {
+  ve as default
+};

package/packages/poll-vote/src/components/Shared/AlertMessage.js

@@ -0,0 +1,93 @@
+import { j as e } from "../../../../../node_modules/react/jsx-runtime.js";
+import { useInternalTheme as a, useCornerRadius as f, useFontFamily as d } from "../../../../common/src/functions/theme.js";
+import "../../../../../node_modules/i18next/dist/esm/i18next.js";
+import "../../../../../node_modules/i18next-browser-languagedetector/dist/esm/i18nextBrowserLanguageDetector.js";
+import { Alert as p, Stack as u, Typography as s } from "@mui/joy";
+import "react";
+import "../../../../common/src/providers/ConstantsProvider.js";
+import x from "../../../../../node_modules/@mui/icons-material/esm/CheckCircle.js";
+import h from "../../../../../node_modules/@mui/icons-material/esm/Info.js";
+import y from "../../../../../node_modules/@mui/icons-material/esm/Warning.js";
+import "../../../../common/src/providers/ContainerProvider.js";
+const g = (r, o) => {
+  switch (r) {
+    case "success":
+      return /* @__PURE__ */ e.jsx(x, {});
+    case "error":
+      return /* @__PURE__ */ e.jsx(y, { sx: { color: o } });
+    case "info":
+      return /* @__PURE__ */ e.jsx(h, {});
+  }
+}, j = (r) => {
+  switch (r) {
+    case "success":
+      return "success";
+    case "error":
+      return "danger";
+    case "info":
+      return "primary";
+  }
+}, T = ({
+  variant: r,
+  title: o,
+  message: i,
+  description: n
+}) => {
+  const m = a(), l = f(), t = d().secondary, c = j(r);
+  return /* @__PURE__ */ e.jsx(
+    p,
+    {
+      variant: "soft",
+      color: c,
+      startDecorator: g(
+        r,
+        m.colorSchemes.light.palette.danger.plainColor
+      ),
+      sx: {
+        gap: 1,
+        borderRadius: l.sm,
+        fontSize: "0.875em",
+        "--Icon-fontSize": "1.25em"
+      },
+      children: /* @__PURE__ */ e.jsxs(
+        u,
+        {
+          sx: {
+            fontSize: "1.5em"
+          },
+          children: [
+            o && /* @__PURE__ */ e.jsx(
+              s,
+              {
+                level: "title-md",
+                color: c,
+                fontWeight: "bold",
+                sx: { fontFamily: t, fontSize: "0.875em" },
+                children: o
+              }
+            ),
+            /* @__PURE__ */ e.jsx(
+              s,
+              {
+                level: "body-sm",
+                sx: { fontFamily: t, fontSize: "0.675em" },
+                children: i
+              }
+            ),
+            n && /* @__PURE__ */ e.jsx(
+              s,
+              {
+                level: "body-xs",
+                sx: { fontFamily: t, fontSize: "0.6em" },
+                children: n
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+export {
+  T as default
+};

package/packages/poll-vote/src/components/Shared/Answers/PollOption.js

@@ -0,0 +1,132 @@
+import { j as o } from "../../../../../../node_modules/react/jsx-runtime.js";
+import { Box as l, AspectRatio as f, Typography as a } from "@mui/joy";
+import { useInternalTheme as R, useColors as v, useCornerRadius as u, useFontFamily as w, useSpacingScale as z, useBorderSize as P } from "../../../../../common/src/functions/theme.js";
+import "../../../../../../node_modules/i18next/dist/esm/i18next.js";
+import "../../../../../../node_modules/i18next-browser-languagedetector/dist/esm/i18nextBrowserLanguageDetector.js";
+import "react";
+import "../../../../../common/src/providers/ConstantsProvider.js";
+import "../../../../../common/src/providers/ContainerProvider.js";
+import { useEmbedCode as O } from "../../../hooks/useEmbedCodeContainer.js";
+const T = (e) => {
+  var h;
+  const g = R(), d = v(), y = u().sm, r = w().primary, n = u().xs, t = z(), b = P().size, C = O(e.option.embedCode || ""), p = !!e.option.embedCode, m = ((h = e.brandingColors) == null ? void 0 : h.primaryColor) || d.palette.primary.plainColor, j = d.palette.primary.onPrimary, s = e.selectedOptions.includes(e.option.id) ? j : g.colorSchemes.light.textColor, x = e.optionsImages.get(e.option.id), F = () => {
+    e.multipleChoice ? e.answerPoll([e.option.id]) : e.answerPoll([e.option.id]);
+  }, c = e.selectedOptions.includes(e.option.id), i = e.isVoting || e.multipleChoice && !c && e.selectedOptions.length >= (e.maxChoices || 1), S = () => p ? /* @__PURE__ */ o.jsxs(o.Fragment, { children: [
+    /* @__PURE__ */ o.jsx(
+      l,
+      {
+        sx: {
+          borderRadius: n,
+          overflow: "hidden",
+          flexGrow: 1
+        },
+        children: /* @__PURE__ */ o.jsx(f, { ratio: "16/9", sx: { borderRadius: n }, children: /* @__PURE__ */ o.jsx(l, { ref: C }) })
+      }
+    ),
+    /* @__PURE__ */ o.jsx(
+      a,
+      {
+        level: "body-md",
+        sx: {
+          fontFamily: r,
+          fontWeight: 500,
+          fontSize: "0.935em",
+          lineHeight: "24px",
+          letterSpacing: "0.46px",
+          textAlign: "center",
+          color: s,
+          px: t["2xs"]
+        },
+        children: e.option.title
+      }
+    )
+  ] }) : x ? /* @__PURE__ */ o.jsxs(o.Fragment, { children: [
+    /* @__PURE__ */ o.jsx(
+      l,
+      {
+        sx: {
+          borderRadius: n,
+          overflow: "hidden",
+          flexGrow: 1
+        },
+        children: /* @__PURE__ */ o.jsx(f, { ratio: "16/9", sx: { borderRadius: n }, children: /* @__PURE__ */ o.jsx(
+          "img",
+          {
+            src: x,
+            alt: "Option illustration",
+            style: {
+              width: "100%",
+              height: "100%",
+              objectFit: "cover"
+            }
+          }
+        ) })
+      }
+    ),
+    /* @__PURE__ */ o.jsx(
+      a,
+      {
+        level: "body-md",
+        sx: {
+          fontFamily: r,
+          fontWeight: 500,
+          fontSize: "0.935em",
+          lineHeight: "24px",
+          letterSpacing: "0.46px",
+          textAlign: "center",
+          color: s,
+          px: t["2xs"]
+        },
+        children: e.option.title
+      }
+    )
+  ] }) : /* @__PURE__ */ o.jsx(
+    a,
+    {
+      level: "body-md",
+      sx: {
+        fontFamily: r,
+        fontWeight: 500,
+        fontSize: "0.935em",
+        lineHeight: "16px",
+        letterSpacing: "0.46px",
+        textAlign: "center",
+        color: s,
+        px: t["2xs"],
+        my: "auto"
+      },
+      children: e.option.title
+    }
+  );
+  return /* @__PURE__ */ o.jsx(
+    l,
+    {
+      sx: {
+        borderRadius: y,
+        flex: 1,
+        p: t.xs,
+        gap: t.xs,
+        bgcolor: c ? m : "#FFFFFF",
+        boxShadow: c ? `inset 0 0 0 ${b} ${m}` : "none",
+        cursor: i ? "not-allowed" : "pointer",
+        opacity: i ? 0.5 : 1,
+        transition: "all 300ms cubic-bezier(0.2, 0, 0, 1)",
+        transform: "scale(1)",
+        "&:hover": {
+          transform: i ? "scale(1)" : "scale(1.02)"
+        },
+        "&:active": {
+          transform: i ? "scale(1)" : "scale(0.98)"
+        },
+        display: "flex",
+        flexDirection: "column"
+      },
+      onClick: i ? void 0 : F,
+      children: S()
+    },
+    e.option.id
+  );
+};
+export {
+  T as default
+};

package/packages/poll-vote/src/components/Shared/Answers/PollOptions.js

@@ -0,0 +1,82 @@
+import { j as o } from "../../../../../../node_modules/react/jsx-runtime.js";
+import { Box as n } from "@mui/joy";
+import s from "./PollOption.js";
+const d = (i) => {
+  if (i.optionsLayout === "twoByTwo") {
+    const e = [];
+    for (let l = 0; l < i.options.length; l += 2) {
+      const t = i.options.slice(l, l + 2);
+      e.push(t);
+    }
+    return /* @__PURE__ */ o.jsx(n, { sx: { py: 2, display: "flex", flexDirection: "column", gap: 2 }, children: e.map((l, t) => /* @__PURE__ */ o.jsx(
+      n,
+      {
+        sx: {
+          display: "flex",
+          flexDirection: {
+            xs: "column",
+            md: "row"
+          },
+          gap: 2
+        },
+        children: l.map((a) => /* @__PURE__ */ o.jsx(
+          s,
+          {
+            option: a,
+            optionsImages: i.optionsImages,
+            selectedOptions: i.selectedOptions,
+            answerPoll: i.answerPoll,
+            brandingColors: i.brandingColors,
+            multipleChoice: i.multipleChoice,
+            maxChoices: i.maxChoices,
+            isVoting: i.isVoting
+          },
+          a.id
+        ))
+      },
+      `row-${t}`
+    )) });
+  }
+  return i.optionsLayout === "column" ? /* @__PURE__ */ o.jsx(n, { sx: { py: 2, display: "flex", flexDirection: "column", gap: 2 }, children: i.options.map((e) => /* @__PURE__ */ o.jsx(
+    s,
+    {
+      option: e,
+      selectedOptions: i.selectedOptions,
+      optionsImages: i.optionsImages,
+      answerPoll: i.answerPoll,
+      brandingColors: i.brandingColors,
+      multipleChoice: i.multipleChoice,
+      maxChoices: i.maxChoices,
+      isVoting: i.isVoting
+    },
+    e.id
+  )) }) : /* @__PURE__ */ o.jsx(
+    n,
+    {
+      sx: {
+        py: 2,
+        display: "flex",
+        flexWrap: "wrap",
+        flexDirection: { xs: "column", md: "row" },
+        gap: 2
+      },
+      children: i.options.map((e) => /* @__PURE__ */ o.jsx(
+        s,
+        {
+          option: e,
+          selectedOptions: i.selectedOptions,
+          optionsImages: i.optionsImages,
+          answerPoll: i.answerPoll,
+          brandingColors: i.brandingColors,
+          multipleChoice: i.multipleChoice,
+          maxChoices: i.maxChoices,
+          isVoting: i.isVoting
+        },
+        e.id
+      ))
+    }
+  );
+};
+export {
+  d as default
+};

package/packages/poll-vote/src/components/Shared/Button.js

@@ -0,0 +1,76 @@
+import { j as r } from "../../../../../node_modules/react/jsx-runtime.js";
+import { Button as l, Typography as a } from "@mui/joy";
+import { useFontFamily as s, useCornerRadius as c, useColors as m } from "../../../../common/src/functions/theme.js";
+import "../../../../../node_modules/i18next/dist/esm/i18next.js";
+import "../../../../../node_modules/i18next-browser-languagedetector/dist/esm/i18nextBrowserLanguageDetector.js";
+import "react";
+import "../../../../common/src/providers/ConstantsProvider.js";
+import "../../../../common/src/providers/ContainerProvider.js";
+const F = (o) => {
+  const i = s().primary, e = c().xl, t = m().palette.primary.onPrimary, n = o.selectedOptions.length === 0 || o.isVoting;
+  return /* @__PURE__ */ r.jsx(r.Fragment, { children: /* @__PURE__ */ r.jsx(
+    l,
+    {
+      variant: "soft",
+      disabled: n,
+      loading: o.isVoting,
+      sx: {
+        borderRadius: e,
+        py: "10px",
+        px: "16px",
+        bgcolor: o.buttonColor,
+        color: t,
+        transition: "all 300ms cubic-bezier(0.2, 0, 0, 1)",
+        transform: "scale(1)",
+        alignSelf: "center",
+        "&:hover": {
+          bgcolor: o.buttonColor,
+          transform: "scale(1.02)"
+        },
+        "&:active": {
+          color: t,
+          transform: "scale(0.98)"
+        },
+        "&:disabled": {
+          bgcolor: o.buttonColor,
+          color: t,
+          opacity: "12%"
+        },
+        "--Icon-color": t,
+        fontSize: "0.9375em"
+      },
+      onClick: o.onClick,
+      slotProps: {
+        loadingIndicatorCenter: {
+          sx: {
+            "& .MuiCircularProgress-track": {
+              stroke: "#FFFFFF"
+            }
+          }
+        }
+      },
+      children: /* @__PURE__ */ r.jsx(
+        a,
+        {
+          sx: {
+            fontFamily: i,
+            fontWeight: 500,
+            fontSize: "0.9375em",
+            lineHeight: "24px",
+            letterSpacing: "0.46px",
+            textTransform: "uppercase",
+            color: t,
+            gap: "8px",
+            display: "flex",
+            alignItems: "center",
+            visibility: o.isVoting ? "hidden" : "visible"
+          },
+          children: o.label
+        }
+      )
+    }
+  ) });
+};
+export {
+  F as default
+};

package/packages/poll-vote/src/components/Shared/MainCard.js

@@ -0,0 +1,36 @@
+import { j as l } from "../../../../../node_modules/react/jsx-runtime.js";
+import { Box as c } from "@mui/joy";
+import { isMobile as p, isLarge as u, useCornerRadius as b, useColors as o, useBorderSize as x } from "../../../../common/src/functions/theme.js";
+import "../../../../../node_modules/i18next/dist/esm/i18next.js";
+import "../../../../../node_modules/i18next-browser-languagedetector/dist/esm/i18nextBrowserLanguageDetector.js";
+import "react";
+import "../../../../common/src/providers/ConstantsProvider.js";
+import "../../../../common/src/providers/ContainerProvider.js";
+const y = ({
+  children: r,
+  brandingBorderColor: e,
+  state: i
+}) => {
+  const s = p(), t = u(), d = i === "play" ? t : s, n = b().md, m = e || o().secondaryContainer, a = x().size + " solid " + m;
+  return /* @__PURE__ */ l.jsx(
+    c,
+    {
+      sx: {
+        display: "flex",
+        // flexDirection: mobile ? "column" : "row",
+        flexDirection: d ? "column" : "row",
+        width: "100%",
+        borderRadius: n,
+        boxShadow: "md",
+        border: a,
+        overflow: "hidden",
+        background: o().surface,
+        minHeight: "250px"
+      },
+      children: r
+    }
+  );
+};
+export {
+  y as default
+};