@revenuecat/purchases-ui-js 3.12.0 → 3.12.1

package/dist/components/button/ButtonNodeTestWrapper.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
   import { setLocalizationContext } from "../../stores/localization";
+  import { setPackageInfoContext } from "../../stores/packageInfo";
   import { setPaywallContext } from "../../stores/paywall";
+  import { setVariablesContext } from "../../stores/variables";
   import { writable, readable } from "svelte/store";
   import ButtonNode from "./ButtonNode.svelte";
   import type { ButtonProps } from "../../types/components/button";
@@ -30,6 +32,8 @@
     uiConfig: {} as never,
     hideBackButtons,
   });
+  setPackageInfoContext(readable(undefined));
+  setVariablesContext(readable({}));
 </script>
 
 <ButtonNode {...buttonProps} />

package/dist/components/countdown/Countdown.svelte

@@ -50,6 +50,10 @@
     // Otherwise show countdown_stack
     return countdown_stack;
   });
+
+  const isVisible = $derived(props.visible !== false);
 </script>
 
-<Stack {...activeStack} />
+{#if isVisible}
+  <Stack {...activeStack} />
+{/if}

package/dist/components/express-purchase-button/ExpressPurchaseButton.svelte

@@ -31,8 +31,8 @@
   const shouldShowAvailableStack = $derived(
     Boolean(
       wallet_available_stack &&
-        walletButtonAvailable &&
-        !shouldShowWalletSkeleton,
+      walletButtonAvailable &&
+      !shouldShowWalletSkeleton,
     ),
   );
 
@@ -52,9 +52,9 @@
 </script>
 
 <Stack {...wrapperStackProps}>
-  <Stack
-    {...{ ...wallet_available_stack, visible: shouldShowAvailableStack }}
-  />
+  <div class={shouldShowAvailableStack ? "wallet-slot" : "wallet-slot-hidden"}>
+    <Stack {...wallet_available_stack} />
+  </div>
 
   {#if shouldShowWalletSkeleton}
     <Stack {...wallet_unknown_stack} />
@@ -62,3 +62,12 @@
     <Stack {...wallet_unavailable_stack} />
   {/if}
 </Stack>
+
+<style>
+  .wallet-slot {
+    display: contents;
+  }
+  .wallet-slot-hidden {
+    display: none;
+  }
+</style>

package/dist/components/icon/Icon.svelte

@@ -1,6 +1,9 @@
 <script lang="ts">
   import { getColorModeContext } from "../../stores/color-mode";
+  import { getOptionalPackageInfoContext } from "../../stores/packageInfo";
+  import { getPaywallContext } from "../../stores/paywall";
   import { getSelectedStateContext } from "../../stores/selected";
+  import { getOptionalVariablesContext } from "../../stores/variables";
   import type { IconProps } from "../../types/components/icon";
   import {
     css,
@@ -11,10 +14,16 @@
     mapSize,
     mapSpacing,
   } from "../../utils/base-utils";
-  import { getActiveStateProps } from "../../utils/style-utils";
+  import {
+    evaluateVisibilityConditions,
+    getActiveStateProps,
+  } from "../../utils/style-utils";
 
   const props: IconProps = $props();
   const selectedState = getSelectedStateContext();
+  const packageInfo = getOptionalPackageInfoContext();
+  const { selectedPackageId } = getPaywallContext();
+  const variables = getOptionalVariablesContext();
   const {
     base_url,
     formats,
@@ -66,8 +75,22 @@
       "-webkit-mask-repeat": "no-repeat",
     }),
   );
+
+  const isVisible = $derived(
+    evaluateVisibilityConditions(
+      {
+        selectedPackageId: $selectedPackageId,
+        packageInfo: $packageInfo,
+        variables: $variables ?? {},
+      },
+      props.overrides,
+      props.visible,
+    ),
+  );
 </script>
 
-<div class="rc-gradient-border" style={container}>
-  <div style={icon}></div>
-</div>
+{#if isVisible}
+  <div class="rc-gradient-border" style={container}>
+    <div style={icon}></div>
+  </div>
+{/if}

package/dist/components/image/Image.svelte

@@ -1,6 +1,9 @@
 <script lang="ts">
   import { getColorModeContext } from "../../stores/color-mode";
+  import { getOptionalPackageInfoContext } from "../../stores/packageInfo";
+  import { getPaywallContext } from "../../stores/paywall";
   import { getSelectedStateContext } from "../../stores/selected";
+  import { getOptionalVariablesContext } from "../../stores/variables";
   import type { ImageProps } from "../../types/components/image";
   import {
     css,
@@ -10,13 +13,19 @@
     mapSize,
     mapSpacing,
   } from "../../utils/base-utils";
-  import { getActiveStateProps } from "../../utils/style-utils";
+  import {
+    evaluateVisibilityConditions,
+    getActiveStateProps,
+  } from "../../utils/style-utils";
   import ClipPath from "./ClipPath.svelte";
   import Overlay from "./Overlay.svelte";
 
   const props: ImageProps = $props();
 
   const selectedState = getSelectedStateContext();
+  const packageInfo = getOptionalPackageInfoContext();
+  const { selectedPackageId } = getPaywallContext();
+  const variables = getOptionalVariablesContext();
   const {
     id,
     source,
@@ -112,68 +121,82 @@
   const overlay = $derived(
     color_overlay && mapColorMode(colorMode, color_overlay),
   );
+
+  const isVisible = $derived(
+    evaluateVisibilityConditions(
+      {
+        selectedPackageId: $selectedPackageId,
+        packageInfo: $packageInfo,
+        variables: $variables ?? {},
+      },
+      props.overrides,
+      props.visible,
+    ),
+  );
 </script>
 
-<div {style} bind:clientWidth={wrapperWidth}>
-  <svg
-    bind:contentRect={svgRect}
-    width="100%"
-    height="100%"
-    {viewBox}
-    style={svgStyle}
-  >
-    <defs>
-      <clipPath id={`${id}-path`}>
-        <ClipPath shape={mask_shape} width={svgWidth} height={svgHeight} />
-      </clipPath>
-
-      <g id={`${id}-border`}>
-        <ClipPath shape={mask_shape} width={svgWidth} height={svgHeight} />
-      </g>
+{#if isVisible}
+  <div {style} bind:clientWidth={wrapperWidth}>
+    <svg
+      bind:contentRect={svgRect}
+      width="100%"
+      height="100%"
+      {viewBox}
+      style={svgStyle}
+    >
+      <defs>
+        <clipPath id={`${id}-path`}>
+          <ClipPath shape={mask_shape} width={svgWidth} height={svgHeight} />
+        </clipPath>
+
+        <g id={`${id}-border`}>
+          <ClipPath shape={mask_shape} width={svgWidth} height={svgHeight} />
+        </g>
+
+        <Overlay id={`${id}-overlay`} {overlay} />
+        {#if border && border.width > 0}
+          <Overlay
+            id={`${id}-border-color`}
+            overlay={mapColorMode(colorMode, border.color)}
+          />
+        {/if}
+      </defs>
 
-      <Overlay id={`${id}-overlay`} {overlay} />
       {#if border && border.width > 0}
-        <Overlay
-          id={`${id}-border-color`}
-          overlay={mapColorMode(colorMode, border.color)}
-        />
-      {/if}
-    </defs>
-
-    {#if border && border.width > 0}
-      <use href={`#${id}-border`} fill="transparent" />
-    {/if}
-
-    <g clip-path={`url(#${id}-path)`}>
-      <foreignObject x="0" y="0" width="100%" height="100%">
-        <img
-          src={image.original}
-          style="object-fit:{mapFitMode(fit_mode)}"
-          alt=""
-        />
-      </foreignObject>
-
-      {#if overlay}
-        <rect
-          x="0"
-          y="0"
-          height="100%"
-          width="100%"
-          fill={`url(#${id}-overlay)`}
-        />
+        <use href={`#${id}-border`} fill="transparent" />
       {/if}
 
-      {#if border && border.width > 0}
-        <use
-          href={`#${id}-border`}
-          fill="none"
-          stroke={`url(#${id}-border-color)`}
-          stroke-width={border.width * 2}
-        />
-      {/if}
-    </g>
-  </svg>
-</div>
+      <g clip-path={`url(#${id}-path)`}>
+        <foreignObject x="0" y="0" width="100%" height="100%">
+          <img
+            src={image.original}
+            style="object-fit:{mapFitMode(fit_mode)}"
+            alt=""
+          />
+        </foreignObject>
+
+        {#if overlay}
+          <rect
+            x="0"
+            y="0"
+            height="100%"
+            width="100%"
+            fill={`url(#${id}-overlay)`}
+          />
+        {/if}
+
+        {#if border && border.width > 0}
+          <use
+            href={`#${id}-border`}
+            fill="none"
+            stroke={`url(#${id}-border-color)`}
+            stroke-width={border.width * 2}
+          />
+        {/if}
+      </g>
+    </svg>
+  </div>
+{/if}
 
 <style>
   img {

package/dist/components/input-text/InputText.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
   import { getColorModeContext } from "../../stores/color-mode";
   import { getLocalizationContext } from "../../stores/localization";
+  import { getOptionalPackageInfoContext } from "../../stores/packageInfo";
   import { getPaywallContext } from "../../stores/paywall";
-  import { getVariablesContext } from "../../stores/variables";
+  import { getOptionalVariablesContext } from "../../stores/variables";
   import { FontWeights, TextAlignments } from "../../types";
   import type {
     InputTextKeyboardType,
@@ -22,6 +23,7 @@
     isFontRCFMManaged,
   } from "../../utils/font-utils";
   import {
+    evaluateVisibilityConditions,
     getErrorStateProps,
     getFocusStateProps,
   } from "../../utils/style-utils";
@@ -88,11 +90,12 @@
 
   const getColorMode = getColorModeContext();
   const colorMode = $derived(getColorMode());
-  const { uiConfig, onInputChanged } = getPaywallContext();
+  const { uiConfig, onInputChanged, selectedPackageId } = getPaywallContext();
+  const packageInfo = getOptionalPackageInfoContext();
 
   const wrapperStyle = $derived(
     css({
-      display: props.visible === false ? "none" : "flex",
+      display: "flex",
       width: mapSize(size.width),
       height: mapSize(size.height),
       margin: mapSpacing(margin),
@@ -140,7 +143,7 @@
     });
   });
 
-  const variables = getVariablesContext();
+  const variables = getOptionalVariablesContext();
   const { getLocalizedString } = getLocalizationContext();
   const placeholder = $derived(
     replaceVariables(getLocalizedString(placeholder_lid), $variables),
@@ -161,21 +164,35 @@
         return "url";
     }
   });
+
+  const isVisible = $derived(
+    evaluateVisibilityConditions(
+      {
+        selectedPackageId: $selectedPackageId,
+        packageInfo: $packageInfo,
+        variables: $variables ?? {},
+      },
+      props.overrides,
+      props.visible,
+    ),
+  );
 </script>
 
-<div class="rc-gradient-border" style={wrapperStyle}>
-  <input
-    {type}
-    {placeholder}
-    {required}
-    inputmode={keyboard_type}
-    autocapitalize={capitalize}
-    style={inputStyle}
-    {oninput}
-    onfocus={() => (focused = true)}
-    {onblur}
-  />
-</div>
+{#if isVisible}
+  <div class="rc-gradient-border" style={wrapperStyle}>
+    <input
+      {type}
+      {placeholder}
+      {required}
+      inputmode={keyboard_type}
+      autocapitalize={capitalize}
+      style={inputStyle}
+      {oninput}
+      onfocus={() => (focused = true)}
+      {onblur}
+    />
+  </div>
+{/if}
 
 <style>
   input {

package/dist/components/options/InputOptionTestWrapper.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
+  import { setPackageInfoContext } from "../../stores/packageInfo";
   import { setPaywallContext } from "../../stores/paywall";
+  import { setVariablesContext } from "../../stores/variables";
   import {
     createInputChoiceContext,
     setInputChoiceContext,
@@ -37,11 +39,14 @@
     baseVariables: readable(undefined),
     infoPerPackage: readable(undefined),
     onPurchase: () => {},
+    emitComponentInteraction: () => {},
     onButtonAction: onButtonAction as never,
     onInputChanged,
     uiConfig: {} as never,
     hideBackButtons: false,
   });
+  setPackageInfoContext(readable(undefined));
+  setVariablesContext(readable({}));
 </script>
 
 <InputOption {...optionProps} />

package/dist/components/stack/Stack.svelte

@@ -2,7 +2,10 @@
   import Node from "../paywall/Node.svelte";
   import { getColorModeContext } from "../../stores/color-mode";
   import { getHoverStateContext } from "../../stores/hover";
+  import { getOptionalPackageInfoContext } from "../../stores/packageInfo";
+  import { getPaywallContext } from "../../stores/paywall";
   import { getSelectedStateContext } from "../../stores/selected";
+  import { getOptionalVariablesContext } from "../../stores/variables";
   import type { StackProps } from "../../types/components/stack";
   import { mapBackground } from "../../utils/background-utils";
   import {
@@ -16,6 +19,7 @@
     type CSS,
   } from "../../utils/base-utils";
   import {
+    evaluateVisibilityConditions,
     getActiveStateProps,
     getHoverStateProps,
   } from "../../utils/style-utils";
@@ -35,6 +39,9 @@
 
   const selectedState = getSelectedStateContext();
   const hoverState = getHoverStateContext();
+  const packageInfo = getOptionalPackageInfoContext();
+  const { selectedPackageId } = getPaywallContext();
+  const variables = getOptionalVariablesContext();
   const {
     components,
     size,
@@ -61,7 +68,7 @@
 
   const stackStyle = $derived(
     css({
-      display: props.visible === false ? "none" : "flex",
+      display: "flex",
       position: "relative",
       width: mapSize(size.width),
       height: mapSize(size.height),
@@ -97,41 +104,55 @@
   };
 
   const badgeStyle = $derived(css(mapBadge(badge, border?.width)));
+
+  const isVisible = $derived(
+    evaluateVisibilityConditions(
+      {
+        selectedPackageId: $selectedPackageId,
+        packageInfo: $packageInfo,
+        variables: $variables ?? {},
+      },
+      props.overrides,
+      props.visible,
+    ),
+  );
 </script>
 
-<svelte:element
-  this={onclick !== undefined ? "button" : "div"}
-  role={onclick !== undefined ? "button" : undefined}
-  {onclick}
-  style={stackStyle}
-  class={["stack", "rc-gradient-border", classProp].filter(Boolean).join(" ")}
-  data-testid={testId}
->
-  {#if badge}
-    <div style={badgeStyle}>
-      <Node nodeData={badge.stack} />
-    </div>
-  {/if}
+{#if isVisible}
+  <svelte:element
+    this={onclick !== undefined ? "button" : "div"}
+    role={onclick !== undefined ? "button" : undefined}
+    {onclick}
+    style={stackStyle}
+    class={["stack", "rc-gradient-border", classProp].filter(Boolean).join(" ")}
+    data-testid={testId}
+  >
+    {#if badge}
+      <div style={badgeStyle}>
+        <Node nodeData={badge.stack} />
+      </div>
+    {/if}
 
-  {#if dimension.type === "zlayer"}
-    <!-- isolate: layer z-index values only sort within this stack, not the host page -->
-    <div
-      style="position: relative; width: 100%; height: 100%; isolation: isolate;"
-    >
-      {#each components as component, index}
-        <div style={getLayerStyle(index)}>
-          <Node nodeData={component} />
-        </div>
+    {#if dimension.type === "zlayer"}
+      <!-- isolate: layer z-index values only sort within this stack, not the host page -->
+      <div
+        style="position: relative; width: 100%; height: 100%; isolation: isolate;"
+      >
+        {#each components as component, index}
+          <div style={getLayerStyle(index)}>
+            <Node nodeData={component} />
+          </div>
+        {/each}
+      </div>
+    {:else}
+      {#each components as component}
+        <Node nodeData={component} />
       {/each}
-    </div>
-  {:else}
-    {#each components as component}
-      <Node nodeData={component} />
-    {/each}
-  {/if}
+    {/if}
 
-  {@render children?.()}
-</svelte:element>
+    {@render children?.()}
+  </svelte:element>
+{/if}
 
 <style>
   .stack {

package/dist/components/tabs/Tabs.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
   import { getColorModeContext } from "../../stores/color-mode";
+  import { getOptionalPackageInfoContext } from "../../stores/packageInfo";
   import { getPaywallContext } from "../../stores/paywall";
   import { getSelectedStateContext } from "../../stores/selected";
+  import { getOptionalVariablesContext } from "../../stores/variables";
   import type { TabsProps } from "../../types/components/tabs";
   import { mapBackground } from "../../utils/background-utils";
   import {
@@ -12,7 +14,10 @@
     mapSize,
     mapSpacing,
   } from "../../utils/base-utils";
-  import { getActiveStateProps } from "../../utils/style-utils";
+  import {
+    evaluateVisibilityConditions,
+    getActiveStateProps,
+  } from "../../utils/style-utils";
   import { derived, get, readable, writable } from "svelte/store";
   import Stack from "../stack/Stack.svelte";
   import { setTabsContext, type SelectTab } from "./tabs-context";
@@ -21,6 +26,9 @@
   const { name, control, tabs, default_tab_id } = props;
 
   const selectedState = getSelectedStateContext();
+  const packageInfo = getOptionalPackageInfoContext();
+  const { selectedPackageId } = getPaywallContext();
+  const variables = getOptionalVariablesContext();
   const { size, padding, margin, background, shape, border, shadow } =
     $derived.by(() => {
       return {
@@ -94,10 +102,24 @@
     selectTab,
     isActive: derived(selectedTabIndex, (value) => value === 1),
   });
+
+  const isVisible = $derived(
+    evaluateVisibilityConditions(
+      {
+        selectedPackageId: $selectedPackageId,
+        packageInfo: $packageInfo,
+        variables: $variables ?? {},
+      },
+      props.overrides,
+      props.visible,
+    ),
+  );
 </script>
 
-<div class="rc-gradient-border" style={styles}>
-  {#if $tab !== undefined}
-    <Stack {...$tab.stack} />
-  {/if}
-</div>
+{#if isVisible}
+  <div class="rc-gradient-border" style={styles}>
+    {#if $tab !== undefined}
+      <Stack {...$tab.stack} />
+    {/if}
+  </div>
+{/if}

package/dist/components/text/TextNode.svelte

@@ -9,7 +9,7 @@
   import { getLocalizationContext } from "../../stores/localization";
   import { getPaywallContext } from "../../stores/paywall";
   import { getSelectedStateContext } from "../../stores/selected";
-  import { getVariablesContext } from "../../stores/variables";
+  import { getOptionalVariablesContext } from "../../stores/variables";
   import type { TextNodeProps } from "../../types/components/text";
   import {
     getActiveStateProps,
@@ -18,12 +18,12 @@
     evaluateVisibilityConditions,
   } from "../../utils/style-utils";
   import { replaceVariables } from "../../utils/variable-utils";
-  import { getPackageInfoContext } from "../../stores/packageInfo";
+  import { getOptionalPackageInfoContext } from "../../stores/packageInfo";
 
   const props: TextNodeProps = $props();
 
   const selectedState = getSelectedStateContext();
-  const packageInfo = getPackageInfoContext();
+  const packageInfo = getOptionalPackageInfoContext();
   const {
     uiConfig,
     selectedPackageId,
@@ -61,7 +61,7 @@
     ),
   );
 
-  const variables = getVariablesContext();
+  const variables = getOptionalVariablesContext();
   const { getLocalizedString } = getLocalizationContext();
   const label = $derived(
     replaceVariables(getLocalizedString(actualProps.text_lid), $variables),

package/dist/components/timeline/Timeline.svelte

@@ -1,13 +1,22 @@
 <script lang="ts">
   import { getTimelineInlineStyles } from "./timeline-utils";
   import TimelineItem from "./TimelineItem.svelte";
+  import { getOptionalPackageInfoContext } from "../../stores/packageInfo";
+  import { getPaywallContext } from "../../stores/paywall";
+  import { getSelectedStateContext } from "../../stores/selected";
+  import { getOptionalVariablesContext } from "../../stores/variables";
   import type { TimelineProps } from "../../types/components/timeline";
   import { css } from "../../utils/base-utils";
-  import { getActiveStateProps } from "../../utils/style-utils";
-  import { getSelectedStateContext } from "../../stores/selected";
+  import {
+    evaluateVisibilityConditions,
+    getActiveStateProps,
+  } from "../../utils/style-utils";
 
   const props: TimelineProps = $props();
   const selectedState = getSelectedStateContext();
+  const packageInfo = getOptionalPackageInfoContext();
+  const { selectedPackageId } = getPaywallContext();
+  const variables = getOptionalVariablesContext();
 
   const {
     items,
@@ -41,9 +50,21 @@
       }),
     ),
   );
+
+  const isVisible = $derived(
+    evaluateVisibilityConditions(
+      {
+        selectedPackageId: $selectedPackageId,
+        packageInfo: $packageInfo,
+        variables: $variables ?? {},
+      },
+      props.overrides,
+      props.visible,
+    ),
+  );
 </script>
 
-{#if items.length}
+{#if isVisible && items.length}
   <div style={timelineStyles}>
     {#each items as item (item.id)}
       <TimelineItem {...item} {text_spacing} {item_spacing} />

package/dist/components/video/Video.svelte

@@ -1,7 +1,10 @@
 <script lang="ts">
   import { untrack } from "svelte";
   import { getColorModeContext } from "../../stores/color-mode";
+  import { getOptionalPackageInfoContext } from "../../stores/packageInfo";
+  import { getPaywallContext } from "../../stores/paywall";
   import { getSelectedStateContext } from "../../stores/selected";
+  import { getOptionalVariablesContext } from "../../stores/variables";
   import type { VideoProps } from "../../types/components/video";
   import type { VideoFiles, ImageFiles } from "../../types/media";
   import {
@@ -13,13 +16,19 @@
     mapSize,
     mapSpacing,
   } from "../../utils/base-utils";
-  import { getActiveStateProps } from "../../utils/style-utils";
+  import {
+    evaluateVisibilityConditions,
+    getActiveStateProps,
+  } from "../../utils/style-utils";
   import ClipPath from "../image/ClipPath.svelte";
   import Overlay from "../image/Overlay.svelte";
 
   const props: VideoProps = $props();
 
   const selectedState = getSelectedStateContext();
+  const packageInfo = getOptionalPackageInfoContext();
+  const { selectedPackageId } = getPaywallContext();
+  const variables = getOptionalVariablesContext();
   const {
     id,
     source,
@@ -223,84 +232,98 @@
       });
     }
   });
-</script>
-
-<div class="video-outer" style={wrapperStyle} bind:clientWidth={wrapperWidth}>
-  <div class="video-media">
-    <div class="video-clip" style={clipDivStyle}>
-      {#if shouldShowFallback && fallbackImage}
-        <img
-          src={fallbackImage.original}
-          style="object-fit:{mapFitMode(fit_mode)}"
-          alt=""
-        />
-      {:else if video}
-        <video
-          bind:this={videoElement}
-          src={video.url}
-          style="object-fit:{mapFitMode(fit_mode)}"
-          {loop}
-          muted={mute_audio}
-          controls={show_controls || showControlsFallback}
-          playsinline
-        >
-          <track kind="captions" />
-        </video>
-      {/if}
-    </div>
 
-    <svg
-      class="video-deco"
-      bind:contentRect={svgRect}
-      width="100%"
-      height="100%"
-      {viewBox}
-    >
-      <defs>
-        <clipPath id={`${id}-path`}>
-          <ClipPath shape={mask_shape} width={svgWidth} height={svgHeight} />
-        </clipPath>
-
-        <g id={`${id}-border`}>
-          <ClipPath shape={mask_shape} width={svgWidth} height={svgHeight} />
-        </g>
+  const isVisible = $derived(
+    evaluateVisibilityConditions(
+      {
+        selectedPackageId: $selectedPackageId,
+        packageInfo: $packageInfo,
+        variables: $variables ?? {},
+      },
+      props.overrides,
+      props.visible,
+    ),
+  );
+</script>
 
-        <Overlay id={`${id}-overlay`} {overlay} />
-        {#if border && border.width > 0}
-          <Overlay
-            id={`${id}-border-color`}
-            overlay={mapColorMode(colorMode, border.color)}
-          />
-        {/if}
-      </defs>
-
-      {#if border && border.width > 0}
-        <use href={`#${id}-border`} fill="transparent" />
-      {/if}
-
-      <g clip-path={`url(#${id}-path)`}>
-        {#if overlay}
-          <rect
-            x="0"
-            y="0"
-            height="100%"
-            width="100%"
-            fill={`url(#${id}-overlay)`}
+{#if isVisible}
+  <div class="video-outer" style={wrapperStyle} bind:clientWidth={wrapperWidth}>
+    <div class="video-media">
+      <div class="video-clip" style={clipDivStyle}>
+        {#if shouldShowFallback && fallbackImage}
+          <img
+            src={fallbackImage.original}
+            style="object-fit:{mapFitMode(fit_mode)}"
+            alt=""
           />
+        {:else if video}
+          <video
+            bind:this={videoElement}
+            src={video.url}
+            style="object-fit:{mapFitMode(fit_mode)}"
+            {loop}
+            muted={mute_audio}
+            controls={show_controls || showControlsFallback}
+            playsinline
+          >
+            <track kind="captions" />
+          </video>
         {/if}
+      </div>
+
+      <svg
+        class="video-deco"
+        bind:contentRect={svgRect}
+        width="100%"
+        height="100%"
+        {viewBox}
+      >
+        <defs>
+          <clipPath id={`${id}-path`}>
+            <ClipPath shape={mask_shape} width={svgWidth} height={svgHeight} />
+          </clipPath>
+
+          <g id={`${id}-border`}>
+            <ClipPath shape={mask_shape} width={svgWidth} height={svgHeight} />
+          </g>
+
+          <Overlay id={`${id}-overlay`} {overlay} />
+          {#if border && border.width > 0}
+            <Overlay
+              id={`${id}-border-color`}
+              overlay={mapColorMode(colorMode, border.color)}
+            />
+          {/if}
+        </defs>
 
         {#if border && border.width > 0}
-          <use
-            href={`#${id}-border`}
-            fill="none"
-            stroke={`url(#${id}-border-color)`}
-            stroke-width={border.width * 2}
-          />
+          <use href={`#${id}-border`} fill="transparent" />
         {/if}
-      </g>
-    </svg>
+
+        <g clip-path={`url(#${id}-path)`}>
+          {#if overlay}
+            <rect
+              x="0"
+              y="0"
+              height="100%"
+              width="100%"
+              fill={`url(#${id}-overlay)`}
+            />
+          {/if}
+
+          {#if border && border.width > 0}
+            <use
+              href={`#${id}-border`}
+              fill="none"
+              stroke={`url(#${id}-border-color)`}
+              stroke-width={border.width * 2}
+            />
+          {/if}
+        </g>
+      </svg>
+    </div>
   </div>
-</div>
+{/if}
 
 <style>
   .video-outer {

package/dist/components/wallet-button/WalletButton.svelte

@@ -1,20 +1,28 @@
 <script lang="ts">
-  import { getPaywallContext } from "../../stores/paywall";
-  import {
-    type CSS,
-    css,
-    mapSize,
-    mapSpacing,
-    px,
-  } from "../../utils/base-utils";
   import { mapDimension } from "../stack/stack-utils";
-  import { DEFAULT_SPACING } from "../../utils/constants";
+  import { getColorModeContext } from "../../stores/color-mode";
+  import { getPaywallContext } from "../../stores/paywall";
   import type { WalletButtonProps } from "../../types/components/wallet-button";
+  import { css, mapSize, mapSpacing, px } from "../../utils/base-utils";
+  import { DEFAULT_SPACING } from "../../utils/constants";
 
   const { walletButtonRender, onWalletButtonReady, selectedPackageId } =
     getPaywallContext();
+  const getColorMode = getColorModeContext();
+  const colorMode = $derived(getColorMode());
 
-  const props: WalletButtonProps & { style?: CSS } = $props();
+  const props: WalletButtonProps = $props();
+
+  const walletButtonTheme = $derived.by(() => {
+    const { style } = props;
+    if (style == null) {
+      return;
+    }
+
+    return colorMode === "dark" && style.dark != null
+      ? style.dark
+      : style.light;
+  });
 
   const fallbackSize = {
     width: { type: "fill" },
@@ -26,22 +34,19 @@
     distribution: "center",
   } as const;
 
-  const { size, dimension, spacing, margin, style, border, shape, shadow } =
-    $derived.by(() => {
-      return {
-        size: props.size ?? fallbackSize,
-        dimension: props.dimension ?? fallbackDimension,
-        spacing: props.spacing ?? 0,
-        margin: props.margin ?? DEFAULT_SPACING,
-        border: props.border ?? null,
-        shape: props.shape ?? null,
-        shadow: props.shadow ?? null,
-        style: props.style,
-      };
-    });
+  const { size, dimension, spacing, margin } = $derived.by(() => {
+    return {
+      size: props.size ?? fallbackSize,
+      dimension: props.dimension ?? fallbackDimension,
+      spacing: props.spacing ?? 0,
+      margin: props.margin ?? DEFAULT_SPACING,
+      border: props.border ?? null,
+      shape: props.shape ?? null,
+      shadow: props.shadow ?? null,
+    };
+  });
 
   const stackLayoutRules = $derived({
-    ...style,
     display: "flex",
     position: "relative",
     width: mapSize(size.width),
@@ -64,12 +69,15 @@
 
 {#if walletButtonRender && $selectedPackageId}
   <div style={stackStyle}>
-    <div
-      style="flex-grow: 1; width:100%;"
-      use:walletButtonRender={{
-        selectedPackageId: $selectedPackageId,
-        onReady: props.onWalletButtonReady ?? onWalletButtonReady,
-      }}
-    ></div>
+    {#key walletButtonTheme}
+      <div
+        style="flex-grow: 1; width:100%;"
+        use:walletButtonRender={{
+          selectedPackageId: $selectedPackageId,
+          onReady: props.onWalletButtonReady ?? onWalletButtonReady,
+          walletButtonTheme,
+        }}
+      ></div>
+    {/key}
   </div>
 {/if}

package/dist/components/wallet-button/WalletButton.svelte.d.ts

@@ -1,8 +1,4 @@
-import { type CSS } from "../../utils/base-utils";
 import type { WalletButtonProps } from "../../types/components/wallet-button";
-type $$ComponentProps = WalletButtonProps & {
-    style?: CSS;
-};
-declare const WalletButton: import("svelte").Component<$$ComponentProps, {}, "">;
+declare const WalletButton: import("svelte").Component<WalletButtonProps, {}, "">;
 type WalletButton = ReturnType<typeof WalletButton>;
 export default WalletButton;

package/dist/index.d.ts

@@ -18,7 +18,7 @@ export * from "./types";
 export { type PaywallData } from "./types/paywall";
 export { type InitialInputSelections } from "./stores/inputValidation";
 export { type UIConfig } from "./types/ui-config";
-export { type WalletButtonRender } from "./types/wallet";
+export { type WalletButtonRender, type WalletButtonTheme, } from "./types/wallet";
 export { type CustomVariables, CustomVariableValue, type VariableDictionary, type PackageInfo, } from "./types/variables";
 export type { CompleteWorkflowNavigateArgs, CompleteWorkflowUrlQueryParams, } from "./types/components/button";
 export * from "./ui/globals";

package/dist/stores/packageInfo.d.ts

@@ -3,3 +3,4 @@ import { type Readable } from "svelte/store";
 export type PackageInfoStore = Readable<PackageInfo | undefined>;
 export declare function setPackageInfoContext(variables: PackageInfoStore): void;
 export declare function getPackageInfoContext(): PackageInfoStore;
+export declare function getOptionalPackageInfoContext(): PackageInfoStore;

package/dist/stores/packageInfo.js

@@ -1,5 +1,5 @@
 import { getContext, setContext } from "svelte";
-import {} from "svelte/store";
+import { readable } from "svelte/store";
 const key = Symbol("packageInfo");
 export function setPackageInfoContext(variables) {
     setContext(key, variables);
@@ -11,3 +11,7 @@ export function getPackageInfoContext() {
     }
     return context;
 }
+const emptyPackageInfoStore = readable(undefined);
+export function getOptionalPackageInfoContext() {
+    return (getContext(key) ?? emptyPackageInfoStore);
+}

package/dist/stores/variables.d.ts

@@ -3,3 +3,4 @@ import { type Readable } from "svelte/store";
 export type VariablesStore = Readable<VariableDictionary | undefined>;
 export declare function setVariablesContext(variables: VariablesStore): void;
 export declare function getVariablesContext(): VariablesStore;
+export declare function getOptionalVariablesContext(): VariablesStore;

package/dist/stores/variables.js

@@ -1,5 +1,5 @@
 import { getContext, setContext } from "svelte";
-import {} from "svelte/store";
+import { readable } from "svelte/store";
 const key = Symbol("variables");
 export function setVariablesContext(variables) {
     setContext(key, variables);
@@ -11,3 +11,7 @@ export function getVariablesContext() {
     }
     return context;
 }
+const emptyVariablesStore = readable(undefined);
+export function getOptionalVariablesContext() {
+    return getContext(key) ?? emptyVariablesStore;
+}

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

@@ -1,6 +1,11 @@
 import type { BaseComponent } from "../base";
 import type { BorderType, ShadowType, ShapeType, SizeType, Spacing } from "../..";
 import type { Dimension } from "../alignment";
+import type { WalletButtonTheme } from "../wallet";
+export interface WalletButtonStyle {
+    light: WalletButtonTheme;
+    dark?: WalletButtonTheme | null;
+}
 export interface WalletButtonProps extends BaseComponent {
     type: "wallet_button";
     size?: SizeType;
@@ -9,6 +14,7 @@ export interface WalletButtonProps extends BaseComponent {
     margin?: Spacing;
     border?: BorderType | null;
     shape?: ShapeType | null;
+    style?: WalletButtonStyle | null;
     onWalletButtonReady?: (walletButtonAvailable?: boolean) => void;
     shadow?: ShadowType | null;
 }

package/dist/types/wallet.d.ts

@@ -1,10 +1,18 @@
+/**
+ * Theme for the Stripe wallet button appearance.
+ * Matches Apple Pay button styles: 'black', 'white', or 'white-outline'
+ * @default "black"
+ */
+export type WalletButtonTheme = "black" | "white" | "white-outline";
 export type WalletButtonRender = (node: HTMLElement, params: {
     selectedPackageId: string;
     onReady?: (walletButtonAvailable?: boolean) => void;
+    walletButtonTheme?: WalletButtonTheme;
 }) => {
     destroy?: () => void;
     update?: (updateParams: {
         selectedPackageId: string;
         onReady?: (walletButtonAvailable?: boolean) => void;
+        walletButtonTheme?: WalletButtonTheme;
     }) => void;
 };

package/dist/utils/style-utils.d.ts

@@ -1,5 +1,5 @@
 import type { Component } from "../types/component.js";
-import { type Overrides } from "../types/overrides.js";
+import type { Overrides } from "../types/overrides.js";
 import type { RootPaywall } from "../types/paywall.js";
 import type { PackageInfo, VariableDictionary } from "../types/variables.js";
 /**
@@ -21,13 +21,13 @@ export type VisibilityContext = {
     variables: VariableDictionary;
 };
 /**
- * Evaluates visibility conditions on an element's overrides.
+ * Evaluates visibility for an element.
  *
- * The four structured condition types — selected_package_condition,
- * intro_offer_condition, promo_offer_condition, and variable_condition —
- * determine whether an element should be visible. If an override exists
- * containing only these condition types and all of its conditions are met,
- * the element is visible. If the conditions are not met, the element is hidden.
- * If no visibility override exists, the element defaults to visible.
+ * A component is considered visible unless:
+ * - baseVisible is explicitly false, or
+ * - an override sets `visible: false` in its properties and all of its
+ *   conditions are satisfied by the current context.
+ *
+ * If baseVisible is undefined or null, the component defaults to visible.
  */
 export declare const evaluateVisibilityConditions: <T extends Component>(context: VisibilityContext, overrides?: Overrides<T>, baseVisible?: boolean | null) => boolean;

package/dist/utils/style-utils.js

@@ -1,4 +1,3 @@
-import { RuleKey } from "../types/overrides.js";
 function getPaywallComponentChildNodes(node) {
     switch (node.type) {
         case "stack": {
@@ -134,58 +133,56 @@ export const getPromoOfferStateProps = (hasPromoOffer, overrides) => {
     const override = overrides?.find((override) => override.conditions.find((condition) => condition.type === "promo_offer"));
     return override?.properties ?? {};
 };
-const CONDITION_ORDER = [
-    RuleKey.IntroOfferCondition,
-    RuleKey.PromoOfferCondition,
-    RuleKey.SelectedPackageCondition,
-    RuleKey.VariableCondition,
-];
 /**
- * Evaluates visibility conditions on an element's overrides.
+ * Evaluates visibility for an element.
  *
- * The four structured condition types — selected_package_condition,
- * intro_offer_condition, promo_offer_condition, and variable_condition —
- * determine whether an element should be visible. If an override exists
- * containing only these condition types and all of its conditions are met,
- * the element is visible. If the conditions are not met, the element is hidden.
- * If no visibility override exists, the element defaults to visible.
+ * A component is considered visible unless:
+ * - baseVisible is explicitly false, or
+ * - an override sets `visible: false` in its properties and all of its
+ *   conditions are satisfied by the current context.
+ *
+ * If baseVisible is undefined or null, the component defaults to visible.
  */
 export const evaluateVisibilityConditions = (context, overrides, baseVisible) => {
-    const VISIBILITY_CONDITION_TYPES = new Set(Object.values(RuleKey));
-    const visibilityOverride = overrides?.find((override) => override.conditions.every((condition) => VISIBILITY_CONDITION_TYPES.has(condition.type)));
-    if (!visibilityOverride)
-        return baseVisible ?? true;
-    const sortedConditions = [...visibilityOverride.conditions].sort((a, b) => CONDITION_ORDER.indexOf(a.type) - CONDITION_ORDER.indexOf(b.type));
-    return sortedConditions.every((condition) => {
-        if (condition.type === "intro_offer_condition") {
-            const hasIntroOffer = !!context.packageInfo?.hasIntroOffer || !!context.packageInfo?.hasTrial;
-            if (condition.operator === "=")
-                return hasIntroOffer === condition.value;
-            if (condition.operator === "!=")
-                return hasIntroOffer !== condition.value;
-        }
-        if (condition.type === "promo_offer_condition") {
-            const hasPromoOffer = !!context.packageInfo?.hasPromoOffer;
-            if (condition.operator === "=")
-                return hasPromoOffer === condition.value;
-            if (condition.operator === "!=")
-                return hasPromoOffer !== condition.value;
-        }
-        if (condition.type === "selected_package_condition") {
-            const selected = context.selectedPackageId ?? "";
-            if (condition.operator === "in")
-                return condition.packages.includes(selected);
-            if (condition.operator === "not in")
-                return !condition.packages.includes(selected);
-        }
-        if (condition.type === "variable_condition") {
-            const currentValue = context.variables[condition.variable];
-            const conditionValue = String(condition.value.value);
-            if (condition.operator === "=")
-                return currentValue === conditionValue;
-            if (condition.operator === "!=")
-                return currentValue !== conditionValue;
-        }
+    if (baseVisible === false)
         return false;
+    const hidingOverride = overrides?.find((override) => {
+        const properties = override.properties;
+        if (properties.visible !== false)
+            return false;
+        return override.conditions.every((condition) => conditionMatches(condition, context));
     });
+    return !hidingOverride;
+};
+const conditionMatches = (condition, context) => {
+    if (condition.type === "intro_offer_condition") {
+        const hasIntroOffer = !!context.packageInfo?.hasIntroOffer || !!context.packageInfo?.hasTrial;
+        if (condition.operator === "=")
+            return hasIntroOffer === condition.value;
+        if (condition.operator === "!=")
+            return hasIntroOffer !== condition.value;
+    }
+    if (condition.type === "promo_offer_condition") {
+        const hasPromoOffer = !!context.packageInfo?.hasPromoOffer;
+        if (condition.operator === "=")
+            return hasPromoOffer === condition.value;
+        if (condition.operator === "!=")
+            return hasPromoOffer !== condition.value;
+    }
+    if (condition.type === "selected_package_condition") {
+        const selected = context.selectedPackageId ?? "";
+        if (condition.operator === "in")
+            return condition.packages.includes(selected);
+        if (condition.operator === "not in")
+            return !condition.packages.includes(selected);
+    }
+    if (condition.type === "variable_condition") {
+        const currentValue = context.variables[condition.variable];
+        const conditionValue = String(condition.value.value);
+        if (condition.operator === "=")
+            return currentValue === conditionValue;
+        if (condition.operator === "!=")
+            return currentValue !== conditionValue;
+    }
+    return false;
 };

package/package.json

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