@revenuecat/purchases-ui-js 0.0.16 → 0.0.18

package/dist/stories/meta-templates.d.ts

@@ -7,7 +7,6 @@ export declare const fontWeightStoryMeta: InputType;
 export declare const fontSizeStoryMeta: InputType;
 export declare const textStyleStoryMeta: InputType;
 export declare const horizontalAlignmentStoryMeta: InputType;
-export declare const colorModeStoryMeta: InputType;
 export declare const shadowStoryMeta: InputType;
 export declare const borderStoryMeta: InputType;
 export declare const sizeStoryMeta: InputType;

package/dist/stories/meta-templates.js

@@ -85,11 +85,6 @@ export const horizontalAlignmentStoryMeta = {
     options: ["center", "start", "end"],
     description: "Text horizontal alignment",
 };
-export const colorModeStoryMeta = {
-    control: { type: "select" },
-    options: ["light", "dark"],
-    description: "Color mode",
-};
 export const shadowStoryMeta = {
     control: {
         type: "object",

package/dist/types.d.ts

@@ -3,7 +3,7 @@ export type ColorStop = {
     color: string;
     percent: number;
 };
-type Color = {
+export type Color = {
     type: "hex" | "alias" | "linear" | "radial";
     value?: string;
     degrees?: number;
@@ -48,7 +48,11 @@ export declare enum FontSizes {
     heading_xl = "26px",
     heading_xxl = "32px"
 }
-export type TextAlignment = "center" | "start" | "end";
+export declare enum TextAlignments {
+    leading = "start",
+    center = "center",
+    trailing = "end"
+}
 export type SizeType = {
     width: Size;
     height: Size;
@@ -63,10 +67,13 @@ type RelativeSize = {
     type: FitTypes;
 };
 export type ShapeType = RectangleShape | PillShape;
-type RectangleShape = {
+export type RectangleShape = {
     type: "rectangle";
     corners: CornerRadiusType;
 };
+export type CircleShape = {
+    type: "circle";
+};
 type PillShape = {
     type: "pill";
 };
@@ -97,10 +104,11 @@ type HorizontalAlignment = {
     alignment: "leading" | "center" | "trailing";
     distribution?: Distribution;
 };
-type ZAlignment = {
+export type AlignmentType = "top_leading" | "top" | "top_trailing" | "leading" | "center" | "trailing" | "bottom_leading" | "bottom" | "bottom_trailing";
+export type ZAlignment = {
     type: "zlayer";
-    alignment: "top_leading" | "top" | "top_trailing" | "leading" | "center" | "trailing" | "bottom_leading" | "bottom" | "bottom_trailing";
-    distribution: never;
+    alignment: AlignmentType;
+    distribution?: never;
 };
 type Distribution = "space_between" | "space_around" | "space_evenly" | "start" | "center" | "end";
 export type ShadowType = {
@@ -111,7 +119,8 @@ export type ShadowType = {
 };
 export declare enum StackDirection {
     vertical = "column",
-    horizontal = "row"
+    horizontal = "row",
+    zlayer = "zstack"
 }
 export declare enum StackAlignment {
     top = "flex-start",

package/dist/types.js

@@ -37,10 +37,17 @@ export var FontSizes;
     FontSizes["heading_xl"] = "26px";
     FontSizes["heading_xxl"] = "32px";
 })(FontSizes || (FontSizes = {}));
+export var TextAlignments;
+(function (TextAlignments) {
+    TextAlignments["leading"] = "start";
+    TextAlignments["center"] = "center";
+    TextAlignments["trailing"] = "end";
+})(TextAlignments || (TextAlignments = {}));
 export var StackDirection;
 (function (StackDirection) {
     StackDirection["vertical"] = "column";
     StackDirection["horizontal"] = "row";
+    StackDirection["zlayer"] = "zstack";
 })(StackDirection || (StackDirection = {}));
 export var StackAlignment;
 (function (StackAlignment) {

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

@@ -1,5 +1,18 @@
-import type { ComponentLocalizations, ComponentState, ImageMaskShapeType, PaywallData, TextNodeProps } from "../data/entities.js";
-import { type BorderType, type ColorMode, type ColorType, type DimensionType, FontSizeTags, type ShadowType, type ShapeType, type SizeType, type Spacing } from "../types.js";
+import type { ComponentState, ImageMaskShapeType, PaywallData, TextNodeProps } from "../data/entities.js";
+import { type BorderType, type ColorMode, type ColorType, type CornerRadiusType, type DimensionType, FontSizeTags, type ShadowType, type ShapeType, type SizeType, type Spacing } from "../types.js";
+type MarginVariables = {
+    "--margin-block-start": string;
+    "--margin-inline-end": string;
+    "--margin-block-end": string;
+    "--margin-inline-start": string;
+};
+type PaddingVariables = {
+    "--padding-block-start": string;
+    "--padding-inline-end": string;
+    "--padding-block-end": string;
+    "--padding-inline-start": string;
+};
+type SpacingStyleVariables = MarginVariables | PaddingVariables;
 export type TextComponentTags = "p" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
 /**
  * Maps font size to appropriate HTML heading tag
@@ -17,6 +30,31 @@ export declare function getColor({ colorMap, colorMode, fallback, }: {
     colorMode?: ColorMode;
     fallback?: string;
 }): string;
+/**
+ * Generates CSS border style string
+ * @param border - Border configuration object
+ * @param colorMode - Color mode (light/dark)
+ * @returns CSS border style string
+ */
+export declare function getBorderStyle(border?: BorderType, colorMode?: ColorMode): string;
+type CornerRadiusStyleVariables = {
+    "--border-start-start-radius": string;
+    "--border-start-end-radius": string;
+    "--border-end-start-radius": string;
+    "--border-end-end-radius": string;
+};
+/**
+ * Generates CSS border radius style for corners
+ * @param corners - Corner radius configuration
+ * @returns CSS border radius string
+ */
+export declare function getCornerRadiusStyle(corners: CornerRadiusType): CornerRadiusStyleVariables;
+type ComponentStyleVariables = {
+    "--background": string;
+    "--text-color": string;
+    "--border": string;
+    "--shadow": string;
+} & CornerRadiusStyleVariables & SpacingStyleVariables;
 /**
  * Generates comprehensive component styles including spacing, colors, borders and shadows
  * @param params - Component style configuration object
@@ -31,30 +69,20 @@ export declare function getComponentStyles({ backgroundColor, border, margin, pa
     colorMode?: ColorMode;
     shape?: ShapeType;
     shadow?: ShadowType;
-}): {
-    "--margin-block-start": string;
-    "--margin-inline-end": string;
-    "--margin-block-end": string;
-    "--margin-inline-start": string;
-    "--padding-block-start": string;
-    "--padding-inline-end": string;
-    "--padding-block-end": string;
-    "--padding-inline-start": string;
-    "--background": string;
-    "--text-color": string;
-    "--border": string;
-    "--border-radius": string;
-    "--shadow": string;
+}): ComponentStyleVariables;
+type SizeStyleVariables = {
+    "--width": string;
+    "--height": string;
+    "--flex": string;
 };
 /**
  * Generates size-related CSS styles for components
  * @param size - Size configuration object
  * @returns CSS style object with size properties
  */
-export declare function getSizeStyle(size: SizeType): {
-    "--width": string;
-    "--height": string;
-    "--flex": string;
+export declare function getSizeStyle(size: SizeType): SizeStyleVariables;
+type GradientStyleVariables = {
+    "--background": string;
 };
 /**
  * Generates gradient background styles
@@ -62,27 +90,47 @@ export declare function getSizeStyle(size: SizeType): {
  * @param gradientColors - Array of colors for gradient
  * @returns CSS style object with gradient background
  */
-export declare function getGradientStyle(colorMode: ColorMode, gradientColors?: ColorType[]): {
-    "--background": string;
+export declare function getGradientStyle(colorMode: ColorMode, gradientColors?: ColorType[]): GradientStyleVariables;
+type MaskStyleVariables = {
+    "--border-start-start-radius": string;
+    "--border-start-end-radius": string;
+    "--border-end-start-radius": string;
+    "--border-end-end-radius": string;
+    "--clip-path": string;
 };
 /**
  * Generates mask styles for images
  * @param maskShape - Shape configuration for image mask
  * @returns CSS style object with mask properties
  */
-export declare const getMaskStyle: (maskShape?: ImageMaskShapeType) => {
-    "--corner-radius": string;
-    "--clip-path": string;
+export declare const getMaskStyle: (maskShape?: ImageMaskShapeType) => MaskStyleVariables;
+type InsetStyleVariables = {
+    "--inset": string;
+    "--transform": string;
+};
+export declare function getInsetStyles(dimension: DimensionType): InsetStyleVariables;
+type DimensionVariableType = {
+    "--direction": string;
+    "--alignment": string;
+    "--distribution": string;
+    "--position": string;
+    "--inset": string;
+    "--transform": string;
 };
 /**
  * Generates dimension-related styles for stack components
  * @param dimension - Dimension configuration object
  * @returns CSS style object with flex layout properties
  */
-export declare function getDimensionStyle(dimension: DimensionType): {
-    "--direction": string;
-    "--alignment": string;
-    "--distribution": string;
+export declare function getDimensionStyle(dimension: DimensionType): DimensionVariableType;
+type TextStyleVariables = {
+    "--text-align": string;
+    "--font-weight": number | string;
+    "--font-size": string;
+    "--font-family": string;
+    "--background-clip": string;
+    "--text-fill-color": string;
+    "--background": string;
 };
 /**
  * Generates text-related styles
@@ -90,24 +138,13 @@ export declare function getDimensionStyle(dimension: DimensionType): {
  * @param colorMode - The currently selected ColorMode (dark/light)
  * @returns CSS style object with text formatting properties
  */
-export declare function getTextStyles(props: TextNodeProps, colorMode?: ColorMode): Record<string, unknown>;
+export declare function getTextStyles(props: TextNodeProps, colorMode?: ColorMode): TextStyleVariables;
 /**
  * Converts a style object to a CSS string
  * @param styles - Object containing CSS properties and values
  * @returns CSS string
  */
 export declare function stringifyStyles(styles: Record<string, string | number>): string;
-/**
- * Given a ComponentLocalizations object and a locale returns the label with label_id in the chosen locale, if any. Falls
- * back to the label with the same label_id in the fallbackLocale, if any. Finally returns undefined if no label can be
- * found for the requested label_id.
- * @param label_id - The id of the label to be returned
- * @param locale - The preferred locale to return the label
- * @param fallbackLocale - The locale to fall back to in case no label is found in the preferred one
- * @param labels - A ComponentLocalizations instance
- * @returns The label in the preferred or fallback locale, or undefined.
- */
-export declare function getLabelById(label_id: string, locale: string, fallbackLocale: string, labels: ComponentLocalizations): string | undefined;
 /**
  * Given an instance of PaywallData, returns the id of the first package marked as `is_selected_by_default` if any.
  * @param paywallData
@@ -115,3 +152,5 @@ export declare function getLabelById(label_id: string, locale: string, fallbackL
  */
 export declare function findSelectedPackageId(paywallData: PaywallData): string | undefined;
 export declare const getActiveStateProps: <T>(overrides?: 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

@@ -1,4 +1,4 @@
-import { FontSizes, FontSizeTags, FontWeights, StackAlignment, StackDirection, StackDistribution, } from "../types.js";
+import { FontSizes, FontSizeTags, FontWeights, StackAlignment, StackDirection, StackDistribution, TextAlignments, } from "../types.js";
 /**
  * Generates CSS spacing styles for margin or padding
  * @param spacing - The spacing object containing top, trailing, bottom, and leading values
@@ -6,14 +6,21 @@ import { FontSizes, FontSizeTags, FontWeights, StackAlignment, StackDirection, S
  * @returns CSS style object with logical properties for spacing
  */
 function getSpacingStyle(spacing, spacingKey) {
+    const styles = {
+        [`--${spacingKey}-block-start`]: "0px",
+        [`--${spacingKey}-inline-end`]: "0px",
+        [`--${spacingKey}-block-end`]: "0px",
+        [`--${spacingKey}-inline-start`]: "0px",
+    };
     if (!spacing || !spacingKey)
-        return "";
-    return {
+        return styles;
+    Object.assign(styles, {
         [`--${spacingKey}-block-start`]: `${spacing.top ?? 0}px`,
         [`--${spacingKey}-inline-end`]: `${spacing.trailing ?? 0}px`,
         [`--${spacingKey}-block-end`]: `${spacing.bottom ?? 0}px`,
         [`--${spacingKey}-inline-start`]: `${spacing.leading ?? 0}px`,
-    };
+    });
+    return styles;
 }
 /**
  * Maps font size to appropriate HTML heading tag
@@ -47,8 +54,9 @@ export function getColor({ colorMap, colorMode = "light", fallback = "FFFFFF", }
                 .map((point) => `${point.color} ${point.percent}%`)
                 .join(", ");
             return `radial-gradient(${colorPoints})`;
+        default:
+            return fallback;
     }
-    return fallback;
 }
 /**
  * Generates CSS border style string
@@ -56,7 +64,9 @@ export function getColor({ colorMap, colorMode = "light", fallback = "FFFFFF", }
  * @param colorMode - Color mode (light/dark)
  * @returns CSS border style string
  */
-function getBorderStyle(border, colorMode = "light") {
+export function getBorderStyle(border, colorMode = "light") {
+    if (!border)
+        return "";
     const color = getColor({ colorMap: border.color, colorMode });
     return `${border.width}px solid ${color}`;
 }
@@ -65,8 +75,13 @@ function getBorderStyle(border, colorMode = "light") {
  * @param corners - Corner radius configuration
  * @returns CSS border radius string
  */
-function getCornerRadiusStyle(corners) {
-    return `${corners.top_leading}px ${corners.top_trailing}px ${corners.bottom_trailing}px ${corners.bottom_leading}px`;
+export function getCornerRadiusStyle(corners) {
+    return {
+        "--border-start-start-radius": `${corners.top_leading}px`,
+        "--border-start-end-radius": `${corners.top_trailing}px`,
+        "--border-end-start-radius": `${corners.bottom_leading}px`,
+        "--border-end-end-radius": `${corners.bottom_trailing}px`,
+    };
 }
 /**
  * Generates comprehensive component styles including spacing, colors, borders and shadows
@@ -83,10 +98,13 @@ export function getComponentStyles({ backgroundColor, border, margin, padding, t
         "--padding-inline-end": "0px",
         "--padding-block-end": "0px",
         "--padding-inline-start": "0px",
-        "--background": "transparent",
-        "--text-color": "#000000",
+        "--background": "initial",
+        "--text-color": "initial",
         "--border": "none",
-        "--border-radius": "0px",
+        "--border-end-start-radius": "0px",
+        "--border-end-end-radius": "0px",
+        "--border-start-start-radius": "0px",
+        "--border-start-end-radius": "0px",
         "--shadow": "none",
     };
     if (padding) {
@@ -113,10 +131,15 @@ export function getComponentStyles({ backgroundColor, border, margin, padding, t
         stylesObject["--border"] = getBorderStyle(border, colorMode);
     }
     if (shape?.type === "rectangle" && shape.corners) {
-        stylesObject["--border-radius"] = getCornerRadiusStyle(shape.corners);
+        Object.assign(stylesObject, getCornerRadiusStyle(shape.corners));
     }
     if (shape?.type === "pill") {
-        stylesObject["--border-radius"] = "9999px";
+        Object.assign(stylesObject, getCornerRadiusStyle({
+            bottom_leading: 9999,
+            bottom_trailing: 9999,
+            top_leading: 9999,
+            top_trailing: 9999,
+        }));
     }
     if (shadow) {
         stylesObject["--shadow"] = `${shadow.x}px ${shadow.y}px ${shadow.radius}px 
@@ -124,34 +147,40 @@ export function getComponentStyles({ backgroundColor, border, margin, padding, t
     }
     return stylesObject;
 }
+function getSizeValue(size) {
+    if (size.type === "fixed") {
+        return `${size.value}px`;
+    }
+    if (size.type === "fit") {
+        return "fit-content";
+    }
+    if (size.type === "fill") {
+        const userAgent = navigator.userAgent;
+        const isFirefox = userAgent.match(/firefox|fxios/i);
+        return isFirefox ? "-moz-available" : "-webkit-fill-available";
+    }
+    return "initial";
+}
 /**
  * Generates size-related CSS styles for components
  * @param size - Size configuration object
  * @returns CSS style object with size properties
  */
 export function getSizeStyle(size) {
-    function getSizeValue(size) {
-        if (size.type === "fixed") {
-            return `${size.value}px`;
-        }
-        if (size.type === "fit") {
-            return "fit-content";
-        }
-        if (size.type === "fill") {
-            const userAgent = navigator.userAgent;
-            const isFirefox = userAgent.match(/firefox|fxios/i);
-            return isFirefox ? "-moz-available" : "-webkit-fill-available";
-        }
-        return "unset";
-    }
+    const styles = {
+        "--width": "initial",
+        "--height": "initial",
+        "--flex": "initial",
+    };
     const width = getSizeValue(size.width);
     const height = getSizeValue(size.height);
     const isGrow = size.width.type === "fill" || size.height.type === "fill";
-    return {
+    Object.assign(styles, {
         "--width": width,
         "--height": height,
-        "--flex": isGrow ? "unset" : "0 1 auto",
-    };
+        "--flex": isGrow ? "initial" : "0 1 auto",
+    });
+    return styles;
 }
 /**
  * Generates gradient background styles
@@ -173,25 +202,80 @@ export function getGradientStyle(colorMode, gradientColors) {
  */
 export const getMaskStyle = (maskShape) => {
     const maskStyles = {
-        "--corner-radius": "0px",
+        "--border-end-start-radius": "0px",
+        "--border-end-end-radius": "0px",
+        "--border-start-start-radius": "0px",
+        "--border-start-end-radius": "0px",
         "--clip-path": "none",
     };
     if (maskShape?.type === "circle") {
-        maskStyles["--corner-radius"] = "50%";
+        Object.assign(maskStyles, {
+            "--border-end-start-radius": "50%",
+            "--border-end-end-radius": "50%",
+            "--border-start-start-radius": "50%",
+            "--border-start-end-radius": "50%",
+        });
     }
     if (maskShape?.type === "rectangle" && maskShape.corners) {
-        maskStyles["--corner-radius"] = getCornerRadiusStyle(maskShape.corners);
+        Object.assign(maskStyles, getCornerRadiusStyle(maskShape.corners));
     }
     // TODO: rework this implementation
     if (maskShape?.type === "convex") {
-        maskStyles["--corner-radius"] = "0 0 50% 50%;";
+        Object.assign(maskStyles, {
+            "--border-start-start-radius": "0%",
+            "--border-start-end-radius": "0%",
+            "--border-end-start-radius": "50%",
+            "--border-end-end-radius": "50%",
+        });
     }
     if (maskShape?.type === "concave") {
-        maskStyles["--clip-path"] =
-            "polygon(0 0, 100% 0, 100% 100%, 50% 110%, 0 100%);";
+        Object.assign(maskStyles, {
+            "--clip-path": "polygon(0 0, 100% 0, 100% 100%, 50% 110%, 0 100%);",
+        });
     }
     return maskStyles;
 };
+export function getInsetStyles(dimension) {
+    const defaultStyles = {
+        "--inset": "initial",
+        "--transform": "initial",
+    };
+    switch (dimension.alignment) {
+        case "top_leading":
+            defaultStyles["--inset"] = "0 auto auto 0";
+            break;
+        case "top":
+            defaultStyles["--inset"] = "auto auto auto 50%";
+            defaultStyles["--transform"] = "translate(-50%, 0)";
+            break;
+        case "top_trailing":
+            defaultStyles["--inset"] = "0 0 auto auto";
+            break;
+        case "leading":
+            defaultStyles["--inset"] = "50% 0 50% 0";
+            defaultStyles["--transform"] = "translate(0, -50%)";
+            break;
+        case "center":
+            defaultStyles["--inset"] = "50% auto auto 50%";
+            defaultStyles["--transform"] = "translate(-50%, -50%)";
+            break;
+        case "trailing":
+            defaultStyles["--inset"] = "50% 0 50% auto";
+            defaultStyles["--transform"] = "translate(0, -50%)";
+            break;
+        case "bottom_leading":
+            defaultStyles["--inset"] = "auto auto 0 0";
+            break;
+        case "bottom":
+            defaultStyles["--inset"] = "auto 50% 0 auto";
+            defaultStyles["--transform"] = "translate(50%, 0)";
+            break;
+        case "bottom_trailing":
+            defaultStyles["--inset"] = "auto 0 0 auto";
+            break;
+    }
+    return defaultStyles;
+}
 /**
  * Generates dimension-related styles for stack components
  * @param dimension - Dimension configuration object
@@ -202,15 +286,19 @@ export function getDimensionStyle(dimension) {
         "--direction": "initial",
         "--alignment": "initial",
         "--distribution": "initial",
+        "--position": "relative",
+        "--inset": "initial",
+        "--transform": "initial",
     };
-    if (dimension.type === "zlayer") {
-        // TODO: Review with Monetization team
-    }
-    else {
-        styles["--direction"] = StackDirection[dimension.type];
-        styles["--alignment"] = StackAlignment[dimension.alignment];
+    if (dimension.type !== "zlayer") {
+        Object.assign(styles, {
+            "--direction": StackDirection[dimension.type],
+            "--alignment": StackAlignment[dimension.alignment],
+        });
         if (dimension.distribution) {
-            styles["--distribution"] = StackDistribution[dimension.distribution];
+            Object.assign(styles, {
+                "--distribution": StackDistribution[dimension.distribution],
+            });
         }
     }
     return styles;
@@ -225,21 +313,26 @@ export function getTextStyles(props, colorMode = "light") {
     const { font_size, horizontal_alignment, font_weight, font_name, color } = props;
     const styles = {
         "--text-align": "initial",
-        "--font-weight": 400,
+        "--font-weight": "initial",
         "--font-size": "initial",
         "--font-family": "sans-serif",
-        "--background-clip": "initial",
-        "--text-fill-color": "initial",
+        "--background-clip": "none",
+        "--text-fill-color": "none",
+        "--background": "unset",
     };
-    styles["--text-align"] = horizontal_alignment;
-    styles["--font-weight"] = FontWeights[font_weight] || FontWeights.regular;
-    styles["--font-size"] = FontSizes[font_size] || FontSizes.body_m;
-    styles["--font-family"] = font_name || "sans-serif";
+    Object.assign(styles, {
+        "--text-align": TextAlignments[horizontal_alignment] || TextAlignments.leading,
+        "--font-weight": FontWeights[font_weight] || FontWeights.regular,
+        "--font-size": FontSizes[font_size] || FontSizes.body_m,
+        "--font-family": font_name || "sans-serif",
+    });
     if (color &&
         (color[colorMode]?.type === "linear" || color[colorMode]?.type === "radial")) {
-        styles["--background-clip"] = "text";
-        styles["--text-fill-color"] = "transparent";
-        styles["--background"] = getColor({ colorMap: color, colorMode });
+        Object.assign(styles, {
+            "--background-clip": "text",
+            "--text-fill-color": "transparent",
+            "--background": getColor({ colorMap: color, colorMode }),
+        });
     }
     return styles;
 }
@@ -253,23 +346,6 @@ export function stringifyStyles(styles) {
         .map(([key, value]) => `${key}: ${value}`)
         .join("; ");
 }
-/**
- * Given a ComponentLocalizations object and a locale returns the label with label_id in the chosen locale, if any. Falls
- * back to the label with the same label_id in the fallbackLocale, if any. Finally returns undefined if no label can be
- * found for the requested label_id.
- * @param label_id - The id of the label to be returned
- * @param locale - The preferred locale to return the label
- * @param fallbackLocale - The locale to fall back to in case no label is found in the preferred one
- * @param labels - A ComponentLocalizations instance
- * @returns The label in the preferred or fallback locale, or undefined.
- */
-export function getLabelById(label_id, locale, fallbackLocale, labels) {
-    const fallback = labels[fallbackLocale]?.[label_id];
-    if (!(labels[locale] || {})[label_id]) {
-        return fallback;
-    }
-    return labels[locale][label_id];
-}
 /**
  * Given an instance of PaywallData, returns the id of the first package marked as `is_selected_by_default` if any.
  * @param paywallData
@@ -326,3 +402,14 @@ const getComponentActiveStateKeys = (componentState) => {
     }, []);
     return stateKeys;
 };
+export function prefixObject(object, prefix) {
+    if (!object)
+        return {};
+    if (!prefix)
+        return object;
+    return Object.entries(object).reduce((acc, [key, value]) => {
+        const replacedKey = key.replace(/^--/, `${prefix}-`);
+        acc[`--${replacedKey}`] = value;
+        return acc;
+    }, {});
+}

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

@@ -1,3 +1,4 @@
+import type { ComponentLocalizations } from "../data/entities";
 export declare const VARIABLE_NAMES: string[];
 export type VariableDictionary = {
     product_name: string | number | undefined;
@@ -31,3 +32,29 @@ export type ReplaceVariablesProps = {
  * @returns The string with values: "Try CatGPT Annual for only $59.99/yr ($4.99/mo)"
  */
 export declare const replaceVariables: ({ value, variableDictionary: dictionary, }: ReplaceVariablesProps) => string | undefined;
+/**
+ * Given a ComponentLocalizations object and a locale returns the label with label_id in the chosen locale, if any. Falls
+ * back to the label with the same label_id in the fallbackLocale, if any. Finally returns undefined if no label can be
+ * found for the requested label_id.
+ * @param label_id - The id of the label to be returned
+ * @param locale - The preferred locale to return the label
+ * @param fallbackLocale - The locale to fall back to in case no label is found in the preferred one
+ * @param labels - A ComponentLocalizations instance
+ * @returns The label in the preferred or fallback locale, or undefined.
+ */
+export declare function getLabelById(label_id: string | null | undefined, locale: string, fallbackLocale: string, labels: ComponentLocalizations): string | undefined;
+/**
+ * Gets a label by ID and replaces any variables in it with values from the dictionary
+ * @param text_lid - The ID of the text label to retrieve
+ * @param purchaseState - Object containing locale and defaultLocale
+ * @param labels - ComponentLocalizations containing the labels
+ * @param variableDictionary - Dictionary of variables to replace in the label text
+ * @returns The label with variables replaced, or undefined if label not found
+ */
+export declare function getLabelAndReplaceVariables({ text_lid, locale, defaultLocale, labels, variableDictionary, }: {
+    text_lid?: string;
+    locale: string;
+    defaultLocale: string;
+    labels: ComponentLocalizations;
+    variableDictionary?: VariableDictionary;
+}): string | undefined;