@revenuecat/purchases-ui-js 3.6.2 → 3.7.0

package/dist/components/paywall/Paywall.svelte

@@ -178,14 +178,7 @@
 
   setPackageInfoContext(packageInfo);
 
-  const style = $derived(
-    css({
-      ...mapBackground(colorMode, null, base.background),
-      ...(maxContentWidth && {
-        "padding-inline": `max(0px, calc((100vw - ${maxContentWidth}) / 2))`,
-      }),
-    }),
-  );
+  const style = $derived(css(mapBackground(colorMode, null, base.background)));
 
   onMount(() => {
     registerFonts(uiConfig);
@@ -198,11 +191,17 @@
 
 <svelte:boundary onerror={onError}>
   <div class={paywallClass} {style}>
-    <Stack {...stack} />
-
-    {#if sticky_footer}
-      <Footer {...sticky_footer} />
-    {/if}
+    <div
+      class="paywall-content"
+      style={maxContentWidth
+        ? `max-width: ${maxContentWidth}; margin-inline: auto;`
+        : ""}
+    >
+      <Stack {...stack} class="paywall-content-scroll" />
+      {#if sticky_footer}
+        <Footer {...sticky_footer} />
+      {/if}
+    </div>
   </div>
 
   {#if sheet}
@@ -227,9 +226,18 @@
       filter: blur(10px) brightness(0.8);
       transform: scale(1.045);
     }
+  }
+
+  .paywall-content {
+    width: 100%;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
 
-    & > :global(*:first-child) {
+    & > :global(.paywall-content-scroll) {
       flex-grow: 1;
+      min-height: 0;
       overflow-y: auto;
     }
   }

package/dist/components/stack/Stack.svelte

@@ -26,10 +26,11 @@
     onclick?: () => void;
     children?: Snippet;
     style?: CSS;
+    class?: string;
   }
 
   const props: StackProps & MiscProps = $props();
-  const { onclick, children, style } = props;
+  const { onclick, children, style, class: classProp } = props;
 
   const selectedState = getSelectedStateContext();
   const hoverState = getHoverStateContext();
@@ -101,7 +102,7 @@
   role={onclick !== undefined ? "button" : undefined}
   {onclick}
   style={stackStyle}
-  class="stack"
+  class={["stack", classProp].filter(Boolean).join(" ")}
 >
   {#if badge}
     <div style={badgeStyle}>

package/dist/components/stack/Stack.svelte.d.ts

@@ -5,6 +5,7 @@ interface MiscProps {
     onclick?: () => void;
     children?: Snippet;
     style?: CSS;
+    class?: string;
 }
 type $$ComponentProps = StackProps & MiscProps;
 declare const Stack: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/components/workflows/Screen.svelte

@@ -42,7 +42,9 @@
       {variablesPerPackage}
       {globalVariables}
       {maxContentWidth}
-      onNavigateToUrlClicked={() => {}}
+      onNavigateToUrlClicked={(url: string) => {
+        window.open(url, "_blank");
+      }}
       onVisitCustomerCenterClicked={() => {}}
       {onBackClicked}
       onRestorePurchasesClicked={() => {}}