@revenuecat/purchases-ui-js 2.0.1 → 2.0.2

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

@@ -1,5 +1,5 @@
-import type { SharedComponentProps, StackProps } from "../../data/entities";
-export interface PurchaseButtonProps extends SharedComponentProps {
+import type { BaseComponent, StackProps } from "../../data/entities";
+export interface PurchaseButtonProps extends BaseComponent {
     type: "purchase_button";
     stack: StackProps;
 }

package/dist/ui/atoms/typography.stories.svelte

@@ -1,9 +1,9 @@
 <script module lang="ts">
+  import { withLayout } from "../../stories/with-layout";
+  import { default as Typography } from "./typography.svelte";
   import { defineMeta } from "@storybook/addon-svelte-csf";
   import { type ComponentProps } from "svelte";
   import { brandingViewportModes } from "../../../../.storybook/modes";
-  import { withLayout } from "../../stories/with-layout";
-  import { default as Typography } from "../../ui/atoms/typography.svelte";
 
   const { Story } = defineMeta({
     component: Typography,

package/dist/ui/atoms/typography.stories.svelte.d.ts

@@ -1,4 +1,4 @@
-import { default as Typography } from "../../ui/atoms/typography.svelte";
+import { default as Typography } from "./typography.svelte";
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

package/dist/ui/layout/main-block.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-  import { Theme } from "../theme/theme";
   import { onMount } from "svelte";
-  import SectionLayout from "./section-layout.svelte";
+  import { Theme } from "../theme/theme";
   import type { BrandingAppearance } from "../utils/branding";
+  import SectionLayout from "./section-layout.svelte";
 
   export let brandingAppearance: BrandingAppearance | null | undefined =
     undefined;

package/dist/ui/molecules/button.stories.svelte

@@ -1,8 +1,8 @@
 <script module lang="ts">
-  import { defineMeta, type StoryContext } from "@storybook/addon-svelte-csf";
-  import type { ComponentProps } from "svelte";
   import { brandingAppearances } from "../../stories/fixtures";
   import { withLayout } from "../../stories/with-layout";
+  import { defineMeta, type StoryContext } from "@storybook/addon-svelte-csf";
+  import type { ComponentProps } from "svelte";
   import { default as Button } from "./button.svelte";
 
   const { Story } = defineMeta({

package/dist/ui/molecules/button.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-  import ProcessingAnimation from "../utils/processing-animation.svelte";
   import Typography from "../atoms/typography.svelte";
   import { Theme } from "../theme/theme";
+  import ProcessingAnimation from "../utils/processing-animation.svelte";
   import type { UIButtonProps } from "./types";
 
   const {

package/dist/ui/theme/theme.d.ts

@@ -1,6 +1,6 @@
-import type { Shape } from "./shapes";
-import type { Colors } from "./colors";
 import type { BrandingAppearance } from "../utils/branding";
+import type { Colors } from "./colors";
+import type { Shape } from "./shapes";
 export declare class Theme {
     private readonly brandingAppearance;
     constructor(brandingAppearance?: BrandingAppearance | null | undefined);

package/dist/ui/theme/theme.js

@@ -1,6 +1,6 @@
-import { toFormColors, toFormStyleVar, toProductInfoStyleVar, toShape, toSpacingVars, toTextStyleVar, } from "./utils";
-import { DEFAULT_TEXT_STYLES } from "./text";
 import { DEFAULT_SPACING } from "./spacing";
+import { DEFAULT_TEXT_STYLES } from "./text";
+import { toFormColors, toFormStyleVar, toProductInfoStyleVar, toShape, toSpacingVars, toTextStyleVar, } from "./utils";
 export class Theme {
     brandingAppearance;
     constructor(brandingAppearance) {

package/dist/ui/theme/utils.d.ts

@@ -1,8 +1,8 @@
+import type { BrandingAppearance } from "../utils/branding";
 import { type Colors } from "./colors";
 import { type Shape } from "./shapes";
-import { type TextStyles } from "./text";
 import type { Spacing } from "./spacing";
-import type { BrandingAppearance } from "../utils/branding";
+import { type TextStyles } from "./text";
 export declare const DEFAULT_LUMINANCE_THRESHOLD = 0.37;
 /**
  * Applies an alpha value to a color.

package/dist/utils/style-utils.js

@@ -293,31 +293,32 @@ export function stringifyStyles(styles) {
  */
 export function findSelectedPackageId(paywallData) {
     const traverseNode = (node) => {
-        if (node.type === "package" &&
-            node.is_selected_by_default) {
+        if (node.type === "package" && node.is_selected_by_default) {
             return node;
         }
-        if (node.components && Array.isArray(node.components)) {
-            for (const c of node.components) {
-                const pkg = traverseNode(c);
-                if (pkg) {
+        if ("components" in node && Array.isArray(node.components)) {
+            for (const component of node.components) {
+                const pkg = traverseNode(component);
+                if (pkg !== undefined) {
                     return pkg;
                 }
             }
         }
-        if (node.stack !== undefined) {
+        if ("stack" in node) {
             const pkg = traverseNode(node.stack);
-            if (pkg) {
+            if (pkg !== undefined) {
                 return pkg;
             }
         }
         return undefined;
     };
-    const p = traverseNode(paywallData.components_config.base.stack);
-    if (p === undefined) {
-        return undefined;
+    for (const component of paywallData.components_config.base.stack.components) {
+        const pkg = traverseNode(component);
+        if (pkg !== undefined) {
+            return pkg?.package_id;
+        }
     }
-    return p.package_id;
+    return undefined;
 }
 export const getActiveStateProps = (overrides, componentState) => {
     if (!componentState)

package/dist/web-components/index.css

@@ -1 +1 @@
-.rcb-processing.svelte-2j2b59{width:var(--width, 12px);aspect-ratio:1;border-radius:50%;animation:svelte-2j2b59-l5 1.5s infinite linear}@keyframes svelte-2j2b59-l5{0%{box-shadow:var(--shadow-offset) 0 #fff2,calc(-1 * var(--shadow-offset)) 0 #fff2;background:#fff2}25%{box-shadow:var(--shadow-offset) 0 #fff2,calc(-1 * var(--shadow-offset)) 0 #fff;background:#fff2}50%{box-shadow:var(--shadow-offset) 0 #fff2,calc(-1 * var(--shadow-offset)) 0 #fff2;background:#fff}75%{box-shadow:var(--shadow-offset) 0 #fff,calc(-1 * var(--shadow-offset)) 0 #fff2;background:#fff2}to{box-shadow:var(--shadow-offset) 0 #fff2,calc(-1 * var(--shadow-offset)) 0 #fff2;background:#fff2}}.rcb-typography-heading-2xl.svelte-byrjto{font:var(--rc-text-heading2xl-mobile)}.rcb-typography-heading-xl.svelte-byrjto{font:var(--rc-text-headingXl-mobile)}.rcb-typography-heading-lg.svelte-byrjto{font:var(--rc-text-headingLg-mobile)}.rcb-typography-heading-md.svelte-byrjto{font:var(--rc-text-headingMd-mobile)}.rcb-typography-body-base.svelte-byrjto{font:var(--rc-text-bodyBase-mobile)}.rcb-typography-body-small.svelte-byrjto{font:var(--rc-text-bodySmall-mobile)}.rcb-typography-label-button.svelte-byrjto{font:var(--rc-text-labelButton-mobile)}.rcb-typography-label-default.svelte-byrjto{font:var(--rc-text-labelDefault-mobile)}.rcb-typography-caption-default.svelte-byrjto{font:var(--rc-text-captionDefault-mobile)}.rcb-typography-caption-link.svelte-byrjto{font:var(--rc-text-captionLink-mobile)}@container layout-query-container (width >= 768px){.rcb-typography-heading-2xl.svelte-byrjto{font:var(--rc-text-heading2xl-desktop)}.rcb-typography-heading-xl.svelte-byrjto{font:var(--rc-text-headingXl-desktop)}.rcb-typography-heading-lg.svelte-byrjto{font:var(--rc-text-headingLg-desktop)}.rcb-typography-heading-md.svelte-byrjto{font:var(--rc-text-headingMd-desktop)}.rcb-typography-body-base.svelte-byrjto{font:var(--rc-text-bodyBase-desktop)}.rcb-typography-body-small.svelte-byrjto{font:var(--rc-text-bodySmall-desktop)}.rcb-typography-label-button.svelte-byrjto{font:var(--rc-text-labelButton-desktop)}.rcb-typography-label-default.svelte-byrjto{font:var(--rc-text-labelDefault-desktop)}.rcb-typography-caption-default.svelte-byrjto{font:var(--rc-text-captionDefault-desktop)}.rcb-typography-caption-link.svelte-byrjto{font:var(--rc-text-captionLink-desktop)}}button.svelte-td7xvm{border:none;border-radius:var(--rc-shape-input-button-border-radius);cursor:pointer;height:var(--rc-spacing-inputHeight-mobile);color:var(--rc-color-grey-text-dark);background-color:var(--rc-color-grey-ui-dark);display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;transition:background-color .15s ease-in-out;-webkit-user-select:none;user-select:none}@container layout-query-container (width >= 768px){button.svelte-td7xvm{height:var(--rc-spacing-inputHeight-desktop)}}button.svelte-td7xvm:focus-visible{outline:2px solid var(--rc-color-focus)}button.intent-primary.svelte-td7xvm{background-color:var(--rc-color-primary);color:var(--rc-color-primary-text)}button.svelte-td7xvm:disabled{color:var(--rc-color-grey-text-light);background-color:var(--rc-color-grey-ui-dark);outline:none}button.intent-primary.svelte-td7xvm:not(:disabled):hover{background-color:var(--rc-color-primary-hover)}button.intent-primary.svelte-td7xvm:not(:disabled):active,button.svelte-td7xvm:active{background-color:var(--rc-color-primary-pressed);outline:none}button.intent-primary.svelte-td7xvm:disabled{color:var(--rc-color-grey-text-light);background-color:var(--rc-color-grey-ui-dark)}
+.rcb-typography-heading-2xl.svelte-byrjto{font:var(--rc-text-heading2xl-mobile)}.rcb-typography-heading-xl.svelte-byrjto{font:var(--rc-text-headingXl-mobile)}.rcb-typography-heading-lg.svelte-byrjto{font:var(--rc-text-headingLg-mobile)}.rcb-typography-heading-md.svelte-byrjto{font:var(--rc-text-headingMd-mobile)}.rcb-typography-body-base.svelte-byrjto{font:var(--rc-text-bodyBase-mobile)}.rcb-typography-body-small.svelte-byrjto{font:var(--rc-text-bodySmall-mobile)}.rcb-typography-label-button.svelte-byrjto{font:var(--rc-text-labelButton-mobile)}.rcb-typography-label-default.svelte-byrjto{font:var(--rc-text-labelDefault-mobile)}.rcb-typography-caption-default.svelte-byrjto{font:var(--rc-text-captionDefault-mobile)}.rcb-typography-caption-link.svelte-byrjto{font:var(--rc-text-captionLink-mobile)}@container layout-query-container (width >= 768px){.rcb-typography-heading-2xl.svelte-byrjto{font:var(--rc-text-heading2xl-desktop)}.rcb-typography-heading-xl.svelte-byrjto{font:var(--rc-text-headingXl-desktop)}.rcb-typography-heading-lg.svelte-byrjto{font:var(--rc-text-headingLg-desktop)}.rcb-typography-heading-md.svelte-byrjto{font:var(--rc-text-headingMd-desktop)}.rcb-typography-body-base.svelte-byrjto{font:var(--rc-text-bodyBase-desktop)}.rcb-typography-body-small.svelte-byrjto{font:var(--rc-text-bodySmall-desktop)}.rcb-typography-label-button.svelte-byrjto{font:var(--rc-text-labelButton-desktop)}.rcb-typography-label-default.svelte-byrjto{font:var(--rc-text-labelDefault-desktop)}.rcb-typography-caption-default.svelte-byrjto{font:var(--rc-text-captionDefault-desktop)}.rcb-typography-caption-link.svelte-byrjto{font:var(--rc-text-captionLink-desktop)}}.rcb-processing.svelte-2j2b59{width:var(--width, 12px);aspect-ratio:1;border-radius:50%;animation:svelte-2j2b59-l5 1.5s infinite linear}@keyframes svelte-2j2b59-l5{0%{box-shadow:var(--shadow-offset) 0 #fff2,calc(-1 * var(--shadow-offset)) 0 #fff2;background:#fff2}25%{box-shadow:var(--shadow-offset) 0 #fff2,calc(-1 * var(--shadow-offset)) 0 #fff;background:#fff2}50%{box-shadow:var(--shadow-offset) 0 #fff2,calc(-1 * var(--shadow-offset)) 0 #fff2;background:#fff}75%{box-shadow:var(--shadow-offset) 0 #fff,calc(-1 * var(--shadow-offset)) 0 #fff2;background:#fff2}to{box-shadow:var(--shadow-offset) 0 #fff2,calc(-1 * var(--shadow-offset)) 0 #fff2;background:#fff2}}button.svelte-td7xvm{border:none;border-radius:var(--rc-shape-input-button-border-radius);cursor:pointer;height:var(--rc-spacing-inputHeight-mobile);color:var(--rc-color-grey-text-dark);background-color:var(--rc-color-grey-ui-dark);display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;transition:background-color .15s ease-in-out;-webkit-user-select:none;user-select:none}@container layout-query-container (width >= 768px){button.svelte-td7xvm{height:var(--rc-spacing-inputHeight-desktop)}}button.svelte-td7xvm:focus-visible{outline:2px solid var(--rc-color-focus)}button.intent-primary.svelte-td7xvm{background-color:var(--rc-color-primary);color:var(--rc-color-primary-text)}button.svelte-td7xvm:disabled{color:var(--rc-color-grey-text-light);background-color:var(--rc-color-grey-ui-dark);outline:none}button.intent-primary.svelte-td7xvm:not(:disabled):hover{background-color:var(--rc-color-primary-hover)}button.intent-primary.svelte-td7xvm:not(:disabled):active,button.svelte-td7xvm:active{background-color:var(--rc-color-primary-pressed);outline:none}button.intent-primary.svelte-td7xvm:disabled{color:var(--rc-color-grey-text-light);background-color:var(--rc-color-grey-ui-dark)}

package/dist/web-components/index.js

@@ -961,80 +961,55 @@ function et(t, e, n, r) {
     return p(Q);
   };
 }
-en();
-var Rn = /* @__PURE__ */ Ct('<div class="rcb-processing svelte-2j2b59"></div>');
+var Rn = /* @__PURE__ */ Ct("<span><!></span>");
 function Bn(t, e) {
-  let n = et(e, "size", 8, "medium");
-  const r = {
-    small: { width: "8px", offset: "10px" },
-    medium: { width: "12px", offset: "20px" },
-    large: { width: "16px", offset: "30px" }
-  };
-  var i = Rn();
-  Pt(() => ft(i, "style", `--shadow-offset: ${r[n()].offset ?? ""}; --width: ${r[n()].width ?? ""};`)), dt(t, i);
-}
-var Pn = /* @__PURE__ */ Ct("<span><!></span>");
-function Mn(t, e) {
   xe(e, !0);
   const n = et(e, "size", 3, "body-base");
-  var r = Pn(), i = oe(r);
+  var r = Rn(), i = oe(r);
   Te(i, () => e.children ?? Ot), Pt(() => ke(r, `rcb-typography rcb-typography-${n() ?? ""} svelte-byrjto`)), dt(t, r), we();
 }
-const zn = {
-  error: "#B0171F",
-  warning: "#f4e971",
-  focus: "#1148B8",
-  accent: "#767676",
-  primary: "#576CDB",
-  "primary-hover": "rgba(87, 108, 219, .8)",
-  "primary-pressed": "rgba(87, 108, 219, .9)",
-  "primary-text": "#ffffff",
-  white: "#ffffff",
-  "grey-text-dark": "rgba(0,0,0,1)",
-  "grey-text-light": "rgba(0,0,0,0.7)",
-  "grey-ui-dark": "rgba(0,0,0,0.3)",
-  "grey-ui-light": "rgba(0,0,0,0.1)",
-  "input-background": "white",
-  background: "white"
-}, Cn = {
-  error: "#B0171F",
-  warning: "#f4e971",
-  focus: "#1148B8",
-  accent: "#767676",
-  primary: "#576CDB",
-  "primary-hover": "rgba(87, 108, 219, .8)",
-  "primary-pressed": "rgba(87, 108, 219, .9)",
-  "primary-text": "#ffffff",
-  white: "#ffffff",
-  "grey-text-dark": "rgba(0,0,0,1)",
-  "grey-text-light": "rgba(0,0,0,0.7)",
-  "grey-ui-dark": "rgba(0,0,0,0.3)",
-  "grey-ui-light": "rgba(0,0,0,0.1)",
-  "input-background": "white",
-  background: "#EFF3FA"
-}, Fe = {
-  error: "color_error",
-  focus: "color_accent",
-  accent: "color_accent",
-  primary: "color_buttons_primary"
-}, jn = {
-  ...Fe,
-  "input-background": "color_form_bg",
-  background: "color_form_bg"
-}, $n = {
-  ...Fe,
-  "input-background": "color_product_info_bg",
-  background: "color_product_info_bg"
-}, Ie = {
-  "input-border-radius": "4px",
-  "input-button-border-radius": "8px"
-}, Hn = {
-  "input-border-radius": "0px",
-  "input-button-border-radius": "0px"
-}, Vn = {
-  "input-border-radius": "12px",
-  "input-button-border-radius": "9999px"
-}, Qt = Ie, te = "-apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif", I = {
+const Pn = {
+  outerPadding: {
+    mobile: "clamp(1.3125rem, 5.6vw, 1.5rem)",
+    desktop: "clamp(1.5rem, 9.44vw, 5rem)"
+  },
+  outerPaddingSmall: {
+    mobile: "clamp(0.75rem, 4.2vw, 1rem)",
+    desktop: "clamp(1.5rem, 9.44vw, 5rem)"
+  },
+  gapSmall: {
+    mobile: "0.25rem",
+    desktop: "0.375rem"
+  },
+  gapMedium: {
+    mobile: "0.5rem",
+    desktop: "0.75rem"
+  },
+  gapLarge: {
+    mobile: "0.75rem",
+    desktop: "0.75rem"
+  },
+  gapXLarge: {
+    mobile: "1rem",
+    desktop: "1.5rem"
+  },
+  gapXXLarge: {
+    mobile: "1.25rem",
+    desktop: "2.25rem"
+  },
+  gapXXXLarge: {
+    mobile: "2.25rem",
+    desktop: "4.5rem"
+  },
+  inputHeight: {
+    mobile: "3rem",
+    desktop: "3rem"
+  },
+  gapStripeElement: {
+    mobile: "0.70rem",
+    desktop: "1rem"
+  }
+}, Qt = "-apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif", I = {
   regular: "400",
   medium: "500",
   semibold: "600"
@@ -1150,7 +1125,7 @@ const zn = {
   captionLink: {
     ...d.captionLink
   }
-}, Un = {
+}, Mn = {
   heading2xl: {
     mobile: d.heading2xl,
     desktop: L.heading2xl
@@ -1191,7 +1166,61 @@ const zn = {
     desktop: L.captionLink,
     mobile: d.captionLink
   }
-}, rt = (t) => t.length == 7 ? {
+}, zn = {
+  error: "#B0171F",
+  warning: "#f4e971",
+  focus: "#1148B8",
+  accent: "#767676",
+  primary: "#576CDB",
+  "primary-hover": "rgba(87, 108, 219, .8)",
+  "primary-pressed": "rgba(87, 108, 219, .9)",
+  "primary-text": "#ffffff",
+  white: "#ffffff",
+  "grey-text-dark": "rgba(0,0,0,1)",
+  "grey-text-light": "rgba(0,0,0,0.7)",
+  "grey-ui-dark": "rgba(0,0,0,0.3)",
+  "grey-ui-light": "rgba(0,0,0,0.1)",
+  "input-background": "white",
+  background: "white"
+}, Cn = {
+  error: "#B0171F",
+  warning: "#f4e971",
+  focus: "#1148B8",
+  accent: "#767676",
+  primary: "#576CDB",
+  "primary-hover": "rgba(87, 108, 219, .8)",
+  "primary-pressed": "rgba(87, 108, 219, .9)",
+  "primary-text": "#ffffff",
+  white: "#ffffff",
+  "grey-text-dark": "rgba(0,0,0,1)",
+  "grey-text-light": "rgba(0,0,0,0.7)",
+  "grey-ui-dark": "rgba(0,0,0,0.3)",
+  "grey-ui-light": "rgba(0,0,0,0.1)",
+  "input-background": "white",
+  background: "#EFF3FA"
+}, Fe = {
+  error: "color_error",
+  focus: "color_accent",
+  accent: "color_accent",
+  primary: "color_buttons_primary"
+}, jn = {
+  ...Fe,
+  "input-background": "color_form_bg",
+  background: "color_form_bg"
+}, $n = {
+  ...Fe,
+  "input-background": "color_product_info_bg",
+  background: "color_product_info_bg"
+}, Ie = {
+  "input-border-radius": "4px",
+  "input-button-border-radius": "8px"
+}, Hn = {
+  "input-border-radius": "0px",
+  "input-button-border-radius": "0px"
+}, Vn = {
+  "input-border-radius": "12px",
+  "input-button-border-radius": "9999px"
+}, te = Ie, rt = (t) => t.length == 7 ? {
   r: parseInt(t.slice(1, 3), 16),
   g: parseInt(t.slice(3, 5), 16),
   b: parseInt(t.slice(5, 7), 16)
@@ -1207,7 +1236,7 @@ const zn = {
 }) => {
   const i = (a) => (a = a / 255, a <= 0.03928 ? a / 12.92 : Math.pow((a + 0.055) / 1.055, 2.4));
   return 0.2126 * i(t) + 0.7152 * i(e) + 0.0722 * i(n) > r;
-}, $t = 0.37, qn = (t, e = $t) => {
+}, $t = 0.37, Un = (t, e = $t) => {
   const n = jt({ ...t, luminanceThreshold: e }) ? "0,0,0" : "255,255,255";
   return {
     "grey-text-dark": `rgb(${n})`,
@@ -1216,7 +1245,7 @@ const zn = {
     "grey-ui-light": `rgba(${n},0.1)`
   };
 };
-function Wn(t, e, n) {
+function qn(t, e, n) {
   const r = rt(t) || { r: 0, g: 0, b: 0 }, i = rt(e) || { r: 255, g: 255, b: 255 }, l = Math.round(i.r * n + r.r * (1 - n)), a = Math.round(i.g * n + r.g * (1 - n)), _ = Math.round(i.b * n + r.b * (1 - n));
   return `#${Tt(l)}${Tt(a)}${Tt(_)}`;
 }
@@ -1228,12 +1257,12 @@ function ee(t, e) {
     ...l,
     luminanceThreshold: $t
   }) ? "#000000" : "#FFFFFF";
-  return Wn(i, _, r);
+  return qn(i, _, r);
 }
 function Tt(t) {
   return t.toString(16).padStart(2, "0").toUpperCase();
 }
-const Xn = (t, e, n, r = $t) => {
+const Wn = (t, e, n, r = $t) => {
   const i = {
     "grey-text-dark": n["grey-text-dark"],
     "grey-text-light": n["grey-text-light"],
@@ -1243,27 +1272,27 @@ const Xn = (t, e, n, r = $t) => {
   };
   if (t != null && t.startsWith("#")) {
     const l = rt(t);
-    l !== null && Object.assign(i, qn(l));
+    l !== null && Object.assign(i, Un(l));
   }
   if (e != null && e.startsWith("#")) {
     const l = rt(e);
     l !== null && (i["primary-text"] = jt({ ...l, luminanceThreshold: r }) ? "black" : "white");
   }
   return i;
-}, Yn = (t) => ({
+}, Xn = (t) => ({
   "primary-hover": ee(t, 0.1),
   "primary-pressed": ee(t, 0.15)
-}), Gn = (t, e) => t || e, Kn = (t, e, n) => {
+}), Yn = (t, e) => t || e, Gn = (t, e, n) => {
   const r = Object.entries(t).map(([i, l]) => [
     i,
-    Gn(
+    Yn(
       n ? n[l] : null,
       e[i]
     )
   ]);
   return Object.fromEntries(r);
 }, Oe = (t, e, n) => {
-  const r = Kn(
+  const r = Gn(
     t,
     e,
     n
@@ -1271,14 +1300,14 @@ const Xn = (t, e, n, r = $t) => {
   return n ? {
     ...e,
     ...r,
-    ...Xn(
+    ...Wn(
       r.background,
       r.primary,
       e
     ),
-    ...Yn(r.primary)
+    ...Xn(r.primary)
   } : { ...e };
-}, Zn = (t) => Oe(
+}, Kn = (t) => Oe(
   $n,
   Cn,
   t
@@ -1288,7 +1317,7 @@ const Xn = (t, e, n, r = $t) => {
   t
 ), Ht = (t) => {
   if (!t)
-    return Qt;
+    return te;
   switch (t.shapes) {
     case "rounded":
       return Ie;
@@ -1297,18 +1326,18 @@ const Xn = (t, e, n, r = $t) => {
     case "pill":
       return Vn;
     default:
-      return Qt;
+      return te;
   }
-}, ht = (t = "", e) => e.map(([n, r]) => `--rc-${t}-${n}: ${r}`).join("; "), Jn = (t) => {
+}, ht = (t = "", e) => e.map(([n, r]) => `--rc-${t}-${n}: ${r}`).join("; "), Zn = (t) => {
   const e = ht(
     "color",
-    Object.entries(Zn(t))
+    Object.entries(Kn(t))
   ), n = ht(
     "shape",
     Object.entries(Ht(t))
   );
   return [e, n].join("; ");
-}, Qn = (t) => {
+}, Jn = (t) => {
   const e = ht(
     "color",
     Object.entries(De(t))
@@ -1317,56 +1346,15 @@ const Xn = (t, e, n, r = $t) => {
     Object.entries(Ht(t))
   );
   return [e, n].join("; ");
-}, tr = (t = "", e) => Object.entries(e).flatMap(([n, { desktop: r, mobile: i }]) => [
-  `--rc-${t}-${n}-desktop: normal normal ${r.fontWeight} ${r.fontSize}/${r.lineHeight} ${te}`,
-  `--rc-${t}-${n}-mobile: normal normal ${i.fontWeight} ${i.fontSize}/${i.lineHeight} ${te}`,
+}, Qn = (t = "", e) => Object.entries(e).flatMap(([n, { desktop: r, mobile: i }]) => [
+  `--rc-${t}-${n}-desktop: normal normal ${r.fontWeight} ${r.fontSize}/${r.lineHeight} ${Qt}`,
+  `--rc-${t}-${n}-mobile: normal normal ${i.fontWeight} ${i.fontSize}/${i.lineHeight} ${Qt}`,
   `--rc-${t}-${n}-desktop-font-size: ${r.fontSize}`,
   `--rc-${t}-${n}-mobile-font-size: ${i.fontSize}`
-]).join("; "), er = (t = "", e) => Object.entries(e).map(
+]).join("; "), tr = (t = "", e) => Object.entries(e).map(
   ([n, { mobile: r, desktop: i }]) => `--rc-${t}-${n}-mobile: ${r};  --rc-${t}-${n}-desktop: ${i};`
-).join(" "), nr = {
-  outerPadding: {
-    mobile: "clamp(1.3125rem, 5.6vw, 1.5rem)",
-    desktop: "clamp(1.5rem, 9.44vw, 5rem)"
-  },
-  outerPaddingSmall: {
-    mobile: "clamp(0.75rem, 4.2vw, 1rem)",
-    desktop: "clamp(1.5rem, 9.44vw, 5rem)"
-  },
-  gapSmall: {
-    mobile: "0.25rem",
-    desktop: "0.375rem"
-  },
-  gapMedium: {
-    mobile: "0.5rem",
-    desktop: "0.75rem"
-  },
-  gapLarge: {
-    mobile: "0.75rem",
-    desktop: "0.75rem"
-  },
-  gapXLarge: {
-    mobile: "1rem",
-    desktop: "1.5rem"
-  },
-  gapXXLarge: {
-    mobile: "1.25rem",
-    desktop: "2.25rem"
-  },
-  gapXXXLarge: {
-    mobile: "2.25rem",
-    desktop: "4.5rem"
-  },
-  inputHeight: {
-    mobile: "3rem",
-    desktop: "3rem"
-  },
-  gapStripeElement: {
-    mobile: "0.70rem",
-    desktop: "1rem"
-  }
-};
-class rr {
+).join(" ");
+class er {
   constructor(e) {
     qt(this, "brandingAppearance");
     e ? this.brandingAppearance = e : this.brandingAppearance = void 0;
@@ -1378,28 +1366,40 @@ class rr {
     return De(this.brandingAppearance);
   }
   get formStyleVars() {
-    return Qn(this.brandingAppearance);
+    return Jn(this.brandingAppearance);
   }
   get productInfoStyleVars() {
-    return Jn(this.brandingAppearance);
+    return Zn(this.brandingAppearance);
   }
   get spacing() {
-    return nr;
+    return Pn;
   }
   get textStyles() {
-    return Un;
+    return Mn;
   }
   get textStyleVars() {
-    return tr("text", this.textStyles);
+    return Qn("text", this.textStyles);
   }
   get spacingStyleVars() {
-    return er("spacing", this.spacing);
+    return tr("spacing", this.spacing);
   }
 }
+en();
+var nr = /* @__PURE__ */ Ct('<div class="rcb-processing svelte-2j2b59"></div>');
+function rr(t, e) {
+  let n = et(e, "size", 8, "medium");
+  const r = {
+    small: { width: "8px", offset: "10px" },
+    medium: { width: "12px", offset: "20px" },
+    large: { width: "16px", offset: "30px" }
+  };
+  var i = nr();
+  Pt(() => ft(i, "style", `--shadow-offset: ${r[n()].offset ?? ""}; --width: ${r[n()].width ?? ""};`)), dt(t, i);
+}
 var ir = /* @__PURE__ */ Ct("<button><!></button>");
 function ar(t, e) {
   xe(e, !0);
-  const n = et(e, "intent", 3, "primary"), r = et(e, "disabled", 3, !1), i = et(e, "loading", 3, !1), l = /* @__PURE__ */ P(() => new rr(e.brandingAppearance)), a = /* @__PURE__ */ P(() => p(l).textStyleVars), _ = /* @__PURE__ */ P(() => p(l).spacingStyleVars), f = /* @__PURE__ */ P(() => p(l).productInfoStyleVars), s = /* @__PURE__ */ P(() => p(l).formStyleVars), u = /* @__PURE__ */ P(() => [
+  const n = et(e, "intent", 3, "primary"), r = et(e, "disabled", 3, !1), i = et(e, "loading", 3, !1), l = /* @__PURE__ */ P(() => new er(e.brandingAppearance)), a = /* @__PURE__ */ P(() => p(l).textStyleVars), _ = /* @__PURE__ */ P(() => p(l).spacingStyleVars), f = /* @__PURE__ */ P(() => p(l).productInfoStyleVars), s = /* @__PURE__ */ P(() => p(l).formStyleVars), u = /* @__PURE__ */ P(() => [
     e.styleOverrides,
     p(a),
     p(_),
@@ -1414,9 +1414,9 @@ function ar(t, e) {
   var c = oe(o);
   {
     var g = (m) => {
-      Bn(m, { size: "small" });
+      rr(m, { size: "small" });
     }, w = (m) => {
-      Mn(m, {
+      Bn(m, {
         size: "body-base",
         children: (y, U) => {
           var z = On(), C = un(z);

package/package.json

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

package/dist/data/state.d.ts

@@ -1,4 +0,0 @@
-import type { VariableDictionary } from "../utils/variable-utils";
-export interface PurchaseState {
-    variablesPerPackage?: Record<string, VariableDictionary>;
-}