import { jsx as n, jsxs as u, Fragment as we } from "react/jsx-runtime";
import { s as de, r as B, _ as T, t as pe, P as o, J as j, v as Ue, I as xo, l as vo, f as Co, g as To, C as So, a as D, b as Je, c as Z, e as me, i as Ge, B as l, u as qe, m as Ye, W as Xe } from "./PrizeCard-C2El3VOB.js";
import { g as ko, s as K, a as Ro } from "./helpers-uh28Hksw.js";
import * as x from "react";
import { useState as wo } from "react";
import "react-dom";
import { s as H, u as ue, a as $, c as fe, o as ie, n as Po, d as ke, p as Fo, q as Io, I as le, T as C, B as zo } from "./Button-DPGn5NZd.js";
import { C as Oo } from "./Close-3OfJFbc2.js";
import { u as Mo, a as _e } from "./useEventCallback-Dqgs56Ox.js";
import { P as Ho } from "./Popper-DlJYI9q0.js";
import { m as Ao, b as Wo, M as jo, a as Do } from "./ModalDialog-CmE2hP2R.js";
function $o(e) {
  return de("MuiAspectRatio", e);
}
B("MuiAspectRatio", ["root", "content", "colorPrimary", "colorNeutral", "colorDanger", "colorSuccess", "colorWarning", "colorContext", "variantPlain", "variantOutlined", "variantSoft", "variantSolid"]);
const Bo = ["children", "ratio", "minHeight", "maxHeight", "objectFit", "color", "variant", "component", "flex", "slots", "slotProps"], No = (e) => {
  const {
    variant: t,
    color: i
  } = e, a = {
    root: ["root"],
    content: ["content", t && `variant${j(t)}`, i && `color${j(i)}`]
  };
  return fe(a, $o, {});
}, _o = H("div", {
  name: "JoyAspectRatio",
  slot: "Root",
  overridesResolver: (e, t) => t.root
})(({
  ownerState: e,
  theme: t
}) => {
  const i = typeof e.minHeight == "number" ? `${e.minHeight}px` : e.minHeight, a = typeof e.maxHeight == "number" ? `${e.maxHeight}px` : e.maxHeight;
  return {
    // a context variable for any child component
    "--AspectRatio-paddingBottom": `clamp(var(--AspectRatio-minHeight), calc(100% / (${e.ratio})), var(--AspectRatio-maxHeight))`,
    "--AspectRatio-maxHeight": a || "9999px",
    "--AspectRatio-minHeight": i || "0px",
    "--Icon-color": e.color !== "neutral" || e.variant === "solid" ? "currentColor" : t.vars.palette.text.icon,
    borderRadius: "var(--AspectRatio-radius)",
    display: e.flex ? "flex" : "block",
    flex: e.flex ? 1 : "initial",
    flexDirection: "column",
    margin: "var(--AspectRatio-margin)"
  };
}), Eo = H("div", {
  name: "JoyAspectRatio",
  slot: "Content",
  overridesResolver: (e, t) => t.content
})(({
  theme: e,
  ownerState: t
}) => {
  var i;
  return T({
    flex: 1,
    position: "relative",
    borderRadius: "inherit",
    height: 0,
    paddingBottom: "calc(var(--AspectRatio-paddingBottom) - 2 * var(--variant-borderWidth, 0px))",
    overflow: "hidden",
    transition: "inherit",
    // makes it easy to add transition to the content
    // use data-attribute instead of :first-child to support zero config SSR (emotion)
    // use nested selector for integrating with nextjs image `fill` layout (spans are inserted on top of the img)
    "& [data-first-child]": {
      display: "flex",
      justifyContent: "center",
      alignItems: "center",
      boxSizing: "border-box",
      position: "absolute",
      width: "100%",
      height: "100%",
      objectFit: t.objectFit,
      margin: 0,
      padding: 0,
      "& > img": {
        // support art-direction that uses <picture><img /></picture>
        width: "100%",
        height: "100%",
        objectFit: t.objectFit
      }
    }
  }, e.typography["body-md"], (i = e.variants[t.variant]) == null ? void 0 : i[t.color]);
}), Pe = /* @__PURE__ */ x.forwardRef(function(t, i) {
  const a = ue({
    props: t,
    name: "JoyAspectRatio"
  }), {
    children: m,
    ratio: r = "16 / 9",
    minHeight: y,
    maxHeight: p,
    objectFit: s = "cover",
    color: v = "neutral",
    variant: k = "soft",
    component: g,
    flex: R = !1,
    slots: b = {},
    slotProps: S = {}
  } = a, f = pe(a, Bo), h = T({}, a, {
    flex: R,
    minHeight: y,
    maxHeight: p,
    objectFit: s,
    ratio: r,
    color: v,
    variant: k
  }), w = No(h), I = T({}, f, {
    component: g,
    slots: b,
    slotProps: S
  }), [A, N] = $("root", {
    ref: i,
    className: w.root,
    elementType: _o,
    externalForwardedProps: I,
    ownerState: h
  }), [W, c] = $("content", {
    className: w.content,
    elementType: Eo,
    externalForwardedProps: I,
    ownerState: h
  });
  return /* @__PURE__ */ n(A, T({}, N, {
    children: /* @__PURE__ */ n(W, T({}, c, {
      children: x.Children.map(m, (F, _) => _ === 0 && /* @__PURE__ */ x.isValidElement(F) ? /* @__PURE__ */ x.cloneElement(F, {
        "data-first-child": ""
      }) : F)
    }))
  }));
});
process.env.NODE_ENV !== "production" && (Pe.propTypes = {
  // ┌────────────────────────────── Warning ──────────────────────────────┐
  // │ These PropTypes are generated from the TypeScript type definitions. │
  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
  // └─────────────────────────────────────────────────────────────────────┘
  /**
   * Used to render icon or text elements inside the AspectRatio if `src` is not set.
   * This can be an element, or just a string.
   */
  children: o.node,
  /**
   * The color of the component. It supports those theme colors that make sense for this component.
   * @default 'neutral'
   */
  color: o.oneOf(["danger", "neutral", "primary", "success", "warning"]),
  /**
   * The component used for the root node.
   * Either a string to use a HTML element or a component.
   */
  component: o.elementType,
  /**
   * By default, the AspectRatio will maintain the aspect ratio of its content.
   * Set this prop to `true` when the container is a flex row and you want the AspectRatio to fill the height of its container.
   * @default false
   */
  flex: o.bool,
  /**
   * The maximum calculated height of the element (not the CSS height).
   */
  maxHeight: o.oneOfType([o.number, o.string]),
  /**
   * The minimum calculated height of the element (not the CSS height).
   */
  minHeight: o.oneOfType([o.number, o.string]),
  /**
   * The CSS object-fit value of the first-child.
   * @default 'cover'
   */
  objectFit: o.oneOf(["-moz-initial", "contain", "cover", "fill", "inherit", "initial", "none", "revert-layer", "revert", "scale-down", "unset"]),
  /**
   * The aspect-ratio of the element. The current implementation uses padding instead of the CSS aspect-ratio due to browser support.
   * https://caniuse.com/?search=aspect-ratio
   * @default '16 / 9'
   */
  ratio: o.oneOfType([o.number, o.string]),
  /**
   * The props used for each slot inside.
   * @default {}
   */
  slotProps: o.shape({
    content: o.oneOfType([o.func, o.object]),
    root: o.oneOfType([o.func, o.object])
  }),
  /**
   * The components used for each slot inside.
   * @default {}
   */
  slots: o.shape({
    content: o.elementType,
    root: o.elementType
  }),
  /**
   * The system prop that allows defining system overrides as well as additional CSS styles.
   */
  sx: o.oneOfType([o.arrayOf(o.oneOfType([o.func, o.object, o.bool])), o.func, o.object]),
  /**
   * The [global variant](https://mui.com/joy-ui/main-features/global-variants/) to use.
   * @default 'soft'
   */
  variant: o.oneOfType([o.oneOf(["outlined", "plain", "soft", "solid"]), o.string])
});
const Lo = B("MuiCardOverflow", ["root", "colorPrimary", "colorNeutral", "colorDanger", "colorSuccess", "colorWarning", "colorContext", "variantPlain", "variantOutlined", "variantSoft", "variantSolid"]);
function Vo(e) {
  return de("MuiCardContent", e);
}
B("MuiCardContent", ["root"]);
const Uo = ["className", "component", "children", "orientation", "slots", "slotProps"], Jo = () => fe({
  root: ["root"]
}, Vo, {}), Ke = H("div")(({
  ownerState: e
}) => ({
  display: "flex",
  flexDirection: e.orientation === "horizontal" ? "row" : "column",
  flex: 9999,
  // fill the available space in the Card and also shrink if needed
  zIndex: 1,
  columnGap: "var(--Card-padding)",
  rowGap: "max(2px, calc(0.1875 * var(--Card-padding)))",
  padding: "var(--unstable_padding)",
  [`.${Lo.root} > &`]: {
    "--unstable_padding": "calc(var(--Card-padding) * 0.75) 0px"
  }
})), Go = H(Ke, {
  name: "JoyCardContent",
  slot: "Root",
  overridesResolver: (e, t) => t.root
})({}), qo = /* @__PURE__ */ x.forwardRef(function(t, i) {
  const a = ue({
    props: t,
    name: "JoyCardContent"
  }), {
    className: m,
    component: r = "div",
    children: y,
    orientation: p = "vertical",
    slots: s = {},
    slotProps: v = {}
  } = a, k = pe(a, Uo), g = T({}, k, {
    component: r,
    slots: s,
    slotProps: v
  }), R = T({}, a, {
    component: r,
    orientation: p
  }), b = Jo(), [S, f] = $("root", {
    ref: i,
    className: Ue(b.root, m),
    elementType: Go,
    externalForwardedProps: g,
    ownerState: R
  });
  return /* @__PURE__ */ n(S, T({}, f, {
    children: y
  }));
});
process.env.NODE_ENV !== "production" && (qo.propTypes = {
  // ┌────────────────────────────── Warning ──────────────────────────────┐
  // │ These PropTypes are generated from the TypeScript type definitions. │
  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
  // └─────────────────────────────────────────────────────────────────────┘
  /**
   * Used to render icon or text elements inside the CardContent if `src` is not set.
   * This can be an element, or just a string.
   */
  children: o.node,
  /**
   * @ignore
   */
  className: o.string,
  /**
   * The component used for the root node.
   * Either a string to use a HTML element or a component.
   */
  component: o.elementType,
  /**
   * The component orientation.
   * @default 'vertical'
   */
  orientation: o.oneOf(["horizontal", "vertical"]),
  /**
   * The props used for each slot inside.
   * @default {}
   */
  slotProps: o.shape({
    root: o.oneOfType([o.func, o.object])
  }),
  /**
   * The components used for each slot inside.
   * @default {}
   */
  slots: o.shape({
    root: o.elementType
  }),
  /**
   * The system prop that allows defining system overrides as well as additional CSS styles.
   */
  sx: o.oneOfType([o.arrayOf(o.oneOfType([o.func, o.object, o.bool])), o.func, o.object])
});
function Yo(e) {
  return de("MuiDialogContent", e);
}
B("MuiDialogContent", ["root"]);
const Xo = B("MuiDialogTitle", ["root", "h1", "h2", "h3", "h4", "title-lg", "title-md", "title-sm", "body-lg", "body-md", "body-sm", "body-xs", "colorPrimary", "colorNeutral", "colorDanger", "colorSuccess", "colorWarning", "colorContext", "variantPlain", "variantOutlined", "variantSoft", "variantSolid"]), Ko = ["component", "children", "orientation", "slots", "slotProps"], Qo = () => fe({
  root: ["root"]
}, Yo, {}), Zo = H(Ke, {
  name: "JoyDialogContent",
  slot: "Root",
  overridesResolver: (e, t) => t.root
})(({
  theme: e
}) => ({
  color: `var(--DialogContent-color, ${e.vars.palette.text.tertiary})`,
  overflow: "auto",
  margin: "var(--unstable_DialogContent-margin)",
  [`.${Ao.root} > .${Xo.root} + &`]: {
    "--unstable_DialogContent-margin": "-0.375em 0 0 0"
  }
})), Qe = /* @__PURE__ */ x.forwardRef(function(t, i) {
  const a = ue({
    props: t,
    name: "JoyDialogContent"
  }), m = x.useContext(Wo), {
    component: r = "div",
    children: y,
    orientation: p = "vertical",
    slots: s = {},
    slotProps: v = {}
  } = a, k = pe(a, Ko), g = T({}, k, {
    component: r,
    slots: s,
    slotProps: v
  }), R = T({}, a, {
    component: r,
    orientation: p
  }), b = Qo(), [S, f] = $("root", {
    ref: i,
    className: b.root,
    elementType: Zo,
    externalForwardedProps: g,
    ownerState: R,
    additionalProps: {
      id: m == null ? void 0 : m.describedBy
    }
  });
  return /* @__PURE__ */ n(S, T({}, f, {
    children: y
  }));
});
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`. │
  // └─────────────────────────────────────────────────────────────────────┘
  /**
   * Used to render icon or text elements inside the CardContent if `src` is not set.
   * This can be an element, or just a string.
   */
  children: o.node,
  /**
   * The component used for the root node.
   * Either a string to use a HTML element or a component.
   */
  component: o.elementType,
  /**
   * The component orientation.
   * @default 'vertical'
   */
  orientation: o.oneOf(["horizontal", "vertical"]),
  /**
   * The props used for each slot inside.
   * @default {}
   */
  slotProps: o.shape({
    root: o.oneOfType([o.func, o.object])
  }),
  /**
   * The components used for each slot inside.
   * @default {}
   */
  slots: o.shape({
    root: o.elementType
  }),
  /**
   * The system prop that allows defining system overrides as well as additional CSS styles.
   */
  sx: o.oneOfType([o.arrayOf(o.oneOfType([o.func, o.object, o.bool])), o.func, o.object])
});
function et(e) {
  return de("MuiTooltip", e);
}
B("MuiTooltip", ["root", "tooltipArrow", "arrow", "touch", "placementLeft", "placementRight", "placementTop", "placementBottom", "colorPrimary", "colorDanger", "colorNeutral", "colorSuccess", "colorWarning", "colorContext", "sizeSm", "sizeMd", "sizeLg", "variantPlain", "variantOutlined", "variantSoft", "variantSolid"]);
const ot = ["children", "className", "component", "arrow", "describeChild", "disableFocusListener", "disableHoverListener", "disableInteractive", "disableTouchListener", "enterDelay", "enterNextDelay", "enterTouchDelay", "followCursor", "id", "leaveDelay", "leaveTouchDelay", "onClose", "onOpen", "open", "disablePortal", "direction", "keepMounted", "modifiers", "placement", "title", "color", "variant", "size", "slots", "slotProps"], tt = (e) => {
  const {
    arrow: t,
    variant: i,
    color: a,
    size: m,
    placement: r,
    touch: y
  } = e, p = {
    root: ["root", t && "tooltipArrow", y && "touch", m && `size${j(m)}`, a && `color${j(a)}`, i && `variant${j(i)}`, `tooltipPlacement${j(r.split("-")[0])}`],
    arrow: ["arrow"]
  };
  return fe(p, et, {});
}, nt = H("div", {
  name: "JoyTooltip",
  slot: "Root",
  overridesResolver: (e, t) => t.root
})(({
  ownerState: e,
  theme: t
}) => {
  var i, a, m;
  const r = (i = t.variants[e.variant]) == null ? void 0 : i[e.color];
  return T({}, e.size === "sm" && {
    "--Icon-fontSize": t.vars.fontSize.md,
    "--Tooltip-arrowSize": "8px",
    padding: t.spacing(0.25, 0.625)
  }, e.size === "md" && {
    "--Icon-fontSize": t.vars.fontSize.lg,
    "--Tooltip-arrowSize": "10px",
    padding: t.spacing(0.5, 0.75)
  }, e.size === "lg" && {
    "--Icon-fontSize": t.vars.fontSize.xl,
    "--Tooltip-arrowSize": "12px",
    padding: t.spacing(0.75, 1)
  }, {
    zIndex: t.vars.zIndex.tooltip,
    borderRadius: t.vars.radius.sm,
    boxShadow: t.shadow.sm,
    wordWrap: "break-word",
    position: "relative"
  }, e.disableInteractive && {
    pointerEvents: "none"
  }, t.typography[`body-${{
    sm: "xs",
    md: "sm",
    lg: "md"
  }[e.size]}`], r, !r.backgroundColor && {
    backgroundColor: t.vars.palette.background.surface
  }, {
    "&::before": {
      // acts as a invisible connector between the element and the tooltip
      // so that the cursor can move to the tooltip without losing focus.
      content: '""',
      display: "block",
      position: "absolute",
      width: (a = e.placement) != null && a.match(/(top|bottom)/) ? "100%" : (
        // 10px equals the default offset popper config
        "calc(10px + var(--variant-borderWidth, 0px))"
      ),
      height: (m = e.placement) != null && m.match(/(top|bottom)/) ? "calc(10px + var(--variant-borderWidth, 0px))" : "100%"
    },
    '&[data-popper-placement*="bottom"]::before': {
      top: 0,
      left: 0,
      transform: "translateY(-100%)"
    },
    '&[data-popper-placement*="left"]::before': {
      top: 0,
      right: 0,
      transform: "translateX(100%)"
    },
    '&[data-popper-placement*="right"]::before': {
      top: 0,
      left: 0,
      transform: "translateX(-100%)"
    },
    '&[data-popper-placement*="top"]::before': {
      bottom: 0,
      left: 0,
      transform: "translateY(100%)"
    }
  });
}), rt = H("span", {
  name: "JoyTooltip",
  slot: "Arrow",
  overridesResolver: (e, t) => t.arrow
})(({
  theme: e,
  ownerState: t
}) => {
  var i, a, m;
  const r = (i = e.variants[t.variant]) == null ? void 0 : i[t.color];
  return {
    "--unstable_Tooltip-arrowRotation": 0,
    width: "var(--Tooltip-arrowSize)",
    height: "var(--Tooltip-arrowSize)",
    boxSizing: "border-box",
    // use pseudo element because Popper controls the `transform` property of the arrow.
    "&::before": {
      content: '""',
      display: "block",
      position: "absolute",
      width: 0,
      height: 0,
      border: "calc(var(--Tooltip-arrowSize) / 2) solid",
      borderLeftColor: "transparent",
      borderBottomColor: "transparent",
      borderTopColor: (a = r == null ? void 0 : r.backgroundColor) != null ? a : e.vars.palette.background.surface,
      borderRightColor: (m = r == null ? void 0 : r.backgroundColor) != null ? m : e.vars.palette.background.surface,
      borderRadius: "0px 2px 0px 0px",
      boxShadow: `var(--variant-borderWidth, 0px) calc(-1 * var(--variant-borderWidth, 0px)) 0px 0px ${r.borderColor}`,
      transformOrigin: "center center",
      transform: "rotate(calc(-45deg + 90deg * var(--unstable_Tooltip-arrowRotation)))"
    },
    '[data-popper-placement*="bottom"] &': {
      top: "calc(0.5px + var(--Tooltip-arrowSize) * -1 / 2)"
      // 0.5px is for perfect overlap with the Tooltip
    },
    '[data-popper-placement*="top"] &': {
      "--unstable_Tooltip-arrowRotation": 2,
      bottom: "calc(0.5px + var(--Tooltip-arrowSize) * -1 / 2)"
    },
    '[data-popper-placement*="left"] &': {
      "--unstable_Tooltip-arrowRotation": 1,
      right: "calc(0.5px + var(--Tooltip-arrowSize) * -1 / 2)"
    },
    '[data-popper-placement*="right"] &': {
      "--unstable_Tooltip-arrowRotation": 3,
      left: "calc(0.5px + var(--Tooltip-arrowSize) * -1 / 2)"
    }
  };
});
let se = !1;
const Ee = new Io();
let X = {
  x: 0,
  y: 0
};
function Le(e, t) {
  return (i) => {
    t && t(i), e(i);
  };
}
function Ve(e, t) {
  return (i, ...a) => {
    t && t(i, ...a), e(i, ...a);
  };
}
const ce = /* @__PURE__ */ x.forwardRef(function(t, i) {
  var a;
  const m = ue({
    props: t,
    name: "JoyTooltip"
  }), {
    children: r,
    className: y,
    component: p,
    arrow: s = !1,
    describeChild: v = !1,
    disableFocusListener: k = !1,
    disableHoverListener: g = !1,
    disableInteractive: R = !1,
    disableTouchListener: b = !1,
    enterDelay: S = 100,
    enterNextDelay: f = 0,
    enterTouchDelay: h = 700,
    followCursor: w = !1,
    id: I,
    leaveDelay: A = 0,
    leaveTouchDelay: N = 1500,
    onClose: W,
    onOpen: c,
    open: F,
    disablePortal: _,
    direction: E,
    keepMounted: ge,
    modifiers: ee,
    placement: L = "bottom",
    title: z,
    color: V = "neutral",
    variant: U = "solid",
    size: Ze = "md",
    slots: eo = {},
    slotProps: oo = {}
  } = m, Fe = pe(m, ot), [J, Ie] = x.useState(), [he, to] = x.useState(null), oe = x.useRef(!1), ye = R || w, ze = ie(), be = ie(), te = ie(), Oe = ie(), [no, Me] = Mo({
    controlled: F,
    default: !1,
    name: "Tooltip",
    state: "open"
  });
  let O = no;
  const xe = xo(I), G = x.useRef(void 0), ne = _e(() => {
    G.current !== void 0 && (document.body.style.WebkitUserSelect = G.current, G.current = void 0), Oe.clear();
  });
  x.useEffect(() => ne, [ne]);
  const He = (d) => {
    Ee.clear(), se = !0, Me(!0), c && !O && c(d);
  }, re = _e((d) => {
    Ee.start(800 + A, () => {
      se = !1;
    }), Me(!1), W && O && W(d), ze.start(150, () => {
      oe.current = !1;
    });
  }), ae = (d) => {
    oe.current && d.type !== "touchstart" || (J && J.removeAttribute("title"), be.clear(), te.clear(), S || se && f ? be.start(se ? f : S, () => {
      He(d);
    }) : He(d));
  }, ve = (d) => {
    be.clear(), te.start(A, () => {
      re(d);
    });
  }, {
    isFocusVisibleRef: Ae,
    onBlur: ro,
    onFocus: ao,
    ref: io
  } = Po(), [, We] = x.useState(!1), je = (d) => {
    ro(d), Ae.current === !1 && (We(!1), ve(d));
  }, De = (d) => {
    J || Ie(d.currentTarget), ao(d), Ae.current === !0 && (We(!0), ae(d));
  }, $e = (d) => {
    oe.current = !0;
    const M = r.props;
    M.onTouchStart && M.onTouchStart(d);
  }, lo = (d) => {
    $e(d), te.clear(), ze.clear(), ne(), G.current = document.body.style.WebkitUserSelect, document.body.style.WebkitUserSelect = "none", Oe.start(h, () => {
      document.body.style.WebkitUserSelect = G.current, ae(d);
    });
  }, so = (d) => {
    r.props.onTouchEnd && r.props.onTouchEnd(d), ne(), te.start(N, () => {
      re(d);
    });
  };
  x.useEffect(() => {
    if (!O)
      return;
    function d(M) {
      (M.key === "Escape" || M.key === "Esc") && re(M);
    }
    return document.addEventListener("keydown", d), () => {
      document.removeEventListener("keydown", d);
    };
  }, [re, O]);
  const co = ke(Ie, i), po = ke(io, co), mo = ke(Fo(r), po);
  typeof z != "number" && !z && (O = !1);
  const Ce = x.useRef(null), uo = (d) => {
    const M = r.props;
    M.onMouseMove && M.onMouseMove(d), X = {
      x: d.clientX,
      y: d.clientY
    }, Ce.current && Ce.current.update();
  }, q = {}, Te = typeof z == "string";
  v ? (q.title = !O && Te && !g ? z : null, q["aria-describedby"] = O ? xe : null) : (q["aria-label"] = Te ? z : null, q["aria-labelledby"] = O && !Te ? xe : null);
  const P = T({}, q, Fe, {
    component: p
  }, r.props, {
    className: Ue(y, r.props.className),
    onTouchStart: $e,
    ref: mo
  }, w ? {
    onMouseMove: uo
  } : {}), Y = {};
  b || (P.onTouchStart = lo, P.onTouchEnd = so), g || (P.onMouseOver = Le(ae, P.onMouseOver), P.onMouseLeave = Le(ve, P.onMouseLeave), ye || (Y.onMouseOver = ae, Y.onMouseLeave = ve)), k || (P.onFocus = Ve(De, P.onFocus), P.onBlur = Ve(je, P.onBlur), ye || (Y.onFocus = De, Y.onBlur = je));
  const Se = T({}, m, {
    arrow: s,
    disableInteractive: ye,
    placement: L,
    touch: oe.current,
    color: V,
    variant: U,
    size: Ze
  }), Be = tt(Se), Ne = T({}, Fe, {
    component: p,
    slots: eo,
    slotProps: oo
  }), fo = x.useMemo(() => [{
    name: "arrow",
    enabled: !!he,
    options: {
      element: he,
      // https://popper.js.org/docs/v2/modifiers/arrow/#padding
      // make the arrow looks nice with the Tooltip's border radius
      padding: 6
    }
  }, {
    name: "offset",
    options: {
      offset: [0, 10]
    }
  }, ...ee || []], [he, ee]), [go, ho] = $("root", {
    additionalProps: T({
      id: xe,
      popperRef: Ce,
      placement: L,
      anchorEl: w ? {
        getBoundingClientRect: () => ({
          top: X.y,
          left: X.x,
          right: X.x,
          bottom: X.y,
          width: 0,
          height: 0
        })
      } : J,
      open: J ? O : !1,
      disablePortal: _,
      keepMounted: ge,
      direction: E,
      modifiers: fo
    }, Y),
    ref: null,
    className: Be.root,
    elementType: nt,
    externalForwardedProps: Ne,
    ownerState: Se
  }), [yo, bo] = $("arrow", {
    ref: to,
    className: Be.arrow,
    elementType: rt,
    externalForwardedProps: Ne,
    ownerState: Se
  });
  return /* @__PURE__ */ u(x.Fragment, {
    children: [/* @__PURE__ */ x.isValidElement(r) && /* @__PURE__ */ x.cloneElement(r, P), /* @__PURE__ */ u(go, T({}, ho, !((a = m.slots) != null && a.root) && {
      as: Ho,
      slots: {
        root: p || "div"
      }
    }, {
      children: [z, s ? /* @__PURE__ */ n(yo, T({}, bo)) : null]
    }))]
  });
});
process.env.NODE_ENV !== "production" && (ce.propTypes = {
  // ┌────────────────────────────── Warning ──────────────────────────────┐
  // │ These PropTypes are generated from the TypeScript type definitions. │
  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
  // └─────────────────────────────────────────────────────────────────────┘
  /**
   * If `true`, adds an arrow to the tooltip.
   * @default false
   */
  arrow: o.bool,
  /**
   * Tooltip reference element.
   */
  children: o.element.isRequired,
  /**
   * @ignore
   */
  className: o.string,
  /**
   * The color of the component. It supports those theme colors that make sense for this component.
   * @default 'neutral'
   */
  color: o.oneOf(["danger", "neutral", "primary", "success", "warning"]),
  /**
   * The component used for the root node.
   * Either a string to use a HTML element or a component.
   */
  component: o.elementType,
  /**
   * Set to `true` if the `title` acts as an accessible description.
   * By default the `title` acts as an accessible label for the child.
   * @default false
   */
  describeChild: o.bool,
  /**
   * Direction of the text.
   * @default 'ltr'
   */
  direction: o.oneOf(["ltr", "rtl"]),
  /**
   * Do not respond to focus-visible events.
   * @default false
   */
  disableFocusListener: o.bool,
  /**
   * Do not respond to hover events.
   * @default false
   */
  disableHoverListener: o.bool,
  /**
   * Makes a tooltip not interactive, i.e. it will close when the user
   * hovers over the tooltip before the `leaveDelay` is expired.
   * @default false
   */
  disableInteractive: o.bool,
  /**
   * The `children` will be under the DOM hierarchy of the parent component.
   * @default false
   */
  disablePortal: o.bool,
  /**
   * Do not respond to long press touch events.
   * @default false
   */
  disableTouchListener: o.bool,
  /**
   * The number of milliseconds to wait before showing the tooltip.
   * This prop won't impact the enter touch delay (`enterTouchDelay`).
   * @default 100
   */
  enterDelay: o.number,
  /**
   * The number of milliseconds to wait before showing the tooltip when one was already recently opened.
   * @default 0
   */
  enterNextDelay: o.number,
  /**
   * The number of milliseconds a user must touch the element before showing the tooltip.
   * @default 700
   */
  enterTouchDelay: o.number,
  /**
   * If `true`, the tooltip follow the cursor over the wrapped element.
   * @default false
   */
  followCursor: o.bool,
  /**
   * This prop is used to help implement the accessibility logic.
   * If you don't provide this prop. It falls back to a randomly generated id.
   */
  id: o.string,
  /**
   * Always keep the children in the DOM.
   * This prop can be useful in SEO situation or
   * when you want to maximize the responsiveness of the Popper.
   * @default false
   */
  keepMounted: o.bool,
  /**
   * The number of milliseconds to wait before hiding the tooltip.
   * This prop won't impact the leave touch delay (`leaveTouchDelay`).
   * @default 0
   */
  leaveDelay: o.number,
  /**
   * The number of milliseconds after the user stops touching an element before hiding the tooltip.
   * @default 1500
   */
  leaveTouchDelay: o.number,
  /**
   * 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: o.arrayOf(o.shape({
    data: o.object,
    effect: o.func,
    enabled: o.bool,
    fn: o.func,
    name: o.any,
    options: o.object,
    phase: o.oneOf(["afterMain", "afterRead", "afterWrite", "beforeMain", "beforeRead", "beforeWrite", "main", "read", "write"]),
    requires: o.arrayOf(o.string),
    requiresIfExists: o.arrayOf(o.string)
  })),
  /**
   * Callback fired when the component requests to be closed.
   *
   * @param {React.SyntheticEvent} event The event source of the callback.
   */
  onClose: o.func,
  /**
   * Callback fired when the component requests to be open.
   *
   * @param {React.SyntheticEvent} event The event source of the callback.
   */
  onOpen: o.func,
  /**
   * If `true`, the component is shown.
   */
  open: o.bool,
  /**
   * Tooltip placement.
   * @default 'bottom'
   */
  placement: o.oneOf(["bottom-end", "bottom-start", "bottom", "left-end", "left-start", "left", "right-end", "right-start", "right", "top-end", "top-start", "top"]),
  /**
   * The size of the component.
   * @default 'md'
   */
  size: o.oneOf(["sm", "md", "lg"]),
  /**
   * The props used for each slot inside.
   * @default {}
   */
  slotProps: o.shape({
    arrow: o.oneOfType([o.func, o.object]),
    root: o.oneOfType([o.func, o.object])
  }),
  /**
   * The components used for each slot inside.
   * @default {}
   */
  slots: o.shape({
    arrow: o.elementType,
    root: o.elementType
  }),
  /**
   * The system prop that allows defining system overrides as well as additional CSS styles.
   */
  sx: o.oneOfType([o.arrayOf(o.oneOfType([o.func, o.object, o.bool])), o.func, o.object]),
  /**
   * Tooltip title. Zero-length titles string, undefined, null and false are never displayed.
   */
  title: o.node,
  /**
   * The [global variant](https://mui.com/joy-ui/main-features/global-variants/) to use.
   * @default 'solid'
   */
  variant: o.oneOf(["outlined", "plain", "soft", "solid"])
});
const Re = vo(/* @__PURE__ */ n("path", {
  d: "M11 7h2v2h-2zm0 4h2v6h-2zm1-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"
}), "InfoOutlined"), Q = ({
  rules: e,
  rulesDisplay: t,
  isOverlayVariant: i = !1
}) => {
  const { t: a } = Co(), { shadowRootElement: m } = To(So), r = D(), y = Je(), p = Z(), s = me(), v = Ge(), [k, g] = wo(!1);
  if (!e)
    return null;
  if (t != null && t.component)
    return t.component;
  if (((t == null ? void 0 : t.type) || "modal") === "link" && (t != null && t.url)) {
    const b = t.target || "_blank", S = {
      backgroundColor: "transparent",
      color: i ? r.palette.neutral.plainColor : r.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__ */ n(
      ce,
      {
        title: a("common.rules.info"),
        placement: "right",
        variant: "soft",
        disablePortal: !0,
        children: /* @__PURE__ */ n(
          le,
          {
            component: "a",
            href: t.url,
            target: b,
            rel: "noopener noreferrer",
            sx: S,
            "aria-label": a("common.rules.info"),
            children: /* @__PURE__ */ n(Re, {})
          }
        )
      }
    ) : /* @__PURE__ */ n(
      ce,
      {
        title: a("common.rules.info"),
        placement: "right",
        variant: "soft",
        disablePortal: !0,
        children: /* @__PURE__ */ n(
          le,
          {
            onClick: (f) => {
              f.stopPropagation(), window.open(t.url, b, "noopener,noreferrer");
            },
            sx: S,
            "aria-label": a("common.rules.info"),
            children: /* @__PURE__ */ n(Re, {})
          }
        )
      }
    );
  }
  return /* @__PURE__ */ u(we, { children: [
    /* @__PURE__ */ n(
      ce,
      {
        title: a("common.rules.info"),
        placement: "right",
        variant: "soft",
        disablePortal: !0,
        children: /* @__PURE__ */ n(
          le,
          {
            onClick: (b) => {
              b.stopPropagation(), g(!0);
            },
            sx: {
              backgroundColor: "transparent",
              color: r.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: r.palette.neutral[500],
                transform: "scale(1.05)"
              },
              "&:focus-visible": {
                outline: "none"
              },
              "& svg": {
                fontSize: "1.25em"
              }
            },
            "aria-label": a("common.rules.info"),
            children: /* @__PURE__ */ n(Re, {})
          }
        )
      }
    ),
    /* @__PURE__ */ n(
      jo,
      {
        open: k,
        onClose: () => g(!1),
        container: m,
        sx: { zIndex: 1300 },
        children: /* @__PURE__ */ u(
          Do,
          {
            sx: {
              width: "100%",
              maxWidth: v ? "90vw" : "600px",
              maxHeight: v ? "90vh" : "80vh",
              p: v ? 2 : 3,
              borderRadius: y.md,
              backgroundColor: r.surface
            },
            children: [
              /* @__PURE__ */ n(
                le,
                {
                  onClick: (b) => {
                    b.stopPropagation(), g(!1);
                  },
                  sx: {
                    position: "absolute",
                    top: s.sm,
                    right: s.sm,
                    backgroundColor: "transparent",
                    color: r.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: `${r.textSecondary}15`,
                      color: r.textPrimary,
                      transform: "scale(1.05)"
                    },
                    "&:focus-visible": {
                      outline: "none"
                    },
                    "& svg": {
                      fontSize: "1.25em"
                    }
                  },
                  children: /* @__PURE__ */ n(Oo, {})
                }
              ),
              /* @__PURE__ */ u(
                Qe,
                {
                  sx: {
                    display: "flex",
                    flexDirection: "column",
                    gap: s.md
                  },
                  children: [
                    /* @__PURE__ */ n(
                      C,
                      {
                        sx: {
                          fontFamily: p.primary,
                          fontWeight: 600,
                          fontSize: "1.25em",
                          lineHeight: 1.2,
                          color: r.textPrimary,
                          textAlign: "center",
                          marginBottom: s.sm
                        },
                        children: a("common.rules.title")
                      }
                    ),
                    /* @__PURE__ */ n(
                      l,
                      {
                        sx: {
                          fontFamily: p.secondary,
                          fontSize: "1em",
                          lineHeight: 1.5,
                          color: r.textSecondary,
                          overflow: "auto",
                          // Custom scrollbar styling for dark theme
                          "&::-webkit-scrollbar": {
                            width: "8px"
                          },
                          "&::-webkit-scrollbar-track": {
                            backgroundColor: "transparent"
                          },
                          "&::-webkit-scrollbar-thumb": {
                            backgroundColor: r.secondaryContainer,
                            borderRadius: "4px",
                            "&:hover": {
                              backgroundColor: r.textSecondary
                            }
                          },
                          // Firefox scrollbar styling
                          scrollbarWidth: "thin",
                          scrollbarColor: `${r.secondaryContainer} transparent`,
                          "& p": {
                            marginBottom: s.sm
                          },
                          "& ul, & ol": {
                            marginLeft: s.md,
                            marginBottom: s.sm
                          },
                          "& li": {
                            marginBottom: s.xs
                          },
                          "& h1, & h2, & h3, & h4, & h5, & h6": {
                            fontFamily: p.primary,
                            color: r.textPrimary,
                            marginTop: s.md,
                            marginBottom: s.sm
                          }
                        },
                        dangerouslySetInnerHTML: { __html: e }
                      }
                    ),
                    /* @__PURE__ */ n(
                      zo,
                      {
                        variant: "outlined",
                        onClick: (b) => {
                          b.stopPropagation(), g(!1);
                        },
                        sx: {
                          marginTop: s.md,
                          borderColor: r.textPrimary,
                          color: r.textPrimary,
                          fontFamily: p.secondary,
                          fontSize: "0.875em",
                          borderRadius: y.sm,
                          "&:hover": {
                            borderColor: r.textPrimary,
                            color: r.textPrimary,
                            backgroundColor: r.surfaceVariant
                          }
                        },
                        children: a("common.rules.close")
                      }
                    )
                  ]
                }
              )
            ]
          }
        )
      }
    )
  ] });
}, at = (e) => {
  var t, i, a;
  return {
    // Mobile headline with image background
    mobileHeadlineWithImage: {
      display: e.isMobile ? "flex" : "none",
      flexDirection: "column",
      justifyContent: "space-between",
      gap: "10px",
      backgroundImage: `url("${e.finalImage}")`,
      backgroundSize: "cover",
      backgroundPosition: "center",
      borderTopLeftRadius: "5px",
      borderTopRightRadius: "5px",
      position: "relative",
      minHeight: "210px",
      overflow: "hidden",
      height: "auto",
      "&::before": {
        content: '""',
        position: "absolute",
        width: "100%",
        height: "100%",
        background: e.imageBackgroundGradient,
        borderTopLeftRadius: "5px",
        borderTopRightRadius: "5px"
      }
    },
    // Mobile headline content
    mobileHeadlineContent: {
      zIndex: 1,
      height: "100%",
      p: e.spacingScale.xl,
      gap: e.spacingScale["2xl"],
      display: "flex",
      flexDirection: "column",
      justifyContent: "space-between"
    },
    // Mobile headline without image
    mobileHeadlineWithoutImage: {
      display: e.isMobile ? "flex" : "none",
      flexDirection: "column",
      justifyContent: "space-between",
      p: e.isMobile ? e.spacingScale.sm : e.spacingScale.md,
      gap: e.spacingScale["2xl"]
    },
    // Headline typography (mobile with image)
    headlineTypographyMobileImage: {
      fontWeight: 500,
      lineHeight: "166%",
      letterSpacing: "1px",
      fontSize: "0.75em",
      color: ((t = e.brandingColors) == null ? void 0 : t.secondaryColor) || e.darkTextColor,
      opacity: "70%",
      textTransform: "uppercase",
      fontFamily: e.fontFamilySecondary,
      textAlign: "center"
    },
    // Headline typography (mobile without image & desktop)
    headlineTypography: {
      fontWeight: 500,
      lineHeight: "166%",
      letterSpacing: "1px",
      textTransform: "uppercase",
      fontSize: "0.75em",
      color: e.secondaryColor,
      opacity: e.opacity,
      fontFamily: e.fontFamilySecondary,
      textAlign: e.isMobile ? "center" : "left"
    },
    // Headline typography (desktop centered)
    headlineTypographyDesktop: {
      fontWeight: 500,
      lineHeight: "166%",
      letterSpacing: "1px",
      textTransform: "uppercase",
      fontSize: "0.75em",
      color: e.secondaryColor,
      opacity: e.opacity,
      fontFamily: e.fontFamilySecondary
    },
    // Content container
    contentContainer: {
      display: "flex",
      flexDirection: "column",
      gap: e.spacingScale["3xs"]
    },
    // Title typography (mobile with image)
    titleTypographyMobileImage: {
      fontWeight: 700,
      lineHeight: "133%",
      fontSize: "1.5em",
      letterSpacing: "0.15px",
      color: ((i = e.brandingColors) == null ? void 0 : i.contentColor) || e.darkTextColor,
      fontFamily: e.fontFamilyPrimary,
      textAlign: "center"
    },
    // Title typography (mobile without image & desktop responsive)
    titleTypography: {
      fontWeight: 700,
      lineHeight: "133%",
      letterSpacing: "0px",
      fontSize: "1.5em",
      color: e.textColor,
      fontFamily: e.fontFamilyPrimary,
      textAlign: e.isMobile ? "center" : "left"
    },
    // Title typography (desktop centered)
    titleTypographyDesktop: {
      fontWeight: 700,
      lineHeight: "133%",
      letterSpacing: "0px",
      fontSize: "1.5em",
      color: e.textColor,
      fontFamily: e.fontFamilyPrimary
    },
    // Description typography (mobile with image)
    descriptionTypographyMobileImage: {
      fontWeight: 400,
      lineHeight: "140%",
      fontSize: "1.25em",
      letterSpacing: "0.15px",
      color: ((a = e.brandingColors) == null ? void 0 : a.secondaryColor) || e.darkTextColor,
      opacity: "70%",
      fontFamily: e.fontFamilyPrimary,
      textAlign: "center"
    },
    // Description typography (mobile without image & desktop responsive)
    descriptionTypography: {
      fontWeight: 400,
      lineHeight: "140%",
      letterSpacing: "0.15px",
      fontSize: "1.25em",
      color: e.secondaryColor,
      opacity: e.opacity,
      fontFamily: e.fontFamilyPrimary,
      textAlign: e.isMobile ? "center" : "left"
    },
    // Description typography (desktop centered)
    descriptionTypographyDesktop: {
      fontWeight: 400,
      lineHeight: "140%",
      letterSpacing: "0.15px",
      fontSize: "1.25em",
      color: e.secondaryColor,
      opacity: e.opacity,
      fontFamily: e.fontFamilyPrimary
    },
    // Image container (left position)
    imageContainerLeft: {
      display: e.isMobile ? "none" : "block",
      flex: "0.3",
      overflow: "hidden",
      height: "auto",
      position: "relative",
      minHeight: "auto",
      backgroundImage: `url("${e.finalImage}")`,
      backgroundSize: "cover",
      backgroundPosition: "center center",
      backgroundRepeat: "no-repeat",
      alignItems: "center",
      justifyContent: "center"
    },
    // Image container (right position)
    imageContainerRight: {
      display: e.isMobile ? "none" : "block",
      flex: "0.3",
      overflow: "hidden",
      height: "auto",
      position: "relative",
      minHeight: "auto",
      backgroundImage: `url("${e.finalImage}")`,
      backgroundSize: "cover",
      backgroundPosition: "center center",
      backgroundRepeat: "no-repeat",
      alignItems: "center",
      justifyContent: "center"
    },
    // Image safe area (placeholder for image space)
    imageSafeArea: {
      width: "100%",
      height: "100%"
    },
    // Main content area
    mainContentArea: {
      flex: e.isMobile ? "1" : e.finalImage ? "0.7" : "1",
      display: "flex",
      flexDirection: "column",
      px: e.isMobile ? e.spacingScale.sm : e.spacingScale.md,
      pt: e.spacingScale.lg,
      pb: e.isMobile ? e.spacingScale.sm : e.spacingScale.md,
      gap: e.spacingScale.md,
      bgcolor: e.bgcolor
    },
    // Desktop headline container
    desktopHeadlineContainer: {
      display: e.isMobile ? "none" : "flex",
      flexDirection: "column",
      justifyContent: "space-between",
      gap: e.spacingScale["2xl"],
      textAlign: "center"
    },
    // Aspect ratio container (for embed code)
    aspectRatioContainer: {
      borderRadius: e.borderRadius.md,
      overflow: "hidden"
    }
  };
}, yt = ({
  entity: e,
  headline: t,
  finalImage: i,
  imagePosition: a = "left",
  children: m,
  embedCodeContainerRef: r,
  hasEmbedCode: y = !1,
  filterScreenContent: p,
  rulesDisplay: s
}) => {
  var L, z;
  const v = Ge(), k = qe(), g = me(), R = Z().primary, b = Z().secondary, S = Je(), f = ((L = e.branding) == null ? void 0 : L.colors) || null, h = ((z = e.branding) == null ? void 0 : z.urls) || null, w = (f == null ? void 0 : f.contentColor) || D().textColor, I = (f == null ? void 0 : f.secondaryColor) || D().textColor, A = (f == null ? void 0 : f.backgroundColor) || D().surface, N = "60%", W = Ye(
    Xe.STANDARD
  ), c = at({
    finalImage: i,
    spacingScale: g,
    borderRadius: S,
    fontFamilyPrimary: R,
    fontFamilySecondary: b,
    textColor: w,
    secondaryColor: I,
    bgcolor: A,
    opacity: N,
    brandingColors: f,
    imagePosition: a,
    darkTextColor: k.colorSchemes.dark.textColor,
    imageBackgroundGradient: W,
    isMobile: v
  }), F = ko(
    h == null ? void 0 : h.primaryUrl,
    h == null ? void 0 : h.secondaryUrl,
    "image"
  ), _ = () => {
    F && window.open(F, "_blank", "noopener,noreferrer");
  }, E = (V, U) => F ? typeof window > "u" ? /* @__PURE__ */ n(
    l,
    {
      component: "a",
      href: F,
      target: "_blank",
      rel: "noopener noreferrer",
      sx: {
        ...U,
        cursor: "pointer",
        textDecoration: "none"
      },
      children: V
    }
  ) : /* @__PURE__ */ n(
    l,
    {
      sx: {
        ...U,
        cursor: "pointer"
      },
      onClick: _,
      children: V
    }
  ) : /* @__PURE__ */ n(l, { sx: U, children: V }), ge = () => y && r ? /* @__PURE__ */ u(l, { sx: c.mobileHeadlineWithoutImage, children: [
    /* @__PURE__ */ u(l, { children: [
      /* @__PURE__ */ u(
        l,
        {
          sx: {
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            gap: g["3xs"]
          },
          children: [
            /* @__PURE__ */ n(C, { level: "body-sm", sx: c.headlineTypography, children: t }),
            /* @__PURE__ */ n(
              Q,
              {
                rules: e.rules || "",
                rulesDisplay: s,
                isOverlayVariant: !1
              }
            )
          ]
        }
      ),
      /* @__PURE__ */ u(l, { sx: c.contentContainer, children: [
        /* @__PURE__ */ n(C, { level: "h4", sx: c.titleTypography, children: e.title }),
        /* @__PURE__ */ n(C, { sx: c.descriptionTypography, children: K(e.description) })
      ] })
    ] }),
    /* @__PURE__ */ n(Pe, { ratio: "16/9", sx: c.aspectRatioContainer, children: /* @__PURE__ */ n(l, { ref: r }) })
  ] }) : i ? E(
    /* @__PURE__ */ u(l, { sx: c.mobileHeadlineContent, children: [
      /* @__PURE__ */ u(l, { children: [
        /* @__PURE__ */ u(
          l,
          {
            sx: {
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
              gap: g["3xs"]
            },
            children: [
              /* @__PURE__ */ n(
                C,
                {
                  level: "body-sm",
                  sx: c.headlineTypographyMobileImage,
                  children: t
                }
              ),
              /* @__PURE__ */ n(
                Q,
                {
                  rules: e.rules || "",
                  rulesDisplay: s,
                  isOverlayVariant: !1
                }
              )
            ]
          }
        ),
        /* @__PURE__ */ u(l, { sx: c.contentContainer, children: [
          /* @__PURE__ */ n(C, { sx: c.titleTypographyMobileImage, children: e.title }),
          /* @__PURE__ */ n(C, { sx: c.descriptionTypographyMobileImage, children: K(e.description) })
        ] })
      ] }),
      p && /* @__PURE__ */ n(l, { children: p })
    ] }),
    c.mobileHeadlineWithImage
  ) : /* @__PURE__ */ u(l, { sx: c.mobileHeadlineWithoutImage, children: [
    /* @__PURE__ */ u(l, { children: [
      /* @__PURE__ */ u(
        l,
        {
          sx: {
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            gap: g["3xs"]
          },
          children: [
            /* @__PURE__ */ n(C, { level: "body-sm", sx: c.headlineTypography, children: t }),
            /* @__PURE__ */ n(
              Q,
              {
                rules: e.rules || "",
                rulesDisplay: s,
                isOverlayVariant: !1
              }
            )
          ]
        }
      ),
      /* @__PURE__ */ u(l, { sx: c.contentContainer, children: [
        /* @__PURE__ */ n(C, { level: "h4", sx: c.titleTypography, children: e.title }),
        /* @__PURE__ */ n(C, { sx: c.descriptionTypography, children: K(e.description) })
      ] })
    ] }),
    p && /* @__PURE__ */ n(l, { children: p })
  ] }), ee = !(v && p);
  return /* @__PURE__ */ u(we, { children: [
    v && ge(),
    a === "left" && i ? E(
      /* @__PURE__ */ n(l, { sx: c.imageSafeArea }),
      c.imageContainerLeft
    ) : null,
    ee && /* @__PURE__ */ u(l, { sx: c.mainContentArea, children: [
      !v && /* @__PURE__ */ n(l, { children: /* @__PURE__ */ u(l, { sx: c.desktopHeadlineContainer, children: [
        /* @__PURE__ */ u(
          l,
          {
            sx: {
              display: "flex",
              flexDirection: "column",
              alignItems: "center"
            },
            children: [
              /* @__PURE__ */ u(
                l,
                {
                  sx: {
                    display: "flex",
                    alignItems: "center",
                    justifyContent: "center",
                    gap: g["3xs"]
                  },
                  children: [
                    /* @__PURE__ */ n(
                      C,
                      {
                        level: "body-sm",
                        sx: c.headlineTypographyDesktop,
                        children: t
                      }
                    ),
                    /* @__PURE__ */ n(
                      Q,
                      {
                        rules: e.rules || "",
                        rulesDisplay: s,
                        isOverlayVariant: !1
                      }
                    )
                  ]
                }
              ),
              /* @__PURE__ */ u(l, { sx: c.contentContainer, children: [
                /* @__PURE__ */ n(C, { level: "h4", sx: c.titleTypographyDesktop, children: e.title }),
                /* @__PURE__ */ n(C, { sx: c.descriptionTypographyDesktop, children: K(e.description) })
              ] })
            ]
          }
        ),
        y && r ? /* @__PURE__ */ n(l, { sx: { px: g.md }, children: /* @__PURE__ */ n(Pe, { ratio: "16/9", sx: c.aspectRatioContainer, children: /* @__PURE__ */ n(l, { ref: r }) }) }) : p ? /* @__PURE__ */ n(l, { children: p }) : /* @__PURE__ */ n(we, {})
      ] }) }),
      m
    ] }),
    a === "right" && i ? E(
      /* @__PURE__ */ n(l, { sx: c.imageSafeArea }),
      c.imageContainerRight
    ) : null
  ] });
}, it = (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,
      backgroundPosition: "center",
      backgroundSize: "cover",
      position: "relative",
      borderRadius: e.mdBorderRadius,
      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: "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: "left",
      fontSize: "1.5em",
      color: e.darkTextColor,
      fontFamily: e.fontFamilyPrimary
    },
    // Description typography
    descriptionText: {
      fontWeight: 400,
      lineHeight: "140%",
      letterSpacing: "0.15px",
      fontSize: "1.25em",
      textAlign: "left",
      color: e.secondaryColor,
      opacity: "70%",
      fontFamily: e.fontFamilyPrimary
    },
    // Main content section
    mainContentSection: {
      display: "flex",
      flexDirection: "column",
      gap: "24px"
    }
  };
}, bt = ({
  entity: e,
  headline: t,
  finalImage: i,
  children: a,
  rulesDisplay: m
}) => {
  var w, I;
  const r = qe(), y = me(), p = Ye(
    Xe.OVERLAY
  ), s = ((w = e.branding) == null ? void 0 : w.colors) || null, v = (s == null ? void 0 : s.contentColor) || r.colorSchemes.dark.textColor, k = r.customFontFamily.dark.primary, g = r.customFontFamily.dark.secondary, R = r.customRadius.dark.md, b = (I = r.border) == null ? void 0 : I.dark.size, S = r.colorSchemes.dark.textColor, f = Ro(i), h = it({
    spacingScale: y,
    brandingColors: s,
    secondaryColor: v,
    fontFamilyPrimary: k,
    fontFamilySecondary: g,
    mdBorderRadius: R,
    borderSize: b,
    backgroundImage: f,
    darkTextColor: S,
    imageBackgroundGradient: p
  });
  return /* @__PURE__ */ u(l, { sx: h.mainContainer, children: [
    /* @__PURE__ */ n(l, { children: /* @__PURE__ */ n(l, { sx: h.headlineSection, children: /* @__PURE__ */ n(l, { sx: h.headlineContent, children: /* @__PURE__ */ u(l, { sx: h.headlineContentInner, children: [
      /* @__PURE__ */ u(
        l,
        {
          sx: {
            display: "flex",
            alignItems: "center",
            gap: y["3xs"]
          },
          children: [
            /* @__PURE__ */ n(C, { level: "body-sm", sx: h.headlineText, children: t }),
            /* @__PURE__ */ n(
              Q,
              {
                rulesDisplay: m,
                isOverlayVariant: !0,
                rules: e.rules || ""
              }
            )
          ]
        }
      ),
      /* @__PURE__ */ u(l, { sx: h.contentContainer, children: [
        /* @__PURE__ */ n(C, { level: "h4", sx: h.titleText, children: e.title }),
        e.description && /* @__PURE__ */ n(C, { level: "body-lg", sx: h.descriptionText, children: K(e.description) })
      ] })
    ] }) }) }) }),
    /* @__PURE__ */ n(l, { sx: h.mainContentSection, children: a })
  ] });
}, xt = ({
  notFoundTitle: e,
  notFoundMessage: t
}) => {
  var p, s;
  const i = (s = (p = D().palette) == null ? void 0 : p.danger) == null ? void 0 : s.plainColor, a = D().textSecondary, m = me(), r = Z().primary, y = Z().secondary;
  return /* @__PURE__ */ u(
    l,
    {
      sx: {
        display: "flex",
        flexDirection: "column",
        justifyContent: "center",
        alignItems: "center",
        width: "100%",
        minHeight: "300px",
        // padding: "32px 24px",
        textAlign: "center"
      },
      children: [
        /* @__PURE__ */ n(
          l,
          {
            sx: {
              width: "80px",
              height: "80px",
              borderRadius: "50%",
              backgroundColor: `${i}15`,
              // 15% opacity
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
              marginBottom: "24px"
            },
            children: /* @__PURE__ */ n(
              l,
              {
                sx: {
                  fontSize: "32px",
                  color: i,
                  fontWeight: "bold",
                  fontFamily: r
                },
                children: "?"
              }
            )
          }
        ),
        /* @__PURE__ */ n(
          C,
          {
            level: "h4",
            sx: {
              color: i,
              marginBottom: m.xs,
              fontWeight: "600",
              fontFamily: r
            },
            children: e
          }
        ),
        /* @__PURE__ */ n(
          C,
          {
            level: "body-md",
            sx: {
              color: a,
              lineHeight: 1.5,
              fontFamily: y
            },
            children: t
          }
        )
      ]
    }
  );
};
export {
  Pe as A,
  Qe as D,
  xt as N,
  bt as O,
  Q as R,
  yt as S,
  ce as T,
  Lo as a
};
