@namiml/web-sdk 1.6.3 → 1.7.0

package/CHANGELOG.md

@@ -1,15 +1,41 @@
-# Changelog
+# Nami Web SDK Changelog
 
-## 1.6.2 (July 29, 2025)
+## 1.7.0
+**Release Date:** August 27, 2025
+
+### Enhancements
+- Add new components (Form container, Toggle switch, Radio button)
+- Support Flow Smart Text Variables
+- Support Flow animations / transitions
+- Smart TV Back button support
+- Support for buy / select sku Flow handoffs
+
+### Bug Fixes
+- QR Code component (scaling and non-hex colors)
+
+## 1.6.4  
+**Release Date:** August 6, 2025
+
+### Enhancements
+- Improved directional navigation support for TV and custom Nami components
+- Pass launch context in flows for better paywall context handling
+
+### Bug Fixes
+- Prevent scrolling on TV form factor (Content and Background containers)
+- Fix for handling unexpected SKU smart text variables
+
+## 1.6.3  
+**Release Date:** July 29, 2025
 
 ### Enhancements
 - Improved television layout scaling for various viewport sizes
 
-## 1.6.2 (July 28, 2025)
+## 1.6.2  
+**Release Date:** July 28, 2025
 
 ### New Features
-- **Nami.sdkVersion** - Method to get the internal SDK version
-- Added support for QR Code components
+- `Nami.sdkVersion` method to get the internal SDK version
+- Support for QR Code components
 - On Device Segment Selection for A/B testing
 - Support Base64, Gzipped Initial Configurations
 - Support Fully Uppercase Text Components
@@ -20,18 +46,20 @@
 ### Bug Fixes
 - Dynamic widths on Responsive Grid components
 
-## 1.6.1 (July 13, 2025)
+## 1.6.1  
+**Release Date:** July 13, 2025
 
 ### Improvements
 - Fix type exports in declaration files
 
-## 1.6.0 (July 10, 2025)
+## 1.6.0  
+**Release Date:** July 10, 2025
 
 ### New Features
-- **NamiFlowManager** - Introduced `NamiFlowManager` for orchestrating multi-page flows.
-  - **NamiFlowManager.registerStepHandoff** - Method to register a callback that is called when a flow is handed off.
-  - **NamiFlowManager.registerEventHandler** - Method to register a callback that is called for flow analytics.
-  - **NamiFlowManager.resume** - Method to call after a flow is handed off, to resume the flow.
+- Introduced `NamiFlowManager` for orchestrating multi-page flows
+  - `NamiFlowManager.registerStepHandoff`: callback when a flow is handed off
+  - `NamiFlowManager.registerEventHandler`: callback for flow analytics
+  - `NamiFlowManager.resume`: resume a handed-off flow
 
 ### UI Enhancements
 - Default Focused Buttons
@@ -39,239 +67,224 @@
 
 ### Accessibility
 - Screenreader support for videos
-- Screenreader hints have been added
+- Screenreader hints added
 
 ### Performance
 - Better support handling multiple `Nami.configure` calls
 - General stability fixes
 
-## 1.5.11 (June 18, 2025)
+## 1.5.12  
+**Release Date:** July 30, 2025
+
+### Bug Fixes
+- Fix race condition when local storage fails
 
-## Enhancements
+## 1.5.11  
+**Release Date:** June 18, 2025
+
+### Enhancements
 - Performance improvements for form factor lookups
 
-## Bugfixes
+### Bug Fixes
 - Fix uninterpolated smart text
 - Fix fallback to in-memory storage on localStorage write failures
 
-## 1.5.10 (May 22, 2025)
+## 1.5.10  
+**Release Date:** May 22, 2025
 
-## Enhancements
+### Enhancements
 - Support focused styling on buttons and toggle
 - Support tab key focus for collapsible component
 - Support alt tags on images
 
-## Bugfixes
+### Bug Fixes
 - Fix toggle switch not preserving state on re-render
 - Fix additional spacing in text list items
 - Fix issue with screenreader and collapsed content
 
-## 1.5.9 (Apr 2, 2025)
+## 1.5.9  
+**Release Date:** April 2, 2025
 
-## Bugfixes
+### Bug Fixes
 - Resolve incorrect downscaling on 720p TV devices
 
-## 1.5.8 (Apr 1, 2025)
+## 1.5.8  
+**Release Date:** April 1, 2025
 
-## Bugfixes
-- Resolve an issue where toggle component event was firing twice
-- Resolve an issue where toogle switch state was re-rendering due to parent page
-- Resolve an issue where additional spacing was being applied
+### Bug Fixes
+- Resolve issue where toggle component event was firing twice
+- Fix toggle switch state re-rendering due to parent page
+- Remove additional unintended spacing
 
-## 1.5.7 (Feb 20, 2025)
+## 1.5.7  
+**Release Date:** February 20, 2025
 
-## Bugfixes
+### Bug Fixes
 - Resolve additional type issue encountered with certain initial config files
 
-## 1.5.6 (Feb 19, 2025)
+## 1.5.6  
+**Release Date:** February 19, 2025
 
-## Bugfixes
+### Bug Fixes
 - Resolve type issue encountered with certain initial config files
 
-## 1.5.5 (January 16, 2025)
+## 1.5.5  
+**Release Date:** January 16, 2025
 
-## Enhancements
-- Add optional `purchaseChannel` to `NamiConfiguration` to pass through to `NamiPaywallEvent`  analytics
+### Enhancements
+- Add optional `purchaseChannel` to `NamiConfiguration` to pass through to `NamiPaywallEvent` analytics
 
-## 1.5.4 (November 29, 2024)
+## 1.5.4  
+**Release Date:** November 29, 2024
 
-## Bugfixes
-- Resolve issue with TV focus with containers and product button on first load
+### Bug Fixes
+- Resolve issue with TV focus on containers and product buttons on first load
 
-## 1.5.3 (November 21, 2024)
+## 1.5.3  
+**Release Date:** November 21, 2024
 
-## Bugfixes
-- Resolve an issue where the collapse component caret icon was not updating when expanded
+### Bug Fixes
+- Fix collapse component caret icon not updating when expanded
 
-## Enhancements
-- Support scaling on TV devices for optimal display on 720p, 1080p, 4K, and 8K devices
+### Enhancements
+- Support scaling on TV devices (720p, 1080p, 4K, and 8K)
 
-## 1.5.2 (October 24, 2024)
+## 1.5.2  
+**Release Date:** October 24, 2024
 
-## Bugfixes
-- Fix an issue where the wrong campaign rule was being used for a given placement label
-- Fix issue where the wrong initial config campaign rule was being used
-- Fix an issue where background video on mobile goes into full screen player
-- Fix an issue with focus events on connected TV platforms
-- Fix an issue with login / logout state handling
-- Fix an issue with free trial and promotional offer display
-- Fix several UI issues with carousel and stack components
+### Bug Fixes
+- Fix wrong campaign rule used for placement labels
+- Fix initial config campaign rule mapping
+- Fix background video fullscreen on mobile
+- Fix focus events on connected TV
+- Fix login/logout state handling
+- Fix display of free trials and promotional offers
+- Fix multiple UI issues in carousel and stack components
 
-## 1.5.1 (October 2, 2024)
+## 1.5.1  
+**Release Date:** October 2, 2024
 
-## Enhancements
+### Enhancements
 - Add `TOGGLE_CHANGE` and `PAGE_CHANGE` paywall events
 
-## Bugfixes
+### Bug Fixes
 - Fix carousel component swiper
-- Fix flex alignment
-- Fix hero video not redenering correctly in Safari
+- Fix flex alignment issues
+- Fix Safari rendering for hero video
 
-## 1.5.0 (September 26, 2024)
+## 1.5.0  
+**Release Date:** September 26, 2024
 
-## New Features
-- Support for advanced video features
-- Support for carousel component
+### New Features
+- Advanced video feature support
+- Carousel component support
 
-## Enhancements
+### Enhancements
 - Improve fallback data handling
-- Support repeatable list inside collapse component
-- Support vertical alignment on product container
+- Support repeatable lists inside collapse components
+- Support vertical alignment in product container
 - Align `removeAllListeners` behavior with RN SDK
 
-## Bugfixes
-- Fix segment picker cursor
-- Fix hidden component handling
+### Bug Fixes
+- Fix segment picker cursor behavior
+- Fix hidden component visibility
 - Fix responsive grid spacing and scrolling
-- Fix background video and gradient container
-- Fix background video position
+- Fix background video gradient and position
 
-## 1.4.0 (September 5, 2024)
+## 1.4.0  
+**Release Date:** September 5, 2024
 
-## New Features
-- Support for HLS in Video component
-- Support for Responsive Grid component
-- Add `NamiCustomerManager.deviceId`
-- Add `NamiCustomerManager.registerJourneyStateHandler`, `journeyState` (subscription management-only)
-- Add `NamiEntitlementManager.clearProvisionalEntitlementGrants` (subscription management-only)
+### New Features
+- HLS support in Video component
+- Responsive Grid component support
+- `NamiCustomerManager.deviceId` added
+- `NamiCustomerManager.registerJourneyStateHandler` and `journeyState` (subscription management)
+- `NamiEntitlementManager.clearProvisionalEntitlementGrants` (subscription management)
 
-## Enhancements
-- Allow passing product groups to paywall via campaign launch
+### Enhancements
+- Pass product groups to paywall via campaign launch
 
-## Bug Fixes
-- Find product by id rather than name
-- Fix text component spacing issue
+### Bug Fixes
+- Find product by ID instead of name
+- Fix spacing in text component
 
-## Improvements
-- Modify type definitions for `NamiPaywallManager.registerSignInHandler`, `NamiPaywallManager.registerCloseHandler`, `NamiPaywallManager.registerBuySkuHandler`, `NamiPaywallManager.registerDeeplinkActionHandler`, `NamiCustomerManager.registerAccountStateHandler`, `NamiCampaignManager.launch` handlers to match Nami React Native SDK
+### Improvements
+- Update type definitions across paywall manager and customer manager APIs
 
-## 1.3.2 (August 14, 2024)
+## 1.3.2  
+**Release Date:** August 14, 2024
 
 ### Bug Fixes
-  - Support Conditional components based on product entitlement
-  - Respect conditions based on product groups
+- Conditional component rendering based on product entitlement and product groups
 
-## 1.3.1 (August 12, 2024)
+## 1.3.1  
+**Release Date:** August 12, 2024
 
 ### Bug Fixes
-  - `SHOW_PAYWALL` event action is being triggered as `UNKNOWN`
+- Fix `SHOW_PAYWALL` event being triggered as `UNKNOWN`
 
-## 1.3.0 (August 12, 2024)
+## 1.3.0  
+**Release Date:** August 12, 2024
 
 ### New Features
-- **NamiEntitlementManager** - Implemented `NamiEntitlementManager` for Nami to manage entitlements.
-- **NamiEntitlementManager.active** - Retrieve all active entitlements for a user on the current device.
-- **NamiEntitlementManager.isEntitlementActive** - Check if a single entitlement is currently active.
-- **NamiEntitlementManager.refresh** - Manually trigger a refresh of the user's latest active entitlements from the Nami services.
-- **NamiEntitlementManager.registerActiveEntitlementsHandler** - Register a callback to react to a potential changes to the active entitlements for the user
-- **NamiEntitlement** - Object that contains data about an entitlement on the Nami Platform.
-- **Support hidden components** - Hide components without removing them from your paywalls.
-- **New components** - Video and collapsable components.
-- **Improved timeout and error handling**
+- `NamiEntitlementManager` to manage entitlements
+  - `active`, `isEntitlementActive`, `refresh`, `registerActiveEntitlementsHandler`
+- `NamiEntitlement` object model
+- Hidden component support
+- New components: Video and collapsible
+- Timeout and error handling improvements
 
 ### Bug Fixes
-- Provide consistent typing with other Nami SDKs.
-- Updated the JavaScript version to ECMAScript2021 for better backward compatability.
+- Typing improvements across SDKs
+- ECMAScript 2021 support
 
-### Breaking changes
-- `NamiConfiguration`'s `appPlatformId` is now `appPlatformID` for consistentcy with other Nami SDKs
-- `NamiPaywallManager.buySkuComplete` has a much simpler (but modified) interface.
+### Breaking Changes
+- `appPlatformId` renamed to `appPlatformID` in `NamiConfiguration`
+- `NamiPaywallManager.buySkuComplete` interface simplified
 
-## 1.2.0 (July 26, 2024)
+## 1.2.0  
+**Release Date:** July 26, 2024
 
 ### New Features
-- **NamiCampaignManager.launch** - Implemented `paywallLaunchContext` in `NamiCampaignManager.launch` in order to provide the paywall additional details.
-- **NamiPaywallManager.buySKUCancel** - Implemented `NamiPaywallManager.buySKUCancel` to let Nami know the user has canceled their paywall purchase.
-- **NamiPayallManager.buySKUComplete** - Implemented `NamiPaywallManager.buySKUComplete` to let Nami know the user has completed their paywall purchase.
-- **Impression / Conversion Reporting** - Implemented impression / conversion reporting for paywall analytics.
-- **Improved paywall load time** - Paywalls render signficantly faster when immediately displayed.
+- `NamiCampaignManager.launch`: supports `paywallLaunchContext`
+- `NamiPaywallManager.buySKUCancel` and `buySKUComplete`
+- Paywall impression and conversion reporting
+- Faster paywall render time
 
 ### Bug Fixes
-- Provide consistent typing with other Nami SDKs.
-- Provide consistent APIs with other Nami SDKs.
+- Consistent typing and API alignment across SDKs
 
-## 1.1.0 (June 24, 2024)
+## 1.1.0  
+**Release Date:** June 24, 2024
 
 ### New Features
-- **NamiCustomerManager.setAnonymousMode** - Method to enable anonymous mode for the customer, concealing their identity from system tracking for privacy.
-- **NamiCampaignManager.launch** - Implemented the `paywallActionHandler` to allow registering a callback to receive paywall-related events.
-- **NamiPaywallManager.registerBuySkuHandler** - Method to register a callback invoked when the user initiates a purchase action.
+- `NamiCustomerManager.setAnonymousMode`
+- `NamiCampaignManager.launch` with `paywallActionHandler`
+- `NamiPaywallManager.registerBuySkuHandler`
 
 ### Bug Fixes
-- Resolved compatibility issues with the Lit web component library and server-side rendering.
-- Fixed rendering issues with subscription periods and pricing in paywalls.
-- Fixed connectivity issues related to custom API hosts.
-- Enhanced the display for different icons.
+- Lit component compatibility and SSR fixes
+- Subscription pricing rendering fixes
+- Custom API host connectivity fixes
+- Icon display improvements
 
 ### Known Issues
-- `NamiPaywallManager`'s `buySkuComplete` and `buySkuCancel` methods are not fully implemented.
-- Impression or conversion reporting not yet implemented.
-- Launch context is not yet implemented.
+- `buySkuComplete`, `buySkuCancel` not fully implemented
+- Impression/conversion reporting and launch context not implemented
 
-## 1.0.0 (June 13, 2024)
+## 1.0.0  
+**Release Date:** June 13, 2024
 
 ### New Features
-- **Nami** - Introduced `Nami` to provide core functionality to initialize the SDK.
-  - **Nami.configure** -Method to initialize and configure the SDK using a `NamiConfiguration` object.
-  - **NamiConfiguration** - Defines the structure of the configuration object used by `Nami.configure`.
-  - **NamiLanguageCodes** - Defines the languages supported by Nami paywalls.
-
- - **NamiCampaignManager** - Introduced `NamiCampaignManager` to launch paywalls and manage campaigns.
-   - **NamiCampaignManager.launch** - Method to launch paywalls.
-   - **NamiCampaignManager.allCampaigns** - Method to get a list of available `NamiCampaign`s.
-   - **NamiCampaignManager.isCampaignAvailable** - Method to check if a matching campaign is available, returning a boolean.
-   - **NamiCampaignManager.refresh** - Method to request that available campaigns be refreshed.
-   - **NamiCampaignManager.registerAvailableCampaignsHandler** - Method to register a callback that is called when campaigns are updated.
-   - **NamiCampaign** - Defines the structure of the campaign objects.
-   
-- **NamiCustomerManager** - Introduced `NamiCustomerManager` to manager customer related functionality.
-  - **NamiCustomerManager.isLoggedIn** - Method to check if a customer is logged in, returning a boolean.
-  - **NamiCustomerManager.loggedInId** - Method to get the unique customer identifier associated with the current device.
-  - **NamiCustomerManager.login** - Method to provide a customer id to link one or more devices to a known customer.
-  - **NamiCustomerManager.logout** - Method to disassociate a device from a customer identifier.
-  - **NamiCustomerManager.registerAccountStateHandler** - Method to register a callback that is called when a customer is logged in or logged out.
-  - **NamiCustomerManager.setCustomerAttribute** - Method to set an attribute in an on-device key/value store for use for paywall personalization uses cases.
-  - **NamiCustomerManager.getCustomerAttribute** - Method to get the current stored value, if available, for the provided key in the on-device customer key/value store.
-  - **NamiCustomerManager.clearCustomerAttribute** - Method to remove a key from the on-device customer key/value store.
-  - **NamiCustomerManager.clearAllCustomerAttributes** - Method to clear all customer attributes in the on-device key/value store.
-  - **NamiCustomerManager.setAnonymousMode** - Method to set the anonymous mode for the customer.
-
-- **NamiPaywallManager** - Introduce `NamiPaywallManager` to manage paywalls.
-  - **NamiPaywallManager.setProductDetails** - Method to set product and price details to be used by the paywall.
-  - **NamiPaywallManager.registerSignInHandler** - Method to register a callback for when the customer clicks a sign in button on the paywall.
-  - **NamiPaywallManager.registerCloseHandler** - Method to register a callback for when the customer clicks on a close button on the paywall.
-  - **NamiPaywallManager.registerDeeplinkActionHandler** - Method to register a callback for when a customer clicks on a deeplink button on the paywall.
-  - **NamiPaywallManager.registerBuySkuHandler** - Method to register a callback for when a customer clicks on a buy button on the paywall.
-  - **NamiPaywallManager.registerRestoreHandler** - Method to register a callback wfor when a customer clicks to restore a previous purchase.
-  - **NamiPaywallManager.buySkuComplete** - Method to notify Nami SDK when a purchase succeeded for conversion reporting.
-  - **NamiPaywallManager.buySkuCancel** - Method to notify Nami SDK when a user cancelled the purchase flow, or an error occurred.
+- Core SDK: `Nami`, `Nami.configure`, `NamiConfiguration`, `NamiLanguageCodes`
+- `NamiCampaignManager` for campaign management
+- `NamiCustomerManager` for customer state and attributes
+- `NamiPaywallManager` for paywall and event handler management
 
 ### Known Issues
-- When user actions are taken on the paywall, paywall callbacks are not being called. 
-- `NamiPaywallManager`'s `buySkuComplete` and `buySkuCancel` methods are not fully implemented.
-- `NamiCustomerManager`'s `setAnonymousMode` method is not fully implemented.
-- Impression or conversion reporting not yet implemented
-- Launch context is not yet implemented
+- Paywall event callbacks not firing
+- `buySkuComplete`, `buySkuCancel`, and `setAnonymousMode` partially implemented
+- Impression/conversion reporting and launch context not yet available
 
 ### Additional Notes
-Please refer to the documentation for detailed usage instructions and examples.
+Refer to the documentation for detailed usage instructions and integration examples.

package/dist/components/ContextConsumer.d.ts

@@ -1,9 +1,11 @@
 import { ReactiveController, ReactiveControllerHost } from 'lit';
 import { TPaywallContext } from '../types/paywall';
+import { PaywallContextProvider } from './ContextProvider';
 declare class ContextConsumer implements ReactiveController {
-    host: ReactiveControllerHost;
+    private host;
     state: TPaywallContext;
-    constructor(host: ReactiveControllerHost);
+    contextProvider: PaywallContextProvider;
+    constructor(host: ReactiveControllerHost, contextProvider: PaywallContextProvider);
     handleStateChange(): void;
     hostConnected(): void;
     hostDisconnected(): void;

package/dist/components/ContextProvider.d.ts

@@ -1,40 +1,59 @@
 import { ReactiveController, ReactiveControllerHost } from 'lit';
-import { IPaywall, NamiAppSuppliedVideoDetails, TPaywallContext, TPaywallLaunchContext, TPaywallMedia } from '../types/paywall';
+import { IPaywall, ISkuMenu, NamiAppSuppliedVideoDetails, TPaywallContext, TPaywallMedia } from '../types/paywall';
 import { NamiProductDetails } from '../types/externals/product';
 import { NamiSKU } from '../types/externals/sku';
 import { NamiCampaign } from '../types/externals/campaign';
 import { TDevice } from '../types/device';
 import { Callback } from '../types/components/containers';
 import type { NamiFlow } from '../nami/flow/NamiFlow';
+import { NamiPaywallEvent, NamiPaywallLaunchContext } from '../types/externals/paywall';
 export declare const initialState: TPaywallContext;
-declare class ContextProvider extends EventTarget implements ReactiveController {
+export declare class PaywallContextProvider extends EventTarget implements ReactiveController {
+    static providers: PaywallContextProvider[];
     host: ReactiveControllerHost | null;
     state: TPaywallContext;
     subscribers: Set<Callback>;
     productDetails: NamiProductDetails[];
     flow?: NamiFlow;
-    constructor();
+    filteredSkuMenus: ISkuMenu[];
+    static create(paywall: IPaywall, context: NamiPaywallLaunchContext, campaign: NamiCampaign): PaywallContextProvider;
+    static remove(provider: PaywallContextProvider): void;
+    static setCustomerAttribute(attributes: {
+        [key: string]: string;
+    }): void;
+    static removeCustomerAttribute(key: string): void;
+    static setAppSuppliedVideoDetails(details: NamiAppSuppliedVideoDetails): void;
+    static getSelectedPaywall(): IPaywall | undefined;
+    static setUserInteractionEnabled(enabled: boolean): void;
+    static setProductDetails(details: NamiProductDetails[]): void;
+    static setPurchaseInProgress(inProgress: boolean): void;
+    static setIsLoggedIn(isLoggedIn: boolean): void;
+    static setPurchase(inProgress: boolean, product?: NamiSKU): void;
+    static getSelectedSlideIndex(): number | undefined;
+    constructor(paywall: IPaywall, context: NamiPaywallLaunchContext, campaign: NamiCampaign);
     subscribe(callback: Callback): Callback;
     unsubscribe(callback: Callback): void;
     emitEvent<T = any>(name: string, payload?: T): void;
     onEvent<T = any>(name: string, handler: (payload: T) => void): () => void;
     hostConnected(): void;
     hostDisconnected(): void;
+    private defineDynamicStateProps;
     private setState;
     setProductDetails(details: NamiProductDetails[]): void;
     getProductDetails(): NamiProductDetails[];
     setCurrentGroupData(currentGroupId: string, currentGroupName: string): void;
     getCurrentGroupId(): string;
     getCurrentGroupName(): string;
-    setSelectedProdcuts(products: {
+    setSelectedProducts(products: {
         [currentGroupId: string]: string | null;
     }): void;
     selectedProducts(): {
         [currentGroupId: string]: string | null;
     };
-    setPaywall(paywall: IPaywall, context?: TPaywallLaunchContext, campaign?: NamiCampaign): void;
+    setPaywall(paywall: IPaywall, context: NamiPaywallLaunchContext, campaign: NamiCampaign): void;
     getSelectedPaywall(): IPaywall | undefined;
     getSelectedCampaign(): NamiCampaign | undefined;
+    getPaywallActionEventData(): Partial<NamiPaywallEvent>;
     paywallId(): string;
     setCurrentPage(page: string): void;
     setCustomerAttribute(attributes: {
@@ -47,6 +66,9 @@ declare class ContextProvider extends EventTarget implements ReactiveController
     setFullScreenPresentation(fullScreenPresentation: boolean): void;
     setFormFactor(formFactor: TDevice): void;
     getFormFactor(): TDevice;
+    getTVQuality(): "" | "720p" | "4K" | "1080p";
+    getViewportWidth(): number;
+    getViewportHeight(): number;
     setPurchaseInProgress(inProgress: boolean): void;
     setPurchase(inProgress: boolean, product?: NamiSKU): void;
     setTimeSpentOnPaywall(time: number): void;
@@ -59,5 +81,3 @@ declare class ContextProvider extends EventTarget implements ReactiveController
     setUserInteractionEnabled(enabled: boolean): void;
     setCurrentSlideIndex(index: number): void;
 }
-declare const contextProvider: ContextProvider;
-export default contextProvider;

package/dist/components/NamiElement.d.ts

@@ -1,10 +1,13 @@
 import { CSSResult, LitElement, PropertyValueMap } from "lit";
 import ContextConsumer from "./ContextConsumer";
+import { PaywallContextProvider } from "./ContextProvider";
 export declare class NamiElement extends LitElement {
     contextConsumer: ContextConsumer;
+    contextProvider: PaywallContextProvider;
     constructor();
     protected styles(): CSSResult;
     createRenderRoot(): HTMLElement | DocumentFragment;
+    protected shouldUpdate(): boolean;
     protected willUpdate(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
     disconnectedCallback(): void;
 }

package/dist/components/Paywall.d.ts

@@ -1,28 +1,40 @@
-import { IPaywall, TPaywallLaunchContext } from '../types/paywall';
-import { NamiElement } from './NamiElement';
-import { PropertyValues, TemplateResult } from 'lit';
+import { IPaywall } from '../types/paywall';
+import { LitElement, TemplateResult } from 'lit';
 import { NamiCampaign } from '../types/externals/campaign';
-import { NamiPaywallEvent } from '../types/externals/paywall';
 import type { NamiFlow } from '../nami/flow/NamiFlow';
-declare class PaywallComponent extends NamiElement {
+import { type NamiFlowAnimation } from '../types/flow';
+import { NamiPaywallLaunchContext } from '../nami-web';
+declare class PaywallComponent extends LitElement {
     campaign: NamiCampaign | undefined;
     paywall: IPaywall | undefined;
     flow: NamiFlow | undefined;
-    private paywallEvent;
-    private teardownEvent;
-    constructor(paywall?: IPaywall, event?: Partial<NamiPaywallEvent>, campaign?: NamiCampaign, context?: TPaywallLaunchContext);
+    pages: IPaywall[];
+    private currentOffset;
+    private isAnimating;
+    private context;
+    private formFactor;
+    private timeSpentOnPaywall;
+    private type;
+    private value;
+    private animation;
+    private _originalBodyStyles;
+    private _swipeHandler;
+    constructor(type: string | undefined, value: string, context: NamiPaywallLaunchContext);
+    setPaywallData(): void;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    private setOriginalStyles;
+    private restoreStyles;
     private handleKeyDownEvent;
-    private userInteractionListener;
-    setPaywallData(paywall: IPaywall, campaign?: NamiCampaign): void;
+    private handleSwipeEvent;
     firstUpdated(): void;
-    updated(changedProps: PropertyValues): void;
-    private postImpression;
-    private getTemplate;
-    styles(): import("lit").CSSResult;
-    flowNavigateToScreen(paywall: IPaywall): Promise<void>;
+    static styles: import("lit").CSSResult;
+    private getAnimationStyles;
+    private updatePages;
+    flowNavigateToScreen(next: IPaywall, animation: NamiFlowAnimation): Promise<void>;
     getSelectedSlideIndexForCurrentCarousel(): number | undefined;
+    private renderFlow;
+    private renderPaywall;
     render(): TemplateResult;
 }
 export { PaywallComponent };

package/dist/components/PaywallContext.d.ts

@@ -0,0 +1,4 @@
+import { PaywallContextProvider } from './ContextProvider';
+export declare const PaywallProviderContext: {
+    __context__: PaywallContextProvider;
+};

package/dist/components/PaywallScreen.d.ts

@@ -0,0 +1,23 @@
+import type { IPaywall, TPaywallLaunchContext } from '../types/paywall';
+import { LitElement } from 'lit';
+import type { NamiCampaign } from '../types/externals/campaign';
+import type { NamiFlow } from '../nami/flow/NamiFlow';
+export declare class NamiPaywallScreen extends LitElement {
+    paywall: IPaywall;
+    campaign: NamiCampaign;
+    context: TPaywallLaunchContext;
+    private contextProvider;
+    private contextConsumer;
+    timeSpentOnPaywall: number;
+    flow?: NamiFlow;
+    private teardownEvent;
+    static styles: import("lit").CSSResult;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private userInteractionListener;
+    firstUpdated(): void;
+    private postImpression;
+    private postPaywallScreenData;
+    private getTemplate;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/components/TemplateComponent.d.ts

@@ -1,2 +1,3 @@
 import { TComponent } from "../types/components";
-export declare function TemplateComponent(component: TComponent, scaleFactor: number, inFocusedState?: boolean): any;
+import { PaywallContextProvider } from "./ContextProvider";
+export declare function TemplateComponent(contextProvider: PaywallContextProvider, component: TComponent, scaleFactor: number, inFocusedState?: boolean): any;