@revenuecat/purchases-ui-js 3.12.1 → 4.1.0

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

@@ -1,5 +1,6 @@
 <script module lang="ts">
   import { defineMeta } from "@storybook/addon-svelte-csf";
+  import type { ComponentProps } from "svelte";
 
   import Paywall from "./Paywall.svelte";
   import {
@@ -31,12 +32,16 @@
   import { CUSTOM_VARIABLES_PAYWALL } from "./fixtures/custom-variables-paywall";
   import { COUNTDOWN_PAYWALL } from "../countdown/fixtures/countdown-paywall";
   import { mockDateDecorator } from "storybook-mock-date-decorator";
-  import { IndividualPackageVariables } from "./fixtures/express-purchase-button-paywall";
+  import {
+    IndividualPackageVariables,
+    DUELINGUE_PAYWALL,
+  } from "./fixtures/express-purchase-button-paywall";
   import { CustomVariableValue } from "../../types/variables";
 
   const { Story } = defineMeta({
     title: "Example/Paywall",
     component: Paywall,
+    render: template,
     args: {
       onPurchaseClicked: (selectedPackageId: string, actionId: string) =>
         alert(
@@ -55,9 +60,11 @@
   });
 </script>
 
-<script>
-  import { DUELINGUE_PAYWALL } from "./fixtures/express-purchase-button-paywall";
-</script>
+{#snippet template(props: ComponentProps<typeof Paywall>)}
+  <div class="paywall-story-frame">
+    <Paywall {...props} />
+  </div>
+{/snippet}
 
 <Story
   name="Stack paywall"
@@ -491,3 +498,13 @@
     },
   }}
 />
+
+<style>
+  .paywall-story-frame {
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: column;
+    background-color: var(--rc-purchases-ui-bg-color, Canvas);
+    color-scheme: light dark;
+  }
+</style>

package/dist/components/paywall/Paywall.svelte

@@ -32,15 +32,17 @@
     type PackageInfo,
     type VariableDictionary,
   } from "../../types/variables";
-  import { mapBackground } from "../../utils/background-utils";
+  import { paywallRootBackgroundModel } from "../../utils/background-utils";
   import { css } from "../../utils/base-utils";
   import { STICKY_OVERLAY_Z_INDEX } from "../../utils/constants";
+  import { applyDocumentBackground } from "../../utils/document-background";
   import { registerFonts } from "../../utils/font-utils";
   import { findSelectedPackageId } from "../../utils/style-utils";
   import { onMount } from "svelte";
   import { derived, readable, writable } from "svelte/store";
   import Stack from "../stack/Stack.svelte";
   import Sheet from "./Sheet.svelte";
+  import ViewportBackdrop from "./ViewportBackdrop.svelte";
   import {
     type PackageInfoStore,
     setPackageInfoContext,
@@ -131,13 +133,38 @@
   }: Props = $props();
 
   const getColorMode = setColorModeContext(() => preferredColorMode);
-  const colorMode = $derived(getColorMode());
+
+  const viewportBackdropModel = $derived(
+    paywallRootBackgroundModel(paywallData, getColorMode()),
+  );
+
+  const instanceId: symbol = Symbol();
+  $effect(() =>
+    applyDocumentBackground(instanceId, viewportBackdropModel, paywallData),
+  );
 
   const { default_locale, components_config, components_localizations } =
     paywallData;
   const { base } = components_config;
   const defaultPackageId = findSelectedPackageId(base);
 
+  // Solid colours paint here so the paywall has its own bg without requiring
+  // consumer CSS. Gradients and images are deliberately skipped — ViewportBackdrop
+  // paints those at viewport scale, and rendering them on both surfaces would
+  // anchor the gradient stops to two different boxes and produce a visible seam
+  // at the paywall edge.
+  const paywallStyle = $derived.by((): string => {
+    const m = viewportBackdropModel;
+    if (
+      m.kind === "style" &&
+      m.style.background &&
+      !m.style.background.includes("gradient")
+    ) {
+      return css(m.style);
+    }
+    return "";
+  });
+
   const { getLocalizedString } = setLocalizationContext(() => ({
     defaultLocale: default_locale,
     selectedLocale,
@@ -285,8 +312,6 @@
 
   setPackageInfoContext(packageInfo);
 
-  const style = $derived(css(mapBackground(colorMode, null, base.background)));
-
   onMount(() => {
     registerFonts(uiConfig);
   });
@@ -305,7 +330,8 @@
 </script>
 
 <svelte:boundary onerror={onError}>
-  <div class={paywallClass} {style}>
+  <div class={paywallClass} style={paywallStyle}>
+    <ViewportBackdrop model={viewportBackdropModel} />
     {#if header}
       <div
         class="header-wrapper"
@@ -321,12 +347,20 @@
         maxContentWidth
           ? `max-width: ${maxContentWidth}; margin-inline: auto;`
           : "",
-        pullContentUnderHeader ? `margin-top: -${headerHeight}px;` : "",
       ]
         .filter(Boolean)
         .join(" ")}
     >
-      <Stack {...stack} class="paywall-content-scroll" />
+      <Stack
+        {...stack}
+        class="paywall-content-scroll"
+        style={{
+          height: "auto",
+          ...(pullContentUnderHeader
+            ? { "margin-top": `-${headerHeight}px` }
+            : {}),
+        }}
+      />
       {#if sticky_footer}
         <Footer {...sticky_footer} />
       {/if}
@@ -351,18 +385,6 @@
     transition-timing-function: ease-in-out;
     transform-origin: center;
 
-    &::before {
-      content: "";
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background: var(--overlay);
-      pointer-events: none;
-      z-index: 1;
-    }
-
     &:global(.blur) {
       filter: blur(10px) brightness(0.8);
       transform: scale(1.045);
@@ -378,13 +400,13 @@
   .paywall-content {
     z-index: 2;
     width: 100%;
-    flex: 1;
+    flex: 1 1 auto;
     display: flex;
     flex-direction: column;
     min-height: 0;
 
     & > :global(.paywall-content-scroll) {
-      flex-grow: 1;
+      flex: 1 1 auto;
       min-height: 0;
       overflow-y: auto;
     }

package/dist/components/paywall/ViewportBackdrop.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+  import type { PaywallRootBackgroundModel } from "../../utils/background-utils";
+
+  // iOS WebKit only reliably propagates background-color (not background-image)
+  // through to the safe-area canvas. A position:fixed element that explicitly
+  // fills the viewport — including safe areas — is the only consistent paint
+  // surface for gradients and images on iOS Safari.
+  const { model }: { model: PaywallRootBackgroundModel } = $props();
+
+  const backdropStyle = $derived.by((): string => {
+    if (
+      model.kind === "style" &&
+      model.style.background?.includes("gradient")
+    ) {
+      return Object.entries(model.style)
+        .map(([k, v]) => `${k}:${v}`)
+        .join(";");
+    }
+    if (model.kind === "image") {
+      return [
+        `background-image:url("${model.src}")`,
+        `background-size:${model.fit}`,
+        `background-position:${model.position}`,
+        `background-repeat:no-repeat`,
+      ].join(";");
+    }
+    return "";
+  });
+
+  const overlayStyle = $derived(
+    model.kind === "image" && model.overlay && model.overlay !== "none"
+      ? `background:${model.overlay}`
+      : null,
+  );
+
+  const shouldRender = $derived(backdropStyle !== "");
+</script>
+
+{#if shouldRender}
+  <div class="viewport-backdrop" style={backdropStyle}>
+    {#if overlayStyle}
+      <div class="viewport-backdrop-overlay" style={overlayStyle}></div>
+    {/if}
+  </div>
+{/if}
+
+<style>
+  .viewport-backdrop {
+    position: fixed;
+    inset: 0;
+    z-index: 0;
+    pointer-events: none;
+    overflow: hidden;
+  }
+
+  .viewport-backdrop-overlay {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+  }
+</style>

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

@@ -0,0 +1,7 @@
+import type { PaywallRootBackgroundModel } from "../../utils/background-utils";
+type $$ComponentProps = {
+    model: PaywallRootBackgroundModel;
+};
+declare const ViewportBackdrop: import("svelte").Component<$$ComponentProps, {}, "">;
+type ViewportBackdrop = ReturnType<typeof ViewportBackdrop>;
+export default ViewportBackdrop;

package/dist/components/video/Video.svelte

@@ -70,7 +70,13 @@
   });
   let videoElement = $state<HTMLVideoElement | null>(null);
   let hasVideoError = $state(false);
-  let showControlsFallback = $state(false);
+  /**
+   * When `mute_audio` is false, unmuted `play()` often fails after a full reload (autoplay policy).
+   * Retrying with muted playback requires keeping the `<video muted>` binding in sync with the element.
+   */
+  let playbackMutedOverride = $state(false);
+  /** Prevents repeated `load()` / `play()` nudge when the autoplay $effect re-runs (was resetting iOS to readyState 0). */
+  let lastAutoplayBootstrapUrl = $state<string | null>(null);
 
   // Load video or fallback image metadata to get dimensions
   $effect(() => {
@@ -138,7 +144,13 @@
     if (size.height.type === "fixed") {
       return size.height.value;
     }
-    return Math.round(wrapperWidth * (videoSize.height / videoSize.width));
+    const w = videoSize.width;
+    const h = videoSize.height;
+    if (!Number.isFinite(w) || !Number.isFinite(h) || w <= 0 || h <= 0) {
+      // Avoid 0-height box and NaN before metadata (`NaN <= 0` is false); 16:9 placeholder until dimensions resolve.
+      return wrapperWidth > 0 ? Math.round(wrapperWidth * (9 / 16)) : 200;
+    }
+    return Math.round(wrapperWidth * (h / w));
   });
 
   const style = $derived(
@@ -195,42 +207,211 @@
 
   const shouldShowFallback = $derived(hasVideoError || !video);
 
-  // Programmatic autoplay (single path; HTML autoplay omitted to avoid iOS quirks).
+  // Autoplay: native `autoplay` + programmatic `play()`. Unmuted autoplay is often blocked; we retry
+  // once with muted playback (`playbackMutedOverride`) then try to restore sound. Controls follow
+  // `show_controls` only. Bootstrap once per URL; `play()` when `readyState >= HAVE_CURRENT_DATA`.
+  // Microtask + rAF retries cover decode/policy ordering; refresh leaves `document` already
+  // `complete` (`load` won't fire)—extra microtask retries `tryPlay` for muted→unmuted paths.
+  // Pair with `translateZ(0)` + rc-workflows `screen-slide-fade`.
   $effect(() => {
     if (!auto_play) {
       untrack(() => {
-        showControlsFallback = false;
+        playbackMutedOverride = false;
       });
       return;
     }
 
     if (shouldShowFallback || !video) {
       untrack(() => {
-        showControlsFallback = false;
+        playbackMutedOverride = false;
       });
       return;
     }
 
     const el = videoElement;
-    if (!el) {
-      return;
+    if (!el) return;
+
+    const vurl = video.url;
+
+    const needsBootstrap = lastAutoplayBootstrapUrl !== vurl;
+    if (needsBootstrap) {
+      lastAutoplayBootstrapUrl = vurl;
+      untrack(() => {
+        playbackMutedOverride = false;
+      });
     }
 
-    void video.url;
-    void mute_audio;
+    let cancelled = false;
+
+    /** Keep `muted` / `playsInline` aligned with `mute_audio`, `playbackMutedOverride`, and the template. */
+    const applyVideoPlaybackFlags = () => {
+      el.muted = mute_audio || playbackMutedOverride;
+      el.playsInline = true;
+    };
+
+    let playingUnmuteListener: (() => void) | null = null;
+
+    const clearPlayingUnmuteListener = () => {
+      if (playingUnmuteListener !== null) {
+        el.removeEventListener("playing", playingUnmuteListener);
+        playingUnmuteListener = null;
+      }
+    };
+
+    const tryPlay = () => {
+      if (cancelled) return;
+      if (!el.paused) return;
 
-    untrack(() => {
-      showControlsFallback = false;
-    });
+      applyVideoPlaybackFlags();
+
+      if (el.readyState < HTMLMediaElement.HAVE_CURRENT_DATA) {
+        return;
+      }
 
-    const playPromise = el.play();
-    if (playPromise !== undefined) {
-      playPromise.catch(() => {
-        untrack(() => {
-          showControlsFallback = true;
+      const playPromise = el.play();
+      if (playPromise !== undefined) {
+        playPromise.catch(() => {
+          if (!mute_audio && !playbackMutedOverride) {
+            untrack(() => {
+              playbackMutedOverride = true;
+            });
+            applyVideoPlaybackFlags();
+
+            /** Unmuted `play()` after a forced-muted start sometimes only works tied to playback (WebKit). */
+            let unmuteAfterMutedStartHandled = false;
+            const tryRestoreAudioAfterMutedAutoplay = () => {
+              if (unmuteAfterMutedStartHandled || mute_audio || cancelled)
+                return;
+              unmuteAfterMutedStartHandled = true;
+              queueMicrotask(() => {
+                if (cancelled) return;
+                untrack(() => {
+                  playbackMutedOverride = false;
+                });
+                applyVideoPlaybackFlags();
+                el.volume = 1;
+                const p3 = el.play();
+                if (p3 === undefined) return;
+                p3.catch(() => {
+                  untrack(() => {
+                    playbackMutedOverride = true;
+                  });
+                  applyVideoPlaybackFlags();
+                  void el.play().catch(() => {});
+                });
+              });
+            };
+
+            const onPlayingAfterMutedBootstrap = () => {
+              playingUnmuteListener = null;
+              tryRestoreAudioAfterMutedAutoplay();
+            };
+            playingUnmuteListener = onPlayingAfterMutedBootstrap;
+            el.addEventListener("playing", onPlayingAfterMutedBootstrap, {
+              once: true,
+            });
+
+            const p2 = el.play();
+            if (p2 !== undefined) {
+              p2.then(() => {
+                // `playing` may have fired before our listener ran; retry unmute once playback exists.
+                queueMicrotask(() => {
+                  if (
+                    cancelled ||
+                    mute_audio ||
+                    unmuteAfterMutedStartHandled ||
+                    el.paused
+                  ) {
+                    return;
+                  }
+                  if (!el.muted) {
+                    clearPlayingUnmuteListener();
+                    return;
+                  }
+                  tryRestoreAudioAfterMutedAutoplay();
+                });
+              }).catch(() => {
+                clearPlayingUnmuteListener();
+              });
+            }
+          }
         });
+      }
+    };
+
+    const onMediaReady = () => {
+      tryPlay();
+    };
+
+    if (el.readyState < HTMLMediaElement.HAVE_CURRENT_DATA) {
+      el.addEventListener("loadeddata", onMediaReady);
+      el.addEventListener("canplay", onMediaReady);
+    } else {
+      tryPlay();
+    }
+
+    /**
+     * Once per `video.url`: muted `play()` nudge helps iOS decode before `HAVE_CURRENT_DATA`.
+     * When `mute_audio` is false, `load()` reloads the media so poster/metadata can attach; unmuted
+     * autoplay may still require a user gesture (handled in `tryPlay`).
+     */
+    const nudgePlayback = () => {
+      applyVideoPlaybackFlags();
+
+      if (mute_audio) {
+        void el.play().catch(() => {});
+      } else {
+        try {
+          el.load();
+        } catch {
+          /* ignore */
+        }
+      }
+    };
+    if (needsBootstrap && el.readyState < HTMLMediaElement.HAVE_CURRENT_DATA) {
+      nudgePlayback();
+    }
+
+    /** Extra `tryPlay` ticks: next microtask vs next frame vs cold `load`; WebKit reordering varies. */
+    const deferTryPlayWithReadyGate = () => {
+      queueMicrotask(() => {
+        if (cancelled) return;
+        if (el.readyState >= HTMLMediaElement.HAVE_CURRENT_DATA) {
+          tryPlay();
+        }
+      });
+      requestAnimationFrame(() => {
+        if (cancelled) return;
+        if (el.readyState >= HTMLMediaElement.HAVE_CURRENT_DATA) {
+          tryPlay();
+        }
       });
+    };
+
+    deferTryPlayWithReadyGate();
+
+    const onWindowLoad = () => {
+      tryPlay();
+    };
+    if (typeof document !== "undefined" && typeof window !== "undefined") {
+      if (document.readyState === "complete") {
+        queueMicrotask(() => {
+          if (!cancelled) tryPlay();
+        });
+      } else {
+        window.addEventListener("load", onWindowLoad);
+      }
     }
+
+    return () => {
+      cancelled = true;
+      clearPlayingUnmuteListener();
+      el.removeEventListener("loadeddata", onMediaReady);
+      el.removeEventListener("canplay", onMediaReady);
+      if (typeof window !== "undefined") {
+        window.removeEventListener("load", onWindowLoad);
+      }
+    };
   });
 
   const isVisible = $derived(
@@ -262,9 +443,11 @@
             src={video.url}
             style="object-fit:{mapFitMode(fit_mode)}"
             {loop}
-            muted={mute_audio}
-            controls={show_controls || showControlsFallback}
+            muted={mute_audio || playbackMutedOverride}
+            controls={show_controls}
             playsinline
+            autoplay={auto_play}
+            preload={auto_play ? "auto" : "metadata"}
           >
             <track kind="captions" />
           </video>
@@ -352,4 +535,10 @@
     object-fit: contain;
     object-position: center;
   }
+
+  /* Own compositing layer — mitigates WebKit freezing video frames under animated/transform ancestors */
+  video {
+    transform: translateZ(0);
+    -webkit-transform: translateZ(0);
+  }
 </style>

package/dist/components/workflows/Screen.stories.svelte

@@ -1,5 +1,6 @@
 <script module lang="ts">
   import { defineMeta } from "@storybook/addon-svelte-csf";
+  import type { ComponentProps } from "svelte";
 
   import Screen from "./Screen.svelte";
   import { paywallData, uiConfigData } from "../../stories/fixtures";
@@ -20,6 +21,7 @@
   const { Story } = defineMeta({
     title: "Components/Screen",
     component: Screen,
+    render: template,
     args: {
       paywallComponents: defaultScreen,
       selectedLocale: defaultScreen.default_locale,
@@ -28,4 +30,41 @@
   });
 </script>
 
+{#snippet template(props: ComponentProps<typeof Screen>)}
+  <div class="viewport-frame">
+    <div class="content-wrapper">
+      <Screen {...props} />
+    </div>
+  </div>
+{/snippet}
+
 <Story name="Default" />
+
+<style>
+  .viewport-frame {
+    position: fixed;
+    inset: 0;
+    display: flex;
+    flex-direction: column;
+    background-color: var(--rc-purchases-ui-bg-color, Canvas);
+    color-scheme: light dark;
+    overflow: hidden;
+  }
+
+  .content-wrapper {
+    width: 100%;
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    min-height: 0;
+    overflow: hidden;
+  }
+
+  :global(#screen-container) {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow: hidden;
+  }
+</style>

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

@@ -1,4 +1,19 @@
 import type { ColorMode } from "../types";
 import type { Background } from "../types/background";
 import type { ColorGradientScheme } from "../types/colors";
+import type { PaywallData } from "../types/paywall";
+export type PaywallRootBackgroundModel = {
+    kind: "none";
+} | {
+    kind: "style";
+    style: Record<string, string>;
+    overlay: string;
+} | {
+    kind: "image";
+    src: string;
+    fit: string;
+    position: string;
+    overlay: string;
+};
+export declare function paywallRootBackgroundModel(paywallData: PaywallData | null | undefined, colorMode: ColorMode): PaywallRootBackgroundModel;
 export declare function mapBackground(colorMode: ColorMode, background_color: ColorGradientScheme | null | undefined, background: Background | null | undefined): Record<string, string>;

package/dist/utils/background-utils.js

@@ -23,6 +23,27 @@ function mapBackgroundValue(colorMode, background_color, background) {
     }
     return mapBackgroundVideo(colorMode, background.value);
 }
+export function paywallRootBackgroundModel(paywallData, colorMode) {
+    const background = paywallData?.components_config?.base?.background;
+    if (background == null) {
+        return { kind: "none" };
+    }
+    if (background.type !== "image") {
+        const styles = mapBackground(colorMode, null, background);
+        const overlay = styles["--overlay"] ?? "none";
+        const style = { ...styles };
+        delete style["--overlay"];
+        return { kind: "style", style, overlay };
+    }
+    const files = mapColorMode(colorMode, background.value);
+    return {
+        kind: "image",
+        src: files.webp,
+        fit: mapFitMode(background.fit_mode),
+        position: background.fit_mode === "fill" ? "center" : "top center",
+        overlay: mapOverlay(colorMode, background.color_overlay),
+    };
+}
 export function mapBackground(colorMode, background_color, background) {
     const value = mapBackgroundValue(colorMode, background_color, background);
     if (background?.type !== "image") {

package/dist/utils/document-background.d.ts

@@ -0,0 +1,3 @@
+import type { PaywallData } from "../types/paywall";
+import type { PaywallRootBackgroundModel } from "./background-utils";
+export declare function applyDocumentBackground(instanceId: symbol, model: PaywallRootBackgroundModel, paywallData: PaywallData | null | undefined): () => void;

package/dist/utils/document-background.js

@@ -0,0 +1,59 @@
+// Last writer wins, but cleanup only fires for the last writer — otherwise an
+// unmounting paywall would clear a variable set by another paywall that overlapped
+// it during a transition.
+let lastBgWriter = null;
+// iOS promotes sticky header/footer to its own compositor layer, which breaks
+// safe-area painting for the opposite strip. A vertical gradient's edge stop
+// can stand in as a solid fallback for that strip; any other angle would smear
+// a horizontal colour range across the strip that no single colour represents.
+function gradientSafeAreaFallbackColour(gradient, hasHeader, hasFooter) {
+    if (!hasHeader && !hasFooter)
+        return null;
+    if (hasHeader && hasFooter)
+        return null;
+    const angleMatch = gradient.match(/linear-gradient\((\d+)deg/);
+    if (!angleMatch)
+        return null;
+    if (parseInt(angleMatch[1], 10) % 180 !== 0)
+        return null;
+    const stops = gradient.match(/#[0-9a-fA-F]{6,8}/g);
+    if (!stops || stops.length < 2)
+        return null;
+    const candidate = hasHeader ? stops[stops.length - 1] : stops[0];
+    if (candidate.length === 9 && candidate.slice(-2).toLowerCase() !== "ff") {
+        return null;
+    }
+    return candidate;
+}
+// Published as a CSS variable so consumer surfaces can opt in to safe-area
+// painting (`background: var(--rc-purchases-ui-bg-color, Canvas)` on any
+// element that extends into the safe-area canvas — typically html, body, or
+// a position:fixed root). Writing to documentElement.backgroundColor directly
+// would bleed the paywall colour onto host page chrome that shouldn't take
+// it on, so we expose the value rather than apply it.
+export function applyDocumentBackground(instanceId, model, paywallData) {
+    if (typeof document === "undefined")
+        return () => { };
+    const root = document.documentElement;
+    let value = null;
+    if (model.kind === "style" && model.style.background) {
+        const bg = model.style.background;
+        if (!bg.includes("gradient")) {
+            value = bg;
+        }
+        else {
+            const base = paywallData?.components_config?.base;
+            value = gradientSafeAreaFallbackColour(bg, !!base?.header, !!base?.sticky_footer);
+        }
+    }
+    if (value !== null) {
+        lastBgWriter = instanceId;
+        root.style.setProperty("--rc-purchases-ui-bg-color", value);
+    }
+    return () => {
+        if (lastBgWriter === instanceId) {
+            lastBgWriter = null;
+            root.style.removeProperty("--rc-purchases-ui-bg-color");
+        }
+    };
+}

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.1",
+  "version": "4.1.0",
   "author": {
     "name": "RevenueCat, Inc."
   },
@@ -93,6 +93,7 @@
     "@testing-library/svelte": "^5.3.1",
     "@types/node": "24.9.2",
     "@types/qrcode": "^1.5.6",
+    "@types/react": "^19.2.14",
     "@typescript-eslint/parser": "8.57.2",
     "chromatic": "13.3.2",
     "eslint": "9.38.0",