fansunited-frontend-components 0.0.39 → 0.0.40

package/chunks/StandardLeadAfterCollection-L1cOGfS6.js

@@ -0,0 +1,432 @@
+import { jsxs as a, Fragment as X, jsx as i } from "react/jsx-runtime";
+import { e as q, u as Y, f as E, h as $, j as J, k as S, g as Z, W as K, B as t, T as g } from "./PrizeCard-gMp7I66d.js";
+import { h as O, g as ee, s as P, u as ie } from "./useImageVariant-pnFelF9A.js";
+import { R as w, S as ne } from "./NotFoundSkeleton-B3RNa8KJ.js";
+import "react";
+import "react-dom";
+const te = (e) => {
+  var d, r, o;
+  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"
+      }
+    },
+    // Content inside mobile headline with image
+    mobileHeadlineContent: {
+      zIndex: 1,
+      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",
+      flex: "0.5",
+      flexDirection: "column",
+      justifyContent: "space-between",
+      p: e.spacingScale.lg,
+      gap: e.spacingScale["2xl"]
+    },
+    // Headline typography (mobile with image)
+    headlineTypographyMobileImage: {
+      fontWeight: 500,
+      lineHeight: "166%",
+      letterSpacing: "1px",
+      fontSize: "0.75em",
+      color: ((d = e.brandingColors) == null ? void 0 : d.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: "center"
+    },
+    // Title typography (mobile with image)
+    titleTypographyMobileImage: {
+      fontWeight: 700,
+      lineHeight: "133%",
+      fontSize: "1.5em",
+      letterSpacing: "0.15px",
+      color: ((r = e.brandingColors) == null ? void 0 : r.contentColor) || e.darkTextColor,
+      fontFamily: e.fontFamilyPrimary,
+      textAlign: "center"
+    },
+    // Title typography (mobile without image)
+    titleTypography: {
+      fontWeight: 700,
+      lineHeight: "133%",
+      letterSpacing: "0px",
+      fontSize: "1.5em",
+      color: e.textColor,
+      fontFamily: e.fontFamilyPrimary,
+      textAlign: e.isMobile ? "center" : "left"
+    },
+    // Description typography (mobile with image)
+    descriptionTypographyMobileImage: {
+      fontWeight: 400,
+      lineHeight: "140%",
+      fontSize: "1.25em",
+      letterSpacing: "0.15px",
+      color: ((o = e.brandingColors) == null ? void 0 : o.secondaryColor) || e.darkTextColor,
+      opacity: "70%",
+      fontFamily: e.fontFamilyPrimary,
+      textAlign: "center"
+    },
+    // Description typography (mobile without image)
+    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"
+    },
+    // Desktop title typography
+    titleTypographyDesktop: {
+      fontWeight: 700,
+      lineHeight: "133%",
+      letterSpacing: "0px",
+      fontSize: "1.5em",
+      color: e.textColor,
+      fontFamily: e.fontFamilyPrimary
+    },
+    // Desktop description typography
+    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",
+      borderTopLeftRadius: e.borderRadius.md,
+      borderBottomLeftRadius: e.borderRadius.md,
+      overflow: "hidden",
+      height: "auto",
+      position: "relative"
+    },
+    // Image container (right position)
+    imageContainerRight: {
+      display: e.isMobile ? "none" : "block",
+      flex: "0.3",
+      borderTopRightRadius: "5px",
+      borderBottomRightRadius: "5px",
+      overflow: "hidden",
+      height: "auto",
+      position: "relative"
+    },
+    // Main content area
+    mainContentArea: {
+      flex: e.isMobile ? "1" : e.finalImage ? "0.7" : "1",
+      display: e.isMobile ? "none" : "flex",
+      flexDirection: "column",
+      p: e.spacingScale.md,
+      gap: e.spacingScale["2xl"]
+    },
+    // Desktop headline container
+    desktopHeadlineContainer: {
+      display: e.isMobile ? "none" : "flex",
+      flexDirection: "column",
+      gap: e.spacingScale.xl,
+      textAlign: "center"
+    },
+    // Content container
+    contentContainer: {
+      display: "flex",
+      flexDirection: "column",
+      gap: e.spacingScale["3xs"]
+    },
+    // Sign in button container
+    signInButtonContainer: {
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "space-between",
+      alignItems: "center",
+      gap: e.spacingScale["2xl"]
+    },
+    // Branding container
+    brandingContainer: {
+      px: e.spacingScale.md
+    },
+    image: {
+      width: "100%",
+      height: "100%",
+      objectFit: "cover"
+    }
+  };
+}, se = ({
+  entity: e,
+  headline: d,
+  finalImage: r,
+  imagePosition: o = "left",
+  signInContent: u,
+  brandingContent: b,
+  rulesDisplay: m
+}) => {
+  var C, p;
+  const H = q(), T = Y(), x = E(), v = $().primary, f = $().secondary, A = J(), c = ((C = e.branding) == null ? void 0 : C.colors) || null, s = ((p = e.branding) == null ? void 0 : p.urls) || null, k = (c == null ? void 0 : c.contentColor) || S().textColor, I = (c == null ? void 0 : c.secondaryColor) || S().textColor, R = (c == null ? void 0 : c.backgroundColor) || S().surfaceVariant, D = "60%", F = Z(
+    K.STANDARD
+  ), n = te({
+    finalImage: r,
+    spacingScale: x,
+    borderRadius: A,
+    fontFamilyPrimary: v,
+    fontFamilySecondary: f,
+    textColor: k,
+    secondaryColor: I,
+    bgcolor: O(R || ""),
+    opacity: D,
+    brandingColors: c,
+    imagePosition: o,
+    darkTextColor: T.colorSchemes.dark.textColor,
+    imageBackgroundGradient: F,
+    isMobile: H
+  }), l = ee(
+    s == null ? void 0 : s.primaryUrl,
+    s == null ? void 0 : s.secondaryUrl,
+    "image"
+  ), M = (y, h) => typeof window > "u" ? l ? /* @__PURE__ */ i(
+    t,
+    {
+      component: "a",
+      href: l,
+      target: "_blank",
+      sx: h,
+      children: y
+    }
+  ) : /* @__PURE__ */ i(t, { sx: h, children: y }) : l ? /* @__PURE__ */ i(
+    t,
+    {
+      sx: { ...h, cursor: "pointer" },
+      onClick: () => window.open(l, "_blank"),
+      children: y
+    }
+  ) : /* @__PURE__ */ i(t, { sx: h, children: y });
+  return /* @__PURE__ */ a(X, { children: [
+    r ? M(
+      /* @__PURE__ */ a(t, { sx: n.mobileHeadlineContent, children: [
+        /* @__PURE__ */ a(t, { children: [
+          /* @__PURE__ */ a(t, { sx: { display: "flex", alignItems: "center", gap: x["3xs"] }, children: [
+            /* @__PURE__ */ i(
+              g,
+              {
+                level: "body-sm",
+                sx: n.headlineTypographyMobileImage,
+                children: d
+              }
+            ),
+            /* @__PURE__ */ i(
+              w,
+              {
+                rulesDisplay: m,
+                rules: e.rules || ""
+              }
+            )
+          ] }),
+          /* @__PURE__ */ a(t, { sx: n.contentContainer, children: [
+            /* @__PURE__ */ i(
+              g,
+              {
+                level: "body-lg",
+                sx: n.titleTypographyMobileImage,
+                children: e.title
+              }
+            ),
+            /* @__PURE__ */ i(
+              g,
+              {
+                level: "body-md",
+                sx: n.descriptionTypographyMobileImage,
+                children: P(e.description)
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ a(t, { sx: n.signInButtonContainer, children: [
+          u,
+          b
+        ] })
+      ] }),
+      n.mobileHeadlineWithImage
+    ) : /* @__PURE__ */ a(t, { sx: n.mobileHeadlineWithoutImage, children: [
+      /* @__PURE__ */ a(t, { children: [
+        /* @__PURE__ */ a(t, { sx: { display: "flex", alignItems: "center", gap: x["3xs"] }, children: [
+          /* @__PURE__ */ i(g, { level: "body-sm", sx: n.headlineTypography, children: d }),
+          /* @__PURE__ */ i(
+            w,
+            {
+              rulesDisplay: m,
+              rules: e.rules || ""
+            }
+          )
+        ] }),
+        /* @__PURE__ */ a(t, { sx: n.contentContainer, children: [
+          /* @__PURE__ */ i(g, { level: "h4", sx: n.titleTypography, children: e.title }),
+          /* @__PURE__ */ i(g, { level: "body-md", sx: n.descriptionTypography, children: P(e.description) })
+        ] })
+      ] }),
+      /* @__PURE__ */ a(t, { sx: n.signInButtonContainer, children: [
+        u,
+        b
+      ] })
+    ] }),
+    r && o === "left" && /* @__PURE__ */ i(t, { sx: n.imageContainerLeft, children: /* @__PURE__ */ i("img", { src: r, alt: "Illustration", style: n.image }) }),
+    /* @__PURE__ */ i(t, { sx: n.mainContentArea, children: /* @__PURE__ */ a(t, { sx: n.desktopHeadlineContainer, children: [
+      /* @__PURE__ */ a(t, { sx: { display: "flex", flexDirection: "column", alignItems: "center", gap: x["3xs"] }, children: [
+        /* @__PURE__ */ a(t, { sx: { display: "flex", alignItems: "center", gap: x["3xs"] }, children: [
+          /* @__PURE__ */ i(g, { level: "body-sm", sx: n.headlineTypography, children: d }),
+          /* @__PURE__ */ i(
+            w,
+            {
+              rulesDisplay: m,
+              rules: e.rules || ""
+            }
+          )
+        ] }),
+        /* @__PURE__ */ a(t, { sx: n.contentContainer, children: [
+          /* @__PURE__ */ i(g, { level: "h4", sx: n.titleTypographyDesktop, children: e.title }),
+          /* @__PURE__ */ i(
+            g,
+            {
+              level: "body-md",
+              sx: n.descriptionTypographyDesktop,
+              children: P(e.description)
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ i(t, { sx: n.signInButtonContainer, children: u }),
+      b
+    ] }) }),
+    r && o === "right" && /* @__PURE__ */ i(t, { sx: n.imageContainerRight, children: /* @__PURE__ */ i("img", { src: r, alt: "Illustration", style: n.image }) })
+  ] });
+}, ge = (e) => {
+  var c, s, k, I, R, D, F;
+  const d = ie(
+    {
+      images: e.entity.images || null,
+      imagePlaceholder: e.defaultImagePlaceholderUrl ? e.defaultImagePlaceholderUrl : ""
+    },
+    K.STANDARD
+  ), r = q(), o = E(), u = J(), b = `rgba(${O(S().surfaceVariant || "")}, 0.5)`, m = ((c = e.entity.branding) == null ? void 0 : c.colors) || null, H = (m == null ? void 0 : m.borderColor) || null, T = r ? ((k = (s = e.entity.branding) == null ? void 0 : s.images) == null ? void 0 : k.mobileLogo) || ((R = (I = e.entity.branding) == null ? void 0 : I.images) == null ? void 0 : R.mainLogo) || "" : ((F = (D = e.entity.branding) == null ? void 0 : D.images) == null ? void 0 : F.mainLogo) || "", x = e.imagePosition || "left", v = S().textColor, f = {
+    mainContentArea: {
+      flex: r ? "1" : d ? "0.7" : "1",
+      display: "flex",
+      flexDirection: "column",
+      p: o.md,
+      gap: o.md
+    },
+    leadCollectionContainer: {
+      display: "flex",
+      flexDirection: "column"
+    },
+    leadQuestionContainer: {
+      display: "flex",
+      flexDirection: "column",
+      gap: r ? o.lg : o.md
+    },
+    leadContentContainer: {
+      borderRadius: u.md,
+      px: o.md,
+      pt: o.md,
+      pb: o.lg,
+      gap: o.md,
+      bgcolor: b,
+      display: "flex",
+      flexDirection: "column",
+      backdropFilter: "blur(4px)"
+    }
+  }, A = () => {
+    var M, W, C, p, y, h, B, L, z, j, U, N, G, V, Q, _;
+    const { CollectLeadWrapper: n, entity: l } = e;
+    return /* @__PURE__ */ a(t, { sx: f.mainContentArea, children: [
+      /* @__PURE__ */ i(t, { sx: f.leadCollectionContainer, children: /* @__PURE__ */ i(t, { sx: f.leadQuestionContainer, children: /* @__PURE__ */ i(t, { sx: f.leadContentContainer, children: /* @__PURE__ */ i(
+        n,
+        {
+          sdk: e.sdk,
+          contentId: l.id,
+          contentName: l.title,
+          brandingColors: (M = l.branding) == null ? void 0 : M.colors,
+          brandingUrls: (W = l.branding) == null ? void 0 : W.urls,
+          campaignId: (C = e.leads) == null ? void 0 : C.campaignId,
+          campaignName: (p = e.leads) == null ? void 0 : p.campaignName,
+          fields: (y = e.leads) == null ? void 0 : y.fields,
+          leadTitle: (h = l.labels) == null ? void 0 : h.leadTitle,
+          leadDescription: (B = l.labels) == null ? void 0 : B.leadDescription,
+          leadCta: (L = l.labels) == null ? void 0 : L.leadCta,
+          leadSuccessTitle: (z = l.labels) == null ? void 0 : z.leadSuccessTitle,
+          leadSuccessDescription: (j = l.labels) == null ? void 0 : j.leadSuccessDescription,
+          syncWithProfile: (U = e.leads) == null ? void 0 : U.syncWithProfile,
+          startGame: e.onLeadSubmitted,
+          isAfterPosition: !0,
+          isSubmittingParticipation: e.isSubmitting
+        }
+      ) }) }) }),
+      T && /* @__PURE__ */ i(
+        e.PresentedBy,
+        {
+          brandingLogo: T,
+          textColor: v,
+          label: ((N = l.labels) == null ? void 0 : N.sponsor) || null,
+          primaryUrl: (V = (G = l.branding) == null ? void 0 : G.urls) == null ? void 0 : V.primaryUrl,
+          secondaryUrl: (_ = (Q = l.branding) == null ? void 0 : Q.urls) == null ? void 0 : _.secondaryUrl
+        }
+      )
+    ] });
+  };
+  return /* @__PURE__ */ i(e.MainCard, { brandingBorderColor: H, children: /* @__PURE__ */ i(
+    ne,
+    {
+      entity: e.entity,
+      headline: e.headline,
+      finalImage: d,
+      imagePosition: x,
+      rulesDisplay: e.rulesDisplay,
+      children: A()
+    }
+  ) });
+};
+export {
+  se as S,
+  ge as a
+};

package/chunks/{Tabs-BGihvj9C.js → Tabs-D_n8rNw3.js}

@@ -1,6 +1,6 @@
-import { g as Z, _ as p, ad as G, j as H, af as Q, Z as ee, m as N, n as D, s as E, p as j, k as U, q as B, P as e, r as z, t as S, O as oe, ag as A } from "./ConstantsProvider-BPJJz9fq.js";
+import { G as X, _ as p, ad as A, I as H, an as Z, Q as ee, m as N, l as D, s as E, q as j, t as U, v as B, P as e, x as O, y as S, r as oe, n as G } from "./PrizeCard-gMp7I66d.js";
 import * as l from "react";
-import { a as q, b as w, d as K, l as te, L as ne, m as ae, e as se, f as ie, g as re, h as le, S as ce, R as de, i as ue, j as pe, s as be, k as fe } from "./CheckCircle-D-GH16Lb.js";
+import { a as q, b as w, d as K, l as te, L as ne, m as ae, e as se, f as ie, g as re, h as le, S as ce, R as de, i as ue, j as pe, s as be, k as fe } from "./CheckCircle-ClY-iOQ5.js";
 import { jsx as C } from "react/jsx-runtime";
 function ve(o) {
   const {
@@ -10,7 +10,7 @@ function ve(o) {
     orientation: s = "horizontal",
     direction: r = "ltr",
     selectionFollowsFocus: i = !1
-  } = o, [d, u] = Z({
+  } = o, [d, u] = X({
     controlled: t,
     default: a,
     name: "Tabs",
@@ -100,7 +100,7 @@ function Te(o) {
   const {
     value: r,
     getTabId: i
-  } = s, d = G(a), u = l.useRef(null), c = H(u, n), f = l.useMemo(() => ({
+  } = s, d = A(a), u = l.useRef(null), c = H(u, n), f = l.useMemo(() => ({
     id: d,
     ref: u
   }), [d]), {
@@ -118,11 +118,11 @@ function Te(o) {
     rootRef: c
   };
 }
-const X = {
+const Q = {
   valueChange: "valueChange"
 };
 function he(o, t) {
-  if (t.type === X.valueChange)
+  if (t.type === Q.valueChange)
     return p({}, o, {
       highlightedValue: t.value
     });
@@ -157,26 +157,26 @@ function ye(o) {
     subitems: c,
     contextValue: f
   } = q(), b = l.useCallback((P) => {
-    var O;
-    return (O = c.get(P)) == null ? void 0 : O.id;
+    var z;
+    return (z = c.get(P)) == null ? void 0 : z.id;
   }, [c]);
   d(b);
   const v = l.useMemo(() => Array.from(c.keys()), [c]), m = l.useCallback((P) => {
-    var O, _;
-    return P == null ? null : (O = (_ = c.get(P)) == null ? void 0 : _.ref.current) != null ? O : null;
+    var z, _;
+    return P == null ? null : (z = (_ = c.get(P)) == null ? void 0 : _.ref.current) != null ? z : null;
   }, [c]), h = n === "rtl";
   let T;
   r === "vertical" ? T = "vertical" : T = h ? "horizontal-rtl" : "horizontal-ltr";
-  const g = l.useCallback((P, O) => {
+  const g = l.useCallback((P, z) => {
     var _;
-    s(P, (_ = O[0]) != null ? _ : null);
+    s(P, (_ = z[0]) != null ? _ : null);
   }, [s]), y = l.useMemo(() => i === void 0 ? {} : i != null ? {
     selectedValues: [i]
   } : {
     selectedValues: []
   }, [i]), I = l.useCallback((P) => {
-    var O, _;
-    return (O = (_ = c.get(P)) == null ? void 0 : _.disabled) != null ? O : !1;
+    var z, _;
+    return (z = (_ = c.get(P)) == null ? void 0 : _.disabled) != null ? z : !1;
   }, [c]), {
     contextValue: R,
     dispatch: L,
@@ -204,7 +204,7 @@ function ye(o) {
   });
   l.useEffect(() => {
     i !== void 0 && i != null && L({
-      type: X.valueChange,
+      type: Q.valueChange,
       value: i
     });
   }, [L, i]);
@@ -259,7 +259,7 @@ function Ce(o) {
     rootRef: a,
     disabled: n = !1,
     id: s
-  } = o, r = l.useRef(null), i = G(s), {
+  } = o, r = l.useRef(null), i = A(s), {
     value: d,
     selectionFollowsFocus: u,
     getTabPanelId: c
@@ -283,7 +283,7 @@ function Ce(o) {
     active: R,
     focusVisible: L,
     setFocusVisible: k
-  } = Q({
+  } = Z({
     disabled: n,
     focusableWhenDisabled: !u,
     type: "button"
@@ -314,7 +314,7 @@ function Ce(o) {
 function Re(o) {
   return D("MuiTab", o);
 }
-const Le = N("MuiTab", ["root", "disabled", "focusVisible", "selected", "horizontal", "vertical", "colorPrimary", "colorNeutral", "colorDanger", "colorSuccess", "colorWarning", "colorContext", "variantPlain", "variantOutlined", "variantSoft", "variantSolid"]), Ie = ["action", "children", "value", "disabled", "onChange", "onClick", "onFocus", "component", "orientation", "variant", "color", "disableIndicator", "indicatorPlacement", "indicatorInset", "slots", "slotProps"], Oe = (o) => {
+const Le = N("MuiTab", ["root", "disabled", "focusVisible", "selected", "horizontal", "vertical", "colorPrimary", "colorNeutral", "colorDanger", "colorSuccess", "colorWarning", "colorContext", "variantPlain", "variantOutlined", "variantSoft", "variantSolid"]), Ie = ["action", "children", "value", "disabled", "onChange", "onClick", "onFocus", "component", "orientation", "variant", "color", "disableIndicator", "indicatorPlacement", "indicatorInset", "slots", "slotProps"], ze = (o) => {
   const {
     selected: t,
     disabled: a,
@@ -323,10 +323,10 @@ const Le = N("MuiTab", ["root", "disabled", "focusVisible", "selected", "horizon
     color: r,
     orientation: i
   } = o, d = {
-    root: ["root", i, a && "disabled", n && "focusVisible", t && "selected", s && `variant${z(s)}`, r && `color${z(r)}`]
+    root: ["root", i, a && "disabled", n && "focusVisible", t && "selected", s && `variant${O(s)}`, r && `color${O(r)}`]
   };
   return S(d, Re, {});
-}, ze = E(ce, {
+}, Oe = E(ce, {
   name: "JoyTab",
   slot: "Root",
   overridesResolver: (o, t) => t.root
@@ -441,13 +441,13 @@ const Le = N("MuiTab", ["root", "disabled", "focusVisible", "selected", "horizon
     selected: V,
     variant: f,
     color: b
-  }), M = Oe($), P = p({}, y, {
+  }), M = ze($), P = p({}, y, {
     component: u,
     slots: T,
     slotProps: g
-  }), [O, _] = B("root", {
+  }), [z, _] = B("root", {
     ref: a,
-    elementType: ze,
+    elementType: Oe,
     getSlotProps: F,
     externalForwardedProps: P,
     ownerState: $,
@@ -455,7 +455,7 @@ const Le = N("MuiTab", ["root", "disabled", "focusVisible", "selected", "horizon
   });
   return /* @__PURE__ */ C(ue.Provider, {
     value: c,
-    children: /* @__PURE__ */ C(O, p({}, _, {
+    children: /* @__PURE__ */ C(z, p({}, _, {
       children: i
     }))
   });
@@ -565,7 +565,7 @@ const _e = ["component", "children", "variant", "color", "size", "disableUnderli
     variant: n,
     color: s
   } = o, r = {
-    root: ["root", t, n && `variant${z(n)}`, s && `color${z(s)}`, a && `size${z(a)}`]
+    root: ["root", t, n && `variant${O(n)}`, s && `color${O(s)}`, a && `size${O(a)}`]
   };
   return S(r, Ve, {});
 }, Fe = E(pe, {
@@ -757,7 +757,7 @@ const De = ["children", "value", "component", "color", "variant", "size", "slots
     color: s,
     orientation: r
   } = o, i = {
-    root: ["root", t && "hidden", a && `size${z(a)}`, r, n && `variant${z(n)}`, s && `color${z(s)}`, a && `size${z(a)}`]
+    root: ["root", t && "hidden", a && `size${O(a)}`, r, n && `variant${O(n)}`, s && `color${O(s)}`, a && `size${O(a)}`]
   };
   return S(i, Ne, {});
 }, je = E("div", {
@@ -895,7 +895,7 @@ const Se = ["children", "value", "defaultValue", "orientation", "direction", "co
     color: n,
     size: s
   } = o, r = {
-    root: ["root", t, a && `variant${z(a)}`, n && `color${z(n)}`, s && `size${z(s)}`]
+    root: ["root", t, a && `variant${O(a)}`, n && `color${O(n)}`, s && `size${O(s)}`]
   };
   return S(r, Be, {});
 }, Je = E("div", {
@@ -916,7 +916,7 @@ const Se = ["children", "value", "defaultValue", "orientation", "direction", "co
   } = oe({
     theme: t,
     ownerState: o
-  }, ["bgcolor", "backgroundColor", "background", "p", "padding"]), f = A(t, `palette.${r}`) || r || A(t, `palette.${i}`) || i || d || (s == null ? void 0 : s.backgroundColor) || (s == null ? void 0 : s.background) || t.vars.palette.background.surface;
+  }, ["bgcolor", "backgroundColor", "background", "p", "padding"]), f = G(t, `palette.${r}`) || r || G(t, `palette.${i}`) || i || d || (s == null ? void 0 : s.backgroundColor) || (s == null ? void 0 : s.background) || t.vars.palette.background.surface;
   return p({}, o.size === "sm" && {
     "--Tabs-spacing": "0.75rem"
   }, o.size === "md" && {