@revenuecat/purchases-ui-js 2.0.1 → 2.0.3

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

@@ -1,18 +1,14 @@
 <script module lang="ts">
-  import { Timeline } from "../..";
+  import { FontWeights, Timeline } from "../..";
   import { defaultColor } from "../text/text-utils";
-  import type { PurchaseState } from "../../data/state";
   import { localizationDecorator } from "../../stories/localization-decorator";
   import { defineMeta } from "@storybook/addon-svelte-csf";
 
   const defaultLocale = "en_US";
 
-  const purchaseState: PurchaseState = {};
-
   const { Story } = defineMeta({
     title: "Components/Timeline",
     component: Timeline,
-    tags: ["autodocs"],
     decorators: [
       localizationDecorator({
         defaultLocale,
@@ -42,18 +38,16 @@
         },
       }),
     ],
-    args: { purchaseState },
-    argTypes: {},
   });
 </script>
 
-<!-- Timeline -->
 <Story
   name="Round icon"
   args={{
     type: "timeline",
-    item_spacing: 32,
-    text_spacing: 16,
+    item_spacing: 16,
+    text_spacing: 4,
+    column_gutter: 16,
     size: { width: { type: "fill" }, height: { type: "fit" } },
     margin: { top: 8, trailing: 8, bottom: 8, leading: 8 },
     padding: { top: 0, trailing: 0, bottom: 0, leading: 0 },
@@ -61,15 +55,36 @@
     name: "default timeline",
     items: [
       {
+        id: "item-1",
+        name: "item-1",
+        type: "timeline_item",
         title: {
           text_lid: "asd123",
           color: defaultColor,
           horizontal_alignment: "center",
+          font_size: 18,
+          font_weight: "bold",
+          font_weight_int: 700,
+          type: "text",
+          padding: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+          margin: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+          size: { width: { type: "fit" }, height: { type: "fit" } },
+          id: "title-1",
+          name: "title-1",
         },
         description: {
           text_lid: "asd123d",
           color: defaultColor,
           horizontal_alignment: "center",
+          font_size: 18,
+          font_weight: "regular",
+          font_weight_int: 400,
+          type: "text",
+          padding: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+          margin: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+          size: { width: { type: "fit" }, height: { type: "fit" } },
+          id: "description-1",
+          name: "description-1",
         },
         icon: {
           name: "check",
@@ -79,29 +94,64 @@
               value: "#FAFAFA",
             },
           },
-          width_and_height: 32,
-          padding: 16,
-        },
-        icon_background: {
-          shape: { type: "circle" },
-          color: {
-            light: {
-              type: "hex",
-              value: "#3f3f3f",
+          size: {
+            width: { type: "fixed", value: 32 },
+            height: { type: "fixed", value: 32 },
+          },
+          type: "icon",
+          padding: { top: 4, trailing: 4, bottom: 4, leading: 4 },
+          margin: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+          id: "icon-1",
+          icon_name: "check",
+          base_url: "https://icons.pawwalls.com/icons",
+          formats: {
+            heic: "check.heic",
+            png: "check.png",
+            svg: "check.svg",
+            webp: "check.webp",
+          },
+          icon_background: {
+            shape: { type: "circle" },
+            color: {
+              light: {
+                type: "hex",
+                value: "#3f3f3f",
+              },
             },
           },
         },
       },
       {
+        id: "item-2",
+        name: "item-2",
+        type: "timeline_item",
         title: {
           text_lid: "qwe123",
           color: defaultColor,
           horizontal_alignment: "center",
+          font_size: 18,
+          font_weight: "bold",
+          font_weight_int: 700,
+          type: "text",
+          padding: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+          margin: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+          size: { width: { type: "fit" }, height: { type: "fit" } },
+          id: "title-2",
+          name: "title-2",
         },
         description: {
           text_lid: "qwe123d",
           color: defaultColor,
           horizontal_alignment: "center",
+          font_size: 18,
+          font_weight: "regular",
+          font_weight_int: 400,
+          type: "text",
+          padding: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+          margin: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+          size: { width: { type: "fit" }, height: { type: "fit" } },
+          id: "description-2",
+          name: "description-2",
         },
         icon: {
           name: "check",
@@ -111,29 +161,64 @@
               value: "#FAFAFA",
             },
           },
-          width_and_height: 32,
-          padding: 16,
-        },
-        icon_background: {
-          shape: { type: "circle" },
-          color: {
-            light: {
-              type: "hex",
-              value: "#3f3f3f",
+          size: {
+            width: { type: "fixed", value: 32 },
+            height: { type: "fixed", value: 32 },
+          },
+          type: "icon",
+          padding: { top: 4, trailing: 4, bottom: 4, leading: 4 },
+          margin: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+          id: "icon-2",
+          icon_name: "check",
+          base_url: "https://icons.pawwalls.com/icons",
+          formats: {
+            heic: "check.heic",
+            png: "check.png",
+            svg: "check.svg",
+            webp: "check.webp",
+          },
+          icon_background: {
+            shape: { type: "circle" },
+            color: {
+              light: {
+                type: "hex",
+                value: "#3f3f3f",
+              },
             },
           },
         },
       },
       {
+        id: "item-3",
+        name: "item-3",
+        type: "timeline_item",
         title: {
           text_lid: "zxc123",
           color: defaultColor,
           horizontal_alignment: "center",
+          font_size: 18,
+          font_weight: "bold",
+          font_weight_int: 700,
+          type: "text",
+          padding: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+          margin: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+          size: { width: { type: "fit" }, height: { type: "fit" } },
+          id: "title-3",
+          name: "title-3",
         },
         description: {
           text_lid: "zxc123d",
           color: defaultColor,
           horizontal_alignment: "center",
+          font_size: 18,
+          font_weight: "regular",
+          font_weight_int: 400,
+          type: "text",
+          padding: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+          margin: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+          size: { width: { type: "fit" }, height: { type: "fit" } },
+          id: "description-3",
+          name: "description-3",
         },
         icon: {
           name: "check",
@@ -143,15 +228,29 @@
               value: "#FAFAFA",
             },
           },
-          width_and_height: 32,
-          padding: 16,
-        },
-        icon_background: {
-          shape: { type: "circle" },
-          color: {
-            light: {
-              type: "hex",
-              value: "#3f3f3f",
+          size: {
+            width: { type: "fixed", value: 32 },
+            height: { type: "fixed", value: 32 },
+          },
+          type: "icon",
+          padding: { top: 4, trailing: 4, bottom: 4, leading: 4 },
+          margin: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+          id: "icon-3",
+          icon_name: "check",
+          base_url: "https://icons.pawwalls.com/icons",
+          formats: {
+            heic: "check.heic",
+            png: "check.png",
+            svg: "check.svg",
+            webp: "check.webp",
+          },
+          icon_background: {
+            shape: { type: "circle" },
+            color: {
+              light: {
+                type: "hex",
+                value: "#3f3f3f",
+              },
             },
           },
         },
@@ -164,8 +263,9 @@
   name="Square icon"
   args={{
     type: "timeline",
-    item_spacing: 32,
-    text_spacing: 16,
+    item_spacing: 16,
+    text_spacing: 4,
+    column_gutter: 16,
     size: { width: { type: "fill" }, height: { type: "fit" } },
     margin: { top: 8, trailing: 8, bottom: 8, leading: 8 },
     padding: { top: 0, trailing: 0, bottom: 0, leading: 0 },
@@ -173,15 +273,36 @@
     name: "default timeline",
     items: [
       {
+        id: "item-1",
+        name: "item-1",
+        type: "timeline_item",
         title: {
           text_lid: "asd123",
           color: defaultColor,
           horizontal_alignment: "center",
+          font_size: 18,
+          font_weight: "bold",
+          font_weight_int: 700,
+          type: "text",
+          padding: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+          margin: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+          size: { width: { type: "fit" }, height: { type: "fit" } },
+          id: "title-1",
+          name: "title-1",
         },
         description: {
           text_lid: "asd123d",
           color: defaultColor,
           horizontal_alignment: "center",
+          font_size: 18,
+          font_weight: "regular",
+          font_weight_int: 400,
+          type: "text",
+          padding: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+          margin: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+          size: { width: { type: "fit" }, height: { type: "fit" } },
+          id: "description-1",
+          name: "description-1",
         },
         icon: {
           name: "check",
@@ -191,37 +312,72 @@
               value: "#FAFAFA",
             },
           },
-          width_and_height: 32,
-          padding: 16,
-        },
-        icon_background: {
-          shape: {
-            type: "rectangle",
-            corners: {
-              top_leading: 0,
-              top_trailing: 0,
-              bottom_leading: 0,
-              bottom_trailing: 0,
-            },
-          },
-          color: {
-            light: {
-              type: "hex",
-              value: "#3f3f3f",
+          size: {
+            width: { type: "fixed", value: 32 },
+            height: { type: "fixed", value: 32 },
+          },
+          type: "icon",
+          padding: { top: 4, trailing: 4, bottom: 4, leading: 4 },
+          margin: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+          id: "icon-1",
+          icon_name: "check",
+          base_url: "https://icons.pawwalls.com/icons",
+          formats: {
+            heic: "check.heic",
+            png: "check.png",
+            svg: "check.svg",
+            webp: "check.webp",
+          },
+          icon_background: {
+            shape: {
+              type: "rectangle",
+              corners: {
+                top_leading: 0,
+                top_trailing: 0,
+                bottom_leading: 0,
+                bottom_trailing: 0,
+              },
+            },
+            color: {
+              light: {
+                type: "hex",
+                value: "#3f3f3f",
+              },
             },
           },
         },
       },
       {
+        id: "item-2",
+        name: "item-2",
+        type: "timeline_item",
         title: {
           text_lid: "qwe123",
           color: defaultColor,
           horizontal_alignment: "center",
+          font_size: 18,
+          font_weight: "bold",
+          font_weight_int: 700,
+          type: "text",
+          padding: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+          margin: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+          size: { width: { type: "fit" }, height: { type: "fit" } },
+          id: "title-2",
+          name: "title-2",
         },
         description: {
           text_lid: "qwe123d",
           color: defaultColor,
           horizontal_alignment: "center",
+          font_size: 18,
+          font_weight: "regular",
+          font_weight_int: 400,
+          type: "text",
+          padding: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+          margin: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+          size: { width: { type: "fit" }, height: { type: "fit" } },
+          id: "description-2",
+          name: "description-2",
         },
         icon: {
           name: "check",
@@ -231,37 +387,72 @@
               value: "#FAFAFA",
             },
           },
-          width_and_height: 32,
-          padding: 16,
-        },
-        icon_background: {
-          shape: {
-            type: "rectangle",
-            corners: {
-              top_leading: 8,
-              top_trailing: 8,
-              bottom_leading: 8,
-              bottom_trailing: 8,
-            },
-          },
-          color: {
-            light: {
-              type: "hex",
-              value: "#3f3f3f",
+          size: {
+            width: { type: "fixed", value: 32 },
+            height: { type: "fixed", value: 32 },
+          },
+          type: "icon",
+          padding: { top: 4, trailing: 4, bottom: 4, leading: 4 },
+          margin: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+          id: "icon-2",
+          icon_name: "check",
+          base_url: "https://icons.pawwalls.com/icons",
+          formats: {
+            heic: "check.heic",
+            png: "check.png",
+            svg: "check.svg",
+            webp: "check.webp",
+          },
+          icon_background: {
+            shape: {
+              type: "rectangle",
+              corners: {
+                top_leading: 0,
+                top_trailing: 0,
+                bottom_leading: 0,
+                bottom_trailing: 0,
+              },
+            },
+            color: {
+              light: {
+                type: "hex",
+                value: "#3f3f3f",
+              },
             },
           },
         },
       },
       {
+        id: "item-3",
+        name: "item-3",
+        type: "timeline_item",
         title: {
           text_lid: "zxc123",
           color: defaultColor,
           horizontal_alignment: "center",
+          font_size: 18,
+          font_weight: "bold",
+          font_weight_int: 700,
+          type: "text",
+          padding: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+          margin: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+          size: { width: { type: "fit" }, height: { type: "fit" } },
+          id: "title-3",
+          name: "title-3",
         },
         description: {
           text_lid: "zxc123d",
           color: defaultColor,
           horizontal_alignment: "center",
+          font_size: 18,
+          font_weight: "regular",
+          font_weight_int: 400,
+          type: "text",
+          padding: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+          margin: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+          size: { width: { type: "fit" }, height: { type: "fit" } },
+          id: "description-3",
+          name: "description-3",
         },
         icon: {
           name: "check",
@@ -271,23 +462,37 @@
               value: "#FAFAFA",
             },
           },
-          width_and_height: 32,
-          padding: 16,
-        },
-        icon_background: {
-          shape: {
-            type: "rectangle",
-            corners: {
-              top_leading: 16,
-              top_trailing: 16,
-              bottom_leading: 16,
-              bottom_trailing: 16,
-            },
-          },
-          color: {
-            light: {
-              type: "hex",
-              value: "#3f3f3f",
+          size: {
+            width: { type: "fixed", value: 32 },
+            height: { type: "fixed", value: 32 },
+          },
+          type: "icon",
+          padding: { top: 4, trailing: 4, bottom: 4, leading: 4 },
+          margin: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+          id: "icon-3",
+          icon_name: "check",
+          base_url: "https://icons.pawwalls.com/icons",
+          formats: {
+            heic: "check.heic",
+            png: "check.png",
+            svg: "check.svg",
+            webp: "check.webp",
+          },
+          icon_background: {
+            shape: {
+              type: "rectangle",
+              corners: {
+                top_leading: 0,
+                top_trailing: 0,
+                bottom_leading: 0,
+                bottom_trailing: 0,
+              },
+            },
+            color: {
+              light: {
+                type: "hex",
+                value: "#3f3f3f",
+              },
             },
           },
         },
@@ -295,12 +500,14 @@
     ],
   }}
 />
+
 <Story
-  name="With connector"
+  name="Square icon with rounded corners"
   args={{
     type: "timeline",
-    item_spacing: 32,
-    text_spacing: 16,
+    item_spacing: 16,
+    text_spacing: 4,
+    column_gutter: 16,
     size: { width: { type: "fill" }, height: { type: "fit" } },
     margin: { top: 8, trailing: 8, bottom: 8, leading: 8 },
     padding: { top: 0, trailing: 0, bottom: 0, leading: 0 },
@@ -308,15 +515,36 @@
     name: "default timeline",
     items: [
       {
+        id: "item-1",
+        name: "item-1",
+        type: "timeline_item",
         title: {
           text_lid: "asd123",
           color: defaultColor,
           horizontal_alignment: "center",
+          font_size: 18,
+          font_weight: "bold",
+          font_weight_int: 700,
+          type: "text",
+          padding: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+          margin: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+          size: { width: { type: "fit" }, height: { type: "fit" } },
+          id: "title-1",
+          name: "title-1",
         },
         description: {
           text_lid: "asd123d",
           color: defaultColor,
           horizontal_alignment: "center",
+          font_size: 18,
+          font_weight: "regular",
+          font_weight_int: 400,
+          type: "text",
+          padding: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+          margin: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+          size: { width: { type: "fit" }, height: { type: "fit" } },
+          id: "description-1",
+          name: "description-1",
         },
         icon: {
           name: "check",
@@ -326,34 +554,72 @@
               value: "#FAFAFA",
             },
           },
-          width_and_height: 32,
-          padding: 16,
-        },
-        icon_background: {
-          shape: { type: "circle" },
-          color: {
-            light: {
-              type: "hex",
-              value: "#3f3f3f",
+          size: {
+            width: { type: "fixed", value: 32 },
+            height: { type: "fixed", value: 32 },
+          },
+          type: "icon",
+          padding: { top: 4, trailing: 4, bottom: 4, leading: 4 },
+          margin: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+          id: "icon-1",
+          icon_name: "check",
+          base_url: "https://icons.pawwalls.com/icons",
+          formats: {
+            heic: "check.heic",
+            png: "check.png",
+            svg: "check.svg",
+            webp: "check.webp",
+          },
+          icon_background: {
+            shape: {
+              type: "rectangle",
+              corners: {
+                top_leading: 8,
+                top_trailing: 8,
+                bottom_leading: 8,
+                bottom_trailing: 8,
+              },
+            },
+            color: {
+              light: {
+                type: "hex",
+                value: "#3f3f3f",
+              },
             },
           },
         },
-        connector: {
-          width: 8,
-          margin: { top: 0, bottom: 0 },
-          color: { light: { type: "hex", value: "#d3d3d3" } },
-        },
       },
       {
+        id: "item-2",
+        name: "item-2",
+        type: "timeline_item",
         title: {
           text_lid: "qwe123",
           color: defaultColor,
           horizontal_alignment: "center",
+          font_size: 18,
+          font_weight: "bold",
+          font_weight_int: 700,
+          type: "text",
+          padding: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+          margin: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+          size: { width: { type: "fit" }, height: { type: "fit" } },
+          id: "title-2",
+          name: "title-2",
         },
         description: {
           text_lid: "qwe123d",
           color: defaultColor,
           horizontal_alignment: "center",
+          font_size: 18,
+          font_weight: "regular",
+          font_weight_int: 400,
+          type: "text",
+          padding: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+          margin: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+          size: { width: { type: "fit" }, height: { type: "fit" } },
+          id: "description-2",
+          name: "description-2",
         },
         icon: {
           name: "check",
@@ -363,34 +629,72 @@
               value: "#FAFAFA",
             },
           },
-          width_and_height: 32,
-          padding: 16,
-        },
-        icon_background: {
-          shape: { type: "circle" },
-          color: {
-            light: {
-              type: "hex",
-              value: "#3f3f3f",
+          size: {
+            width: { type: "fixed", value: 32 },
+            height: { type: "fixed", value: 32 },
+          },
+          type: "icon",
+          padding: { top: 4, trailing: 4, bottom: 4, leading: 4 },
+          margin: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+          id: "icon-2",
+          icon_name: "check",
+          base_url: "https://icons.pawwalls.com/icons",
+          formats: {
+            heic: "check.heic",
+            png: "check.png",
+            svg: "check.svg",
+            webp: "check.webp",
+          },
+          icon_background: {
+            shape: {
+              type: "rectangle",
+              corners: {
+                top_leading: 8,
+                top_trailing: 8,
+                bottom_leading: 8,
+                bottom_trailing: 8,
+              },
+            },
+            color: {
+              light: {
+                type: "hex",
+                value: "#3f3f3f",
+              },
             },
           },
         },
-        connector: {
-          width: 8,
-          margin: { top: 0, bottom: 0 },
-          color: { light: { type: "hex", value: "#d3d3d3" } },
-        },
       },
       {
+        id: "item-3",
+        name: "item-3",
+        type: "timeline_item",
         title: {
           text_lid: "zxc123",
           color: defaultColor,
           horizontal_alignment: "center",
+          font_size: 18,
+          font_weight: "bold",
+          font_weight_int: 700,
+          type: "text",
+          padding: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+          margin: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+          size: { width: { type: "fit" }, height: { type: "fit" } },
+          id: "title-3",
+          name: "title-3",
         },
         description: {
           text_lid: "zxc123d",
           color: defaultColor,
           horizontal_alignment: "center",
+          font_size: 18,
+          font_weight: "regular",
+          font_weight_int: 400,
+          type: "text",
+          padding: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+          margin: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+          size: { width: { type: "fit" }, height: { type: "fit" } },
+          id: "description-3",
+          name: "description-3",
         },
         icon: {
           name: "check",
@@ -400,36 +704,37 @@
               value: "#FAFAFA",
             },
           },
-          width_and_height: 32,
-          padding: 16,
-        },
-        icon_background: {
-          shape: { type: "circle" },
-          color: {
-            light: {
-              type: "hex",
-              value: "#3f3f3f",
-            },
-          },
-        },
-        connector: {
-          width: 8,
-          margin: { top: 0, bottom: 0 },
-          color: {
-            light: {
-              degrees: 180,
-              points: [
-                {
-                  color: "#d3d3d3",
-                  percent: 0,
-                },
-
-                {
-                  color: "#d3d3d300",
-                  percent: 100,
-                },
-              ],
-              type: "linear",
+          size: {
+            width: { type: "fixed", value: 32 },
+            height: { type: "fixed", value: 32 },
+          },
+          type: "icon",
+          padding: { top: 4, trailing: 4, bottom: 4, leading: 4 },
+          margin: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+          id: "icon-3",
+          icon_name: "check",
+          base_url: "https://icons.pawwalls.com/icons",
+          formats: {
+            heic: "check.heic",
+            png: "check.png",
+            svg: "check.svg",
+            webp: "check.webp",
+          },
+          icon_background: {
+            shape: {
+              type: "rectangle",
+              corners: {
+                top_leading: 8,
+                top_trailing: 8,
+                bottom_leading: 8,
+                bottom_trailing: 8,
+              },
+            },
+            color: {
+              light: {
+                type: "hex",
+                value: "#3f3f3f",
+              },
             },
           },
         },
@@ -439,11 +744,12 @@
 />
 
 <Story
-  name="Connector possibilities"
+  name="Square cornered icon with connectors"
   args={{
     type: "timeline",
-    item_spacing: 64,
-    text_spacing: 8,
+    item_spacing: 16,
+    text_spacing: 4,
+    column_gutter: 16,
     size: { width: { type: "fill" }, height: { type: "fit" } },
     margin: { top: 8, trailing: 8, bottom: 8, leading: 8 },
     padding: { top: 0, trailing: 0, bottom: 0, leading: 0 },
@@ -451,15 +757,36 @@
     name: "default timeline",
     items: [
       {
+        id: "item-1",
+        name: "item-1",
+        type: "timeline_item",
         title: {
-          text_lid: "case1",
+          text_lid: "asd123",
           color: defaultColor,
           horizontal_alignment: "center",
+          font_size: 18,
+          font_weight: "bold",
+          font_weight_int: 700,
+          type: "text",
+          padding: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+          margin: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+          size: { width: { type: "fit" }, height: { type: "fit" } },
+          id: "title-1",
+          name: "title-1",
         },
         description: {
-          text_lid: "case1d",
+          text_lid: "asd123d",
           color: defaultColor,
           horizontal_alignment: "center",
+          font_size: 18,
+          font_weight: "regular",
+          font_weight_int: 400,
+          type: "text",
+          padding: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+          margin: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+          size: { width: { type: "fit" }, height: { type: "fit" } },
+          id: "description-1",
+          name: "description-1",
         },
         icon: {
           name: "check",
@@ -469,71 +796,82 @@
               value: "#FAFAFA",
             },
           },
-          width_and_height: 32,
-          padding: 12,
-        },
-        icon_background: {
-          shape: { type: "circle" },
-          color: {
-            light: {
-              type: "hex",
-              value: "#3f3f3f",
+          size: {
+            width: { type: "fixed", value: 32 },
+            height: { type: "fixed", value: 32 },
+          },
+          type: "icon",
+          padding: { top: 4, trailing: 4, bottom: 4, leading: 4 },
+          margin: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+          id: "icon-1",
+          icon_name: "check",
+          base_url: "https://icons.pawwalls.com/icons",
+          formats: {
+            heic: "check.heic",
+            png: "check.png",
+            svg: "check.svg",
+            webp: "check.webp",
+          },
+          icon_background: {
+            shape: {
+              type: "rectangle",
+              corners: {
+                top_leading: 8,
+                top_trailing: 8,
+                bottom_leading: 8,
+                bottom_trailing: 8,
+              },
+            },
+            color: {
+              light: {
+                type: "hex",
+                value: "#3f3f3f",
+              },
             },
           },
         },
         connector: {
-          width: 8,
-          margin: { top: 0, bottom: 0 },
-          color: { light: { type: "hex", value: "#d3d3d3" } },
-        },
-      },
-      {
-        title: {
-          text_lid: "case2",
-          color: defaultColor,
-          horizontal_alignment: "center",
-        },
-        description: {
-          text_lid: "case2d",
-          color: defaultColor,
-          horizontal_alignment: "center",
-        },
-        icon: {
-          name: "check",
+          width: 4,
           color: {
-            light: {
-              type: "hex",
-              value: "#FAFAFA",
-            },
+            light: { type: "hex", value: "#8fb43fff" },
           },
-          width_and_height: 32,
-          padding: 12,
-        },
-        icon_background: {
-          shape: { type: "circle" },
-          color: {
-            light: {
-              type: "hex",
-              value: "#3f3f3f",
-            },
+          margin: {
+            top: 0,
+            bottom: 0,
           },
         },
-        connector: {
-          width: 8,
-          margin: { top: 12, bottom: 12 },
-          color: { light: { type: "hex", value: "#d3d3d3" } },
-        },
       },
       {
+        id: "item-2",
+        name: "item-2",
+        type: "timeline_item",
         title: {
-          text_lid: "case3",
+          text_lid: "qwe123",
           color: defaultColor,
           horizontal_alignment: "center",
+          font_size: 18,
+          font_weight: "bold",
+          font_weight_int: 700,
+          type: "text",
+          padding: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+          margin: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+          size: { width: { type: "fit" }, height: { type: "fit" } },
+          id: "title-2",
+          name: "title-2",
         },
         description: {
-          text_lid: "case3d",
+          text_lid: "qwe123d",
           color: defaultColor,
           horizontal_alignment: "center",
+          font_size: 18,
+          font_weight: "regular",
+          font_weight_int: 400,
+          type: "text",
+          padding: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+          margin: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+          size: { width: { type: "fit" }, height: { type: "fit" } },
+          id: "description-2",
+          name: "description-2",
         },
         icon: {
           name: "check",
@@ -543,34 +881,82 @@
               value: "#FAFAFA",
             },
           },
-          width_and_height: 32,
-          padding: 12,
-        },
-        icon_background: {
-          shape: { type: "circle" },
-          color: {
-            light: {
-              type: "hex",
-              value: "#3f3f3f",
+          size: {
+            width: { type: "fixed", value: 32 },
+            height: { type: "fixed", value: 32 },
+          },
+          type: "icon",
+          padding: { top: 4, trailing: 4, bottom: 4, leading: 4 },
+          margin: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+          id: "icon-2",
+          icon_name: "check",
+          base_url: "https://icons.pawwalls.com/icons",
+          formats: {
+            heic: "check.heic",
+            png: "check.png",
+            svg: "check.svg",
+            webp: "check.webp",
+          },
+          icon_background: {
+            shape: {
+              type: "rectangle",
+              corners: {
+                top_leading: 8,
+                top_trailing: 8,
+                bottom_leading: 8,
+                bottom_trailing: 8,
+              },
+            },
+            color: {
+              light: {
+                type: "hex",
+                value: "#3f3f3f",
+              },
             },
           },
         },
         connector: {
-          width: 8,
-          margin: { top: 0, bottom: 12 },
-          color: { light: { type: "hex", value: "#d3d3d3" } },
+          width: 4,
+          color: {
+            light: { type: "hex", value: "#8fb43fff" },
+          },
+          margin: {
+            top: 0,
+            bottom: 0,
+          },
         },
       },
       {
+        id: "item-3",
+        name: "item-3",
+        type: "timeline_item",
         title: {
-          text_lid: "case4",
+          text_lid: "zxc123",
           color: defaultColor,
           horizontal_alignment: "center",
+          font_size: 18,
+          font_weight: "bold",
+          font_weight_int: 700,
+          type: "text",
+          padding: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+          margin: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+          size: { width: { type: "fit" }, height: { type: "fit" } },
+          id: "title-3",
+          name: "title-3",
         },
         description: {
-          text_lid: "case4d",
+          text_lid: "zxc123d",
           color: defaultColor,
           horizontal_alignment: "center",
+          font_size: 18,
+          font_weight: "regular",
+          font_weight_int: 400,
+          type: "text",
+          padding: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+          margin: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+          size: { width: { type: "fit" }, height: { type: "fit" } },
+          id: "description-3",
+          name: "description-3",
         },
         icon: {
           name: "check",
@@ -580,53 +966,51 @@
               value: "#FAFAFA",
             },
           },
-          width_and_height: 32,
-          padding: 12,
-        },
-        icon_background: {
-          shape: { type: "circle" },
-          color: {
-            light: {
-              type: "hex",
-              value: "#3f3f3f",
+          size: {
+            width: { type: "fixed", value: 32 },
+            height: { type: "fixed", value: 32 },
+          },
+          type: "icon",
+          padding: { top: 4, trailing: 4, bottom: 4, leading: 4 },
+          margin: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+          id: "icon-3",
+          icon_name: "check",
+          base_url: "https://icons.pawwalls.com/icons",
+          formats: {
+            heic: "check.heic",
+            png: "check.png",
+            svg: "check.svg",
+            webp: "check.webp",
+          },
+          icon_background: {
+            shape: {
+              type: "rectangle",
+              corners: {
+                top_leading: 8,
+                top_trailing: 8,
+                bottom_leading: 8,
+                bottom_trailing: 8,
+              },
+            },
+            color: {
+              light: {
+                type: "hex",
+                value: "#3f3f3f",
+              },
             },
           },
         },
         connector: {
-          width: 8,
-          margin: { top: 12, bottom: 0 },
-          color: { light: { type: "hex", value: "#d3d3d3" } },
-        },
-      },
-      {
-        title: {
-          text_lid: "case5",
-          color: defaultColor,
-          horizontal_alignment: "center",
-        },
-        description: {
-          text_lid: "case5d",
-          color: defaultColor,
-          horizontal_alignment: "center",
-        },
-        icon: {
-          name: "check",
+          width: 4,
           color: {
             light: {
               type: "hex",
-              value: "#FAFAFA",
+              value: "linear-gradient(to bottom, #8fb43fff, #00000000)",
             },
           },
-          width_and_height: 32,
-          padding: 12,
-        },
-        icon_background: {
-          shape: { type: "circle" },
-          color: {
-            light: {
-              type: "hex",
-              value: "#3f3f3f",
-            },
+          margin: {
+            top: 0,
+            bottom: 0,
           },
         },
       },