@revenuecat/purchases-ui-js 3.3.0 → 3.4.1

package/dist/components/paywall/Paywall.svelte

@@ -56,8 +56,12 @@
       },
     ) => {
       destroy?: () => void;
-      update?: (selectedPackageId: string) => void;
+      update?: (updateParams: {
+        selectedPackageId: string;
+        onReady?: () => void;
+      }) => void;
     };
+    maxContentWidth?: string;
   }
 
   const {
@@ -77,6 +81,7 @@
     uiConfig,
     walletButtonRender,
     hideBackButtons = false,
+    maxContentWidth,
   }: Props = $props();
 
   const getColorMode = setColorModeContext(() => preferredColorMode);
@@ -173,6 +178,9 @@
   const style = $derived(
     css({
       ...mapBackground(colorMode, null, base.background),
+      ...(maxContentWidth && {
+        "padding-inline": `max(0px, calc((100vw - ${maxContentWidth}) / 2))`,
+      }),
     }),
   );
 

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

@@ -29,8 +29,12 @@ interface Props {
         onReady?: () => void;
     }) => {
         destroy?: () => void;
-        update?: (selectedPackageId: string) => void;
+        update?: (updateParams: {
+            selectedPackageId: string;
+            onReady?: () => void;
+        }) => void;
     };
+    maxContentWidth?: string;
 }
 declare const Paywall: import("svelte").Component<Props, {}, "">;
 type Paywall = ReturnType<typeof Paywall>;

package/dist/components/workflows/Screen.svelte

@@ -16,6 +16,7 @@
       actionId: string,
     ) => void | Promise<void>;
     containerId?: string;
+    maxContentWidth?: string;
   }
   const {
     paywallComponents,
@@ -25,6 +26,7 @@
     onActionTriggered,
     onPurchaseClicked,
     containerId = "screen-container",
+    maxContentWidth,
   }: Props = $props();
 </script>
 
@@ -36,6 +38,7 @@
       {uiConfig}
       variablesPerPackage={VARIABLES}
       {globalVariables}
+      {maxContentWidth}
       onNavigateToUrlClicked={() => {}}
       onVisitCustomerCenterClicked={() => {}}
       onBackClicked={() => {}}

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

@@ -9,6 +9,7 @@ interface Props {
     onActionTriggered?: (actionId: string) => void;
     onPurchaseClicked?: (packageId: string, actionId: string) => void | Promise<void>;
     containerId?: string;
+    maxContentWidth?: string;
 }
 declare const Screen: import("svelte").Component<Props, {}, "">;
 type Screen = ReturnType<typeof Screen>;

package/dist/stores/paywall.d.ts

@@ -12,7 +12,10 @@ type PaywallContext = Readonly<{
         onReady?: () => void;
     }) => {
         destroy?: () => void;
-        update?: (selectedPackageId: string) => void;
+        update?: (params: {
+            selectedPackageId: string;
+            onReady?: () => void;
+        }) => void;
     };
     onButtonAction: (action: Action, actionId?: string) => void;
     uiConfig: UIConfig;

package/dist/stories/paywall-decorator.d.ts

@@ -4,5 +4,8 @@ export declare function paywallDecorator<TRenderer extends Renderer, TArgs>(wall
     onReady?: () => void;
 }) => {
     destroy?: () => void;
-    update?: (selectedPackageId: string) => void;
+    update?: (updateParams: {
+        selectedPackageId: string;
+        onReady?: () => void;
+    }) => void;
 }): DecoratorFunction<TRenderer, TArgs>;

package/package.json

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