@rebilly/instruments 16.68.0 → 16.69.0

package/CHANGELOG.md

@@ -1,6 +1,6 @@
-## [16.68.0](https://github.com/Rebilly/rebilly/compare/instruments/core-v16.67.0...instruments/core-v16.68.0) (2026-03-04)
+## [16.69.0](https://github.com/Rebilly/rebilly/compare/instruments/core-v16.68.0...instruments/core-v16.69.0) (2026-03-09)
 
 
 ### Features
 
-* **api-metadata, rebilly-js-sdk:** Update resources based on latest api definitions ([#19278](https://github.com/Rebilly/rebilly/issues/19278)) ([8b8153c](https://github.com/Rebilly/rebilly/commit/8b8153c87f771a9f2cf3938bcef3a37ea0560744))
+* **instruments:** style dcc page ([#19367](https://github.com/Rebilly/rebilly/issues/19367)) ([31a01b2](https://github.com/Rebilly/rebilly/commit/31a01b2f00587ebf63bbce6acaba37d6569623de))

package/dist/index.js

@@ -2143,10 +2143,42 @@ let ViewIframe$1 = class ViewIframe extends BaseIframe {
 };
 function changeIframeSrcHandler(iframe) {
   iframe.component.on(`${iframe.name}-change-iframe-src`, (url = null) => {
-    iframe.component.frame.src = url;
-    iframe.component.frame.style.height = "75vh";
+    const frame = iframe.component.frame;
+    frame.style.visibility = "hidden";
+    frame.src = url;
+    frame.style.height = "75vh";
+    const fallback = setTimeout(() => {
+      frame.style.visibility = "visible";
+    }, 3e3);
+    function onLoad() {
+      clearTimeout(fallback);
+      frame.removeEventListener("load", onLoad);
+      frame.style.visibility = "visible";
+    }
+    frame.addEventListener("load", onLoad);
   });
 }
+const REBILLY_TO_REVEL_MAP = [
+  ["colorPrimary", "--rebilly-colorPrimary", "--r-primary"],
+  ["colorPrimary", "--rebilly-buttonHoverColorBackground", "--r-primary-hover"],
+  ["colorBackground", "--rebilly-colorBackground", "--r-background"],
+  ["colorBackground", "--rebilly-buttonSecondaryHoverColorBackground", "--r-surface"],
+  ["colorText", "--rebilly-colorText", "--r-text"],
+  ["colorText", "--rebilly-colorMutedText", "--r-text-muted"],
+  ["colorText", "--rebilly-colorMutedBorder", "--r-border-muted"],
+  ["colorDanger", "--rebilly-colorDanger", "--r-border-danger"],
+  ["fontFamily", "--rebilly-fontFamily", "--r-font-family"]
+];
+function buildRevelThemeVars(userTheme) {
+  const computed = getComputedStyle(document.documentElement);
+  const vars2 = {};
+  for (const [source, rebillyVar, revelVar] of REBILLY_TO_REVEL_MAP) {
+    if (!(source in userTheme)) continue;
+    const value = computed.getPropertyValue(rebillyVar).trim();
+    if (value) vars2[revelVar] = value;
+  }
+  return vars2;
+}
 let ModalIframe$1 = class ModalIframe extends BaseIframe {
   constructor(args = {}) {
     super(args);
@@ -2170,7 +2202,18 @@ let ModalIframe$1 = class ModalIframe extends BaseIframe {
     window.addEventListener(
       "message",
       async (event) => {
-        var _a;
+        var _a, _b;
+        if (((_a = event.data) == null ? void 0 : _a.type) === "rebilly-spf:ready" && event.source === this.component.frame.contentWindow) {
+          this.component.frame.contentWindow.postMessage(
+            {
+              type: "rebilly-spf:set-theme",
+              vars: buildRevelThemeVars(
+                state.options.userTheme ?? {}
+              )
+            },
+            "*"
+          );
+        }
         if (event.data.kycLinkAfterRedirect && !isRedirected) {
           this.component.frame.src = event.data.kycLinkAfterRedirect;
           isRedirected = true;
@@ -2184,7 +2227,7 @@ let ModalIframe$1 = class ModalIframe extends BaseIframe {
               state.storefront.transactions.get({
                 id: state.data.transaction.id
               }),
-              ((_a = state.data.invoice) == null ? void 0 : _a.id) ? state.storefront.invoices.get({
+              ((_b = state.data.invoice) == null ? void 0 : _b.id) ? state.storefront.invoices.get({
                 id: state.data.invoice.id
               }) : { fields: null }
             ]);
@@ -5251,7 +5294,7 @@ function C$1({ options: e2 }) {
   }
   function o2() {
     const i = {
-      "REB-API-CONSUMER": `${["Rebilly", e2.appName, "js-sdk"].filter((g) => g).join("/")}@8b8153c`
+      "REB-API-CONSUMER": `${["Rebilly", e2.appName, "js-sdk"].filter((g) => g).join("/")}@31a01b2`
     };
     return e2.apiKey && (i["REB-APIKEY"] = e2.apiKey), i;
   }
@@ -19820,6 +19863,9 @@ function validateOptions(data) {
         buttonSecondaryActiveBoxShadow: "none",
         ...sanitizedData.theme || {}
       },
+      // Raw user-provided theme properties before defaults are merged.
+      // Use this (not `theme`) to check what the user explicitly set.
+      userTheme: sanitizedData.theme || {},
       features: {
         enableLeadSourceTracking: true,
         enableTelemetry: true,