@revenuecat/purchases-ui-js 0.0.17 → 0.0.18

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

@@ -9,6 +9,7 @@
     getTextControlStoryMeta,
     horizontalAlignmentStoryMeta,
   } from "../../stories/meta-templates";
+  import type { VariableDictionary } from "../../utils/variable-utils";
 
   /*
    * Documentation for this component can be found in https://www.notion.so/revenuecat/Text-e257cb046e104351861f8364ede617be?pvs=4
@@ -72,7 +73,7 @@
   args={{
     font_weight: "bold",
     text_style: "normal",
-    horizontal_alignment: "start",
+    horizontal_alignment: "leading",
     name: "hello world!",
   }}
 />
@@ -94,7 +95,7 @@
   args={{
     font_weight: "regular",
     text_style: "normal",
-    horizontal_alignment: "start",
+    horizontal_alignment: "leading",
     color: {
       dark: { type: "hex", value: "#3471eb" },
       light: { type: "hex", value: "#3471eb" },
@@ -113,8 +114,8 @@
   args={{
     font_weight: "regular",
     text_style: "normal",
-    horizontal_alignment: "start",
-    size: { width: { type: "fixed", value: 200 }, height: { type: "fixed" } },
+    horizontal_alignment: "leading",
+    size: { width: { type: "fixed", value: 200 }, height: { type: "fit" } },
     padding: { top: 20, trailing: 20, bottom: 20, leading: 20 },
     color: {
       dark: {
@@ -169,8 +170,8 @@
   args={{
     font_weight: "regular",
     text_style: "normal",
-    horizontal_alignment: "start",
-    size: { width: { type: "fixed", value: 200 }, height: { type: "fixed" } },
+    horizontal_alignment: "leading",
+    size: { width: { type: "fixed", value: 200 }, height: { type: "fit" } },
     padding: { top: 20, trailing: 20, bottom: 20, leading: 20 },
     color: {
       dark: {
@@ -224,7 +225,7 @@
   args={{
     font_weight: "regular",
     text_style: "normal",
-    horizontal_alignment: "start",
+    horizontal_alignment: "leading",
     padding: { top: 16, trailing: 24, bottom: 16, leading: 24 },
     margin: { top: 8, trailing: 0, bottom: 8, leading: 0 },
     name: "hello world!",
@@ -237,11 +238,11 @@
   args={{
     font_weight: "regular",
     text_style: "normal",
-    horizontal_alignment: "start",
+    horizontal_alignment: "leading",
     padding: { top: 16, trailing: 24, bottom: 16, leading: 24 },
     margin: { top: 8, trailing: 0, bottom: 8, leading: 0 },
     name: "hello world!",
-    variableDictionary: mockVariableDictionary,
+    variableDictionary: mockVariableDictionary as VariableDictionary,
     labels: {
       en_US: {
         lb123:
@@ -257,11 +258,11 @@
   args={{
     font_weight: "regular",
     text_style: "normal",
-    horizontal_alignment: "start",
+    horizontal_alignment: "leading",
     padding: { top: 16, trailing: 24, bottom: 16, leading: 24 },
     margin: { top: 8, trailing: 0, bottom: 8, leading: 0 },
     name: "hello world!",
-    variableDictionary: mockVariableDictionary,
+    variableDictionary: mockVariableDictionary as VariableDictionary,
     labels: {
       en_US: {
         lb123:

package/dist/components/text/TextNode.svelte

@@ -1,13 +1,12 @@
 <script lang="ts">
-  import { getTextComponentStyles } from "./text-utils";
+  import {
+    getHtmlFromMarkdown,
+    getTextNodeStyles,
+    getTextWrapperStyles,
+  } from "./text-utils";
   import Text from "./Text.svelte";
   import type { TextNodeProps } from "../../data/entities";
-  import {
-    getComponentStyles,
-    getLabelAndReplaceVariables,
-    getSizeStyle,
-    stringifyStyles,
-  } from "../../utils/style-utils";
+  import { getLabelAndReplaceVariables } from "../../utils/variable-utils";
 
   const {
     id,
@@ -19,8 +18,9 @@
     size,
     ...restProps
   }: TextNodeProps = $props();
+
   const { tagToRender, textStyles } = $derived(
-    getTextComponentStyles({
+    getTextNodeStyles({
       id,
       labels,
       text_lid,
@@ -30,16 +30,10 @@
       ...restProps,
     }),
   );
+
   const wrapperStyles = $derived(
-    stringifyStyles({
-      ...getComponentStyles({
-        backgroundColor: background_color,
-        ...restProps,
-      }),
-      ...getSizeStyle(size),
-    }),
+    getTextWrapperStyles(restProps, size, background_color),
   );
-  const styles = $derived(stringifyStyles(textStyles));
 
   const parsedLabel = $derived(
     getLabelAndReplaceVariables({
@@ -50,20 +44,23 @@
       variableDictionary,
     }),
   );
+  const markdownParsed = $derived(getHtmlFromMarkdown(parsedLabel));
 </script>
 
-<span style={wrapperStyles} class="text-wrapper">
-  <Text styleVariables={styles} component={tagToRender} {id}>
-    {parsedLabel}
+<span style={wrapperStyles} class="rc-pw-text-wrapper">
+  <Text styleVariables={textStyles} component={tagToRender} {id}>
+    {@html markdownParsed}
   </Text>
 </span>
 
 <style>
-  .text-wrapper {
+  .rc-pw-text-wrapper {
     display: block;
-
-    height: var(--height, unset);
-    width: var(--width, unset);
-    background: var(--background, none);
+    height: var(--text-height, initial);
+    width: var(--text-width, initial);
+    background: var(--text-background, none);
+    position: var(--text-position, relative);
+    inset: var(--text-inset, 0);
+    transform: var(--text-transform, initial);
   }
 </style>

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

@@ -1,16 +1,5 @@
-import { type TextComponentTags } from "../../utils/style-utils";
 import type { TextNodeProps } from "../../data/entities";
-import type { ColorType } from "../../types";
-type TextStyleVariables = {
-    "--width": string;
-    "--height": string;
-    "--text-align": string;
-    "--font-weight": number | string;
-    "--font-size": string;
-    "--font-family": string;
-    "--background-clip": string;
-    "--text-fill-color": string;
-};
+import type { ColorType, SizeType } from "../../types";
 export declare const defaultColor: ColorType;
 export declare const defaultBackgroundColor: ColorType;
 /**
@@ -19,7 +8,12 @@ export declare const defaultBackgroundColor: ColorType;
  * @returns Object containing text style variables and the appropriate HTML tag to render
  */
 export declare const getTextComponentStyles: (props: TextNodeProps) => {
-    textStyles: Partial<TextStyleVariables>;
-    tagToRender: Partial<TextComponentTags>;
+    textStyles: Record<string, string | number>;
+    tagToRender: import("../../utils/style-utils").TextComponentTags;
+};
+export declare function getTextWrapperStyles(restProps: Partial<TextNodeProps>, size: SizeType, background_color?: ColorType): string;
+export declare function getTextNodeStyles(props: TextNodeProps): {
+    tagToRender: import("../../utils/style-utils").TextComponentTags;
+    textStyles: string;
 };
-export {};
+export declare function getHtmlFromMarkdown(text?: string): string;

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

@@ -1,4 +1,4 @@
-import { getActiveStateProps, getComponentStyles, getSizeStyle, getTextComponentTag, getTextStyles, } from "../../utils/style-utils";
+import { getActiveStateProps, getComponentStyles, getSizeStyle, getTextComponentTag, getTextStyles, prefixObject, stringifyStyles, } from "../../utils/style-utils";
 export const defaultColor = {
     light: { type: "hex", value: "#000000" },
 };
@@ -12,6 +12,33 @@ export const defaultBackgroundColor = {
  */
 export const getTextComponentStyles = (props) => {
     const { font_size = "body_m", color = defaultColor, background_color = defaultBackgroundColor, padding, margin, size, purchaseState, } = props;
+    const styles = {
+        "--width": "unset",
+        "--height": "unset",
+        "--text-align": "initial",
+        "--font-weight": "initial",
+        "--font-size": "initial",
+        "--font-family": "sans-serif",
+        "--background-clip": "unset",
+        "--text-fill-color": "unset",
+        "--margin-block-start": "0px",
+        "--margin-inline-end": "0px",
+        "--margin-block-end": "0px",
+        "--margin-inline-start": "0px",
+        "--padding-block-start": "0px",
+        "--padding-inline-end": "0px",
+        "--padding-block-end": "0px",
+        "--padding-inline-start": "0px",
+        "--background": "transparent",
+        "--text-color": "inherit",
+        "--border": "none",
+        "--border-end-start-radius": "0px",
+        "--border-end-end-radius": "0px",
+        "--border-start-start-radius": "0px",
+        "--border-start-end-radius": "0px",
+        "--shadow": "none",
+        "--flex": "0 1 auto",
+    };
     const activeStateProps = getActiveStateProps(props.overrides, props.componentState);
     const tagToRender = getTextComponentTag(font_size);
     const textStyles = getTextStyles({ ...props, ...activeStateProps }, purchaseState.colorMode);
@@ -24,12 +51,100 @@ export const getTextComponentStyles = (props) => {
         ...activeStateProps,
     });
     const sizeStyles = getSizeStyle({ ...size, ...activeStateProps });
+    const stylesObject = {
+        ...styles,
+        ...componentStyles,
+        ...textStyles,
+        ...sizeStyles,
+    };
     return {
-        textStyles: {
-            ...componentStyles,
-            ...textStyles,
-            ...sizeStyles,
-        },
+        textStyles: prefixObject(stylesObject, "text"),
         tagToRender,
     };
 };
+export function getTextWrapperStyles(restProps, size, background_color) {
+    const styles = {
+        "--width": "unset",
+        "--height": "unset",
+        "--flex": "0 1 auto",
+        "--margin-block-start": "0px",
+        "--margin-inline-end": "0px",
+        "--margin-block-end": "0px",
+        "--margin-inline-start": "0px",
+        "--padding-block-start": "0px",
+        "--padding-inline-end": "0px",
+        "--padding-block-end": "0px",
+        "--padding-inline-start": "0px",
+        "--background": "transparent",
+        "--text-color": "inherit",
+        "--border": "none",
+        "--border-end-start-radius": "0px",
+        "--border-end-end-radius": "0px",
+        "--border-start-start-radius": "0px",
+        "--border-start-end-radius": "0px",
+        "--shadow": "none",
+        "--position": "relative",
+        "--inset": "0",
+        "--transform": "initial",
+    };
+    Object.assign(styles, getComponentStyles({
+        backgroundColor: background_color,
+        ...restProps,
+    }), getSizeStyle(size));
+    Object.assign(styles, restProps.zStackChildStyles);
+    const prefixedStyles = prefixObject(styles, "text");
+    return stringifyStyles(prefixedStyles);
+}
+export function getTextNodeStyles(props) {
+    const styles = {
+        "--text-margin-block-start": "0px",
+        "--text-margin-inline-end": "0px",
+        "--text-margin-block-end": "0px",
+        "--text-margin-inline-start": "0px",
+        "--text-padding-block-start": "0px",
+        "--text-padding-inline-end": "0px",
+        "--text-padding-block-end": "0px",
+        "--text-padding-inline-start": "0px",
+        "--text-background": "transparent",
+        "--text-text-color": "inherit",
+        "--text-border": "none",
+        "--text-border-end-start-radius": "0px",
+        "--text-border-end-end-radius": "0px",
+        "--text-border-start-start-radius": "0px",
+        "--text-border-start-end-radius": "0px",
+        "--text-shadow": "none",
+        "--text-text-align": "initial",
+        "--text-font-weight": "initial",
+        "--text-font-size": "initial",
+        "--text-font-family": "sans-serif",
+        "--text-background-clip": "initial",
+        "--text-text-fill-color": "initial",
+        "--text-width": "unset",
+        "--text-height": "unset",
+        "--text-flex": "0 1 auto",
+    };
+    const { tagToRender, textStyles } = getTextComponentStyles(props);
+    Object.assign(styles, textStyles);
+    return { tagToRender, textStyles: stringifyStyles(styles) };
+}
+export function getHtmlFromMarkdown(text) {
+    if (!text)
+        return "";
+    const regexpDictionary = {
+        newLine: { regexp: /\\\n/g, output: "<br/>" },
+        bold: { regexp: /\*\*(.*?)\*\*/g, output: "<b>$1</b>" },
+        italic: { regexp: /\*(.*?)\*/g, output: "<i>$1</i>" },
+        strikethrough: { regexp: /~(.*?)~/g, output: "<s>$1</s>" },
+        code: {
+            regexp: /`(.*?)`/g,
+            output: "<span style='font-family: monospace'>$1</span>",
+        },
+        link: {
+            regexp: /\[(.*?)\]\((.*?)\)/g,
+            output: "<a href=$2 target='_blank' rel='noopener noreferrer'>$1</a>",
+        },
+    };
+    return Object.values(regexpDictionary).reduce((parsedText, { regexp, output }) => {
+        return parsedText.replaceAll(regexp, output);
+    }, text);
+}

package/dist/components/timeline/Timeline.svelte

@@ -2,17 +2,14 @@
   import { getTimelineStyles } from "./timeline-utils";
   import TimelineItem from "./TimelineItem.svelte";
   import type { TimelineProps } from "../../data/entities";
-  import { stringifyStyles } from "../../utils/style-utils";
 
   const { items, ...restProps }: TimelineProps = $props();
 
-  const timelineStyles = $derived(
-    stringifyStyles(getTimelineStyles({ items, ...restProps })),
-  );
+  const timelineStyles = $derived(getTimelineStyles({ items, ...restProps }));
 </script>
 
 {#if items.length}
-  <div class="timeline-container" style={timelineStyles}>
+  <div class="rc-pw-timeline-container" style={timelineStyles}>
     {#each items as item, index}
       <TimelineItem
         {...item}
@@ -29,12 +26,15 @@
 {/if}
 
 <style>
-  .timeline-container {
+  .rc-pw-timeline-container {
     display: flex;
-    flex: var(--flex, 0 1 auto);
+    flex: var(--timeline-flex, 0 1 auto);
     flex-direction: column;
-    gap: var(--item-spacing, 0);
-    width: var(--width, unset);
-    height: var(--height, unset);
+    gap: var(--timeline-item-spacing, 0);
+    width: var(--timeline-width, initial);
+    height: var(--timeline-height, initial);
+    position: var(--timeline-position, relative);
+    inset: var(--timeline-inset, 0);
+    transform: var(--timeline-transform, initial);
   }
 </style>

package/dist/components/timeline/TimelineItem.svelte

@@ -4,10 +4,9 @@
     getTimelineItemTextStyles,
   } from "./timeline-utils";
   import type { TimelineItemProps } from "../../data/entities";
-  import { stringifyStyles } from "../../utils/style-utils";
 
   const props: TimelineItemProps = $props();
-  const styles = $derived(stringifyStyles(getTimelineItemStyles(props)));
+  const styles = $derived(getTimelineItemStyles(props));
 
   const {
     tagToRender: titleTagToRender,
@@ -23,20 +22,20 @@
   // TODO: Object mapping icon name to icon component
 </script>
 
-<div class="timeline-item" style={styles}>
-  <div class="timeline-item-icon-container">
-    <div class="timeline-item-icon"></div>
+<div class="rc-pw-timeline-item" style={styles}>
+  <div class="rc-pw-timeline-item-icon-container">
+    <div class="rc-pw-timeline-item-icon"></div>
   </div>
-  <div class="timeline-item-content">
+  <div class="rc-pw-timeline-item-content">
     <svelte:element
       this={titleTagToRender}
-      class="timeline-item-content-title"
+      class="rc-pw-timeline-item-content-title"
       style={titleStyles}>{titleLabel}</svelte:element
     >
     {#if descriptionLabel}
       <svelte:element
         this={descriptionTagToRender}
-        class="timeline-item-content-description"
+        class="rc-pw-timeline-item-content-description"
         style={descriptionStyles}>{descriptionLabel}</svelte:element
       >
     {/if}
@@ -44,57 +43,70 @@
 </div>
 
 <style>
-  .timeline-item {
+  .rc-pw-timeline-item {
     display: flex;
     align-items: center;
-    gap: var(--item-spacing, 0px);
+    gap: var(--timeline-item-spacing, 0px);
   }
 
-  .timeline-item-icon-container {
+  .rc-pw-timeline-item-icon-container {
     position: relative;
-    border-radius: var(--icon-border-radius, 0px);
-    width: var(--icon-size, 16px);
-    height: var(--icon-size, 16px);
+    border-end-start-radius: var(--timeline-item-border-end-start-radius, 0px);
+    border-end-end-radius: var(--timeline-item-border-end-end-radius, 0px);
+    border-start-start-radius: var(
+      --timeline-item-border-start-start-radius,
+      0px
+    );
+    border-start-end-radius: var(--timeline-item-border-start-end-radius, 0px);
+    width: var(--timeline-item-icon-size, 16px);
+    height: var(--timeline-item-icon-size, 16px);
     flex-shrink: 0;
-    background-color: var(--icon-background-color, #ffffff);
-    border: var(--icon-border, unset);
+    background-color: var(--timeline-item-icon-background-color, #ffffff);
+    border: var(--timeline-item-icon-border, initial);
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: var(--icon-padding, 0px);
+    padding: var(--timeline-item-icon-padding, 0px);
+    box-sizing: content-box;
   }
 
-  .timeline-item-icon-container::before {
+  .rc-pw-timeline-item-icon-container::before {
     position: absolute;
     content: "";
     z-index: -1;
-    top: var(--connector-top, 0px);
-    height: var(--connector-height, 0px);
-    width: var(--connector-width, 0px);
-    background: var(--connector-color, transparent);
+    top: var(--timeline-item-connector-top, 0px);
+    height: var(--timeline-item-connector-height, 0px);
+    width: var(--timeline-item-connector-width, 0px);
+    background: var(--timeline-item-connector-color, transparent);
   }
 
-  .timeline-item-icon {
-    width: var(--icon-width, 10px);
-    height: var(--icon-height, 10px);
-    color: var(--icon-color, #ffffff);
+  .rc-pw-timeline-item-icon {
+    width: var(--timeline-item-icon-size, 10px);
+    height: var(--timeline-item-icon-size, 10px);
+    color: var(--timeline-item-icon-color, #ffffff);
     display: flex;
     align-items: center;
     justify-content: center;
   }
 
-  .timeline-item-content {
+  .rc-pw-timeline-item-content {
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
     align-items: flex-start;
-    gap: var(--text-spacing, 0px);
+    gap: var(--timeline-item-text-spacing, 0px);
     height: fit-content;
   }
-  .timeline-item-content-title,
-  .timeline-item-content-description {
-    margin: var(--text-margin, 0px);
-    padding: var(--text-padding, 0px);
-    font-family: var(--font-family, sans-serif);
+  .rc-pw-timeline-item-content-title,
+  .rc-pw-timeline-item-content-description {
+    margin-block-start: var(--timeline-item-text-margin-block-start, 0px);
+    margin-inline-end: var(--timeline-item-text-margin-inline-end, 0px);
+    margin-block-end: var(--timeline-item-text-margin-block-end, 0px);
+    margin-inline-start: var(--timeline-item-text-margin-inline-start, 0px);
+    padding-block-start: var(--timeline-item-text-padding-block-start, 0);
+    padding-inline-end: var(--timeline-item-text-padding-inline-end, 0);
+    padding-block-end: var(--timeline-item-text-padding-block-end, 0);
+    padding-inline-start: var(--timeline-item-text-padding-inline-start, 0);
+    font-family: var(--timeline-item-text-font-family, sans-serif);
   }
 </style>

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

@@ -1,25 +1,8 @@
 import type { TimelineItemProps, TimelineProps } from "../../data/entities";
-export declare function getTimelineStyles(props: TimelineProps): {
-    "--item-spacing": string;
-    "--width": string;
-    "--height": string;
-    "--flex": string;
-};
-export declare function getTimelineItemStyles(props: TimelineItemProps): {
-    "--icon-size": string;
-    "--icon-padding": string;
-    "--icon-color": string;
-    "--text-spacing": string;
-    "--icon-background-color": string;
-    "--icon-border": string;
-    "--icon-border-radius": string;
-    "--connector-color": string;
-    "--connector-width": string;
-    "--connector-top": string;
-    "--connector-height": string;
-};
+export declare function getTimelineStyles(props: TimelineProps): string;
+export declare function getTimelineItemStyles(props: TimelineItemProps): string;
 export declare function getTimelineItemTextStyles(props: TimelineItemProps, kind?: "title" | "description"): {
     textStyles: string;
-    tagToRender: Partial<import("../../utils/style-utils").TextComponentTags>;
+    tagToRender: import("../../utils/style-utils").TextComponentTags;
     textLabel: string | undefined;
 };

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

@@ -1,14 +1,20 @@
 import { defaultColor, getTextComponentStyles, } from "../text/text-utils";
-import { getBorderStyle, getColor, getCornerRadiusStyle, getLabelAndReplaceVariables, getSizeStyle, stringifyStyles, } from "../../utils/style-utils";
+import { getBorderStyle, getColor, getCornerRadiusStyle, getSizeStyle, prefixObject, stringifyStyles, } from "../../utils/style-utils";
+import { getLabelAndReplaceVariables } from "../../utils/variable-utils";
 export function getTimelineStyles(props) {
     const styles = {
         "--item-spacing": `${props.item_spacing}px`,
-        "--width": "unset",
-        "--height": "unset",
+        "--width": "initial",
+        "--height": "initial",
         "--flex": "0 1 auto",
+        "--position": "relative",
+        "--inset": "0",
+        "--transform": "initial",
     };
     Object.assign(styles, getSizeStyle(props.size));
-    return styles;
+    Object.assign(styles, props.zStackChildStyles);
+    const prefixedStyles = prefixObject(styles, "timeline");
+    return stringifyStyles(prefixedStyles);
 }
 export function getTimelineItemStyles(props) {
     const styles = {
@@ -18,15 +24,16 @@ export function getTimelineItemStyles(props) {
             colorMap: props.icon.color,
             colorMode: props.purchaseState?.colorMode,
         }),
-        "--text-spacing": `${props.text_spacing}px`,
         "--icon-background-color": getColor({
             colorMap: props.icon_background?.color,
             colorMode: props.purchaseState.colorMode,
         }),
         "--icon-border": getBorderStyle(props.icon_background?.border, props.purchaseState?.colorMode),
-        "--icon-border-radius": props.icon_background?.shape?.type === "rectangle"
-            ? getCornerRadiusStyle(props.icon_background.shape.corners)
-            : "50%",
+        "--text-spacing": `${props.text_spacing}px`,
+        "--border-start-start-radius": `0px`,
+        "--border-start-end-radius": `0px`,
+        "--border-end-start-radius": `0px`,
+        "--border-end-end-radius": `0px`,
         "--connector-color": getColor({
             colorMap: props.connector?.color,
             colorMode: props.purchaseState.colorMode,
@@ -35,6 +42,14 @@ export function getTimelineItemStyles(props) {
         "--connector-top": "0px",
         "--connector-height": `${props.item_spacing}px`,
     };
+    Object.assign(styles, props.icon_background?.shape?.type === "rectangle"
+        ? getCornerRadiusStyle(props.icon_background?.shape?.corners)
+        : {
+            "--border-start-start-radius": "50%",
+            "--border-start-end-radius": "50%",
+            "--border-end-start-radius": "50%",
+            "--border-end-end-radius": "50%",
+        });
     if (props.connector) {
         const hasMarginTop = props.connector.margin.top !== 0;
         const hasMarginBottom = props.connector.margin.bottom !== 0;
@@ -62,9 +77,24 @@ export function getTimelineItemStyles(props) {
                 `calc(100% + ${props.connector.margin.top}px)`;
         }
     }
-    return styles;
+    const prefixedStyles = prefixObject(styles, "timeline-item");
+    return stringifyStyles(prefixedStyles);
 }
 export function getTimelineItemTextStyles(props, kind = "title") {
+    const styles = {
+        "--text-color": "inherit",
+        "--text-font-size": "initial",
+        "--text-font-weight": "initial",
+        "--text-horizontal-alignment": "initial",
+        "--text-margin-block-start": "0px",
+        "--text-margin-inline-end": "0px",
+        "--text-margin-block-end": "0px",
+        "--text-margin-inline-start": "0px",
+        "--text-padding-block-start": "0px",
+        "--text-padding-inline-end": "0px",
+        "--text-padding-block-end": "0px",
+        "--text-padding-inline-start": "0px",
+    };
     const textProps = {
         color: props[kind]?.color || defaultColor,
         font_size: props[kind]?.font_size || "body_m",
@@ -81,7 +111,8 @@ export function getTimelineItemTextStyles(props, kind = "title") {
         padding: { top: 0, bottom: 0, leading: 0, trailing: 0 },
         text_lid: "",
     });
-    const stringifiedStyles = stringifyStyles(textStyles);
+    Object.assign(styles, textStyles);
+    const stringifiedStyles = stringifyStyles(prefixObject(styles, "timeline-item"));
     const textLabel = getLabelAndReplaceVariables({
         text_lid: props[kind]?.text_lid,
         locale: props.purchaseState.locale,
@@ -89,5 +120,9 @@ export function getTimelineItemTextStyles(props, kind = "title") {
         labels: props.labels,
         variableDictionary: props.variableDictionary,
     });
-    return { textStyles: stringifiedStyles, tagToRender, textLabel };
+    return {
+        textStyles: stringifiedStyles,
+        tagToRender,
+        textLabel,
+    };
 }