@revenuecat/purchases-ui-js 4.7.5 → 4.8.0

package/dist/components/button/ButtonNode.stories.svelte

@@ -175,9 +175,6 @@
     action: {
       type: "workflow",
     },
-    triggers: {
-      on_press: "workflow-action-id",
-    },
     stack: {
       ...stackProps(5),
       background_color: {

package/dist/components/button/ButtonNode.svelte

@@ -67,12 +67,6 @@
           componentName: props.name,
           componentValue: "navigate_back",
         };
-      case "navigate_to_page":
-        return {
-          componentType: "button",
-          componentName: props.name,
-          componentValue: "navigate_to_page",
-        };
       case "close_workflow":
         return {
           componentType: "button",
@@ -149,7 +143,9 @@
 
   const onclick = () => {
     if (isDisabled) return;
-    const actionId = props.triggers?.on_press;
+    // For "workflow" actions, pass the component's own id so Workflow.svelte
+    // can look it up in the step's triggers array (component ID → action ID).
+    const actionId = action.type === "workflow" ? props.id : undefined;
     if (action.type === "navigate_to" && action.destination === "sheet") {
       if (action.sheet != null) {
         emitComponentInteraction(getSheetOpenInteractionData(action));
@@ -173,8 +169,6 @@
         return false;
       case "navigate_back":
         return !hideBackButtons;
-      case "navigate_to_page":
-        return true;
       case "close_workflow":
         return true;
       case "navigate_to":

package/dist/components/paywall/Paywall.stories.svelte

@@ -25,6 +25,7 @@
   import { waitForAnimations } from "storybook/internal/preview-api";
   import { viewportDecorator } from "../../stories/viewport-decorator";
   import { BACKGROUND_PAYWALL } from "./fixtures/background-paywall";
+  import { FIXED_HEIGHT_STACK_PAYWALL } from "./fixtures/fixed-height-stack-paywall";
   import { OVERRIDE_PAYWALL } from "./fixtures/override-paywall";
   import { SHEET_PAYWALL } from "./fixtures/sheet-paywall";
   import { SHEET_PAYWALL_VIDEO_STACKING } from "./fixtures/sheet-video-stacking-paywall";
@@ -74,6 +75,20 @@
   }}
 />
 
+<!--
+  Regression story for fixed-height stacks being squeezed by the flex algorithm.
+  The root stack uses `space_between` and children's fixed heights sum to more than
+  the 400px viewport, so the empty spacer would collapse without `flex-shrink: 0`.
+  Chromatic diffs this story to block regressions of Stack.svelte's flex-shrink rule.
+-->
+<Story
+  name="Fixed-height stack (regression)"
+  decorators={[viewportDecorator(320, 400, 0)]}
+  args={{
+    paywallData: FIXED_HEIGHT_STACK_PAYWALL,
+  }}
+/>
+
 <Story
   name="Override paywall"
   args={{

package/dist/components/paywall/Paywall.svelte

@@ -71,11 +71,6 @@
     preferredColorMode?: ColorMode;
     onPurchaseClicked?: (selectedPackageId: string, actionId: string) => void;
     onBackClicked?: () => void;
-    /**
-     * Called when a `navigate_to_page` button is pressed and there is no
-     * active nav_host context to handle it internally.
-     */
-    onNavigateToPage?: (pageId: string) => void;
     /** Called when a `close_workflow` button is pressed to dismiss the paywall/workflow. */
     onClose?: () => void;
     onVisitCustomerCenterClicked?: () => void;
@@ -135,7 +130,6 @@
     preferredColorMode,
     onPurchaseClicked,
     onBackClicked,
-    onNavigateToPage,
     onClose,
     onVisitCustomerCenterClicked,
     onRestorePurchasesClicked,
@@ -248,9 +242,6 @@
       case "navigate_back":
         onBackClicked?.();
         return;
-      case "navigate_to_page":
-        onNavigateToPage?.(action.page_id);
-        return;
       case "close_workflow":
         onClose?.();
         return;

package/dist/components/paywall/Paywall.svelte.d.ts

@@ -28,11 +28,6 @@ interface Props {
     preferredColorMode?: ColorMode;
     onPurchaseClicked?: (selectedPackageId: string, actionId: string) => void;
     onBackClicked?: () => void;
-    /**
-     * Called when a `navigate_to_page` button is pressed and there is no
-     * active nav_host context to handle it internally.
-     */
-    onNavigateToPage?: (pageId: string) => void;
     /** Called when a `close_workflow` button is pressed to dismiss the paywall/workflow. */
     onClose?: () => void;
     onVisitCustomerCenterClicked?: () => void;

package/dist/components/paywall/fixtures/fixed-height-stack-paywall.d.ts

@@ -0,0 +1,2 @@
+import type { PaywallData } from "../../../types/paywall";
+export declare const FIXED_HEIGHT_STACK_PAYWALL: PaywallData;

package/dist/components/paywall/fixtures/fixed-height-stack-paywall.js

@@ -0,0 +1,87 @@
+// Regression fixture: fixed-height empty stack collapses under flex pressure.
+// Root `space_between` with children summing above viewport height. Pair with
+// `viewportDecorator` in the story so the parent is bounded; otherwise the
+// paywall grows to content height and no shrinkage happens.
+const solidStack = (id, height, hex) => ({
+    type: "stack",
+    id,
+    name: id,
+    components: [],
+    dimension: {
+        type: "vertical",
+        alignment: "center",
+        distribution: "center",
+    },
+    size: {
+        width: { type: "fill" },
+        height: { type: "fixed", value: height },
+    },
+    background: null,
+    background_color: { light: { type: "hex", value: hex } },
+    badge: null,
+    border: null,
+    margin: { bottom: 0, leading: 0, top: 0, trailing: 0 },
+    padding: { bottom: 0, leading: 0, top: 0, trailing: 0 },
+    shadow: null,
+    shape: {
+        type: "rectangle",
+        corners: {
+            bottom_leading: 0,
+            bottom_trailing: 0,
+            top_leading: 0,
+            top_trailing: 0,
+        },
+    },
+    spacing: 0,
+});
+export const FIXED_HEIGHT_STACK_PAYWALL = {
+    id: "fixed_height_stack_paywall",
+    default_locale: "en_US",
+    components_localizations: { en_US: {} },
+    components_config: {
+        base: {
+            background: {
+                type: "color",
+                value: { light: { type: "hex", value: "#ffffff" } },
+            },
+            stack: {
+                type: "stack",
+                id: "root",
+                name: "Root",
+                components: [
+                    solidStack("hero", 180, "#ff5f5f"),
+                    solidStack("empty_spacer", 50, "#11d483"),
+                    solidStack("card", 200, "#6366f1"),
+                    solidStack("cta", 48, "#000000"),
+                ],
+                dimension: {
+                    type: "vertical",
+                    alignment: "center",
+                    distribution: "space_between",
+                },
+                size: {
+                    width: { type: "fill" },
+                    height: { type: "fill" },
+                },
+                background: null,
+                background_color: null,
+                badge: null,
+                border: null,
+                margin: { bottom: 0, leading: 0, top: 0, trailing: 0 },
+                padding: { bottom: 16, leading: 16, top: 16, trailing: 16 },
+                shadow: null,
+                shape: {
+                    type: "rectangle",
+                    corners: {
+                        bottom_leading: 0,
+                        bottom_trailing: 0,
+                        top_leading: 0,
+                        top_trailing: 0,
+                    },
+                },
+                spacing: 12,
+            },
+            sticky_footer: null,
+        },
+    },
+};

package/dist/components/stack/Stack.svelte

@@ -32,7 +32,13 @@
     getHoverStateProps,
   } from "../../utils/style-utils";
   import type { Snippet } from "svelte";
-  import { mapBadge, mapDimension, mapLayerAlignment } from "./stack-utils";
+  import {
+    mapBadge,
+    mapDimension,
+    mapFixedHeightBounds,
+    mapFixedWidthBounds,
+    mapLayerAlignment,
+  } from "./stack-utils";
 
   interface MiscProps {
     onclick?: () => void;
@@ -89,6 +95,8 @@
       position: "relative",
       width: mapSize(size.width),
       height: mapSize(size.height),
+      ...mapFixedWidthBounds(size.width),
+      ...mapFixedHeightBounds(size.height),
       ...mapDimension(dimension),
       gap: px(spacing),
       margin: mapSpacing(margin),

package/dist/components/stack/stack-utils.d.ts

@@ -1,6 +1,9 @@
+import type { Size } from "../../types";
 import type { Dimension, ZAlignment } from "../../types/alignment";
 import type { Badge } from "../../types/components/stack";
 import { type CSS } from "../../utils/base-utils";
+export declare function mapFixedWidthBounds(width: Size): CSS;
+export declare function mapFixedHeightBounds(height: Size): CSS;
 export declare function mapDimension(dimension: Dimension): Record<string, string>;
 type JustifyAlign = {
     justifyContent: string;

package/dist/components/stack/stack-utils.js

@@ -14,6 +14,20 @@ const DISTRIBUTION_MAP = Object.freeze({
     center: "center",
     end: "flex-end",
 });
+export function mapFixedWidthBounds(width) {
+    if (width.type !== "fixed") {
+        return {};
+    }
+    const value = px(width.value);
+    return { "min-width": value, "max-width": value };
+}
+export function mapFixedHeightBounds(height) {
+    if (height.type !== "fixed") {
+        return {};
+    }
+    const value = px(height.value);
+    return { "min-height": value, "max-height": value };
+}
 export function mapDimension(dimension) {
     if (dimension.type === "zlayer") {
         return {};

package/dist/components/workflows/Screen.svelte

@@ -21,7 +21,6 @@
       actionId: string,
     ) => void | Promise<void>;
     onBackClicked?: () => void;
-    onNavigateToPage?: (pageId: string) => void;
     onClose?: () => void;
     containerId?: string;
     maxContentWidth?: string;
@@ -55,7 +54,6 @@
     onComponentInteraction,
     onPurchaseClicked,
     onBackClicked,
-    onNavigateToPage,
     onClose,
     containerId = "screen-container",
     maxContentWidth,
@@ -94,7 +92,6 @@
       {onCompleteWorkflowNavigate}
       onVisitCustomerCenterClicked={() => onVisitCustomerCenterClicked?.()}
       {onBackClicked}
-      {onNavigateToPage}
       {onClose}
       onRestorePurchasesClicked={() => onRestorePurchasesClicked?.()}
       onActionTriggered={(actionId: string) => {

package/dist/components/workflows/Screen.svelte.d.ts

@@ -16,7 +16,6 @@ interface Props {
     onComponentInteraction?: OnComponentInteraction;
     onPurchaseClicked?: (packageId: string, actionId: string) => void | Promise<void>;
     onBackClicked?: () => void;
-    onNavigateToPage?: (pageId: string) => void;
     onClose?: () => void;
     containerId?: string;
     maxContentWidth?: string;

package/dist/components/workflows/Workflow.svelte

@@ -9,6 +9,21 @@
   import type { UIConfig } from "../../types/ui-config";
   import type { ReservedAttribute } from "../../types/components/input-text";
   import type { WorkflowNavData } from "../../types/workflow-nav";
+  import type {
+    WorkflowStepTriggerAction,
+    WorkflowStep,
+  } from "../../types/workflow";
+
+  type TriggerActionValue = WorkflowStep["trigger_actions"][string];
+
+  function isStepTriggerAction(
+    a: TriggerActionValue,
+  ): a is WorkflowStepTriggerAction {
+    return (
+      a.type === "step" &&
+      typeof (a as WorkflowStepTriggerAction).step_id === "string"
+    );
+  }
 
   interface Props {
     workflow: WorkflowNavData;
@@ -71,34 +86,115 @@
   }: Props = $props();
 
   // ── Nav stack ─────────────────────────────────────────────────────────────
-  // The stack always has at least the initial page. The current page is the
-  // last entry. navigate_to_page pushes, navigate_back pops.
+  // Each entry pairs the screen ID (used to look up the page to render) with
+  // the step ID (used to resolve trigger_actions on button press). The current
+  // page is always the last entry; workflow actions push, navigate_back pops.
   //
   // We key the reset off workflow.initial_page_id (a stable string) rather
   // than workflow object identity, so hosts that recompute the prop object on
   // unrelated reactive updates don't accidentally snap the user back to the
   // first page mid-flow.
-  let navStack = $state<string[]>([]);
+  interface NavEntry {
+    pageId: string;
+    stepId: string;
+  }
+  let navStack = $state<NavEntry[]>([]);
   let trackedInitialPageId = $state<string>();
 
-  const currentPageId = $derived(
-    navStack[navStack.length - 1] ?? workflow.initial_page_id,
+  const current = $derived(
+    navStack[navStack.length - 1] ?? {
+      pageId: workflow.initial_page_id,
+      stepId: workflow.initial_step_id,
+    },
   );
-  const currentScreen = $derived(workflow.pages[currentPageId]);
+  const currentScreen = $derived(workflow.pages[current.pageId]);
 
   $effect.pre(() => {
     if (trackedInitialPageId !== workflow.initial_page_id) {
       trackedInitialPageId = workflow.initial_page_id;
-      navStack = [workflow.initial_page_id];
+      navStack = [
+        {
+          pageId: workflow.initial_page_id,
+          stepId: workflow.initial_step_id,
+        },
+      ];
     }
   });
 
-  function handleNavigateToPage(pageId: string) {
-    if (!workflow.pages[pageId]) {
-      console.warn(`[Workflow] navigate_to_page: unknown page_id "${pageId}"`);
+  /**
+   * Resolves a "workflow"-type button action and navigates to the next screen.
+   *
+   * Flow: component ID → step.triggers[].action_id → trigger_actions[action_id]
+   *       → step_id → step.screen_id → push onto nav stack.
+   */
+  function handleActionTriggered(actionId: string) {
+    const currentStep = workflow.steps[current.stepId];
+    if (!currentStep) {
+      console.warn(
+        `[Workflow] onActionTriggered: no current step found for step_id "${current.stepId}"`,
+      );
+      return;
+    }
+
+    // Resolve the component ID to an action ID via the step's triggers array.
+    const resolvedActionId = currentStep.triggers.find(
+      (t) => t.component_id === actionId,
+    )?.action_id;
+
+    if (!resolvedActionId) {
+      console.warn(
+        `[Workflow] onActionTriggered: no trigger entry found for component "${actionId}" on step "${current.stepId}"`,
+      );
+      onActionTriggered?.(actionId);
+      return;
+    }
+
+    const triggerAction = currentStep.trigger_actions[resolvedActionId];
+    if (!triggerAction) {
+      console.warn(
+        `[Workflow] onActionTriggered: no trigger_action found for action_id "${resolvedActionId}" on step "${current.stepId}"`,
+      );
+      onActionTriggered?.(actionId);
+      return;
+    }
+
+    if (!isStepTriggerAction(triggerAction)) {
+      // Condition-based actions require a full workflow engine — fall back to
+      // the host's onActionTriggered for anything we can't resolve client-side.
+      console.warn(
+        `[Workflow] onActionTriggered: trigger_action is not a simple step action, falling back to onActionTriggered`,
+      );
+      onActionTriggered?.(actionId);
+      return;
+    }
+
+    const nextStep = workflow.steps[triggerAction.step_id];
+    if (!nextStep) {
+      console.warn(
+        `[Workflow] onActionTriggered: step_id "${triggerAction.step_id}" not found in workflow steps`,
+      );
+      return;
+    }
+
+    const nextPageId = nextStep.screen_id;
+    if (!nextPageId) {
+      console.warn(
+        `[Workflow] onActionTriggered: step "${triggerAction.step_id}" has no screen_id (logic/experiment step?)`,
+      );
+      return;
+    }
+
+    if (!workflow.pages[nextPageId]) {
+      console.warn(
+        `[Workflow] onActionTriggered: screen_id "${nextPageId}" not found in workflow pages`,
+      );
       return;
     }
-    navStack = [...navStack, pageId];
+
+    navStack = [
+      ...navStack,
+      { pageId: nextPageId, stepId: triggerAction.step_id },
+    ];
   }
 
   function handleBackClicked() {
@@ -111,7 +207,7 @@
   }
 </script>
 
-{#key currentPageId}
+{#key current.pageId}
   <Screen
     paywallComponents={currentScreen}
     {uiConfig}
@@ -124,7 +220,7 @@
     {walletButtonRender}
     {safeAreaFallbackColor}
     {onPurchaseClicked}
-    {onActionTriggered}
+    onActionTriggered={handleActionTriggered}
     {onInputChanged}
     {onReservedAttributeChanged}
     {onCompleteWorkflowNavigate}
@@ -132,7 +228,6 @@
     {onRestorePurchasesClicked}
     {onVisitCustomerCenterClicked}
     {onComponentInteraction}
-    onNavigateToPage={handleNavigateToPage}
     onBackClicked={handleBackClicked}
     {onClose}
   />

package/dist/components/workflows/fixtures/two-page-workflow.d.ts

@@ -1,12 +1,10 @@
 import type { WorkflowNavData } from "../../../types/workflow-nav";
 /**
- * Two-page workflow fixture that exercises navigate_to_page, navigate_back,
- * and close_workflow button actions via the Workflow component.
+ * Two-page workflow fixture. The "Next" button uses a "workflow" action, whose
+ * destination is resolved client-side via the step's trigger_actions map.
  *
  * Page layout:
- *   "rcpaywall_welcome" — welcome screen with a "Next →" navigate_to_page button
+ *   "rcpaywall_welcome" — welcome screen with a "Next →" button
  *   "rcpaywall_details" — details screen with "← Back" and "✕ Close" buttons
- *
- * Page IDs match a paywall rc_public_id as they would in a real SDK response.
  */
 export declare const TWO_PAGE_WORKFLOW: WorkflowNavData;

package/dist/components/workflows/fixtures/two-page-workflow.js

@@ -1,15 +1,48 @@
 /**
- * Two-page workflow fixture that exercises navigate_to_page, navigate_back,
- * and close_workflow button actions via the Workflow component.
+ * Two-page workflow fixture. The "Next" button uses a "workflow" action, whose
+ * destination is resolved client-side via the step's trigger_actions map.
  *
  * Page layout:
- *   "rcpaywall_welcome" — welcome screen with a "Next →" navigate_to_page button
+ *   "rcpaywall_welcome" — welcome screen with a "Next →" button
  *   "rcpaywall_details" — details screen with "← Back" and "✕ Close" buttons
- *
- * Page IDs match a paywall rc_public_id as they would in a real SDK response.
  */
 export const TWO_PAGE_WORKFLOW = {
     initial_page_id: "rcpaywall_welcome",
+    initial_step_id: "step_welcome",
+    steps: {
+        step_welcome: {
+            id: "step_welcome",
+            screen_id: "rcpaywall_welcome",
+            type: "screen",
+            param_values: {},
+            trigger_actions: {
+                // "next_btn" is the action_id referenced by the triggers array entry
+                // for the "next_btn" button component. It resolves to step_details,
+                // whose screen_id is rcpaywall_details.
+                next_btn: { type: "step", step_id: "step_details" },
+            },
+            triggers: [
+                {
+                    action_id: "next_btn",
+                    component_id: "next_btn",
+                    type: "on_press",
+                    name: "Next button",
+                },
+            ],
+            outputs: {},
+            metadata: null,
+        },
+        step_details: {
+            id: "step_details",
+            screen_id: "rcpaywall_details",
+            type: "screen",
+            param_values: {},
+            trigger_actions: {},
+            triggers: [],
+            outputs: {},
+            metadata: null,
+        },
+    },
     pages: {
         rcpaywall_welcome: {
             id: "rcpaywall_welcome",
@@ -58,7 +91,6 @@ export const TWO_PAGE_WORKFLOW = {
                         shadow: null,
                         shape: null,
                         components: [
-                            // ── Title ────────────────────────────────────────────────
                             {
                                 type: "text",
                                 id: "welcome_title",
@@ -79,7 +111,6 @@ export const TWO_PAGE_WORKFLOW = {
                                     dark: { type: "hex", value: "transparent" },
                                 },
                             },
-                            // ── Body ─────────────────────────────────────────────────
                             {
                                 type: "text",
                                 id: "welcome_body",
@@ -100,15 +131,11 @@ export const TWO_PAGE_WORKFLOW = {
                                     dark: { type: "hex", value: "transparent" },
                                 },
                             },
-                            // ── navigate_to_page button ───────────────────────────
                             {
                                 type: "button",
                                 id: "next_btn",
                                 name: "Next",
-                                action: {
-                                    type: "navigate_to_page",
-                                    page_id: "rcpaywall_details",
-                                },
+                                action: { type: "workflow" },
                                 stack: {
                                     type: "stack",
                                     id: "next_btn_stack",
@@ -121,7 +148,12 @@ export const TWO_PAGE_WORKFLOW = {
                                     },
                                     spacing: 0,
                                     margin: { top: 0, bottom: 0, leading: 24, trailing: 24 },
-                                    padding: { top: 16, bottom: 16, leading: 24, trailing: 24 },
+                                    padding: {
+                                        top: 16,
+                                        bottom: 16,
+                                        leading: 24,
+                                        trailing: 24,
+                                    },
                                     background: {
                                         type: "color",
                                         value: {
@@ -187,8 +219,8 @@ export const TWO_PAGE_WORKFLOW = {
                     background: {
                         type: "color",
                         value: {
-                            light: { type: "hex", value: "#fff4f0ff" },
-                            dark: { type: "hex", value: "#2e1a1aff" },
+                            light: { type: "hex", value: "#f0fff4ff" },
+                            dark: { type: "hex", value: "#1a2e1aff" },
                         },
                     },
                     stack: {
@@ -211,7 +243,6 @@ export const TWO_PAGE_WORKFLOW = {
                         shadow: null,
                         shape: null,
                         components: [
-                            // ── Title ────────────────────────────────────────────────
                             {
                                 type: "text",
                                 id: "details_title",
@@ -224,15 +255,14 @@ export const TWO_PAGE_WORKFLOW = {
                                 margin: { top: 80, bottom: 16, leading: 24, trailing: 24 },
                                 padding: { top: 0, bottom: 0, leading: 0, trailing: 0 },
                                 color: {
-                                    light: { type: "hex", value: "#2e1a1aff" },
-                                    dark: { type: "hex", value: "#fff4f0ff" },
+                                    light: { type: "hex", value: "#1a2e1aff" },
+                                    dark: { type: "hex", value: "#f0fff4ff" },
                                 },
                                 background_color: {
                                     light: { type: "hex", value: "transparent" },
                                     dark: { type: "hex", value: "transparent" },
                                 },
                             },
-                            // ── Body ─────────────────────────────────────────────────
                             {
                                 type: "text",
                                 id: "details_body",
@@ -245,15 +275,14 @@ export const TWO_PAGE_WORKFLOW = {
                                 margin: { top: 0, bottom: 48, leading: 24, trailing: 24 },
                                 padding: { top: 0, bottom: 0, leading: 0, trailing: 0 },
                                 color: {
-                                    light: { type: "hex", value: "#775555ff" },
-                                    dark: { type: "hex", value: "#ccaaaaff" },
+                                    light: { type: "hex", value: "#337733ff" },
+                                    dark: { type: "hex", value: "#88cc88ff" },
                                 },
                                 background_color: {
                                     light: { type: "hex", value: "transparent" },
                                     dark: { type: "hex", value: "transparent" },
                                 },
                             },
-                            // ── navigate_back button ──────────────────────────────
                             {
                                 type: "button",
                                 id: "back_btn",
@@ -271,7 +300,12 @@ export const TWO_PAGE_WORKFLOW = {
                                     },
                                     spacing: 0,
                                     margin: { top: 0, bottom: 12, leading: 24, trailing: 24 },
-                                    padding: { top: 16, bottom: 16, leading: 24, trailing: 24 },
+                                    padding: {
+                                        top: 16,
+                                        bottom: 16,
+                                        leading: 24,
+                                        trailing: 24,
+                                    },
                                     background: {
                                         type: "color",
                                         value: {
@@ -314,7 +348,6 @@ export const TWO_PAGE_WORKFLOW = {
                                     ],
                                 },
                             },
-                            // ── close button ──────────────────────────────────────
                             {
                                 type: "button",
                                 id: "close_btn",
@@ -332,7 +365,12 @@ export const TWO_PAGE_WORKFLOW = {
                                     },
                                     spacing: 0,
                                     margin: { top: 0, bottom: 40, leading: 24, trailing: 24 },
-                                    padding: { top: 16, bottom: 16, leading: 24, trailing: 24 },
+                                    padding: {
+                                        top: 16,
+                                        bottom: 16,
+                                        leading: 24,
+                                        trailing: 24,
+                                    },
                                     background: {
                                         type: "color",
                                         value: {

package/dist/types/components/button.d.ts

@@ -11,10 +11,6 @@ interface RestorePurchasesAction {
 interface NavigateBackAction {
     type: "navigate_back";
 }
-interface NavigateToPageAction {
-    type: "navigate_to_page";
-    page_id: string;
-}
 interface CloseAction {
     type: "close_workflow";
 }
@@ -60,15 +56,12 @@ interface CompleteWorkflowAction {
     };
     url_query_params?: CompleteWorkflowUrlQueryParams;
 }
-export type Action = WorkflowAction | RestorePurchasesAction | NavigateBackAction | NavigateToPageAction | CloseAction | NavigateToAction | NavigateToSheetAction | NavigateToWebPurchase | NavigateToUrlAction | CompleteWorkflowAction;
+export type Action = WorkflowAction | RestorePurchasesAction | NavigateBackAction | CloseAction | NavigateToAction | NavigateToSheetAction | NavigateToWebPurchase | NavigateToUrlAction | CompleteWorkflowAction;
 export interface ButtonProps extends BaseComponent {
     type: "button";
     action: Action;
     stack: StackProps;
     transition?: null;
-    triggers?: {
-        on_press?: string;
-    };
     overrides?: Overrides<ButtonProps>;
 }
 export {};

package/dist/types/paywall-component-interaction.d.ts

@@ -16,7 +16,7 @@ interface PackageTransition {
     destinationPackageId: string;
     defaultPackageId?: string;
 }
-type ButtonInteractionValue = "workflow" | "navigate_to_url" | "navigate_back" | "navigate_to_page" | "close_workflow" | "restore_purchases" | "navigate_to_customer_center" | "screen_redirect" | "navigate_to_privacy_policy" | "navigate_to_terms" | "navigate_to_sheet" | "navigate_to_offer_code" | "navigate_to_web_paywall_link";
+type ButtonInteractionValue = "workflow" | "navigate_to_url" | "navigate_back" | "close_workflow" | "restore_purchases" | "navigate_to_customer_center" | "screen_redirect" | "navigate_to_privacy_policy" | "navigate_to_terms" | "navigate_to_sheet" | "navigate_to_offer_code" | "navigate_to_web_paywall_link";
 export type TabInteractionData = ComponentInteractionBase<"tab"> & IndexedTransition;
 export type SwitchInteractionData = ComponentInteractionBase<"switch", "on" | "off">;
 export type CarouselInteractionData = ComponentInteractionBase<"carousel"> & IndexedTransition;

package/dist/types/workflow-nav.d.ts

@@ -1,27 +1,33 @@
-import type { WorkflowData, WorkflowScreen } from "./workflow";
+import type { WorkflowData, WorkflowScreen, WorkflowStep } from "./workflow";
 /**
  * A self-contained multi-page workflow payload for use with the Workflow
  * component. This mirrors the shape of rc-workflows' WorkflowData but only
- * includes the fields needed for client-side page navigation — it does NOT
- * include step trigger_actions or experiment logic, which remain rc-workflows
- * concerns.
+ * includes the fields needed for client-side page navigation.
  */
 export interface WorkflowNavData {
     /** ID of the first page to display. Must be a key in `pages`. */
     initial_page_id: string;
     /**
-     * All pages in this workflow keyed by page ID (the screen's rc_public_id).
-     * `navigate_to_page` actions reference these IDs directly.
+     * All pages in this workflow keyed by screen ID.
+     * Workflow step actions resolve to these IDs via `steps[stepId].screen_id`.
      */
     pages: Record<string, WorkflowScreen>;
+    /**
+     * All steps in this workflow keyed by step ID.
+     * Used to resolve `workflow`-type button actions: the button's component ID
+     * is looked up in the current step's `triggers` array to get an action_id,
+     * which maps to a `trigger_actions` entry pointing to the next step_id,
+     * whose screen_id is then used to navigate to the correct page.
+     */
+    steps: Record<string, WorkflowStep>;
+    /** The step ID of the first step, corresponding to `initial_page_id`. */
+    initial_step_id: string;
 }
 /**
  * Map a full `WorkflowData` SDK response to the `WorkflowNavData` shape
  * consumed by the `Workflow` component.
  *
- * - `pages` is taken directly from `WorkflowData.screens` (already keyed by
- *   screen/paywall rc_public_id, which is what `navigate_to_page` page_ids
- *   reference).
+ * - `pages` is taken directly from `WorkflowData.screens`, keyed by screen ID.
  * - `initial_page_id` is resolved by looking up the screen_id of the initial
  *   step, since `initial_step_id` is a step ID, not a screen ID.
  *

package/dist/types/workflow-nav.js

@@ -2,9 +2,7 @@
  * Map a full `WorkflowData` SDK response to the `WorkflowNavData` shape
  * consumed by the `Workflow` component.
  *
- * - `pages` is taken directly from `WorkflowData.screens` (already keyed by
- *   screen/paywall rc_public_id, which is what `navigate_to_page` page_ids
- *   reference).
+ * - `pages` is taken directly from `WorkflowData.screens`, keyed by screen ID.
  * - `initial_page_id` is resolved by looking up the screen_id of the initial
  *   step, since `initial_step_id` is a step ID, not a screen ID.
  *
@@ -27,8 +25,10 @@ export function workflowDataToNavData(data) {
     }
     return {
         initial_page_id: initialPageId,
-        // Shared by reference intentionally — screens are never mutated after
+        initial_step_id: data.initial_step_id,
+        // Shared by reference intentionally — screens/steps are never mutated after
         // WorkflowData is received from the SDK, so a copy would be wasteful.
         pages: data.screens,
+        steps: data.steps,
     };
 }

package/dist/types/workflow.d.ts

@@ -13,6 +13,27 @@ export interface WorkflowScreen extends PaywallData {
     revision: number;
     template_name: string;
 }
+/**
+ * A trigger action that navigates directly to another step.
+ */
+export interface WorkflowStepTriggerAction {
+    type: "step";
+    step_id: string;
+}
+/**
+ * An entry in a step's `triggers` array that maps a component interaction
+ * (e.g. button press) to a named action_id, which in turn maps to a
+ * `trigger_actions` entry.
+ */
+export interface WorkflowStepTrigger {
+    /** The action ID to look up in `trigger_actions`. */
+    action_id: string;
+    /** The component (e.g. button) id that fires this trigger. */
+    component_id: string;
+    /** The interaction type, e.g. "on_press". */
+    type: string;
+    name?: string;
+}
 /**
  * A single step in a workflow, referencing a screen by ID.
  * Aligns with the SDK response shape from khepri.
@@ -22,8 +43,19 @@ export interface WorkflowStep {
     screen_id?: string;
     type: string;
     param_values: Record<string, unknown>;
-    trigger_actions: Record<string, unknown>;
-    triggers: Record<string, unknown>;
+    /**
+     * Maps action IDs (from `triggers[].action_id`) to the next step to navigate
+     * to. Currently only `type: "step"` is supported for client-side resolution;
+     * condition-based actions are ignored.
+     */
+    trigger_actions: Record<string, WorkflowStepTriggerAction | Record<string, unknown>>;
+    /**
+     * Array of trigger entries mapping component interactions to action IDs.
+     * Resolve a button press by matching its component `id` against
+     * `component_id`, then use the entry's `action_id` to look up
+     * `trigger_actions`.
+     */
+    triggers: WorkflowStepTrigger[];
     outputs: Record<string, unknown>;
     metadata: Record<string, unknown> | null;
 }

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.5",
+  "version": "4.8.0",
   "author": {
     "name": "RevenueCat, Inc."
   },