@revenuecat/purchases-ui-js 0.0.18 → 0.0.19

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

@@ -60,11 +60,11 @@ type ComponentStyleVariables = {
  * @param params - Component style configuration object
  * @returns CSS style object with component styles
  */
-export declare function getComponentStyles({ backgroundColor, border, margin, padding, textColor, colorMode, shape, shadow, }: {
+export declare function getComponentStyles({ background_color, border, margin, padding, color, colorMode, shape, shadow, }: {
     padding?: Spacing;
     margin?: Spacing;
-    backgroundColor?: ColorType;
-    textColor?: ColorType;
+    background_color?: ColorType;
+    color?: ColorType;
     border?: BorderType;
     colorMode?: ColorMode;
     shape?: ShapeType;
@@ -151,6 +151,8 @@ export declare function stringifyStyles(styles: Record<string, string | number>)
  * @returns the id of the first package marked as `is_selected_by_default` or undefined
  */
 export declare function findSelectedPackageId(paywallData: PaywallData): string | undefined;
-export declare const getActiveStateProps: <T>(overrides?: Record<string, T>, componentState?: ComponentState) => T;
+export declare const getActiveStateProps: <T>(overrides?: {
+    states?: Record<string, T>;
+}, componentState?: ComponentState) => T;
 export declare function prefixObject(object?: Record<string, string | number>, prefix?: string): Record<string, string | number>;
 export {};

package/dist/utils/style-utils.js

@@ -88,7 +88,7 @@ export function getCornerRadiusStyle(corners) {
  * @param params - Component style configuration object
  * @returns CSS style object with component styles
  */
-export function getComponentStyles({ backgroundColor, border, margin, padding, textColor, colorMode = "light", shape, shadow, }) {
+export function getComponentStyles({ background_color, border, margin, padding, color, colorMode = "light", shape, shadow, }) {
     const stylesObject = {
         "--margin-block-start": "0px",
         "--margin-inline-end": "0px",
@@ -113,16 +113,16 @@ export function getComponentStyles({ backgroundColor, border, margin, padding, t
     if (margin) {
         Object.assign(stylesObject, getSpacingStyle(margin, "margin"));
     }
-    if (backgroundColor) {
+    if (background_color) {
         stylesObject["--background"] = getColor({
-            colorMap: backgroundColor,
+            colorMap: background_color,
             colorMode,
             fallback: "transparent",
         });
     }
-    if (textColor) {
+    if (color) {
         stylesObject["--text-color"] = getColor({
-            colorMap: textColor,
+            colorMap: color,
             colorMode,
             fallback: "#000000",
         });
@@ -385,7 +385,7 @@ export const getActiveStateProps = (overrides, componentState) => {
     const activeStateKeys = getComponentActiveStateKeys(componentState);
     const activeStateProps = activeStateKeys.reduce((props, key) => {
         if (overrides) {
-            const styles = overrides[key] || {};
+            const styles = overrides?.states?.[key] || {};
             return { ...props, ...styles };
         }
         return props;

package/package.json

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