@revenuecat/purchases-ui-js 3.5.1 → 3.5.2

package/dist/components/paywall/Paywall.svelte

@@ -232,62 +232,58 @@
   }
 
   :global {
-    *,
-    *::before,
-    *::after {
+    /* Scoped reset - same as original but only affects .paywall descendants */
+    .paywall *,
+    .paywall *::before,
+    .paywall *::after {
       box-sizing: border-box;
       margin: 0;
       padding: 0;
       font-family: sans-serif;
     }
 
-    body {
+    .paywall {
       line-height: 1.5;
       -webkit-font-smoothing: antialiased;
     }
 
-    img,
-    picture,
-    video,
-    canvas,
-    svg {
+    .paywall img,
+    .paywall picture,
+    .paywall video,
+    .paywall canvas,
+    .paywall svg {
       display: block;
       max-width: 100%;
     }
 
-    input,
-    button,
-    textarea,
-    select {
+    .paywall input,
+    .paywall button,
+    .paywall textarea,
+    .paywall select {
       font: inherit;
     }
 
-    p,
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6 {
+    .paywall p,
+    .paywall h1,
+    .paywall h2,
+    .paywall h3,
+    .paywall h4,
+    .paywall h5,
+    .paywall h6 {
       overflow-wrap: break-word;
     }
 
-    p {
+    .paywall p {
       text-wrap: pretty;
     }
 
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6 {
+    .paywall h1,
+    .paywall h2,
+    .paywall h3,
+    .paywall h4,
+    .paywall h5,
+    .paywall h6 {
       text-wrap: balance;
     }
-
-    #root,
-    #__next {
-      isolation: isolate;
-    }
   }
 </style>

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

@@ -0,0 +1,2 @@
+import type { DecoratorFunction, Renderer } from "storybook/internal/csf";
+export declare function paywallWrapperDecorator<TRenderer extends Renderer, TArgs>(): DecoratorFunction<TRenderer, TArgs>;

package/dist/stories/paywall-wrapper-decorator.js

@@ -0,0 +1,7 @@
+import PaywallWrapper from "./paywall-wrapper.svelte";
+export function paywallWrapperDecorator() {
+    return (Story) => ({
+        Component: PaywallWrapper,
+        Slot: Story(),
+    });
+}

package/dist/stories/paywall-wrapper.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+
+  interface Props {
+    children: Snippet;
+  }
+
+  const { children }: Props = $props();
+</script>
+
+<div class="paywall" style="display: contents;">
+  {@render children()}
+</div>
+
+<style>
+  /* The wrapper should not affect layout - it's just for CSS scoping */
+  .paywall {
+    display: contents;
+  }
+</style>

package/dist/stories/paywall-wrapper.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { Snippet } from "svelte";
+interface Props {
+    children: Snippet;
+}
+declare const PaywallWrapper: import("svelte").Component<Props, {}, "">;
+type PaywallWrapper = ReturnType<typeof PaywallWrapper>;
+export default PaywallWrapper;

package/package.json

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