@revenuecat/purchases-ui-js 4.8.6 → 4.8.8

package/dist/components/button/ButtonNode.svelte

@@ -10,7 +10,8 @@
     PackageSelectionSheetInteractionData,
   } from "../../types/paywall-component-interaction";
   import { getActiveStateProps } from "../../utils/style-utils";
-  import { readable } from "svelte/store";
+  import { fromStore, readable } from "svelte/store";
+  import { isWorkflowButtonInputGated } from "./button-input-gating";
 
   const props: ButtonProps = $props();
   type SheetAction = Extract<
@@ -35,13 +36,8 @@
   const validationContext = getInputValidationContext();
   const { getLocalizedString } = getLocalizationContext();
 
-  // Reactive store for input satisfaction (defaults to true if no validation context)
-  const inputSatisfied = validationContext?.isSatisfied ?? readable(true);
-
-  // Button is disabled when it's a workflow (continue) or complete_workflow action and inputs aren't satisfied
-  const isDisabled = $derived(
-    (action.type === "workflow" || action.type === "complete_workflow") &&
-      !$inputSatisfied,
+  const inputSatisfied = fromStore(
+    validationContext?.isSatisfied ?? readable(true),
   );
 
   const getButtonInteractionData = (): ButtonInteractionData => {
@@ -142,7 +138,15 @@
   });
 
   const onclick = () => {
-    if (isDisabled) return;
+    if (
+      isWorkflowButtonInputGated(
+        action.type,
+        props.require_valid_inputs,
+        inputSatisfied.current,
+      )
+    ) {
+      return;
+    }
     // For "workflow" actions, pass the component's own id so Workflow.svelte
     // can look it up in the step's triggers array (component ID → action ID).
     const actionId = action.type === "workflow" ? props.id : undefined;
@@ -177,14 +181,20 @@
         return true;
     }
   });
-
-  const style = $derived(
-    isDisabled
-      ? { opacity: "0.4", "pointer-events": "none", cursor: "not-allowed" }
-      : undefined,
-  );
 </script>
 
 {#if visible}
-  <Stack {...props.stack} {onclick} {style} testId={`button-${action.type}`} />
+  {@const isDisabled = isWorkflowButtonInputGated(
+    action.type,
+    props.require_valid_inputs,
+    inputSatisfied.current,
+  )}
+  <Stack
+    {...props.stack}
+    {onclick}
+    style={isDisabled
+      ? { opacity: "0.4", "pointer-events": "none", cursor: "not-allowed" }
+      : undefined}
+    testId={`button-${action.type}`}
+  />
 {/if}

package/dist/components/button/ButtonNodeTestWrapper.svelte

@@ -2,6 +2,10 @@
   import { setLocalizationContext } from "../../stores/localization";
   import { setPackageInfoContext } from "../../stores/packageInfo";
   import { setPaywallContext } from "../../stores/paywall";
+  import {
+    createInputValidationContext,
+    setInputValidationContext,
+  } from "../../stores/inputValidation";
   import { setVariablesContext } from "../../stores/variables";
   import { writable, readable } from "svelte/store";
   import ButtonNode from "./ButtonNode.svelte";
@@ -9,9 +13,23 @@
 
   interface Props extends ButtonProps {
     hideBackButtons?: boolean;
+    /** When set, seeds the shared input validation context (default: satisfied). */
+    inputsSatisfied?: boolean;
+    onSatisfactionChange?: (satisfied: boolean) => void;
   }
 
-  const { hideBackButtons = false, ...buttonProps }: Props = $props();
+  const {
+    hideBackButtons = false,
+    inputsSatisfied = true,
+    onSatisfactionChange,
+    ...buttonProps
+  }: Props = $props();
+
+  const validationContext = createInputValidationContext(inputsSatisfied);
+  setInputValidationContext(validationContext);
+  if (onSatisfactionChange) {
+    validationContext.isSatisfied.subscribe(onSatisfactionChange);
+  }
 
   setLocalizationContext(() => ({
     defaultLocale: "en_US",

package/dist/components/button/ButtonNodeTestWrapper.svelte.d.ts

@@ -1,6 +1,9 @@
 import type { ButtonProps } from "../../types/components/button";
 interface Props extends ButtonProps {
     hideBackButtons?: boolean;
+    /** When set, seeds the shared input validation context (default: satisfied). */
+    inputsSatisfied?: boolean;
+    onSatisfactionChange?: (satisfied: boolean) => void;
 }
 declare const ButtonNodeTestWrapper: import("svelte").Component<Props, {}, "">;
 type ButtonNodeTestWrapper = ReturnType<typeof ButtonNodeTestWrapper>;

package/dist/components/button/button-input-gating.d.ts

@@ -0,0 +1,3 @@
+import type { Action } from "../../types/components/button";
+/** Whether a workflow / complete_workflow button should be disabled. */
+export declare function isWorkflowButtonInputGated(actionType: Action["type"], requireValidInputs: boolean | undefined, inputsSatisfied: boolean): boolean;

package/dist/components/button/button-input-gating.js

@@ -0,0 +1,6 @@
+/** Whether a workflow / complete_workflow button should be disabled. */
+export function isWorkflowButtonInputGated(actionType, requireValidInputs, inputsSatisfied) {
+    return (requireValidInputs !== false &&
+        (actionType === "workflow" || actionType === "complete_workflow") &&
+        !inputsSatisfied);
+}

package/dist/components/footer/Footer.svelte

@@ -1,19 +1,16 @@
 <script lang="ts">
   import Stack from "../stack/Stack.svelte";
   import type { FooterProps } from "../../types/components/footer";
-  import { STICKY_OVERLAY_Z_INDEX } from "../../utils/constants";
 
   const { stack }: FooterProps = $props();
 </script>
 
-<div style="z-index: {STICKY_OVERLAY_Z_INDEX};">
+<div>
   <Stack {...stack} />
 </div>
 
 <style>
   div {
-    position: sticky;
-    bottom: 0;
     width: 100%;
 
     display: flex;

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

@@ -73,6 +73,12 @@
 
   function commitValue(input: HTMLInputElement) {
     const value = input.value.trim();
+    if (keyboard_type === "password") {
+      // Sensitive value: never emit through the persisted onInputChanged path.
+      // Hosts keep it in memory only (no storage, analytics, or attributes).
+      onSensitiveInputChanged?.(field_id, value);
+      return;
+    }
     if (reserved_attribute) {
       if (!onReservedAttributeChanged) {
         console.error("onReservedAttributeChanged is not set");
@@ -118,6 +124,7 @@
   const {
     uiConfig,
     onInputChanged,
+    onSensitiveInputChanged,
     onReservedAttributeChanged,
     selectedPackageId,
   } = getPaywallContext();
@@ -196,6 +203,8 @@
         return "number";
       case "email":
         return "email";
+      case "password":
+        return "password";
       case "tel":
         return "tel";
       case "text":
@@ -205,6 +214,12 @@
     }
   });
 
+  // `password` is not a valid `inputmode`; masking is handled by `type` above, so
+  // fall back to the default text keyboard for it.
+  const inputMode = $derived.by((): HTMLInputAttributes["inputmode"] =>
+    keyboard_type === "password" ? "text" : keyboard_type,
+  );
+
   const isVisible = $derived(
     evaluateVisibilityConditions(
       {
@@ -232,7 +247,7 @@
       {type}
       {placeholder}
       {required}
-      inputmode={keyboard_type}
+      inputmode={inputMode}
       autocapitalize={capitalize}
       style={inputStyle}
       {oninput}

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

@@ -10,15 +10,28 @@
   import { setVariablesContext } from "../../stores/variables";
   import { readable, writable } from "svelte/store";
   import InputText from "./InputText.svelte";
-  import type { InputTextProps } from "../../types/components/input-text";
+  import type {
+    InputTextProps,
+    ReservedAttribute,
+  } from "../../types/components/input-text";
 
   interface Props extends InputTextProps {
     onInputChanged?: (fieldId: string, value: string) => void;
+    onSensitiveInputChanged?: (fieldId: string, value: string) => void;
+    onReservedAttributeChanged?: (
+      reservedAttribute: ReservedAttribute,
+      value: string,
+    ) => void;
     onSatisfactionChange?: (satisfied: boolean) => void;
   }
 
-  const { onInputChanged, onSatisfactionChange, ...inputTextProps }: Props =
-    $props();
+  const {
+    onInputChanged,
+    onSensitiveInputChanged,
+    onReservedAttributeChanged,
+    onSatisfactionChange,
+    ...inputTextProps
+  }: Props = $props();
 
   const validationContext = createInputValidationContext();
   setInputValidationContext(validationContext);
@@ -43,6 +56,8 @@
     emitComponentInteraction: () => {},
     onButtonAction: () => {},
     onInputChanged,
+    onSensitiveInputChanged,
+    onReservedAttributeChanged,
     uiConfig: { app: { fonts: {} } } as never,
     hideBackButtons: false,
   });

package/dist/components/input-text/InputTextTestWrapper.svelte.d.ts

@@ -1,6 +1,8 @@
-import type { InputTextProps } from "../../types/components/input-text";
+import type { InputTextProps, ReservedAttribute } from "../../types/components/input-text";
 interface Props extends InputTextProps {
     onInputChanged?: (fieldId: string, value: string) => void;
+    onSensitiveInputChanged?: (fieldId: string, value: string) => void;
+    onReservedAttributeChanged?: (reservedAttribute: ReservedAttribute, value: string) => void;
     onSatisfactionChange?: (satisfied: boolean) => void;
 }
 declare const InputTextTestWrapper: import("svelte").Component<Props, {}, "">;

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

@@ -39,6 +39,11 @@
     DUELINGUE_PAYWALL,
   } from "./fixtures/express-purchase-button-paywall";
   import { CustomVariableValue } from "../../types/variables";
+  import {
+    paywallWithTransparentFooter,
+    paywallWithCenteredBodyAndFooter,
+    paywallWithHeaderAndFooter,
+  } from "./fixtures/transparent-footer-paywall";
 
   const { Story } = defineMeta({
     title: "Example/Paywall",
@@ -480,6 +485,28 @@
   }}
 />
 
+<Story
+  name="Sticky Footer - transparent (overlaps content)"
+  args={{
+    paywallData: paywallWithTransparentFooter,
+  }}
+/>
+
+<Story
+  name="Sticky Footer - centered body above footer"
+  decorators={[viewportDecorator(500, 500, 0)]}
+  args={{
+    paywallData: paywallWithCenteredBodyAndFooter,
+  }}
+/>
+
+<Story
+  name="Sticky Footer - with header"
+  args={{
+    paywallData: paywallWithHeaderAndFooter,
+  }}
+/>
+
 <Story
   name="Header"
   args={{

package/dist/components/paywall/Paywall.svelte

@@ -93,6 +93,11 @@
       value: string,
       actionId?: string,
     ) => void;
+    /**
+     * Called for sensitive inputs (keyboard_type: "password") instead of
+     * onInputChanged, so hosts can keep the value in memory only.
+     */
+    onSensitiveInputChanged?: (fieldId: string, value: string) => void;
     onReservedAttributeChanged?: (
       reservedAttribute: ReservedAttribute,
       value: string,
@@ -141,6 +146,7 @@
     uiConfig,
     walletButtonRender,
     onInputChanged,
+    onSensitiveInputChanged,
     onReservedAttributeChanged,
     hideBackButtons = false,
     maxContentWidth,
@@ -309,6 +315,7 @@
     onNavigateToUrl: onNavigateToUrlClicked,
     onButtonAction,
     onInputChanged,
+    onSensitiveInputChanged,
     onReservedAttributeChanged,
     walletButtonRender,
     uiConfig,
@@ -352,6 +359,13 @@
   const pullContentUnderHeader = !!header && firstComponentIsFullWidthImage;
 
   let headerHeight = $state(0);
+  let footerHeight = $state(0);
+
+  const contentColumnStyle = $derived(
+    maxContentWidth
+      ? `max-width: ${maxContentWidth}; margin-inline: auto;`
+      : "",
+  );
 </script>
 
 <svelte:boundary onerror={onError}>
@@ -366,19 +380,16 @@
         <Header {...header} />
       </div>
     {/if}
-    <div
-      class="paywall-content"
-      style={[
-        maxContentWidth
-          ? `max-width: ${maxContentWidth}; margin-inline: auto;`
-          : "",
-      ]
-        .filter(Boolean)
-        .join(" ")}
-    >
+    <div class="paywall-content" style={contentColumnStyle}>
       <Stack
         {...stack}
         class="paywall-content-scroll"
+        padding={sticky_footer
+          ? {
+              ...stack.padding,
+              bottom: (stack.padding?.bottom ?? 0) + footerHeight,
+            }
+          : stack.padding}
         style={{
           height: "auto",
           ...(pullContentUnderHeader
@@ -386,10 +397,19 @@
             : {}),
         }}
       />
-      {#if sticky_footer}
-        <Footer {...sticky_footer} />
-      {/if}
     </div>
+    {#if sticky_footer}
+      <!-- Overlaps the content so translucent footers show it; sticky rather than
+        absolute so it stays visible when an ancestor scrollport is shorter than
+        the paywall. -->
+      <div
+        class="footer-wrapper"
+        style="z-index: {STICKY_OVERLAY_Z_INDEX}; margin-top: -{footerHeight}px; {contentColumnStyle}"
+        bind:clientHeight={footerHeight}
+      >
+        <Footer {...sticky_footer} />
+      </div>
+    {/if}
   </div>
 
   {#if sheet}
@@ -422,6 +442,13 @@
     width: 100%;
   }
 
+  .footer-wrapper {
+    position: sticky;
+    bottom: 0;
+    width: 100%;
+    flex-shrink: 0;
+  }
+
   .paywall-content {
     z-index: 2;
     width: 100%;

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

@@ -44,6 +44,11 @@ interface Props {
     hideBackButtons?: boolean;
     walletButtonRender?: WalletButtonRender;
     onInputChanged?: (fieldId: string, value: string, actionId?: string) => void;
+    /**
+     * Called for sensitive inputs (keyboard_type: "password") instead of
+     * onInputChanged, so hosts can keep the value in memory only.
+     */
+    onSensitiveInputChanged?: (fieldId: string, value: string) => void;
     onReservedAttributeChanged?: (reservedAttribute: ReservedAttribute, value: string) => void;
     maxContentWidth?: string;
     initialInputSelections?: InitialInputSelections;

package/dist/components/paywall/fixtures/transparent-footer-paywall.d.ts

@@ -0,0 +1,7 @@
+import type { PaywallData } from "../../../types/paywall";
+/** Translucent sticky footer over long scrollable content. */
+export declare const paywallWithTransparentFooter: PaywallData;
+/** Small body that must center in the space above the footer, not the whole screen. */
+export declare const paywallWithCenteredBodyAndFooter: PaywallData;
+/** Header and sticky footer together: the footer overlay must not affect the header. */
+export declare const paywallWithHeaderAndFooter: PaywallData;

package/dist/components/paywall/fixtures/transparent-footer-paywall.js

@@ -0,0 +1,59 @@
+import { paywallWithFooter, paywallWithHeader } from "../../../stories/fixtures";
+function footerStack(paywall) {
+    const footer = paywall.components_config.base.sticky_footer;
+    if (!footer) {
+        throw new Error("Fixture has no sticky footer");
+    }
+    return footer.stack;
+}
+function lastTextComponent(components) {
+    return components.findLast((component) => component.type === "text");
+}
+/** Duplicates the last text component so the content is tall enough to scroll. */
+function appendScrollableContent(paywall, count) {
+    const components = paywall.components_config.base.stack.components;
+    const lastText = lastTextComponent(components);
+    if (!lastText) {
+        return;
+    }
+    for (let index = 0; index < count; index++) {
+        const copy = structuredClone(lastText);
+        copy.id = `scroll-filler-${index}`;
+        components.push(copy);
+    }
+}
+function setFooterBackground(paywall, hex) {
+    footerStack(paywall).background_color = {
+        light: { type: "hex", value: hex },
+    };
+}
+/** Translucent sticky footer over long scrollable content. */
+export const paywallWithTransparentFooter = (() => {
+    const paywall = structuredClone(paywallWithFooter);
+    appendScrollableContent(paywall, 25);
+    setFooterBackground(paywall, "#057C5BAA");
+    return paywall;
+})();
+/** Small body that must center in the space above the footer, not the whole screen. */
+export const paywallWithCenteredBodyAndFooter = (() => {
+    const paywall = structuredClone(paywallWithFooter);
+    const stack = paywall.components_config.base.stack;
+    const lastText = lastTextComponent(stack.components);
+    stack.components = lastText ? [lastText] : [];
+    stack.dimension.distribution = "center";
+    setFooterBackground(paywall, "#057C5BAA");
+    return paywall;
+})();
+/** Header and sticky footer together: the footer overlay must not affect the header. */
+export const paywallWithHeaderAndFooter = (() => {
+    const paywall = structuredClone(paywallWithFooter);
+    appendScrollableContent(paywall, 15);
+    const headerDonor = structuredClone(paywallWithHeader);
+    paywall.components_config.base.header =
+        headerDonor.components_config.base.header;
+    paywall.components_localizations.en_US = {
+        ...paywall.components_localizations.en_US,
+        ...headerDonor.components_localizations.en_US,
+    };
+    return paywall;
+})();

package/dist/components/web-view/WebView.svelte

@@ -56,17 +56,23 @@
   let fitWidth = $state<number | undefined>(undefined);
   let fitHeight = $state<number | undefined>(undefined);
 
+  const fitAxisFallback = (axis: typeof props.size.width): number =>
+    axis.type === "fit" && typeof axis.default === "number"
+      ? axis.default
+      : FIT_FALLBACK_SIZE_PX;
+
   const style = $derived.by(() => {
     const { width, height } = props.size;
     const widthFit = width.type === "fit";
     const heightFit = height.type === "fit";
     // Pin a `fit` axis with an explicit size. `flex-shrink: 0` keeps flex parents
     // from collapsing the box; avoid mirroring the size in `min-*` or it beats `max-*`.
+    // Prefer author-declared `default` when present; else the hard 300px fallback.
     const fitWidthPx = widthFit
-      ? clampFitSize(fitWidth ?? FIT_FALLBACK_SIZE_PX)
+      ? clampFitSize(fitWidth ?? fitAxisFallback(width))
       : null;
     const fitHeightPx = heightFit
-      ? clampFitSize(fitHeight ?? FIT_FALLBACK_SIZE_PX)
+      ? clampFitSize(fitHeight ?? fitAxisFallback(height))
       : null;
     return css({
       width: fitWidthPx != null ? px(fitWidthPx) : mapSize(width),

package/dist/components/workflows/Screen.svelte

@@ -32,6 +32,11 @@
       value: string,
       actionId?: string,
     ) => void;
+    /**
+     * Called for sensitive inputs (keyboard_type: "password") instead of
+     * onInputChanged, so hosts can keep the value in memory only.
+     */
+    onSensitiveInputChanged?: (fieldId: string, value: string) => void;
     onReservedAttributeChanged?: (
       reservedAttribute: ReservedAttribute,
       value: string,
@@ -61,6 +66,7 @@
     infoPerPackage,
     initialInputSelections = {},
     onInputChanged,
+    onSensitiveInputChanged,
     onReservedAttributeChanged,
     onCompleteWorkflowNavigate,
     onNavigateToUrlClicked,
@@ -100,6 +106,7 @@
       {onComponentInteraction}
       {onPurchaseClicked}
       {onInputChanged}
+      {onSensitiveInputChanged}
       {onReservedAttributeChanged}
       {walletButtonRender}
       {safeAreaFallbackColor}

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

@@ -23,6 +23,11 @@ interface Props {
     infoPerPackage?: Record<string, PackageInfo>;
     initialInputSelections?: InitialInputSelections;
     onInputChanged?: (fieldId: string, value: string, actionId?: string) => void;
+    /**
+     * Called for sensitive inputs (keyboard_type: "password") instead of
+     * onInputChanged, so hosts can keep the value in memory only.
+     */
+    onSensitiveInputChanged?: (fieldId: string, value: string) => void;
     onReservedAttributeChanged?: (reservedAttribute: ReservedAttribute, value: string) => void;
     onCompleteWorkflowNavigate?: (args: CompleteWorkflowNavigateArgs) => void | Promise<void>;
     onNavigateToUrlClicked?: (url: string) => void;

package/dist/components/workflows/Workflow.svelte

@@ -49,6 +49,11 @@
       value: string,
       actionId?: string,
     ) => void;
+    /**
+     * Called for sensitive inputs (keyboard_type: "password") instead of
+     * onInputChanged, so hosts can keep the value in memory only.
+     */
+    onSensitiveInputChanged?: (fieldId: string, value: string) => void;
     onReservedAttributeChanged?: (
       reservedAttribute: ReservedAttribute,
       value: string,
@@ -84,6 +89,7 @@
     onPurchaseClicked,
     onActionTriggered,
     onInputChanged,
+    onSensitiveInputChanged,
     onReservedAttributeChanged,
     onCompleteWorkflowNavigate,
     onNavigateToUrlClicked,
@@ -303,6 +309,7 @@
     {onPurchaseClicked}
     onActionTriggered={handleActionTriggered}
     {onInputChanged}
+    {onSensitiveInputChanged}
     {onReservedAttributeChanged}
     {onCompleteWorkflowNavigate}
     {onNavigateToUrlClicked}

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

@@ -21,6 +21,11 @@ interface Props {
     onPurchaseClicked?: (packageId: string, actionId: string) => void | Promise<void>;
     onActionTriggered?: (actionId: string) => void;
     onInputChanged?: (fieldId: string, value: string, actionId?: string) => void;
+    /**
+     * Called for sensitive inputs (keyboard_type: "password") instead of
+     * onInputChanged, so hosts can keep the value in memory only.
+     */
+    onSensitiveInputChanged?: (fieldId: string, value: string) => void;
     onReservedAttributeChanged?: (reservedAttribute: ReservedAttribute, value: string) => void;
     onCompleteWorkflowNavigate?: (args: CompleteWorkflowNavigateArgs) => void | Promise<void>;
     onNavigateToUrlClicked?: (url: string) => void;

package/dist/stores/inputValidation.d.ts

@@ -8,7 +8,7 @@ interface InputValidationContext {
     isSatisfied: Readable<boolean>;
     updateSatisfaction: (satisfied: boolean) => void;
 }
-export declare function createInputValidationContext(): InputValidationContext;
+export declare function createInputValidationContext(initiallySatisfied?: boolean): InputValidationContext;
 export declare function setInputValidationContext(context: InputValidationContext): void;
 export declare function getInputValidationContext(): InputValidationContext | undefined;
 export declare function setInitialInputSelectionsContext(selections: InitialInputSelections): void;

package/dist/stores/inputValidation.js

@@ -2,8 +2,8 @@ import { getContext, setContext } from "svelte";
 import { writable } from "svelte/store";
 const key = Symbol("inputValidation");
 const initialSelectionsKey = Symbol("initialInputSelections");
-export function createInputValidationContext() {
-    const isSatisfied = writable(true);
+export function createInputValidationContext(initiallySatisfied = true) {
+    const isSatisfied = writable(initiallySatisfied);
     const updateSatisfaction = (satisfied) => {
         isSatisfied.set(satisfied);
     };

package/dist/stores/paywall.d.ts

@@ -22,6 +22,12 @@ type PaywallContext = Readonly<{
     emitComponentInteraction: (data: ComponentInteractionData) => void;
     onNavigateToUrl?: (url: string) => void;
     onInputChanged?: (fieldId: string, value: string, actionId?: string) => void;
+    /**
+     * Called for sensitive inputs (keyboard_type: "password") instead of
+     * onInputChanged, so hosts can keep the value in memory only and never
+     * persist, log, or forward it.
+     */
+    onSensitiveInputChanged?: (fieldId: string, value: string) => void;
     onReservedAttributeChanged?: (reservedAttribute: ReservedAttribute, value: string) => void;
     walletButtonRender?: WalletButtonRender;
     onWalletButtonReady?: (walletButtonAvailable?: boolean) => void;

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

@@ -63,5 +63,11 @@ export interface ButtonProps extends BaseComponent {
     stack: StackProps;
     transition?: null;
     overrides?: Overrides<ButtonProps>;
+    /**
+     * When false, workflow / complete_workflow buttons stay enabled even if
+     * required inputs on the screen are empty. Hosts (e.g. rc-workflows) may set
+     * this at runtime for auth cross-links; it is not persisted in paywall JSON.
+     */
+    require_valid_inputs?: boolean;
 }
 export {};

package/dist/types/components/input-text.d.ts

@@ -4,7 +4,7 @@ import type { BaseComponent } from "../base";
 import type { ColorGradientScheme } from "../colors";
 import type { Overrides } from "../overrides";
 export type InputTextCapitalizeType = "none" | "sentences" | "words" | "characters";
-export type InputTextKeyboardType = "decimal" | "email" | "numeric" | "tel" | "text" | "url";
+export type InputTextKeyboardType = "decimal" | "email" | "numeric" | "password" | "tel" | "text" | "url";
 export type ReservedAttribute = "$email" | "$displayName" | "$phoneNumber";
 export interface InputTextProps extends BaseComponent {
     type: "input_text";

package/dist/types.d.ts

@@ -48,11 +48,17 @@ type RelativeSize = {
     type: "relative";
     value: number;
 };
-type FitFillSize = {
-    type: "fit" | "fill";
+type FitSize = {
+    type: "fit";
     value?: null;
+    /** Placeholder px until the content reports its measured size. */
+    default?: number;
 };
-export type Size = FixedSize | RelativeSize | FitFillSize;
+type FillSize = {
+    type: "fill";
+    value?: null;
+};
+export type Size = FixedSize | RelativeSize | FitSize | FillSize;
 export type SizeType = {
     width: Size;
     height: Size;

package/package.json

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