@revenuecat/purchases-ui-js 0.0.20 → 0.1.21

package/dist/components/button/Button.svelte

@@ -18,3 +18,12 @@
 <button onclick={handleClick} class={clz} disabled={!onclick} {style}>
   {@render children?.()}
 </button>
+
+<style>
+  button {
+    border: none;
+    cursor: pointer;
+    background: transparent;
+    width: fit-content;
+  }
+</style>

package/dist/components/button/ButtonNode.stories.svelte

@@ -7,7 +7,7 @@
     SupportedActions,
   } from "../../data/entities";
   import type { PurchaseState } from "../../data/state";
-  import type { ColorMode } from "../../types";
+  import { DEFAULT_COLOR_MODE, DEFAULT_TEXT_COLOR } from "../../utils/constants";
 
   const onAction = (action: SupportedActions) => {
     alert(action.type);
@@ -51,7 +51,7 @@
   const purchaseState: PurchaseState = {
     locale: "en_US",
     defaultLocale: "en_US",
-    colorMode: "light" as ColorMode,
+    colorMode: DEFAULT_COLOR_MODE,
   };
 
   export const labelsData = {
@@ -76,7 +76,7 @@
       light: { type: "hex", value: "transparent" },
     },
     color: {
-      dark: { type: "hex", value: "#000000" },
+      dark: { type: "hex", value: DEFAULT_TEXT_COLOR },
       light: { type: "hex", value: "#ffffff" },
     },
     font_size: "body_m",

package/dist/components/button/ButtonNode.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import Button from "./Button.svelte";
+  import { ButtonDeprecated } from "../../index";
   import type { ButtonNodeProps } from "../../data/entities";
   import Stack from "../stack/Stack.svelte";
   import { getButtonStyles } from "./button-utils";
@@ -30,17 +30,19 @@
   );
 </script>
 
-<Button onclick={onClick} style={buttonStyles} class={"rc-pw-button"}>
+<ButtonDeprecated onclick={onClick} style={buttonStyles} class={"rc-pw-button"}>
   <Stack {...stack} {labels} {purchaseState} {variableDictionary} />
-</Button>
+</ButtonDeprecated>
 
 <style>
   .rc-pw-button {
     display: flex;
     margin: 0;
     padding: 0;
-    background: initial;
-    border: initial;
     text-align: initial;
+    border: none;
+    cursor: pointer;
+    background: transparent;
+    width: fit-content;
   }
 </style>

package/dist/components/footer/Footer.stories.svelte

@@ -1,12 +1,12 @@
 <script module lang="ts">
   import { defineMeta } from "@storybook/addon-svelte-csf";
   import Footer from "./Footer.svelte";
-  import type { ColorMode } from "../../types";
+  import { DEFAULT_COLOR_MODE } from "../../utils/constants";
 
   const purchaseState = {
     locale: "en_US",
     defaultLocale: "en_US",
-    colorMode: "light" as ColorMode,
+    colorMode: DEFAULT_COLOR_MODE,
   };
 
   const { Story } = defineMeta({

package/dist/components/image/Image.stories.svelte

@@ -2,10 +2,10 @@
   import { defineMeta } from "@storybook/addon-svelte-csf";
   import Image from "./Image.svelte";
   import type { PurchaseState } from "../../data/state";
-  import type { ColorMode } from "../../types";
+  import { DEFAULT_COLOR_MODE } from "../../utils/constants";
 
   const purchaseState: PurchaseState = {
-    colorMode: "light" as ColorMode,
+    colorMode: DEFAULT_COLOR_MODE,
     locale: "en_US",
     defaultLocale: "en_US",
   };

package/dist/components/image/Image.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { getImageComponentStyles } from "./image-utils";
   import type { ImageProps } from "../../data/entities";
+  import { DEFAULT_COLOR_MODE } from "../../utils/constants";
 
   const { id, source, purchaseState, ...restProps }: ImageProps = $props();
 
@@ -29,7 +30,7 @@
     if (source[colorMode]?.original) {
       return source[colorMode].original;
     } else {
-      return source["light"].original as string;
+      return source[DEFAULT_COLOR_MODE]?.original as string;
     }
   });
 </script>
@@ -71,7 +72,7 @@
         x2={linearGradientAngle.x2}
         y2={linearGradientAngle.y2}
       >
-        {#each restProps.color_overlay?.[purchaseState.colorMode]?.points || restProps.color_overlay?.["light"]?.points || [] as stop}
+        {#each restProps.color_overlay?.[purchaseState.colorMode]?.points || restProps.color_overlay?.[DEFAULT_COLOR_MODE]?.points || [] as stop}
           <stop
             offset={`${stop.percent}%`}
             style={`stop-color: ${stop.color}`}
@@ -87,7 +88,7 @@
         fx="50%"
         fy="50%"
       >
-        {#each restProps.color_overlay?.[purchaseState.colorMode]?.points || restProps.color_overlay?.["light"]?.points || [] as stop}
+        {#each restProps.color_overlay?.[purchaseState.colorMode]?.points || restProps.color_overlay?.[DEFAULT_COLOR_MODE]?.points || [] as stop}
           <stop
             offset={`${stop.percent}%`}
             style={`stop-color: ${stop.color}`}
@@ -100,7 +101,7 @@
           offset="0%"
           style={`stop-color: ${
             restProps.color_overlay[purchaseState.colorMode]?.value ||
-            restProps.color_overlay?.["light"]?.value
+            restProps.color_overlay?.[DEFAULT_COLOR_MODE]?.value
           }`}
         />
       </linearGradient>

package/dist/components/package/Package.stories.svelte

@@ -3,7 +3,7 @@
   import Package from "./Package.svelte";
   import type { Extra, SupportedActions } from "../../data/entities";
   import type { PurchaseState } from "../../data/state";
-  import type { ColorMode } from "../../types";
+  import { DEFAULT_COLOR_MODE } from "../../utils/constants";
 
   const onAction = (action: SupportedActions, data?: Extra) => {
     alert(`${action.type} ${JSON.stringify(data)}`);
@@ -34,7 +34,7 @@
     },
   };
   const purchaseState: PurchaseState = {
-    colorMode: "light" as ColorMode,
+    colorMode: DEFAULT_COLOR_MODE,
     locale: "en_US",
     defaultLocale: "en_US",
   };

package/dist/components/paywall/Paywall.svelte

@@ -21,6 +21,7 @@
   import { prefersDarkMode } from "../../stores/theme";
   import type { ColorMode } from "../../types";
   import Footer from "../footer/Footer.svelte";
+  import { DEFAULT_COLOR_MODE } from "../../utils/constants";
 
   interface Props {
     paywallData: PaywallData;
@@ -53,7 +54,8 @@
     locale: selectedLocale || paywallData.default_locale,
     defaultLocale: paywallData.default_locale,
     variablesPerPackage,
-    colorMode: preferredColorMode || ($prefersDarkMode ? "dark" : "light"),
+    colorMode:
+      preferredColorMode || ($prefersDarkMode ? "dark" : DEFAULT_COLOR_MODE),
   });
 
   let variableDictionary = $state(
@@ -221,13 +223,6 @@
     select {
       font: inherit;
     }
-    button {
-      border: none;
-      cursor: pointer;
-      background: transparent;
-      width: fit-content;
-    }
-
     p,
     h1,
     h2,

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

@@ -1,7 +1,7 @@
 import type { PaywallData } from "../../data/entities";
 import { type VariableDictionary } from "../../utils/variable-utils";
 import type { ColorMode } from "../../types";
-declare const Paywall: import("svelte").Component<{
+interface Props {
     paywallData: PaywallData;
     onPurchaseClicked?: (selectedPackageId: string) => void;
     onBackClicked?: () => void;
@@ -12,6 +12,7 @@ declare const Paywall: import("svelte").Component<{
     variablesPerPackage?: Record<string, VariableDictionary>;
     preferredColorMode?: ColorMode;
     onError?: (error: unknown) => void;
-}, {}, "">;
+}
+declare const Paywall: import("svelte").Component<Props, {}, "">;
 type Paywall = ReturnType<typeof Paywall>;
 export default Paywall;

package/dist/components/paywall/paywall-utils.d.ts

@@ -4,4 +4,4 @@ export declare function getBackgroundStyles({ background, colorMode, }: {
     background?: BaseNodeBackgroundType;
     colorMode: ColorMode;
 }): string;
-export declare function getBackgroundImageSource(paywallData: PaywallData, colorMode: ColorMode): string;
+export declare function getBackgroundImageSource(paywallData: PaywallData, colorMode: ColorMode): string | undefined;

package/dist/components/paywall/paywall-utils.js

@@ -1,3 +1,4 @@
+import { DEFAULT_COLOR_MODE } from "../../utils/constants";
 import { getColor, prefixObject, stringifyStyles, } from "../../utils/style-utils";
 export function getBackgroundStyles({ background, colorMode, }) {
     const styles = { "--background": "initial" };
@@ -19,5 +20,5 @@ export function getBackgroundImageSource(paywallData, colorMode) {
     const backgroundObject = paywallData.components_config.base
         .background;
     return (backgroundObject.value[colorMode]?.original ||
-        backgroundObject.value["light"]?.original);
+        backgroundObject.value[DEFAULT_COLOR_MODE]?.original);
 }

package/dist/components/purchase-button/PurchaseButton.stories.svelte

@@ -2,8 +2,9 @@
   import { defineMeta } from "@storybook/addon-svelte-csf";
   import PurchaseButton from "./PurchaseButton.svelte";
   import type { PurchaseState } from "../../data/state";
-  import type { ColorMode, DimensionType } from "../../types";
+  import type { DimensionType } from "../../types";
   import type { SupportedActions } from "../../data/entities";
+  import { DEFAULT_COLOR_MODE } from "../../utils/constants";
 
   const onAction = (action: SupportedActions) => {
     alert(action.type);
@@ -33,7 +34,7 @@
     },
   };
   const purchaseState: PurchaseState = {
-    colorMode: "light" as ColorMode,
+    colorMode: DEFAULT_COLOR_MODE,
     locale: "en_US",
     defaultLocale: "en_US",
   };

package/dist/components/purchase-button/PurchaseButton.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { PurchaseButtonProps } from "../../data/entities";
   import Stack from "../stack/Stack.svelte";
-  import { Button } from "../../index";
+  import { ButtonDeprecated } from "../../index";
   import { getPurchaseButtonStyles } from "./purchase-button-utils";
 
   const {
@@ -30,13 +30,13 @@
   );
 </script>
 
-<Button
+<ButtonDeprecated
   onclick={handleClick}
   class="rc-pw-purchase-button"
   style={buttonStyles}
 >
   <Stack {...stack} {labels} {purchaseState} {variableDictionary} />
-</Button>
+</ButtonDeprecated>
 
 <style>
   .rc-pw-purchase-button {

package/dist/components/stack/Stack.stories.svelte

@@ -12,6 +12,11 @@
   import { labelsData as labels } from "../../stories/fixtures";
   import type { PurchaseState } from "../../data/state";
   import type { PaywallComponent } from "../../data/entities";
+  import {
+    DEFAULT_BACKGROUND_COLOR,
+    DEFAULT_COLOR_MODE,
+    DEFAULT_TEXT_COLOR,
+  } from "../../utils/constants";
 
   const { Story } = defineMeta({
     title: "Components/Stack",
@@ -35,7 +40,7 @@
   const purchaseState: PurchaseState = {
     locale: "en_US",
     defaultLocale: "en_US",
-    colorMode: "light",
+    colorMode: DEFAULT_COLOR_MODE,
   };
 
   const components: PaywallComponent[] = [
@@ -379,7 +384,7 @@
           padding: { top: 4, trailing: 12, bottom: 4, leading: 12 },
           margin: { top: 4, trailing: 4, bottom: 4, leading: 4 },
           text_lid: "badge",
-          color: { light: { type: "hex", value: "#000000" } },
+          color: { light: { type: "hex", value: DEFAULT_TEXT_COLOR } },
           font_weight: "bold",
           font_size: "body_s",
           horizontal_alignment: "center",
@@ -422,7 +427,7 @@
           padding: { top: 4, trailing: 12, bottom: 4, leading: 12 },
           margin: { top: 4, trailing: 4, bottom: 4, leading: 4 },
           text_lid: "badge",
-          color: { light: { type: "hex", value: "#000000" } },
+          color: { light: { type: "hex", value: DEFAULT_TEXT_COLOR } },
           font_weight: "bold",
           font_size: "body_s",
           horizontal_alignment: "center",
@@ -465,7 +470,7 @@
           padding: { top: 4, trailing: 12, bottom: 4, leading: 12 },
           margin: { top: 4, trailing: 4, bottom: 4, leading: 4 },
           text_lid: "badge",
-          color: { light: { type: "hex", value: "#000000" } },
+          color: { light: { type: "hex", value: DEFAULT_TEXT_COLOR } },
           font_weight: "bold",
           font_size: "body_s",
           horizontal_alignment: "center",
@@ -508,7 +513,7 @@
           padding: { top: 4, trailing: 12, bottom: 4, leading: 12 },
           margin: { top: 4, trailing: 4, bottom: 4, leading: 4 },
           text_lid: "badge",
-          color: { light: { type: "hex", value: "#000000" } },
+          color: { light: { type: "hex", value: DEFAULT_TEXT_COLOR } },
           font_weight: "bold",
           font_size: "body_s",
           horizontal_alignment: "center",
@@ -551,7 +556,7 @@
           padding: { top: 4, trailing: 12, bottom: 4, leading: 12 },
           margin: { top: 4, trailing: 4, bottom: 4, leading: 4 },
           text_lid: "badge",
-          color: { light: { type: "hex", value: "#000000" } },
+          color: { light: { type: "hex", value: DEFAULT_TEXT_COLOR } },
           font_weight: "bold",
           font_size: "body_s",
           horizontal_alignment: "center",
@@ -594,7 +599,7 @@
           padding: { top: 4, trailing: 12, bottom: 4, leading: 12 },
           margin: { top: 4, trailing: 4, bottom: 4, leading: 4 },
           text_lid: "badge",
-          color: { light: { type: "hex", value: "#000000" } },
+          color: { light: { type: "hex", value: DEFAULT_TEXT_COLOR } },
           font_weight: "bold",
           font_size: "body_s",
           horizontal_alignment: "center",
@@ -637,7 +642,7 @@
           padding: { top: 4, trailing: 12, bottom: 4, leading: 12 },
           margin: { top: 4, trailing: 4, bottom: 4, leading: 4 },
           text_lid: "badge",
-          color: { light: { type: "hex", value: "#000000" } },
+          color: { light: { type: "hex", value: DEFAULT_TEXT_COLOR } },
           font_weight: "bold",
           font_size: "body_s",
           horizontal_alignment: "center",
@@ -680,7 +685,7 @@
           padding: { top: 4, trailing: 12, bottom: 4, leading: 12 },
           margin: { top: 4, trailing: 4, bottom: 4, leading: 4 },
           text_lid: "badge",
-          color: { light: { type: "hex", value: "#000000" } },
+          color: { light: { type: "hex", value: DEFAULT_TEXT_COLOR } },
           font_weight: "bold",
           font_size: "body_s",
           horizontal_alignment: "center",
@@ -775,7 +780,7 @@
           padding: { top: 4, trailing: 12, bottom: 4, leading: 12 },
           margin: { top: 4, trailing: 4, bottom: 4, leading: 4 },
           text_lid: "badge",
-          color: { light: { type: "hex", value: "#000000" } },
+          color: { light: { type: "hex", value: DEFAULT_TEXT_COLOR } },
           font_weight: "bold",
           font_size: "body_s",
           horizontal_alignment: "center",
@@ -818,7 +823,7 @@
           padding: { top: 4, trailing: 12, bottom: 4, leading: 12 },
           margin: { top: 4, trailing: 4, bottom: 4, leading: 4 },
           text_lid: "badge",
-          color: { light: { type: "hex", value: "#000000" } },
+          color: { light: { type: "hex", value: DEFAULT_TEXT_COLOR } },
           font_weight: "bold",
           font_size: "body_s",
           horizontal_alignment: "center",
@@ -861,7 +866,7 @@
           padding: { top: 4, trailing: 12, bottom: 4, leading: 12 },
           margin: { top: 4, trailing: 4, bottom: 4, leading: 4 },
           text_lid: "badge",
-          color: { light: { type: "hex", value: "#000000" } },
+          color: { light: { type: "hex", value: DEFAULT_TEXT_COLOR } },
           font_weight: "bold",
           font_size: "body_s",
           horizontal_alignment: "center",
@@ -904,7 +909,7 @@
           padding: { top: 4, trailing: 12, bottom: 4, leading: 12 },
           margin: { top: 4, trailing: 4, bottom: 4, leading: 4 },
           text_lid: "badge",
-          color: { light: { type: "hex", value: "#000000" } },
+          color: { light: { type: "hex", value: DEFAULT_TEXT_COLOR } },
           font_weight: "bold",
           font_size: "body_s",
           horizontal_alignment: "center",
@@ -947,7 +952,7 @@
           padding: { top: 4, trailing: 12, bottom: 4, leading: 12 },
           margin: { top: 4, trailing: 4, bottom: 4, leading: 4 },
           text_lid: "badge",
-          color: { light: { type: "hex", value: "#000000" } },
+          color: { light: { type: "hex", value: DEFAULT_TEXT_COLOR } },
           font_weight: "bold",
           font_size: "body_s",
           horizontal_alignment: "center",
@@ -990,7 +995,7 @@
           padding: { top: 4, trailing: 12, bottom: 4, leading: 12 },
           margin: { top: 4, trailing: 4, bottom: 4, leading: 4 },
           text_lid: "badge",
-          color: { light: { type: "hex", value: "#000000" } },
+          color: { light: { type: "hex", value: DEFAULT_TEXT_COLOR } },
           font_weight: "bold",
           font_size: "body_s",
           horizontal_alignment: "center",
@@ -1036,8 +1041,8 @@
       distribution: "space_around",
     },
     background_color: {
-      light: { type: "hex", value: "#FFFFFF" },
-      dark: { type: "hex", value: "#FFFFFF" },
+      light: { type: "hex", value: DEFAULT_BACKGROUND_COLOR },
+      dark: { type: "hex", value: DEFAULT_BACKGROUND_COLOR },
     },
     components,
     labels,
@@ -1082,7 +1087,7 @@
       padding: { top: 4, trailing: 12, bottom: 4, leading: 12 },
       margin: { top: 0, trailing: 0, bottom: 0, leading: 0 },
       text_lid: "badge",
-      color: { light: { type: "hex", value: "#000000" } },
+      color: { light: { type: "hex", value: DEFAULT_TEXT_COLOR } },
       font_weight: "bold",
       font_size: "body_s",
       horizontal_alignment: "center",
@@ -1104,8 +1109,8 @@
       distribution: "space_around",
     },
     background_color: {
-      light: { type: "hex", value: "#FFFFFF" },
-      dark: { type: "hex", value: "#FFFFFF" },
+      light: { type: "hex", value: DEFAULT_BACKGROUND_COLOR },
+      dark: { type: "hex", value: DEFAULT_BACKGROUND_COLOR },
     },
     components,
     labels,
@@ -1150,7 +1155,7 @@
       padding: { top: 4, trailing: 12, bottom: 4, leading: 12 },
       margin: { top: 0, trailing: 0, bottom: 0, leading: 0 },
       text_lid: "badge",
-      color: { light: { type: "hex", value: "#000000" } },
+      color: { light: { type: "hex", value: DEFAULT_TEXT_COLOR } },
       font_weight: "bold",
       font_size: "body_s",
       horizontal_alignment: "center",
@@ -1171,7 +1176,7 @@
       alignment: "center",
     },
     background_color: {
-      light: { type: "hex", value: "#FFFFFF" },
+      light: { type: "hex", value: DEFAULT_BACKGROUND_COLOR },
     },
     components: [
       {
@@ -1231,7 +1236,7 @@
           padding: { top: 4, trailing: 12, bottom: 4, leading: 12 },
           margin: { top: 4, trailing: 4, bottom: 4, leading: 4 },
           text_lid: "badge",
-          color: { light: { type: "hex", value: "#000000" } },
+          color: { light: { type: "hex", value: DEFAULT_TEXT_COLOR } },
           font_weight: "bold",
           font_size: "body_s",
           horizontal_alignment: "center",
@@ -1290,7 +1295,7 @@
           padding: { top: 4, trailing: 12, bottom: 4, leading: 12 },
           margin: { top: 4, trailing: 4, bottom: 4, leading: 4 },
           text_lid: "badge",
-          color: { light: { type: "hex", value: "#000000" } },
+          color: { light: { type: "hex", value: DEFAULT_TEXT_COLOR } },
           font_weight: "bold",
           font_size: "body_s",
           horizontal_alignment: "center",
@@ -1349,7 +1354,7 @@
           padding: { top: 4, trailing: 12, bottom: 4, leading: 12 },
           margin: { top: 4, trailing: 4, bottom: 4, leading: 4 },
           text_lid: "badge",
-          color: { light: { type: "hex", value: "#000000" } },
+          color: { light: { type: "hex", value: DEFAULT_TEXT_COLOR } },
           font_weight: "bold",
           font_size: "body_s",
           horizontal_alignment: "center",
@@ -1408,7 +1413,7 @@
           padding: { top: 4, trailing: 12, bottom: 4, leading: 12 },
           margin: { top: 4, trailing: 4, bottom: 4, leading: 4 },
           text_lid: "badge",
-          color: { light: { type: "hex", value: "#000000" } },
+          color: { light: { type: "hex", value: DEFAULT_TEXT_COLOR } },
           font_weight: "bold",
           font_size: "body_s",
           horizontal_alignment: "center",

package/dist/components/text/TextNode.stories.svelte

@@ -10,6 +10,7 @@
     horizontalAlignmentStoryMeta,
   } from "../../stories/meta-templates";
   import type { VariableDictionary } from "../../utils/variable-utils";
+  import { DEFAULT_COLOR_MODE, DEFAULT_TEXT_COLOR } from "../../utils/constants";
 
   /*
    * Documentation for this component can be found in https://www.notion.so/revenuecat/Text-e257cb046e104351861f8364ede617be?pvs=4
@@ -52,7 +53,7 @@
       purchaseState: {
         locale: "en_US",
         defaultLocale: "en_US",
-        colorMode: "light",
+        colorMode: DEFAULT_COLOR_MODE,
       },
     },
   });
@@ -157,8 +158,8 @@
       },
     },
     background_color: {
-      dark: { type: "hex", value: "#000000" },
-      light: { type: "hex", value: "#000000" },
+      dark: { type: "hex", value: DEFAULT_TEXT_COLOR },
+      light: { type: "hex", value: DEFAULT_TEXT_COLOR },
     },
     name: "hello world!",
   }}
@@ -212,8 +213,8 @@
       },
     },
     background_color: {
-      dark: { type: "hex", value: "#000000" },
-      light: { type: "hex", value: "#000000" },
+      dark: { type: "hex", value: DEFAULT_TEXT_COLOR },
+      light: { type: "hex", value: DEFAULT_TEXT_COLOR },
     },
     name: "hello world!",
   }}

package/dist/components/text/text-utils.js

@@ -1,9 +1,10 @@
 import { getActiveStateProps, getComponentStyles, getSizeStyle, getTextComponentTag, getTextStyles, prefixObject, stringifyStyles, } from "../../utils/style-utils";
+import { DEFAULT_BACKGROUND_COLOR, DEFAULT_TEXT_COLOR, } from "../../utils/constants";
 export const defaultColor = {
-    light: { type: "hex", value: "#000000" },
+    light: { type: "hex", value: DEFAULT_TEXT_COLOR },
 };
 export const defaultBackgroundColor = {
-    light: { type: "hex", value: "#FFFFFF" },
+    light: { type: "hex", value: DEFAULT_BACKGROUND_COLOR },
 };
 /**
  * Generates comprehensive styles for text components by combining text, component and size styles

package/dist/components/timeline/Timeline.stories.svelte

@@ -4,6 +4,7 @@
   import type { PurchaseState } from "../../data/state";
   import { defaultColor } from "../text/text-utils";
   import { type TimelineProps } from "../../data/entities";
+  import { DEFAULT_COLOR_MODE } from "../../utils/constants";
 
   const { Story } = defineMeta({
     title: "Components/Timeline",
@@ -15,7 +16,7 @@
   const purchaseState: PurchaseState = {
     locale: "en_US",
     defaultLocale: "en_US",
-    colorMode: "light",
+    colorMode: DEFAULT_COLOR_MODE,
   };
 
   const labels = {

package/dist/index.d.ts

@@ -3,7 +3,8 @@ export { type PaywallData as PaywallData } from "./data/entities";
 export { type VariableDictionary } from "./utils/variable-utils";
 export { default as Paywall } from "./components/paywall/Paywall.svelte";
 export { default as Stack } from "./components/stack/Stack.svelte";
-export { default as Button } from "./components/button/Button.svelte";
+export { default as ButtonDeprecated } from "./components/button/Button.svelte";
+export { default as Button } from "./ui/molecules/button.svelte";
 export { default as Text } from "./components/text/Text.svelte";
 export { default as Image } from "./components/image/Image.svelte";
 export { default as PurchaseButton } from "./components/purchase-button/PurchaseButton.svelte";

package/dist/index.js

@@ -4,7 +4,8 @@ export {} from "./data/entities";
 export {} from "./utils/variable-utils";
 export { default as Paywall } from "./components/paywall/Paywall.svelte";
 export { default as Stack } from "./components/stack/Stack.svelte";
-export { default as Button } from "./components/button/Button.svelte";
+export { default as ButtonDeprecated } from "./components/button/Button.svelte";
+export { default as Button } from "./ui/molecules/button.svelte";
 export { default as Text } from "./components/text/Text.svelte";
 export { default as Image } from "./components/image/Image.svelte";
 export { default as PurchaseButton } from "./components/purchase-button/PurchaseButton.svelte";

package/dist/stories/fixtures.d.ts

@@ -1,4 +1,5 @@
 import type { PaywallData } from "../data/entities";
+import type { BrandingAppearance } from "../ui/utils/branding";
 export declare const paywallData: PaywallData;
 export declare const alignmentPaywallData: PaywallData;
 export declare const fontsPaywallData: PaywallData;
@@ -22,3 +23,4 @@ export declare const paywallWithFooter: PaywallData;
 export declare const errorPaywallData: PaywallData;
 export declare const fallbackPaywallData: PaywallData;
 export declare const e2eTestTemplate: PaywallData;
+export declare const brandingAppearances: Record<string, BrandingAppearance | null>;

package/dist/stories/fixtures.js

@@ -24333,3 +24333,39 @@ export const e2eTestTemplate = {
         google: ["TW", "KZ", "MX", "PH", "TH"],
     },
 };
+export const brandingAppearances = {
+    None: null,
+    Fantastic: {
+        shapes: "rectangle",
+        color_form_bg: "#313131",
+        color_error: "#E79462",
+        color_product_info_bg: "#ffffff",
+        color_buttons_primary: "#AC7DE3",
+        color_accent: "#99BB37",
+        color_page_bg: "#ffffff",
+        font: "sans-serif",
+        show_product_description: true,
+    },
+    Igify: {
+        color_accent: "#969696",
+        color_buttons_primary: "#000000",
+        color_error: "#e61054",
+        color_form_bg: "#FFFFFF",
+        color_page_bg: "#114ab8",
+        color_product_info_bg: "#114ab8",
+        font: "default",
+        shapes: "default",
+        show_product_description: true,
+    },
+    Dipsea: {
+        color_accent: "#DF5539",
+        color_buttons_primary: "#DF5539",
+        color_error: "#F2545B",
+        color_form_bg: "#372CBC",
+        color_page_bg: "#26122F",
+        color_product_info_bg: "#26122F",
+        font: "default",
+        shapes: "pill",
+        show_product_description: false,
+    },
+};