@revenuecat/purchases-ui-js 4.7.4 → 4.7.6

package/dist/types/variables.d.ts

@@ -70,9 +70,22 @@ export type CustomVariables = {
     [key: CustomVariableName]: CustomVariableValue;
 };
 type CustomVariableName = string & {};
+/**
+ * Variables that carry values entered by the end user in input components on
+ * earlier funnel screens. The funnel runtime captures each input's value and
+ * injects it into the paywall's variables (via `globalVariables`) keyed by the
+ * input component's `field_id`. Reference them in paywall text as:
+ * ```
+ * Welcome back, {{ input.first_name }}!
+ * ```
+ * No prefix stripping is applied — the dictionary is keyed by the full
+ * `input.<field_id>` token, so substitution works the same as built-in
+ * variables.
+ */
+export type InputVariableName = `input.${string}`;
 export declare function mergeCustomVariables(customVariables: CustomVariables, uiConfig: UIConfig | undefined): VariableDictionary;
 type BuiltinVariableName = "product.price" | "product.price_per_period" | "product.price_per_period_abbreviated" | "product.price_per_day" | "product.price_per_week" | "product.price_per_month" | "product.price_per_year" | "product.period" | "product.period_abbreviated" | "product.periodly" | "product.period_in_days" | "product.period_in_weeks" | "product.period_in_months" | "product.period_in_years" | "product.period_with_unit" | "product.currency_code" | "product.currency_symbol" | "product.offer_price" | "product.offer_price_per_day" | "product.offer_price_per_week" | "product.offer_price_per_month" | "product.offer_price_per_year" | "product.offer_period" | "product.offer_period_abbreviated" | "product.offer_period_in_days" | "product.offer_period_in_weeks" | "product.offer_period_in_months" | "product.offer_period_in_years" | "product.offer_period_with_unit" | "product.offer_end_date" | "product.secondary_offer_price" | "product.secondary_offer_period" | "product.secondary_offer_period_abbreviated" | "product.relative_discount" | "product.store_product_name" | "success.redemption_url" | "success.package_identifier" | "success.product_identifier" | "success.product_title" | "success.product_description" | "success.price" | "success.currency_code" | "success.customer_email" | "success.is_subscription" | "success.is_trial";
-export type VariableDictionary = Partial<Record<BuiltinVariableName | CustomVariableName, string>>;
+export type VariableDictionary = Partial<Record<BuiltinVariableName | InputVariableName | CustomVariableName, string>>;
 export type VariablesDictionary = Record<PackageIdentifier, VariableDictionary>;
 export interface PackageInfo {
     hasIntroOffer?: boolean;

package/dist/ui/theme/utils.js

@@ -75,7 +75,7 @@ function applyAlpha(baseColor, alpha) {
 function toHex(val) {
     return val.toString(16).padStart(2, "0").toUpperCase();
 }
-const textColorsForBackground = (backgroundColor, primaryColor, defaultColors, luminanceThreshold = DEFAULT_LUMINANCE_THRESHOLD) => {
+const textColorsForBackground = (backgroundColor, primaryColor, primaryTextColorOverride, defaultColors, luminanceThreshold = DEFAULT_LUMINANCE_THRESHOLD) => {
     const textColors = {
         "grey-text-dark": defaultColors["grey-text-dark"],
         "grey-text-light": defaultColors["grey-text-light"],
@@ -91,7 +91,10 @@ const textColorsForBackground = (backgroundColor, primaryColor, defaultColors, l
         }
     }
     // Find the text color for the primary color
-    if (primaryColor?.startsWith("#")) {
+    if (primaryTextColorOverride) {
+        textColors["primary-text"] = primaryTextColorOverride;
+    }
+    else if (primaryColor?.startsWith("#")) {
         const rgb = hexToRGB(primaryColor);
         if (rgb !== null) {
             textColors["primary-text"] = isLightColor({ ...rgb, luminanceThreshold })
@@ -125,7 +128,7 @@ const toColors = (colorsMapping, defaultColors, brandingAppearance) => {
         ? {
             ...defaultColors,
             ...mappedColors,
-            ...textColorsForBackground(mappedColors.background, mappedColors.primary, defaultColors),
+            ...textColorsForBackground(mappedColors.background, mappedColors.primary, brandingAppearance.color_buttons_primary_text, defaultColors),
             ...colorsForButtonStates(mappedColors.primary),
         }
         : { ...defaultColors }; //copy, do not reference.

package/dist/ui/utils/branding.d.ts

@@ -5,6 +5,7 @@
  */
 export interface BrandingAppearance {
     color_buttons_primary: string;
+    color_buttons_primary_text?: string | null;
     color_accent: string;
     color_error: string;
     color_product_info_bg: string;

package/dist/web-components/index.js

@@ -13,11 +13,11 @@ function At() {
   });
   return { promise: n, resolve: e, reject: t };
 }
-const S = 2, we = 4, Ze = 8, Ft = 1 << 24, ne = 16, Y = 32, he = 64, kn = 128, L = 512, w = 1024, T = 2048, V = 4096, U = 8192, C = 16384, be = 32768, ct = 1 << 25, pe = 65536, dt = 1 << 17, Tn = 1 << 18, Pe = 1 << 19, An = 1 << 20, se = 65536, $e = 1 << 21, Je = 1 << 22, J = 1 << 23, ce = Symbol("$state"), Fn = Symbol("legacy props"), On = Symbol(""), X = new class extends Error {
+const S = 2, we = 4, Ze = 8, Ft = 1 << 24, ne = 16, Y = 32, he = 64, kn = 128, L = 512, w = 1024, T = 2048, V = 4096, U = 8192, C = 16384, be = 32768, ct = 1 << 25, pe = 65536, dt = 1 << 17, Tn = 1 << 18, Pe = 1 << 19, An = 1 << 20, se = 65536, $e = 1 << 21, Je = 1 << 22, J = 1 << 23, ce = Symbol("$state"), Fn = Symbol("legacy props"), In = Symbol(""), X = new class extends Error {
   name = "StaleReactionError";
   message = "The reaction that called `getAbortSignal()` was re-run or destroyed";
 }();
-function In() {
+function On() {
   throw new Error("https://svelte.dev/e/async_derived_orphan");
 }
 function Ln() {
@@ -35,7 +35,7 @@ function Rn() {
 function Nn() {
   throw new Error("https://svelte.dev/e/state_unsafe_mutation");
 }
-function Ot(e) {
+function It(e) {
   return e === this.v;
 }
 function Pn(e, t) {
@@ -128,16 +128,16 @@ function y(e, t) {
 function Qe(e) {
   (e.f & L) !== 0 || e.deps === null ? y(e, w) : y(e, V);
 }
-function It(e) {
+function Ot(e) {
   if (e !== null)
     for (const t of e)
-      (t.f & S) === 0 || (t.f & se) === 0 || (t.f ^= se, It(
+      (t.f & S) === 0 || (t.f & se) === 0 || (t.f ^= se, Ot(
         /** @type {Derived} */
         t.deps
       ));
 }
 function Wn(e, t, n) {
-  (e.f & T) !== 0 ? t.add(e) : (e.f & V) !== 0 && n.add(e), It(e.deps), y(e, w);
+  (e.f & T) !== 0 ? t.add(e) : (e.f & V) !== 0 && n.add(e), Ot(e.deps), y(e, w);
 }
 let Ae = !1;
 function Xn(e) {
@@ -149,7 +149,7 @@ function Xn(e) {
   }
 }
 const G = /* @__PURE__ */ new Set();
-let b = null, N = null, Ue = null, ze = !1, fe = null, Oe = null;
+let b = null, N = null, Ue = null, ze = !1, fe = null, Ie = null;
 var pt = 0;
 let Yn = 1;
 class _e {
@@ -270,7 +270,7 @@ class _e {
     }
     const t = this.#t;
     this.#t = [], this.apply();
-    var n = fe = [], r = [], i = Oe = [];
+    var n = fe = [], r = [], i = Ie = [];
     for (const l of t)
       try {
         this.#h(l, n, r);
@@ -282,7 +282,7 @@ class _e {
       for (const l of i)
         s.schedule(l);
     }
-    if (fe = null, Oe = null, this.#c() || this.#_()) {
+    if (fe = null, Ie = null, this.#c() || this.#_()) {
       this.#p(r), this.#p(n);
       for (const [l, o] of this.#s)
         Dt(l, o);
@@ -358,7 +358,7 @@ class _e {
     try {
       ze = !0, b = this, this.#d();
     } finally {
-      pt = 0, Ue = null, fe = null, Oe = null, ze = !1, b = null, N = null, Q.clear();
+      pt = 0, Ue = null, fe = null, Ie = null, ze = !1, b = null, N = null, Q.clear();
     }
   }
   discard() {
@@ -643,7 +643,7 @@ function Be(e) {
     ctx: B,
     deps: null,
     effects: null,
-    equals: Ot,
+    equals: It,
     f: t,
     fn: e,
     reactions: null,
@@ -663,7 +663,7 @@ function Zn(e, t, n) {
     /** @type {Effect | null} */
     v
   );
-  r === null && In();
+  r === null && On();
   var i = (
     /** @type {Promise<V>} */
     /** @type {unknown} */
@@ -803,7 +803,7 @@ function jt(e, t) {
     // TODO ideally we could skip this altogether, but it causes type errors
     v: e,
     reactions: null,
-    equals: Ot,
+    equals: It,
     rv: 0,
     wv: 0
   };
@@ -819,7 +819,7 @@ function Z(e, t, n = !1) {
   // to ensure we error if state is set inside an inspect effect
   (!P || (p.f & dt) !== 0) && xe() && (p.f & (S | ne | Je | dt)) !== 0 && (M === null || !de.call(M, e)) && Nn();
   let r = n ? ue(t) : t;
-  return We(e, r, Oe);
+  return We(e, r, Ie);
 }
 function We(e, t, n = null) {
   if (!e.equals(t)) {
@@ -833,7 +833,7 @@ function We(e, t, n = null) {
       );
       (e.f & T) !== 0 && tt(s), N === null && Qe(s);
     }
-    e.wv = Jt(), Ht(e, T, n), xe() && v !== null && (v.f & w) !== 0 && (v.f & (Y | he)) === 0 && (O === null ? gr([e]) : O.push(e)), !i.is_fork && Ve.size > 0 && !zt && tr();
+    e.wv = Jt(), Ht(e, T, n), xe() && v !== null && (v.f & w) !== 0 && (v.f & (Y | he)) === 0 && (I === null ? gr([e]) : I.push(e)), !i.is_fork && Ve.size > 0 && !zt && tr();
   }
   return t;
 }
@@ -1217,7 +1217,7 @@ function vr(e, t) {
       t.append(n), n = i;
     }
 }
-let Ie = !1, le = !1;
+let Oe = !1, le = !1;
 function gt(e) {
   le = e;
 }
@@ -1233,9 +1233,9 @@ let M = null;
 function Kt(e) {
   p !== null && (M === null ? M = [e] : M.push(e));
 }
-let A = null, F = 0, O = null;
+let A = null, F = 0, I = null;
 function gr(e) {
-  O = e;
+  I = e;
 }
 let Zt = 1, re = 0, ie = re;
 function bt(e) {
@@ -1286,9 +1286,9 @@ function Qt(e, t, n = !0) {
     }
 }
 function en(e) {
-  var t = A, n = F, r = O, i = p, s = M, a = B, l = P, o = ie, f = e.f;
+  var t = A, n = F, r = I, i = p, s = M, a = B, l = P, o = ie, f = e.f;
   A = /** @type {null | Value[]} */
-  null, F = 0, O = null, p = (f & (Y | he)) === 0 ? e : null, M = null, Le(e.ctx), P = !1, ie = ++re, e.ac !== null && (Ut(() => {
+  null, F = 0, I = null, p = (f & (Y | he)) === 0 ? e : null, M = null, Le(e.ctx), P = !1, ie = ++re, e.ac !== null && (Ut(() => {
     e.ac.abort(X);
   }), e.ac = null);
   try {
@@ -1310,11 +1310,11 @@ function en(e) {
         for (h = F; h < c.length; h++)
           (c[h].reactions ??= []).push(e);
     } else !_ && c !== null && F < c.length && (Se(e, F), c.length = F);
-    if (xe() && O !== null && !P && c !== null && (e.f & (S | V | T)) === 0)
+    if (xe() && I !== null && !P && c !== null && (e.f & (S | V | T)) === 0)
       for (h = 0; h < /** @type {Source[]} */
-      O.length; h++)
+      I.length; h++)
         Qt(
-          O[h],
+          I[h],
           /** @type {Effect} */
           e
         );
@@ -1325,14 +1325,14 @@ function en(e) {
       if (t !== null)
         for (const g of t)
           g.rv = re;
-      O !== null && (r === null ? r = O : r.push(.../** @type {Source[]} */
-      O));
+      I !== null && (r === null ? r = I : r.push(.../** @type {Source[]} */
+      I));
     }
     return (e.f & J) !== 0 && (e.f ^= J), d;
   } catch (g) {
     return Un(g);
   } finally {
-    e.f ^= $e, A = t, F = n, O = r, p = i, M = s, Le(a), P = l, ie = o;
+    e.f ^= $e, A = t, F = n, I = r, p = i, M = s, Le(a), P = l, ie = o;
   }
 }
 function br(e, t) {
@@ -1365,8 +1365,8 @@ function ge(e) {
   var t = e.f;
   if ((t & C) === 0) {
     y(e, w);
-    var n = v, r = Ie;
-    v = e, Ie = !0;
+    var n = v, r = Oe;
+    v = e, Oe = !0;
     try {
       (t & (ne | Ft)) !== 0 ? dr(e) : st(e), Xt(e);
       var i = en(e);
@@ -1374,7 +1374,7 @@ function ge(e) {
       var s;
       mn && Bn && (e.f & T) !== 0 && e.deps;
     } finally {
-      Ie = r, v = n;
+      Oe = r, v = n;
     }
   }
 }
@@ -1404,7 +1404,7 @@ function k(e) {
       var l = a.v;
       return ((a.f & w) === 0 && a.reactions !== null || nn(a)) && (l = tt(a)), Q.set(a, l), l;
     }
-    var o = (a.f & L) === 0 && !P && p !== null && (Ie || (p.f & L) !== 0), f = (a.f & be) === 0;
+    var o = (a.f & L) === 0 && !P && p !== null && (Oe || (p.f & L) !== 0), f = (a.f & be) === 0;
     ke(a) && (o && (a.f |= L), Ct(a)), o && !f && (Bt(a), tn(a));
   }
   if (N?.has(e))
@@ -1672,17 +1672,17 @@ function Fr(e, t, n = !1) {
     }), a || s(-1, null);
   }, i);
 }
-function Or(e, t, n) {
+function Ir(e, t, n) {
   var r = e == null ? "" : "" + e;
   return t && (r = r ? r + " " + t : t), r === "" ? null : r;
 }
-function Ir(e, t) {
+function Or(e, t) {
   return e == null ? null : String(e);
 }
 function an(e, t, n, r, i, s) {
   var a = e.__className;
   if (a !== n || a === void 0) {
-    var l = Or(n, r);
+    var l = Ir(n, r);
     l == null ? e.removeAttribute("class") : e.className = l, e.__className = n;
   }
   return s;
@@ -1690,7 +1690,7 @@ function an(e, t, n, r, i, s) {
 function on(e, t, n, r) {
   var i = e.__style;
   if (i !== t) {
-    var s = Ir(t);
+    var s = Or(t);
     s == null ? e.removeAttribute("style") : e.style.cssText = s, e.__style = t;
   }
   return r;
@@ -1698,7 +1698,7 @@ function on(e, t, n, r) {
 const Lr = Symbol("is custom element"), Mr = Symbol("is html");
 function yt(e, t, n, r) {
   var i = Dr(e);
-  i[t] !== (i[t] = n) && (t === "loading" && (e[On] = n), n == null ? e.removeAttribute(t) : typeof n != "string" && Rr(e).includes(t) ? e[t] = n : e.setAttribute(t, n));
+  i[t] !== (i[t] = n) && (t === "loading" && (e[In] = n), n == null ? e.removeAttribute(t) : typeof n != "string" && Rr(e).includes(t) ? e[t] = n : e.setAttribute(t, n));
 }
 function Dr(e) {
   return (
@@ -1838,7 +1838,7 @@ const Cr = {
   regular: "400",
   medium: "500",
   semibold: "600"
-}, I = {
+}, O = {
   12: "12px",
   14: "14px",
   16: "16px",
@@ -1856,13 +1856,13 @@ const Cr = {
   regular: "0"
 }, m = {
   heading2xl: {
-    fontSize: I[28],
+    fontSize: O[28],
     lineHeight: j[120],
     fontWeight: z.semibold,
     letterSpacing: H.tight
   },
   headingXl: {
-    fontSize: I[24],
+    fontSize: O[24],
     lineHeight: j[130],
     fontWeight: z.semibold,
     letterSpacing: H.regular
@@ -1880,37 +1880,37 @@ const Cr = {
     letterSpacing: H.regular
   },
   bodyBase: {
-    fontSize: I[16],
+    fontSize: O[16],
     lineHeight: j[140],
     fontWeight: z.regular,
     letterSpacing: H.regular
   },
   bodySmall: {
-    fontSize: I[14],
+    fontSize: O[14],
     lineHeight: j[140],
     fontWeight: z.regular,
     letterSpacing: H.regular
   },
   labelButton: {
-    fontSize: I[16],
+    fontSize: O[16],
     lineHeight: j[140],
     fontWeight: z.regular,
     letterSpacing: H.tight
   },
   labelDefault: {
-    fontSize: I[14],
+    fontSize: O[14],
     lineHeight: j[140],
     fontWeight: z.regular,
     letterSpacing: H.tight
   },
   captionDefault: {
-    fontSize: I[12],
+    fontSize: O[12],
     lineHeight: j[140],
     fontWeight: z.regular,
     letterSpacing: H.regular
   },
   captionLink: {
-    fontSize: I[12],
+    fontSize: O[12],
     lineHeight: j[140],
     fontWeight: z.regular,
     letterSpacing: H.regular
@@ -1918,19 +1918,19 @@ const Cr = {
 }, $ = {
   heading2xl: {
     ...m.heading2xl,
-    fontSize: I[36]
+    fontSize: O[36]
   },
   headingXl: {
     ...m.headingXl,
-    fontSize: I[32]
+    fontSize: O[32]
   },
   headingLg: {
     ...m.headingLg,
-    fontSize: I[24]
+    fontSize: O[24]
   },
   headingMd: {
     ...m.headingMd,
-    fontSize: I[18]
+    fontSize: O[18]
   },
   bodyBase: {
     ...m.bodyBase
@@ -2087,23 +2087,25 @@ function xt(e, t) {
 function He(e) {
   return e.toString(16).padStart(2, "0").toUpperCase();
 }
-const Yr = (e, t, n, r = ot) => {
-  const i = {
-    "grey-text-dark": n["grey-text-dark"],
-    "grey-text-light": n["grey-text-light"],
-    "grey-ui-dark": n["grey-ui-dark"],
-    "grey-ui-light": n["grey-ui-light"],
-    "primary-text": n["primary-text"]
+const Yr = (e, t, n, r, i = ot) => {
+  const s = {
+    "grey-text-dark": r["grey-text-dark"],
+    "grey-text-light": r["grey-text-light"],
+    "grey-ui-dark": r["grey-ui-dark"],
+    "grey-ui-light": r["grey-ui-light"],
+    "primary-text": r["primary-text"]
   };
   if (e?.startsWith("#")) {
-    const s = Ee(e);
-    s !== null && Object.assign(i, Wr(s));
+    const a = Ee(e);
+    a !== null && Object.assign(s, Wr(a));
   }
-  if (t?.startsWith("#")) {
-    const s = Ee(t);
-    s !== null && (i["primary-text"] = at({ ...s, luminanceThreshold: r }) ? "black" : "white");
+  if (n)
+    s["primary-text"] = n;
+  else if (t?.startsWith("#")) {
+    const a = Ee(t);
+    a !== null && (s["primary-text"] = at({ ...a, luminanceThreshold: i }) ? "black" : "white");
   }
-  return i;
+  return s;
 }, qr = (e) => ({
   "primary-hover": xt(e, 0.1),
   "primary-pressed": xt(e, 0.15)
@@ -2128,6 +2130,7 @@ const Yr = (e, t, n, r = ot) => {
     ...Yr(
       r.background,
       r.primary,
+      n.color_buttons_primary_text,
       t
     ),
     ...qr(r.primary)

package/package.json

@@ -2,7 +2,7 @@
   "name": "@revenuecat/purchases-ui-js",
   "description": "Web components for Paywalls. Powered by RevenueCat",
   "private": false,
-  "version": "4.7.4",
+  "version": "4.7.6",
   "author": {
     "name": "RevenueCat, Inc."
   },