@revenuecat/purchases-ui-js 0.0.15 → 0.0.17

package/dist/stories/fixtures.js

@@ -12608,17 +12608,15 @@ export const stateTemplate = {
                                     spacing: 0,
                                     type: "stack",
                                     overrides: {
-                                        states: {
-                                            selected: {
-                                                border: {
-                                                    color: {
-                                                        light: {
-                                                            type: "hex",
-                                                            value: "#a229f3ff",
-                                                        },
+                                        selected: {
+                                            border: {
+                                                color: {
+                                                    light: {
+                                                        type: "hex",
+                                                        value: "#a229f3ff",
                                                     },
-                                                    width: 1,
                                                 },
+                                                width: 1,
                                             },
                                         },
                                     },
@@ -12956,17 +12954,15 @@ export const stateTemplate = {
                                     spacing: 0,
                                     type: "stack",
                                     overrides: {
-                                        states: {
-                                            selected: {
-                                                border: {
-                                                    color: {
-                                                        light: {
-                                                            type: "hex",
-                                                            value: "#a229f3ff",
-                                                        },
+                                        selected: {
+                                            border: {
+                                                color: {
+                                                    light: {
+                                                        type: "hex",
+                                                        value: "#a229f3ff",
                                                     },
-                                                    width: 1,
                                                 },
+                                                width: 1,
                                             },
                                         },
                                     },
@@ -13343,17 +13339,15 @@ export const stateTemplate = {
                                     spacing: 0,
                                     type: "stack",
                                     overrides: {
-                                        states: {
-                                            selected: {
-                                                border: {
-                                                    color: {
-                                                        light: {
-                                                            type: "hex",
-                                                            value: "#a229f3ff",
-                                                        },
+                                        selected: {
+                                            border: {
+                                                color: {
+                                                    light: {
+                                                        type: "hex",
+                                                        value: "#a229f3ff",
                                                     },
-                                                    width: 1,
                                                 },
+                                                width: 1,
                                             },
                                         },
                                     },
@@ -15182,10 +15176,4699 @@ export const posterMakerTemplate = {
     template_name: "components",
     updated_at: "2024-11-28T18:20:06Z",
 };
-export const labelsData = {
-    en_US: {
-        id1: "Item 1",
-        id2: "Item 2",
-        id3: "Item 3",
-    },
+export const e2eTestTemplate = {
+    asset_base_url: "https://assets.pawwalls.com",
+    components_config: {
+        base: {
+            background: {
+                type: "color",
+                value: {
+                    light: {
+                        type: "hex",
+                        value: "#ffffff",
+                    },
+                },
+            },
+            stack: {
+                background_color: {
+                    light: {
+                        degrees: 180,
+                        points: [
+                            {
+                                color: "#f8f8ffff",
+                                percent: 0,
+                            },
+                            {
+                                color: "#97aaae96",
+                                percent: 100,
+                            },
+                        ],
+                        type: "linear",
+                        value: "#ffffffff",
+                    },
+                },
+                border: null,
+                components: [
+                    {
+                        components: [],
+                        corner_radiuses: {
+                            bottom_leading: 0,
+                            bottom_trailing: 0,
+                            top_leading: 0,
+                            top_trailing: 0,
+                        },
+                        fit_mode: "fill",
+                        gradientColors: null,
+                        id: "0bp6105JWO",
+                        mask_shape: {
+                            corners: {
+                                bottom_leading: 0,
+                                bottom_trailing: 0,
+                                top_leading: 0,
+                                top_trailing: 0,
+                            },
+                            type: "rectangle",
+                        },
+                        name: "",
+                        override_source_lid: null,
+                        size: {
+                            height: {
+                                type: "fit",
+                                value: null,
+                            },
+                            width: {
+                                type: "fill",
+                                value: null,
+                            },
+                        },
+                        source: {
+                            light: {
+                                heic: "https://assets.pawwalls.com/1145211_1733245631.heic",
+                                heic_low_res: "https://assets.pawwalls.com/1145211_low_res_1733245631.heic",
+                                original: "https://assets.pawwalls.com/1145211_1733245631.jpg",
+                                webp: "https://assets.pawwalls.com/1145211_1733245631.webp",
+                                webp_low_res: "https://assets.pawwalls.com/1145211_low_res_1733245631.webp",
+                            },
+                        },
+                        type: "image",
+                    },
+                    {
+                        background_color: null,
+                        color: {
+                            light: {
+                                type: "hex",
+                                value: "#494949FF",
+                            },
+                        },
+                        components: [],
+                        font_name: null,
+                        font_size: "heading_l",
+                        font_weight: "bold",
+                        horizontal_alignment: "center",
+                        id: "4uox9rm8Zx",
+                        margin: {
+                            bottom: 0,
+                            leading: 0,
+                            top: 0,
+                            trailing: 0,
+                        },
+                        name: "",
+                        padding: {
+                            bottom: 0,
+                            leading: 0,
+                            top: 0,
+                            trailing: 0,
+                        },
+                        size: {
+                            height: {
+                                type: "fit",
+                                value: null,
+                            },
+                            width: {
+                                type: "fill",
+                                value: null,
+                            },
+                        },
+                        text_lid: "GQ2t90mSKx",
+                        type: "text",
+                    },
+                    {
+                        background_color: null,
+                        border: null,
+                        components: [],
+                        dimension: {
+                            alignment: "leading",
+                            distribution: "space_between",
+                            type: "vertical",
+                        },
+                        id: "SyFDiDzvdG",
+                        margin: {
+                            bottom: 0,
+                            leading: 0,
+                            top: 0,
+                            trailing: 0,
+                        },
+                        name: "",
+                        padding: {
+                            bottom: 0,
+                            leading: 0,
+                            top: 0,
+                            trailing: 0,
+                        },
+                        shadow: null,
+                        shape: {
+                            corners: {
+                                bottom_leading: 0,
+                                bottom_trailing: 0,
+                                top_leading: 0,
+                                top_trailing: 0,
+                            },
+                            type: "rectangle",
+                        },
+                        size: {
+                            height: {
+                                type: "fit",
+                                value: null,
+                            },
+                            width: {
+                                type: "fill",
+                                value: null,
+                            },
+                        },
+                        spacing: 0,
+                        type: "stack",
+                    },
+                    {
+                        background_color: null,
+                        border: null,
+                        components: [
+                            {
+                                id: "YTC7pkPmNS",
+                                is_selected_by_default: true,
+                                name: "",
+                                package_id: "$rc_weekly",
+                                stack: {
+                                    background_color: null,
+                                    border: {
+                                        color: {
+                                            light: {
+                                                type: "hex",
+                                                value: "#cccccc",
+                                            },
+                                        },
+                                        width: 1,
+                                    },
+                                    components: [
+                                        {
+                                            background_color: null,
+                                            border: null,
+                                            components: [
+                                                {
+                                                    background_color: null,
+                                                    border: null,
+                                                    components: [
+                                                        {
+                                                            background_color: null,
+                                                            color: {
+                                                                light: {
+                                                                    type: "hex",
+                                                                    value: "#000000",
+                                                                },
+                                                            },
+                                                            components: [],
+                                                            font_name: null,
+                                                            font_size: "heading_m",
+                                                            font_weight: "bold",
+                                                            horizontal_alignment: "leading",
+                                                            id: "18y80hnm5-",
+                                                            margin: {
+                                                                bottom: 0,
+                                                                leading: 0,
+                                                                top: 0,
+                                                                trailing: 0,
+                                                            },
+                                                            name: "",
+                                                            padding: {
+                                                                bottom: 0,
+                                                                leading: 0,
+                                                                top: 0,
+                                                                trailing: 0,
+                                                            },
+                                                            size: {
+                                                                height: {
+                                                                    type: "fit",
+                                                                    value: null,
+                                                                },
+                                                                width: {
+                                                                    type: "fill",
+                                                                    value: null,
+                                                                },
+                                                            },
+                                                            text_lid: "eWT09h61W5",
+                                                            type: "text",
+                                                        },
+                                                        {
+                                                            background_color: null,
+                                                            color: {
+                                                                light: {
+                                                                    type: "hex",
+                                                                    value: "#000000",
+                                                                },
+                                                            },
+                                                            components: [],
+                                                            font_name: null,
+                                                            font_size: "body_m",
+                                                            font_weight: "regular",
+                                                            horizontal_alignment: "leading",
+                                                            id: "8qJjOJhB-r",
+                                                            margin: {
+                                                                bottom: 0,
+                                                                leading: 0,
+                                                                top: 0,
+                                                                trailing: 0,
+                                                            },
+                                                            name: "",
+                                                            padding: {
+                                                                bottom: 0,
+                                                                leading: 0,
+                                                                top: 0,
+                                                                trailing: 0,
+                                                            },
+                                                            size: {
+                                                                height: {
+                                                                    type: "fit",
+                                                                    value: null,
+                                                                },
+                                                                width: {
+                                                                    type: "fill",
+                                                                    value: null,
+                                                                },
+                                                            },
+                                                            text_lid: "Mv-pLWtPsF",
+                                                            type: "text",
+                                                        },
+                                                    ],
+                                                    dimension: {
+                                                        alignment: "leading",
+                                                        distribution: "space_between",
+                                                        type: "vertical",
+                                                    },
+                                                    id: "hMFyQU7Cw4",
+                                                    margin: {
+                                                        bottom: 0,
+                                                        leading: 0,
+                                                        top: 0,
+                                                        trailing: 0,
+                                                    },
+                                                    name: "",
+                                                    padding: {
+                                                        bottom: 0,
+                                                        leading: 0,
+                                                        top: 0,
+                                                        trailing: 0,
+                                                    },
+                                                    shadow: null,
+                                                    shape: {
+                                                        corners: {
+                                                            bottom_leading: 0,
+                                                            bottom_trailing: 0,
+                                                            top_leading: 0,
+                                                            top_trailing: 0,
+                                                        },
+                                                        type: "rectangle",
+                                                    },
+                                                    size: {
+                                                        height: {
+                                                            type: "fit",
+                                                            value: null,
+                                                        },
+                                                        width: {
+                                                            type: "fill",
+                                                            value: null,
+                                                        },
+                                                    },
+                                                    spacing: 0,
+                                                    type: "stack",
+                                                },
+                                                {
+                                                    background_color: null,
+                                                    color: {
+                                                        light: {
+                                                            type: "hex",
+                                                            value: "#000000",
+                                                        },
+                                                    },
+                                                    components: [],
+                                                    font_name: null,
+                                                    font_size: "body_m",
+                                                    font_weight: "regular",
+                                                    horizontal_alignment: "leading",
+                                                    id: "RX2msssKJB",
+                                                    margin: {
+                                                        bottom: 0,
+                                                        leading: 0,
+                                                        top: 0,
+                                                        trailing: 0,
+                                                    },
+                                                    name: "",
+                                                    padding: {
+                                                        bottom: 0,
+                                                        leading: 0,
+                                                        top: 0,
+                                                        trailing: 0,
+                                                    },
+                                                    size: {
+                                                        height: {
+                                                            type: "fit",
+                                                            value: null,
+                                                        },
+                                                        width: {
+                                                            type: "fit",
+                                                            value: null,
+                                                        },
+                                                    },
+                                                    text_lid: "kuOkANDPIO",
+                                                    type: "text",
+                                                },
+                                            ],
+                                            dimension: {
+                                                alignment: "top",
+                                                distribution: "space_between",
+                                                type: "horizontal",
+                                            },
+                                            id: "VzJh_uN6ql",
+                                            margin: {
+                                                bottom: 0,
+                                                leading: 0,
+                                                top: 0,
+                                                trailing: 0,
+                                            },
+                                            name: "",
+                                            padding: {
+                                                bottom: 0,
+                                                leading: 0,
+                                                top: 0,
+                                                trailing: 0,
+                                            },
+                                            shadow: null,
+                                            shape: {
+                                                corners: {
+                                                    bottom_leading: 0,
+                                                    bottom_trailing: 0,
+                                                    top_leading: 0,
+                                                    top_trailing: 0,
+                                                },
+                                                type: "rectangle",
+                                            },
+                                            size: {
+                                                height: {
+                                                    type: "fit",
+                                                    value: null,
+                                                },
+                                                width: {
+                                                    type: "fill",
+                                                    value: null,
+                                                },
+                                            },
+                                            spacing: 0,
+                                            type: "stack",
+                                        },
+                                    ],
+                                    dimension: {
+                                        alignment: "leading",
+                                        distribution: "space_between",
+                                        type: "vertical",
+                                    },
+                                    id: "JFHxEWTmeS",
+                                    margin: {
+                                        bottom: 0,
+                                        leading: 8,
+                                        top: 0,
+                                        trailing: 8,
+                                    },
+                                    name: "",
+                                    overrides: {
+                                        selected: {
+                                            border: {
+                                                color: {
+                                                    light: {
+                                                        type: "hex",
+                                                        value: "#cc6969FF",
+                                                    },
+                                                },
+                                                width: 1,
+                                            },
+                                        },
+                                    },
+                                    padding: {
+                                        bottom: 8,
+                                        leading: 8,
+                                        top: 8,
+                                        trailing: 8,
+                                    },
+                                    shadow: null,
+                                    shape: {
+                                        corners: {
+                                            bottom_leading: 8,
+                                            bottom_trailing: 8,
+                                            top_leading: 8,
+                                            top_trailing: 8,
+                                        },
+                                        type: "rectangle",
+                                    },
+                                    size: {
+                                        height: {
+                                            type: "fit",
+                                            value: null,
+                                        },
+                                        width: {
+                                            type: "fill",
+                                            value: null,
+                                        },
+                                    },
+                                    spacing: 0,
+                                    type: "stack",
+                                },
+                                type: "package",
+                            },
+                            {
+                                components: [
+                                    {
+                                        background_color: null,
+                                        border: null,
+                                        components: [
+                                            {
+                                                background_color: null,
+                                                border: null,
+                                                components: [
+                                                    {
+                                                        background_color: null,
+                                                        color: {
+                                                            light: {
+                                                                type: "hex",
+                                                                value: "#000000",
+                                                            },
+                                                        },
+                                                        components: [],
+                                                        font_name: null,
+                                                        font_size: "heading_m",
+                                                        font_weight: "bold",
+                                                        horizontal_alignment: "leading",
+                                                        id: "pccvSihlG5",
+                                                        margin: {
+                                                            bottom: 0,
+                                                            leading: 0,
+                                                            top: 0,
+                                                            trailing: 0,
+                                                        },
+                                                        name: "",
+                                                        padding: {
+                                                            bottom: 0,
+                                                            leading: 0,
+                                                            top: 0,
+                                                            trailing: 0,
+                                                        },
+                                                        size: {
+                                                            height: {
+                                                                type: "fit",
+                                                                value: null,
+                                                            },
+                                                            width: {
+                                                                type: "fill",
+                                                                value: null,
+                                                            },
+                                                        },
+                                                        text_lid: "8Eul48UP7U",
+                                                        type: "text",
+                                                    },
+                                                    {
+                                                        background_color: null,
+                                                        color: {
+                                                            light: {
+                                                                type: "hex",
+                                                                value: "#000000",
+                                                            },
+                                                        },
+                                                        components: [],
+                                                        font_name: null,
+                                                        font_size: "body_m",
+                                                        font_weight: "regular",
+                                                        horizontal_alignment: "leading",
+                                                        id: "l-J6WOAEzh",
+                                                        margin: {
+                                                            bottom: 0,
+                                                            leading: 0,
+                                                            top: 0,
+                                                            trailing: 0,
+                                                        },
+                                                        name: "",
+                                                        padding: {
+                                                            bottom: 0,
+                                                            leading: 0,
+                                                            top: 0,
+                                                            trailing: 0,
+                                                        },
+                                                        size: {
+                                                            height: {
+                                                                type: "fit",
+                                                                value: null,
+                                                            },
+                                                            width: {
+                                                                type: "fill",
+                                                                value: null,
+                                                            },
+                                                        },
+                                                        text_lid: "06-LnD_7DA",
+                                                        type: "text",
+                                                    },
+                                                ],
+                                                dimension: {
+                                                    alignment: "leading",
+                                                    distribution: "space_between",
+                                                    type: "vertical",
+                                                },
+                                                id: "v9yJcXOd36",
+                                                margin: {
+                                                    bottom: 0,
+                                                    leading: 0,
+                                                    top: 0,
+                                                    trailing: 0,
+                                                },
+                                                name: "",
+                                                padding: {
+                                                    bottom: 0,
+                                                    leading: 0,
+                                                    top: 0,
+                                                    trailing: 0,
+                                                },
+                                                shadow: null,
+                                                shape: {
+                                                    corners: {
+                                                        bottom_leading: 0,
+                                                        bottom_trailing: 0,
+                                                        top_leading: 0,
+                                                        top_trailing: 0,
+                                                    },
+                                                    type: "rectangle",
+                                                },
+                                                size: {
+                                                    height: {
+                                                        type: "fit",
+                                                        value: null,
+                                                    },
+                                                    width: {
+                                                        type: "fill",
+                                                        value: null,
+                                                    },
+                                                },
+                                                spacing: 0,
+                                                type: "stack",
+                                            },
+                                            {
+                                                background_color: null,
+                                                color: {
+                                                    light: {
+                                                        type: "hex",
+                                                        value: "#000000",
+                                                    },
+                                                },
+                                                components: [],
+                                                font_name: null,
+                                                font_size: "body_m",
+                                                font_weight: "regular",
+                                                horizontal_alignment: "leading",
+                                                id: "m3903m_uAc",
+                                                margin: {
+                                                    bottom: 0,
+                                                    leading: 0,
+                                                    top: 0,
+                                                    trailing: 0,
+                                                },
+                                                name: "",
+                                                padding: {
+                                                    bottom: 0,
+                                                    leading: 0,
+                                                    top: 0,
+                                                    trailing: 0,
+                                                },
+                                                size: {
+                                                    height: {
+                                                        type: "fit",
+                                                        value: null,
+                                                    },
+                                                    width: {
+                                                        type: "fit",
+                                                        value: null,
+                                                    },
+                                                },
+                                                text_lid: "B2qAiYu8r-",
+                                                type: "text",
+                                            },
+                                        ],
+                                        dimension: {
+                                            alignment: "top",
+                                            distribution: "space_between",
+                                            type: "horizontal",
+                                        },
+                                        id: "afaeZqH8OD",
+                                        margin: {
+                                            bottom: 0,
+                                            leading: 0,
+                                            top: 0,
+                                            trailing: 0,
+                                        },
+                                        name: "",
+                                        padding: {
+                                            bottom: 0,
+                                            leading: 0,
+                                            top: 0,
+                                            trailing: 0,
+                                        },
+                                        shadow: null,
+                                        shape: {
+                                            corners: {
+                                                bottom_leading: 0,
+                                                bottom_trailing: 0,
+                                                top_leading: 0,
+                                                top_trailing: 0,
+                                            },
+                                            type: "rectangle",
+                                        },
+                                        size: {
+                                            height: {
+                                                type: "fit",
+                                                value: null,
+                                            },
+                                            width: {
+                                                type: "fill",
+                                                value: null,
+                                            },
+                                        },
+                                        spacing: 0,
+                                        type: "stack",
+                                    },
+                                ],
+                                id: "uNG0u8qnLj",
+                                is_selected_by_default: false,
+                                name: "",
+                                package_id: "$rc_monthly",
+                                stack: {
+                                    background_color: null,
+                                    border: {
+                                        color: {
+                                            light: {
+                                                type: "hex",
+                                                value: "#cccccc",
+                                            },
+                                        },
+                                        width: 1,
+                                    },
+                                    components: [
+                                        {
+                                            background_color: null,
+                                            border: null,
+                                            components: [
+                                                {
+                                                    background_color: null,
+                                                    border: null,
+                                                    components: [
+                                                        {
+                                                            background_color: null,
+                                                            color: {
+                                                                light: {
+                                                                    type: "hex",
+                                                                    value: "#000000",
+                                                                },
+                                                            },
+                                                            components: [],
+                                                            font_name: null,
+                                                            font_size: "heading_m",
+                                                            font_weight: "bold",
+                                                            horizontal_alignment: "leading",
+                                                            id: "B55ztZg7s-",
+                                                            margin: {
+                                                                bottom: 0,
+                                                                leading: 0,
+                                                                top: 0,
+                                                                trailing: 0,
+                                                            },
+                                                            name: "",
+                                                            padding: {
+                                                                bottom: 0,
+                                                                leading: 0,
+                                                                top: 0,
+                                                                trailing: 0,
+                                                            },
+                                                            size: {
+                                                                height: {
+                                                                    type: "fit",
+                                                                    value: null,
+                                                                },
+                                                                width: {
+                                                                    type: "fill",
+                                                                    value: null,
+                                                                },
+                                                            },
+                                                            text_lid: "1vNoqpyGlh",
+                                                            type: "text",
+                                                        },
+                                                        {
+                                                            background_color: null,
+                                                            color: {
+                                                                light: {
+                                                                    type: "hex",
+                                                                    value: "#000000",
+                                                                },
+                                                            },
+                                                            components: [],
+                                                            font_name: null,
+                                                            font_size: "body_m",
+                                                            font_weight: "regular",
+                                                            horizontal_alignment: "leading",
+                                                            id: "ECIgZy0wEa",
+                                                            margin: {
+                                                                bottom: 0,
+                                                                leading: 0,
+                                                                top: 0,
+                                                                trailing: 0,
+                                                            },
+                                                            name: "",
+                                                            padding: {
+                                                                bottom: 0,
+                                                                leading: 0,
+                                                                top: 0,
+                                                                trailing: 0,
+                                                            },
+                                                            size: {
+                                                                height: {
+                                                                    type: "fit",
+                                                                    value: null,
+                                                                },
+                                                                width: {
+                                                                    type: "fill",
+                                                                    value: null,
+                                                                },
+                                                            },
+                                                            text_lid: "UBYuS_oKkT",
+                                                            type: "text",
+                                                        },
+                                                    ],
+                                                    dimension: {
+                                                        alignment: "leading",
+                                                        distribution: "space_between",
+                                                        type: "vertical",
+                                                    },
+                                                    id: "u9WuvQpCHj",
+                                                    margin: {
+                                                        bottom: 0,
+                                                        leading: 0,
+                                                        top: 0,
+                                                        trailing: 0,
+                                                    },
+                                                    name: "",
+                                                    padding: {
+                                                        bottom: 0,
+                                                        leading: 0,
+                                                        top: 0,
+                                                        trailing: 0,
+                                                    },
+                                                    shadow: null,
+                                                    shape: {
+                                                        corners: {
+                                                            bottom_leading: 0,
+                                                            bottom_trailing: 0,
+                                                            top_leading: 0,
+                                                            top_trailing: 0,
+                                                        },
+                                                        type: "rectangle",
+                                                    },
+                                                    size: {
+                                                        height: {
+                                                            type: "fit",
+                                                            value: null,
+                                                        },
+                                                        width: {
+                                                            type: "fill",
+                                                            value: null,
+                                                        },
+                                                    },
+                                                    spacing: 0,
+                                                    type: "stack",
+                                                },
+                                                {
+                                                    background_color: null,
+                                                    color: {
+                                                        light: {
+                                                            type: "hex",
+                                                            value: "#000000",
+                                                        },
+                                                    },
+                                                    components: [],
+                                                    font_name: null,
+                                                    font_size: "body_m",
+                                                    font_weight: "regular",
+                                                    horizontal_alignment: "leading",
+                                                    id: "bNCLIqOVpR",
+                                                    margin: {
+                                                        bottom: 0,
+                                                        leading: 0,
+                                                        top: 0,
+                                                        trailing: 0,
+                                                    },
+                                                    name: "",
+                                                    padding: {
+                                                        bottom: 0,
+                                                        leading: 0,
+                                                        top: 0,
+                                                        trailing: 0,
+                                                    },
+                                                    size: {
+                                                        height: {
+                                                            type: "fit",
+                                                            value: null,
+                                                        },
+                                                        width: {
+                                                            type: "fit",
+                                                            value: null,
+                                                        },
+                                                    },
+                                                    text_lid: "dQf3R4ahR0",
+                                                    type: "text",
+                                                },
+                                            ],
+                                            dimension: {
+                                                alignment: "top",
+                                                distribution: "space_between",
+                                                type: "horizontal",
+                                            },
+                                            id: "Tx4cfTh_o4",
+                                            margin: {
+                                                bottom: 0,
+                                                leading: 0,
+                                                top: 0,
+                                                trailing: 0,
+                                            },
+                                            name: "",
+                                            padding: {
+                                                bottom: 0,
+                                                leading: 0,
+                                                top: 0,
+                                                trailing: 0,
+                                            },
+                                            shadow: null,
+                                            shape: {
+                                                corners: {
+                                                    bottom_leading: 0,
+                                                    bottom_trailing: 0,
+                                                    top_leading: 0,
+                                                    top_trailing: 0,
+                                                },
+                                                type: "rectangle",
+                                            },
+                                            size: {
+                                                height: {
+                                                    type: "fit",
+                                                    value: null,
+                                                },
+                                                width: {
+                                                    type: "fill",
+                                                    value: null,
+                                                },
+                                            },
+                                            spacing: 0,
+                                            type: "stack",
+                                        },
+                                    ],
+                                    dimension: {
+                                        alignment: "leading",
+                                        distribution: "space_between",
+                                        type: "vertical",
+                                    },
+                                    id: "lqx78thihL",
+                                    margin: {
+                                        bottom: 0,
+                                        leading: 8,
+                                        top: 0,
+                                        trailing: 8,
+                                    },
+                                    name: "",
+                                    overrides: {
+                                        selected: {
+                                            border: {
+                                                color: {
+                                                    light: {
+                                                        type: "hex",
+                                                        value: "#cc6969ff",
+                                                    },
+                                                },
+                                                width: 1,
+                                            },
+                                        },
+                                    },
+                                    padding: {
+                                        bottom: 8,
+                                        leading: 8,
+                                        top: 8,
+                                        trailing: 8,
+                                    },
+                                    shadow: null,
+                                    shape: {
+                                        corners: {
+                                            bottom_leading: 8,
+                                            bottom_trailing: 8,
+                                            top_leading: 8,
+                                            top_trailing: 8,
+                                        },
+                                        type: "rectangle",
+                                    },
+                                    size: {
+                                        height: {
+                                            type: "fit",
+                                            value: null,
+                                        },
+                                        width: {
+                                            type: "fill",
+                                            value: null,
+                                        },
+                                    },
+                                    spacing: 0,
+                                    type: "stack",
+                                },
+                                type: "package",
+                            },
+                            {
+                                components: [
+                                    {
+                                        background_color: null,
+                                        border: null,
+                                        components: [
+                                            {
+                                                background_color: null,
+                                                border: null,
+                                                components: [
+                                                    {
+                                                        background_color: null,
+                                                        color: {
+                                                            light: {
+                                                                type: "hex",
+                                                                value: "#000000",
+                                                            },
+                                                        },
+                                                        components: [],
+                                                        font_name: null,
+                                                        font_size: "heading_m",
+                                                        font_weight: "bold",
+                                                        horizontal_alignment: "leading",
+                                                        id: "3uyMG4CW77",
+                                                        margin: {
+                                                            bottom: 0,
+                                                            leading: 0,
+                                                            top: 0,
+                                                            trailing: 0,
+                                                        },
+                                                        name: "",
+                                                        padding: {
+                                                            bottom: 0,
+                                                            leading: 0,
+                                                            top: 0,
+                                                            trailing: 0,
+                                                        },
+                                                        size: {
+                                                            height: {
+                                                                type: "fit",
+                                                                value: null,
+                                                            },
+                                                            width: {
+                                                                type: "fill",
+                                                                value: null,
+                                                            },
+                                                        },
+                                                        text_lid: "V3_zAWeAUC",
+                                                        type: "text",
+                                                    },
+                                                    {
+                                                        background_color: null,
+                                                        color: {
+                                                            light: {
+                                                                type: "hex",
+                                                                value: "#000000",
+                                                            },
+                                                        },
+                                                        components: [],
+                                                        font_name: null,
+                                                        font_size: "body_m",
+                                                        font_weight: "regular",
+                                                        horizontal_alignment: "leading",
+                                                        id: "nfLZa6Hs_K",
+                                                        margin: {
+                                                            bottom: 0,
+                                                            leading: 0,
+                                                            top: 0,
+                                                            trailing: 0,
+                                                        },
+                                                        name: "",
+                                                        padding: {
+                                                            bottom: 0,
+                                                            leading: 0,
+                                                            top: 0,
+                                                            trailing: 0,
+                                                        },
+                                                        size: {
+                                                            height: {
+                                                                type: "fit",
+                                                                value: null,
+                                                            },
+                                                            width: {
+                                                                type: "fill",
+                                                                value: null,
+                                                            },
+                                                        },
+                                                        text_lid: "CKF3IHiN7X",
+                                                        type: "text",
+                                                    },
+                                                ],
+                                                dimension: {
+                                                    alignment: "leading",
+                                                    distribution: "space_between",
+                                                    type: "vertical",
+                                                },
+                                                id: "5Zufhgf_WT",
+                                                margin: {
+                                                    bottom: 0,
+                                                    leading: 0,
+                                                    top: 0,
+                                                    trailing: 0,
+                                                },
+                                                name: "",
+                                                padding: {
+                                                    bottom: 0,
+                                                    leading: 0,
+                                                    top: 0,
+                                                    trailing: 0,
+                                                },
+                                                shadow: null,
+                                                shape: {
+                                                    corners: {
+                                                        bottom_leading: 0,
+                                                        bottom_trailing: 0,
+                                                        top_leading: 0,
+                                                        top_trailing: 0,
+                                                    },
+                                                    type: "rectangle",
+                                                },
+                                                size: {
+                                                    height: {
+                                                        type: "fit",
+                                                        value: null,
+                                                    },
+                                                    width: {
+                                                        type: "fill",
+                                                        value: null,
+                                                    },
+                                                },
+                                                spacing: 0,
+                                                type: "stack",
+                                            },
+                                            {
+                                                background_color: null,
+                                                color: {
+                                                    light: {
+                                                        type: "hex",
+                                                        value: "#000000",
+                                                    },
+                                                },
+                                                components: [],
+                                                font_name: null,
+                                                font_size: "body_m",
+                                                font_weight: "regular",
+                                                horizontal_alignment: "leading",
+                                                id: "zd_zjJ-J1b",
+                                                margin: {
+                                                    bottom: 0,
+                                                    leading: 0,
+                                                    top: 0,
+                                                    trailing: 0,
+                                                },
+                                                name: "",
+                                                padding: {
+                                                    bottom: 0,
+                                                    leading: 0,
+                                                    top: 0,
+                                                    trailing: 0,
+                                                },
+                                                size: {
+                                                    height: {
+                                                        type: "fit",
+                                                        value: null,
+                                                    },
+                                                    width: {
+                                                        type: "fit",
+                                                        value: null,
+                                                    },
+                                                },
+                                                text_lid: "yD_JLFbPyq",
+                                                type: "text",
+                                            },
+                                        ],
+                                        dimension: {
+                                            alignment: "top",
+                                            distribution: "space_between",
+                                            type: "horizontal",
+                                        },
+                                        id: "5PizmIJoIV",
+                                        margin: {
+                                            bottom: 0,
+                                            leading: 0,
+                                            top: 0,
+                                            trailing: 0,
+                                        },
+                                        name: "",
+                                        padding: {
+                                            bottom: 0,
+                                            leading: 0,
+                                            top: 0,
+                                            trailing: 0,
+                                        },
+                                        shadow: null,
+                                        shape: {
+                                            corners: {
+                                                bottom_leading: 0,
+                                                bottom_trailing: 0,
+                                                top_leading: 0,
+                                                top_trailing: 0,
+                                            },
+                                            type: "rectangle",
+                                        },
+                                        size: {
+                                            height: {
+                                                type: "fit",
+                                                value: null,
+                                            },
+                                            width: {
+                                                type: "fill",
+                                                value: null,
+                                            },
+                                        },
+                                        spacing: 0,
+                                        type: "stack",
+                                    },
+                                ],
+                                id: "vt2-VYn-v-",
+                                is_selected_by_default: false,
+                                name: "",
+                                package_id: "$rc_annual",
+                                stack: {
+                                    background_color: null,
+                                    border: {
+                                        color: {
+                                            light: {
+                                                type: "hex",
+                                                value: "#cccccc",
+                                            },
+                                        },
+                                        width: 1,
+                                    },
+                                    components: [
+                                        {
+                                            background_color: null,
+                                            border: null,
+                                            components: [
+                                                {
+                                                    background_color: null,
+                                                    border: null,
+                                                    components: [
+                                                        {
+                                                            background_color: null,
+                                                            color: {
+                                                                light: {
+                                                                    type: "hex",
+                                                                    value: "#000000",
+                                                                },
+                                                            },
+                                                            components: [],
+                                                            font_name: null,
+                                                            font_size: "heading_m",
+                                                            font_weight: "bold",
+                                                            horizontal_alignment: "leading",
+                                                            id: "oc-PAGzehM",
+                                                            margin: {
+                                                                bottom: 0,
+                                                                leading: 0,
+                                                                top: 0,
+                                                                trailing: 0,
+                                                            },
+                                                            name: "",
+                                                            padding: {
+                                                                bottom: 0,
+                                                                leading: 0,
+                                                                top: 0,
+                                                                trailing: 0,
+                                                            },
+                                                            size: {
+                                                                height: {
+                                                                    type: "fit",
+                                                                    value: null,
+                                                                },
+                                                                width: {
+                                                                    type: "fill",
+                                                                    value: null,
+                                                                },
+                                                            },
+                                                            text_lid: "PJ9l1Jg4Pk",
+                                                            type: "text",
+                                                        },
+                                                        {
+                                                            background_color: null,
+                                                            color: {
+                                                                light: {
+                                                                    type: "hex",
+                                                                    value: "#000000",
+                                                                },
+                                                            },
+                                                            components: [],
+                                                            font_name: null,
+                                                            font_size: "body_m",
+                                                            font_weight: "regular",
+                                                            horizontal_alignment: "leading",
+                                                            id: "nw1jmturTP",
+                                                            margin: {
+                                                                bottom: 0,
+                                                                leading: 0,
+                                                                top: 0,
+                                                                trailing: 0,
+                                                            },
+                                                            name: "",
+                                                            padding: {
+                                                                bottom: 0,
+                                                                leading: 0,
+                                                                top: 0,
+                                                                trailing: 0,
+                                                            },
+                                                            size: {
+                                                                height: {
+                                                                    type: "fit",
+                                                                    value: null,
+                                                                },
+                                                                width: {
+                                                                    type: "fill",
+                                                                    value: null,
+                                                                },
+                                                            },
+                                                            text_lid: "eFF9eFFjEl",
+                                                            type: "text",
+                                                        },
+                                                    ],
+                                                    dimension: {
+                                                        alignment: "leading",
+                                                        distribution: "space_between",
+                                                        type: "vertical",
+                                                    },
+                                                    id: "mSAFk2lPou",
+                                                    margin: {
+                                                        bottom: 0,
+                                                        leading: 0,
+                                                        top: 0,
+                                                        trailing: 0,
+                                                    },
+                                                    name: "",
+                                                    padding: {
+                                                        bottom: 0,
+                                                        leading: 0,
+                                                        top: 0,
+                                                        trailing: 0,
+                                                    },
+                                                    shadow: null,
+                                                    shape: {
+                                                        corners: {
+                                                            bottom_leading: 0,
+                                                            bottom_trailing: 0,
+                                                            top_leading: 0,
+                                                            top_trailing: 0,
+                                                        },
+                                                        type: "rectangle",
+                                                    },
+                                                    size: {
+                                                        height: {
+                                                            type: "fit",
+                                                            value: null,
+                                                        },
+                                                        width: {
+                                                            type: "fill",
+                                                            value: null,
+                                                        },
+                                                    },
+                                                    spacing: 0,
+                                                    type: "stack",
+                                                },
+                                                {
+                                                    background_color: null,
+                                                    color: {
+                                                        light: {
+                                                            type: "hex",
+                                                            value: "#000000",
+                                                        },
+                                                    },
+                                                    components: [],
+                                                    font_name: null,
+                                                    font_size: "body_m",
+                                                    font_weight: "regular",
+                                                    horizontal_alignment: "leading",
+                                                    id: "FP3nXfwjWo",
+                                                    margin: {
+                                                        bottom: 0,
+                                                        leading: 0,
+                                                        top: 0,
+                                                        trailing: 0,
+                                                    },
+                                                    name: "",
+                                                    padding: {
+                                                        bottom: 0,
+                                                        leading: 0,
+                                                        top: 0,
+                                                        trailing: 0,
+                                                    },
+                                                    size: {
+                                                        height: {
+                                                            type: "fit",
+                                                            value: null,
+                                                        },
+                                                        width: {
+                                                            type: "fit",
+                                                            value: null,
+                                                        },
+                                                    },
+                                                    text_lid: "uq0PMImVVf",
+                                                    type: "text",
+                                                },
+                                            ],
+                                            dimension: {
+                                                alignment: "top",
+                                                distribution: "space_between",
+                                                type: "horizontal",
+                                            },
+                                            id: "CIGORYpaJT",
+                                            margin: {
+                                                bottom: 0,
+                                                leading: 0,
+                                                top: 0,
+                                                trailing: 0,
+                                            },
+                                            name: "",
+                                            padding: {
+                                                bottom: 0,
+                                                leading: 0,
+                                                top: 0,
+                                                trailing: 0,
+                                            },
+                                            shadow: null,
+                                            shape: {
+                                                corners: {
+                                                    bottom_leading: 0,
+                                                    bottom_trailing: 0,
+                                                    top_leading: 0,
+                                                    top_trailing: 0,
+                                                },
+                                                type: "rectangle",
+                                            },
+                                            size: {
+                                                height: {
+                                                    type: "fit",
+                                                    value: null,
+                                                },
+                                                width: {
+                                                    type: "fill",
+                                                    value: null,
+                                                },
+                                            },
+                                            spacing: 0,
+                                            type: "stack",
+                                        },
+                                    ],
+                                    dimension: {
+                                        alignment: "leading",
+                                        distribution: "space_between",
+                                        type: "vertical",
+                                    },
+                                    id: "5KhWz7KmSf",
+                                    margin: {
+                                        bottom: 0,
+                                        leading: 8,
+                                        top: 0,
+                                        trailing: 8,
+                                    },
+                                    name: "",
+                                    overrides: {
+                                        selected: {
+                                            border: {
+                                                color: {
+                                                    light: {
+                                                        type: "hex",
+                                                        value: "#cc6969ff",
+                                                    },
+                                                },
+                                                width: 1,
+                                            },
+                                        },
+                                    },
+                                    padding: {
+                                        bottom: 8,
+                                        leading: 8,
+                                        top: 8,
+                                        trailing: 8,
+                                    },
+                                    shadow: null,
+                                    shape: {
+                                        corners: {
+                                            bottom_leading: 8,
+                                            bottom_trailing: 8,
+                                            top_leading: 8,
+                                            top_trailing: 8,
+                                        },
+                                        type: "rectangle",
+                                    },
+                                    size: {
+                                        height: {
+                                            type: "fit",
+                                            value: null,
+                                        },
+                                        width: {
+                                            type: "fill",
+                                            value: null,
+                                        },
+                                    },
+                                    spacing: 0,
+                                    type: "stack",
+                                },
+                                type: "package",
+                            },
+                        ],
+                        dimension: {
+                            alignment: "center",
+                            distribution: "start",
+                            type: "vertical",
+                        },
+                        id: "iUx3-qMY_T",
+                        margin: {
+                            bottom: 0,
+                            leading: 8,
+                            top: 0,
+                            trailing: 8,
+                        },
+                        name: "",
+                        padding: {
+                            bottom: 0,
+                            leading: 0,
+                            top: 0,
+                            trailing: 0,
+                        },
+                        shadow: null,
+                        shape: {
+                            corners: {
+                                bottom_leading: 0,
+                                bottom_trailing: 0,
+                                top_leading: 0,
+                                top_trailing: 0,
+                            },
+                            type: "rectangle",
+                        },
+                        size: {
+                            height: {
+                                type: "fit",
+                                value: null,
+                            },
+                            width: {
+                                type: "fill",
+                                value: null,
+                            },
+                        },
+                        spacing: 8,
+                        type: "stack",
+                    },
+                    {
+                        background_color: null,
+                        border: null,
+                        components: [
+                            {
+                                id: "URRzLzNzla",
+                                name: "",
+                                stack: {
+                                    background_color: {
+                                        light: {
+                                            type: "hex",
+                                            value: "#000000",
+                                        },
+                                    },
+                                    border: null,
+                                    components: [
+                                        {
+                                            background_color: {
+                                                light: {
+                                                    type: "hex",
+                                                    value: "#ffffff00",
+                                                },
+                                            },
+                                            color: {
+                                                light: {
+                                                    type: "hex",
+                                                    value: "#ffffff",
+                                                },
+                                            },
+                                            components: [],
+                                            font_name: null,
+                                            font_size: "body_m",
+                                            font_weight: "extra_bold",
+                                            horizontal_alignment: "center",
+                                            id: "OVmqLUtiTF",
+                                            margin: {
+                                                bottom: 0,
+                                                leading: 20,
+                                                top: 0,
+                                                trailing: 20,
+                                            },
+                                            name: "",
+                                            padding: {
+                                                bottom: 16,
+                                                leading: 16,
+                                                top: 16,
+                                                trailing: 16,
+                                            },
+                                            size: {
+                                                height: {
+                                                    type: "fit",
+                                                    value: null,
+                                                },
+                                                width: {
+                                                    type: "fill",
+                                                    value: null,
+                                                },
+                                            },
+                                            text_lid: "Lu4yCSo1-n",
+                                            type: "text",
+                                        },
+                                    ],
+                                    dimension: {
+                                        alignment: "leading",
+                                        distribution: "space_between",
+                                        type: "vertical",
+                                    },
+                                    id: "AA18HUHSH_",
+                                    margin: {
+                                        bottom: 60,
+                                        leading: 20,
+                                        top: 0,
+                                        trailing: 20,
+                                    },
+                                    name: "",
+                                    padding: {
+                                        bottom: 0,
+                                        leading: 0,
+                                        top: 0,
+                                        trailing: 0,
+                                    },
+                                    shadow: null,
+                                    shape: {
+                                        type: "pill",
+                                    },
+                                    size: {
+                                        height: {
+                                            type: "fit",
+                                            value: null,
+                                        },
+                                        width: {
+                                            type: "fill",
+                                            value: null,
+                                        },
+                                    },
+                                    spacing: 0,
+                                    type: "stack",
+                                },
+                                type: "purchase_button",
+                            },
+                        ],
+                        dimension: {
+                            alignment: "leading",
+                            distribution: "space_between",
+                            type: "vertical",
+                        },
+                        id: "1-ymFDvH4r",
+                        margin: {
+                            bottom: 0,
+                            leading: 0,
+                            top: 0,
+                            trailing: 0,
+                        },
+                        name: "",
+                        padding: {
+                            bottom: 0,
+                            leading: 0,
+                            top: 0,
+                            trailing: 0,
+                        },
+                        shadow: null,
+                        shape: {
+                            corners: {
+                                bottom_leading: 0,
+                                bottom_trailing: 0,
+                                top_leading: 0,
+                                top_trailing: 0,
+                            },
+                            type: "rectangle",
+                        },
+                        size: {
+                            height: {
+                                type: "fit",
+                                value: null,
+                            },
+                            width: {
+                                type: "fill",
+                                value: null,
+                            },
+                        },
+                        spacing: 0,
+                        type: "stack",
+                    },
+                ],
+                dimension: {
+                    alignment: "leading",
+                    distribution: "start",
+                    type: "vertical",
+                },
+                id: "iUMgmwia8M",
+                margin: {
+                    bottom: 0,
+                    leading: 0,
+                    top: 0,
+                    trailing: 0,
+                },
+                name: "Content",
+                padding: {
+                    bottom: 0,
+                    leading: 0,
+                    top: 0,
+                    trailing: 0,
+                },
+                shadow: null,
+                shape: {
+                    corners: {
+                        bottom_leading: 0,
+                        bottom_trailing: 0,
+                        top_leading: 0,
+                        top_trailing: 0,
+                    },
+                    type: "rectangle",
+                },
+                size: {
+                    height: {
+                        type: "fill",
+                        value: null,
+                    },
+                    width: {
+                        type: "fill",
+                        value: null,
+                    },
+                },
+                spacing: 20,
+                type: "stack",
+            },
+            sticky_footer: null,
+        },
+    },
+    components_localizations: {
+        en_US: {
+            "06-LnD_7DA": "This is the weekly package",
+            "1vNoqpyGlh": "Monthly",
+            "8Eul48UP7U": "Weekly",
+            "B2qAiYu8r-": "{{ price }}",
+            CKF3IHiN7X: "This is the weekly package",
+            GQ2t90mSKx: "E2E Tests for Purchases JS",
+            "Lu4yCSo1-n": "PURCHASE FOR {{ total_price_and_per_month }}",
+            "Mv-pLWtPsF": "This is the weekly package",
+            PJ9l1Jg4Pk: "Yearly",
+            UBYuS_oKkT: "This is the weekly package",
+            V3_zAWeAUC: "Weekly",
+            dQf3R4ahR0: "{{ price }}",
+            eFF9eFFjEl: "This is the weekly package",
+            eWT09h61W5: "Weekly",
+            kuOkANDPIO: "{{ price }}",
+            uq0PMImVVf: "{{ price }}",
+            yD_JLFbPyq: "{{ price }}",
+        },
+    },
+    config: {},
+    created_at: "2024-12-04T16:41:58Z",
+    default_locale: "en_US",
+    localized_strings: {
+        en_US: {},
+    },
+    localized_strings_by_tier: {},
+    offering_id: "ofrngb5779c6052",
+    published_at: "2024-12-04T16:57:39Z",
+    published_revision: 4,
+    revision: 5,
+    template_name: "components",
+    updated_at: "2024-12-04T16:58:45Z",
+};
+export const zStackTemplate = {
+    asset_base_url: "https://assets.pawwalls.com",
+    components_config: {
+        base: {
+            background: {
+                type: "color",
+                value: {
+                    light: {
+                        type: "hex",
+                        value: "#ffffff",
+                    },
+                },
+            },
+            stack: {
+                background_color: {
+                    light: {
+                        degrees: 180,
+                        points: [
+                            {
+                                color: "#f8f8ffff",
+                                percent: 0,
+                            },
+                            {
+                                color: "#97aaae96",
+                                percent: 100,
+                            },
+                        ],
+                        type: "linear",
+                        value: "#ffffffff",
+                    },
+                },
+                border: null,
+                components: [
+                    {
+                        background_color: null,
+                        border: null,
+                        components: [
+                            {
+                                components: [],
+                                corner_radiuses: {
+                                    bottom_leading: 0,
+                                    bottom_trailing: 0,
+                                    top_leading: 0,
+                                    top_trailing: 0,
+                                },
+                                fit_mode: "fill",
+                                gradientColors: null,
+                                id: "0bp6105JWO",
+                                mask_shape: {
+                                    corners: {
+                                        bottom_leading: 0,
+                                        bottom_trailing: 0,
+                                        top_leading: 0,
+                                        top_trailing: 0,
+                                    },
+                                    type: "rectangle",
+                                },
+                                name: "",
+                                override_source_lid: null,
+                                size: {
+                                    height: {
+                                        type: "fit",
+                                        value: null,
+                                    },
+                                    width: {
+                                        type: "fill",
+                                        value: null,
+                                    },
+                                },
+                                source: {
+                                    light: {
+                                        heic: "https://assets.pawwalls.com/1145211_1733245631.heic",
+                                        heic_low_res: "https://assets.pawwalls.com/1145211_low_res_1733245631.heic",
+                                        original: "https://assets.pawwalls.com/1145211_1733245631.jpg",
+                                        webp: "https://assets.pawwalls.com/1145211_1733245631.webp",
+                                        webp_low_res: "https://assets.pawwalls.com/1145211_low_res_1733245631.webp",
+                                    },
+                                },
+                                type: "image",
+                            },
+                            {
+                                background_color: null,
+                                border: null,
+                                components: [
+                                    {
+                                        background_color: {
+                                            light: {
+                                                type: "hex",
+                                                value: "#fe8686FF",
+                                            },
+                                        },
+                                        color: {
+                                            light: {
+                                                type: "hex",
+                                                value: "#ffffffFF",
+                                            },
+                                        },
+                                        font_name: null,
+                                        font_size: "body_m",
+                                        font_weight: "regular",
+                                        horizontal_alignment: "leading",
+                                        id: "_Hv6U-DNRP",
+                                        margin: {
+                                            bottom: 0,
+                                            leading: 0,
+                                            top: 0,
+                                            trailing: 0,
+                                        },
+                                        name: "",
+                                        padding: {
+                                            bottom: 4,
+                                            leading: 4,
+                                            top: 4,
+                                            trailing: 4,
+                                        },
+                                        size: {
+                                            height: {
+                                                type: "fit",
+                                                value: null,
+                                            },
+                                            width: {
+                                                type: "fit",
+                                                value: null,
+                                            },
+                                        },
+                                        text_lid: "auUEm6-oaa",
+                                        type: "text",
+                                    },
+                                ],
+                                dimension: {
+                                    alignment: "top_leading",
+                                    distribution: "space_between",
+                                    type: "zlayer",
+                                },
+                                id: "hIK8gmb7gp",
+                                margin: {
+                                    bottom: 0,
+                                    leading: 0,
+                                    top: 0,
+                                    trailing: 0,
+                                },
+                                name: "",
+                                padding: {
+                                    bottom: 0,
+                                    leading: 0,
+                                    top: 0,
+                                    trailing: 0,
+                                },
+                                shadow: null,
+                                shape: {
+                                    corners: {
+                                        bottom_leading: 0,
+                                        bottom_trailing: 0,
+                                        top_leading: 0,
+                                        top_trailing: 0,
+                                    },
+                                    type: "rectangle",
+                                },
+                                size: {
+                                    height: {
+                                        type: "fit",
+                                        value: null,
+                                    },
+                                    width: {
+                                        type: "fill",
+                                        value: null,
+                                    },
+                                },
+                                spacing: 0,
+                                type: "stack",
+                            },
+                            {
+                                background_color: null,
+                                border: null,
+                                components: [
+                                    {
+                                        background_color: {
+                                            light: {
+                                                type: "hex",
+                                                value: "#fe8686FF",
+                                            },
+                                        },
+                                        color: {
+                                            light: {
+                                                type: "hex",
+                                                value: "#ffffffFF",
+                                            },
+                                        },
+                                        components: [],
+                                        font_name: null,
+                                        font_size: "body_m",
+                                        font_weight: "regular",
+                                        horizontal_alignment: "leading",
+                                        id: "2u5kPYjxrB",
+                                        margin: {
+                                            bottom: 0,
+                                            leading: 0,
+                                            top: 0,
+                                            trailing: 0,
+                                        },
+                                        name: "",
+                                        padding: {
+                                            bottom: 4,
+                                            leading: 4,
+                                            top: 4,
+                                            trailing: 4,
+                                        },
+                                        size: {
+                                            height: {
+                                                type: "fit",
+                                                value: null,
+                                            },
+                                            width: {
+                                                type: "fit",
+                                                value: null,
+                                            },
+                                        },
+                                        text_lid: "ObGc32Hfvu",
+                                        type: "text",
+                                    },
+                                ],
+                                dimension: {
+                                    alignment: "top",
+                                    distribution: "space_between",
+                                    type: "zlayer",
+                                },
+                                id: "j1xu3Oi_mj",
+                                margin: {
+                                    bottom: 0,
+                                    leading: 0,
+                                    top: 0,
+                                    trailing: 0,
+                                },
+                                name: "",
+                                padding: {
+                                    bottom: 0,
+                                    leading: 0,
+                                    top: 0,
+                                    trailing: 0,
+                                },
+                                shadow: null,
+                                shape: {
+                                    corners: {
+                                        bottom_leading: 0,
+                                        bottom_trailing: 0,
+                                        top_leading: 0,
+                                        top_trailing: 0,
+                                    },
+                                    type: "rectangle",
+                                },
+                                size: {
+                                    height: {
+                                        type: "fit",
+                                        value: null,
+                                    },
+                                    width: {
+                                        type: "fill",
+                                        value: null,
+                                    },
+                                },
+                                spacing: 0,
+                                type: "stack",
+                            },
+                            {
+                                background_color: null,
+                                border: null,
+                                components: [
+                                    {
+                                        background_color: {
+                                            light: {
+                                                type: "hex",
+                                                value: "#fe8686FF",
+                                            },
+                                        },
+                                        color: {
+                                            light: {
+                                                type: "hex",
+                                                value: "#ffffffFF",
+                                            },
+                                        },
+                                        components: [],
+                                        font_name: null,
+                                        font_size: "body_m",
+                                        font_weight: "regular",
+                                        horizontal_alignment: "leading",
+                                        id: "pauZYkAplk",
+                                        margin: {
+                                            bottom: 0,
+                                            leading: 0,
+                                            top: 0,
+                                            trailing: 0,
+                                        },
+                                        name: "",
+                                        padding: {
+                                            bottom: 4,
+                                            leading: 4,
+                                            top: 4,
+                                            trailing: 4,
+                                        },
+                                        size: {
+                                            height: {
+                                                type: "fit",
+                                                value: null,
+                                            },
+                                            width: {
+                                                type: "fit",
+                                                value: null,
+                                            },
+                                        },
+                                        text_lid: "xAkMwRUzod",
+                                        type: "text",
+                                    },
+                                ],
+                                dimension: {
+                                    alignment: "top_trailing",
+                                    distribution: "space_between",
+                                    type: "zlayer",
+                                },
+                                id: "SJZJwmjoOT",
+                                margin: {
+                                    bottom: 0,
+                                    leading: 0,
+                                    top: 0,
+                                    trailing: 0,
+                                },
+                                name: "",
+                                padding: {
+                                    bottom: 0,
+                                    leading: 0,
+                                    top: 0,
+                                    trailing: 0,
+                                },
+                                shadow: null,
+                                shape: {
+                                    corners: {
+                                        bottom_leading: 0,
+                                        bottom_trailing: 0,
+                                        top_leading: 0,
+                                        top_trailing: 0,
+                                    },
+                                    type: "rectangle",
+                                },
+                                size: {
+                                    height: {
+                                        type: "fit",
+                                        value: null,
+                                    },
+                                    width: {
+                                        type: "fill",
+                                        value: null,
+                                    },
+                                },
+                                spacing: 0,
+                                type: "stack",
+                            },
+                            {
+                                background_color: null,
+                                border: null,
+                                components: [
+                                    {
+                                        background_color: {
+                                            light: {
+                                                type: "hex",
+                                                value: "#fe8686FF",
+                                            },
+                                        },
+                                        color: {
+                                            light: {
+                                                type: "hex",
+                                                value: "#ffffffFF",
+                                            },
+                                        },
+                                        components: [],
+                                        font_name: null,
+                                        font_size: "body_m",
+                                        font_weight: "regular",
+                                        horizontal_alignment: "leading",
+                                        id: "tFaZYfA9xU",
+                                        margin: {
+                                            bottom: 0,
+                                            leading: 0,
+                                            top: 0,
+                                            trailing: 0,
+                                        },
+                                        name: "",
+                                        padding: {
+                                            bottom: 4,
+                                            leading: 4,
+                                            top: 4,
+                                            trailing: 4,
+                                        },
+                                        size: {
+                                            height: {
+                                                type: "fit",
+                                                value: null,
+                                            },
+                                            width: {
+                                                type: "fit",
+                                                value: null,
+                                            },
+                                        },
+                                        text_lid: "IndkfgspOp",
+                                        type: "text",
+                                    },
+                                ],
+                                dimension: {
+                                    alignment: "leading",
+                                    distribution: "space_between",
+                                    type: "zlayer",
+                                },
+                                id: "BKKbRsf-iz",
+                                margin: {
+                                    bottom: 0,
+                                    leading: 0,
+                                    top: 0,
+                                    trailing: 0,
+                                },
+                                name: "",
+                                padding: {
+                                    bottom: 0,
+                                    leading: 0,
+                                    top: 0,
+                                    trailing: 0,
+                                },
+                                shadow: null,
+                                shape: {
+                                    corners: {
+                                        bottom_leading: 0,
+                                        bottom_trailing: 0,
+                                        top_leading: 0,
+                                        top_trailing: 0,
+                                    },
+                                    type: "rectangle",
+                                },
+                                size: {
+                                    height: {
+                                        type: "fit",
+                                        value: null,
+                                    },
+                                    width: {
+                                        type: "fill",
+                                        value: null,
+                                    },
+                                },
+                                spacing: 0,
+                                type: "stack",
+                            },
+                            {
+                                background_color: null,
+                                border: null,
+                                components: [
+                                    {
+                                        background_color: {
+                                            light: {
+                                                type: "hex",
+                                                value: "#fe8686FF",
+                                            },
+                                        },
+                                        color: {
+                                            light: {
+                                                type: "hex",
+                                                value: "#ffffffFF",
+                                            },
+                                        },
+                                        components: [],
+                                        font_name: null,
+                                        font_size: "body_m",
+                                        font_weight: "regular",
+                                        horizontal_alignment: "leading",
+                                        id: "ZhCDHATXoT",
+                                        margin: {
+                                            bottom: 0,
+                                            leading: 0,
+                                            top: 0,
+                                            trailing: 0,
+                                        },
+                                        name: "",
+                                        padding: {
+                                            bottom: 4,
+                                            leading: 4,
+                                            top: 4,
+                                            trailing: 4,
+                                        },
+                                        size: {
+                                            height: {
+                                                type: "fit",
+                                                value: null,
+                                            },
+                                            width: {
+                                                type: "fit",
+                                                value: null,
+                                            },
+                                        },
+                                        text_lid: "lzwCEfMeyo",
+                                        type: "text",
+                                    },
+                                ],
+                                dimension: {
+                                    alignment: "center",
+                                    distribution: "space_between",
+                                    type: "zlayer",
+                                },
+                                id: "VR7012lMEq",
+                                margin: {
+                                    bottom: 0,
+                                    leading: 0,
+                                    top: 0,
+                                    trailing: 0,
+                                },
+                                name: "",
+                                padding: {
+                                    bottom: 0,
+                                    leading: 0,
+                                    top: 0,
+                                    trailing: 0,
+                                },
+                                shadow: null,
+                                shape: {
+                                    corners: {
+                                        bottom_leading: 0,
+                                        bottom_trailing: 0,
+                                        top_leading: 0,
+                                        top_trailing: 0,
+                                    },
+                                    type: "rectangle",
+                                },
+                                size: {
+                                    height: {
+                                        type: "fit",
+                                        value: null,
+                                    },
+                                    width: {
+                                        type: "fill",
+                                        value: null,
+                                    },
+                                },
+                                spacing: 0,
+                                type: "stack",
+                            },
+                            {
+                                background_color: null,
+                                border: null,
+                                components: [
+                                    {
+                                        background_color: {
+                                            light: {
+                                                type: "hex",
+                                                value: "#fe8686FF",
+                                            },
+                                        },
+                                        color: {
+                                            light: {
+                                                type: "hex",
+                                                value: "#ffffffFF",
+                                            },
+                                        },
+                                        components: [],
+                                        font_name: null,
+                                        font_size: "body_m",
+                                        font_weight: "regular",
+                                        horizontal_alignment: "leading",
+                                        id: "phADHE8X7A",
+                                        margin: {
+                                            bottom: 0,
+                                            leading: 0,
+                                            top: 0,
+                                            trailing: 0,
+                                        },
+                                        name: "",
+                                        padding: {
+                                            bottom: 4,
+                                            leading: 4,
+                                            top: 4,
+                                            trailing: 4,
+                                        },
+                                        size: {
+                                            height: {
+                                                type: "fit",
+                                                value: null,
+                                            },
+                                            width: {
+                                                type: "fit",
+                                                value: null,
+                                            },
+                                        },
+                                        text_lid: "c7Cwf0IcVx",
+                                        type: "text",
+                                    },
+                                ],
+                                dimension: {
+                                    alignment: "trailing",
+                                    distribution: "space_between",
+                                    type: "zlayer",
+                                },
+                                id: "DbemU4nIb_",
+                                margin: {
+                                    bottom: 0,
+                                    leading: 0,
+                                    top: 0,
+                                    trailing: 0,
+                                },
+                                name: "",
+                                padding: {
+                                    bottom: 0,
+                                    leading: 0,
+                                    top: 0,
+                                    trailing: 0,
+                                },
+                                shadow: null,
+                                shape: {
+                                    corners: {
+                                        bottom_leading: 0,
+                                        bottom_trailing: 0,
+                                        top_leading: 0,
+                                        top_trailing: 0,
+                                    },
+                                    type: "rectangle",
+                                },
+                                size: {
+                                    height: {
+                                        type: "fit",
+                                        value: null,
+                                    },
+                                    width: {
+                                        type: "fill",
+                                        value: null,
+                                    },
+                                },
+                                spacing: 0,
+                                type: "stack",
+                            },
+                            {
+                                background_color: null,
+                                border: null,
+                                components: [
+                                    {
+                                        background_color: {
+                                            light: {
+                                                type: "hex",
+                                                value: "#fe8686FF",
+                                            },
+                                        },
+                                        color: {
+                                            light: {
+                                                type: "hex",
+                                                value: "#ffffffFF",
+                                            },
+                                        },
+                                        components: [],
+                                        font_name: null,
+                                        font_size: "body_m",
+                                        font_weight: "regular",
+                                        horizontal_alignment: "leading",
+                                        id: "OGIra648VX",
+                                        margin: {
+                                            bottom: 0,
+                                            leading: 0,
+                                            top: 0,
+                                            trailing: 0,
+                                        },
+                                        name: "",
+                                        padding: {
+                                            bottom: 4,
+                                            leading: 4,
+                                            top: 4,
+                                            trailing: 4,
+                                        },
+                                        size: {
+                                            height: {
+                                                type: "fit",
+                                                value: null,
+                                            },
+                                            width: {
+                                                type: "fit",
+                                                value: null,
+                                            },
+                                        },
+                                        text_lid: "iU3Jl2qmPO",
+                                        type: "text",
+                                    },
+                                ],
+                                dimension: {
+                                    alignment: "bottom_leading",
+                                    distribution: "space_between",
+                                    type: "zlayer",
+                                },
+                                id: "z03GXHMMDH",
+                                margin: {
+                                    bottom: 0,
+                                    leading: 0,
+                                    top: 0,
+                                    trailing: 0,
+                                },
+                                name: "",
+                                padding: {
+                                    bottom: 0,
+                                    leading: 0,
+                                    top: 0,
+                                    trailing: 0,
+                                },
+                                shadow: null,
+                                shape: {
+                                    corners: {
+                                        bottom_leading: 0,
+                                        bottom_trailing: 0,
+                                        top_leading: 0,
+                                        top_trailing: 0,
+                                    },
+                                    type: "rectangle",
+                                },
+                                size: {
+                                    height: {
+                                        type: "fit",
+                                        value: null,
+                                    },
+                                    width: {
+                                        type: "fill",
+                                        value: null,
+                                    },
+                                },
+                                spacing: 0,
+                                type: "stack",
+                            },
+                            {
+                                background_color: null,
+                                border: null,
+                                components: [
+                                    {
+                                        background_color: {
+                                            light: {
+                                                type: "hex",
+                                                value: "#fe8686FF",
+                                            },
+                                        },
+                                        color: {
+                                            light: {
+                                                type: "hex",
+                                                value: "#ffffffFF",
+                                            },
+                                        },
+                                        components: [],
+                                        font_name: null,
+                                        font_size: "body_m",
+                                        font_weight: "regular",
+                                        horizontal_alignment: "leading",
+                                        id: "f68aYlhTEy",
+                                        margin: {
+                                            bottom: 0,
+                                            leading: 0,
+                                            top: 0,
+                                            trailing: 0,
+                                        },
+                                        name: "",
+                                        padding: {
+                                            bottom: 4,
+                                            leading: 4,
+                                            top: 4,
+                                            trailing: 4,
+                                        },
+                                        size: {
+                                            height: {
+                                                type: "fit",
+                                                value: null,
+                                            },
+                                            width: {
+                                                type: "fit",
+                                                value: null,
+                                            },
+                                        },
+                                        text_lid: "MygTU3Mtbk",
+                                        type: "text",
+                                    },
+                                ],
+                                dimension: {
+                                    alignment: "bottom",
+                                    distribution: "space_between",
+                                    type: "zlayer",
+                                },
+                                id: "C6VNXSqAs_",
+                                margin: {
+                                    bottom: 0,
+                                    leading: 0,
+                                    top: 0,
+                                    trailing: 0,
+                                },
+                                name: "",
+                                padding: {
+                                    bottom: 0,
+                                    leading: 0,
+                                    top: 0,
+                                    trailing: 0,
+                                },
+                                shadow: null,
+                                shape: {
+                                    corners: {
+                                        bottom_leading: 0,
+                                        bottom_trailing: 0,
+                                        top_leading: 0,
+                                        top_trailing: 0,
+                                    },
+                                    type: "rectangle",
+                                },
+                                size: {
+                                    height: {
+                                        type: "fit",
+                                        value: null,
+                                    },
+                                    width: {
+                                        type: "fill",
+                                        value: null,
+                                    },
+                                },
+                                spacing: 0,
+                                type: "stack",
+                            },
+                            {
+                                background_color: null,
+                                border: null,
+                                components: [
+                                    {
+                                        background_color: {
+                                            light: {
+                                                type: "hex",
+                                                value: "#fe8686FF",
+                                            },
+                                        },
+                                        color: {
+                                            light: {
+                                                type: "hex",
+                                                value: "#ffffffFF",
+                                            },
+                                        },
+                                        components: [],
+                                        font_name: null,
+                                        font_size: "body_m",
+                                        font_weight: "regular",
+                                        horizontal_alignment: "leading",
+                                        id: "0nfAGMk34y",
+                                        margin: {
+                                            bottom: 0,
+                                            leading: 0,
+                                            top: 0,
+                                            trailing: 0,
+                                        },
+                                        name: "",
+                                        padding: {
+                                            bottom: 4,
+                                            leading: 4,
+                                            top: 4,
+                                            trailing: 4,
+                                        },
+                                        size: {
+                                            height: {
+                                                type: "fit",
+                                                value: null,
+                                            },
+                                            width: {
+                                                type: "fit",
+                                                value: null,
+                                            },
+                                        },
+                                        text_lid: "z5EgsTfs1m",
+                                        type: "text",
+                                    },
+                                ],
+                                dimension: {
+                                    alignment: "bottom_trailing",
+                                    distribution: "space_between",
+                                    type: "zlayer",
+                                },
+                                id: "lGmhnNMSkq",
+                                margin: {
+                                    bottom: 0,
+                                    leading: 0,
+                                    top: 0,
+                                    trailing: 0,
+                                },
+                                name: "",
+                                padding: {
+                                    bottom: 0,
+                                    leading: 0,
+                                    top: 0,
+                                    trailing: 0,
+                                },
+                                shadow: null,
+                                shape: {
+                                    corners: {
+                                        bottom_leading: 0,
+                                        bottom_trailing: 0,
+                                        top_leading: 0,
+                                        top_trailing: 0,
+                                    },
+                                    type: "rectangle",
+                                },
+                                size: {
+                                    height: {
+                                        type: "fit",
+                                        value: null,
+                                    },
+                                    width: {
+                                        type: "fill",
+                                        value: null,
+                                    },
+                                },
+                                spacing: 0,
+                                type: "stack",
+                            },
+                        ],
+                        dimension: {
+                            alignment: "leading",
+                            distribution: "space_between",
+                            type: "vertical",
+                        },
+                        id: "Wgjg9Rp5iP",
+                        margin: {
+                            bottom: 0,
+                            leading: 0,
+                            top: 0,
+                            trailing: 0,
+                        },
+                        name: "",
+                        padding: {
+                            bottom: 0,
+                            leading: 0,
+                            top: 0,
+                            trailing: 0,
+                        },
+                        shadow: null,
+                        shape: {
+                            corners: {
+                                bottom_leading: 0,
+                                bottom_trailing: 0,
+                                top_leading: 0,
+                                top_trailing: 0,
+                            },
+                            type: "rectangle",
+                        },
+                        size: {
+                            height: {
+                                type: "fit",
+                                value: null,
+                            },
+                            width: {
+                                type: "fill",
+                                value: null,
+                            },
+                        },
+                        spacing: 0,
+                        type: "stack",
+                    },
+                ],
+                dimension: {
+                    alignment: "leading",
+                    distribution: "start",
+                    type: "vertical",
+                },
+                id: "iUMgmwia8M",
+                margin: {
+                    bottom: 0,
+                    leading: 0,
+                    top: 0,
+                    trailing: 0,
+                },
+                name: "Content",
+                padding: {
+                    bottom: 0,
+                    leading: 0,
+                    top: 0,
+                    trailing: 0,
+                },
+                shadow: null,
+                shape: {
+                    corners: {
+                        bottom_leading: 0,
+                        bottom_trailing: 0,
+                        top_leading: 0,
+                        top_trailing: 0,
+                    },
+                    type: "rectangle",
+                },
+                size: {
+                    height: {
+                        type: "fill",
+                        value: null,
+                    },
+                    width: {
+                        type: "fill",
+                        value: null,
+                    },
+                },
+                spacing: 20,
+                type: "stack",
+            },
+            sticky_footer: null,
+        },
+    },
+    components_localizations: {
+        en_US: {
+            IndkfgspOp: "leading",
+            MygTU3Mtbk: "bottom",
+            ObGc32Hfvu: "top",
+            "auUEm6-oaa": "top leading",
+            c7Cwf0IcVx: "trailing",
+            iU3Jl2qmPO: "bottom leading",
+            lzwCEfMeyo: "center",
+            xAkMwRUzod: "top trailing",
+            z5EgsTfs1m: "bottom trailing",
+        },
+    },
+    config: {},
+    created_at: "2024-12-05T17:23:44Z",
+    default_locale: "en_US",
+    localized_strings: {
+        en_US: {},
+    },
+    localized_strings_by_tier: {},
+    offering_id: "ofrng250d43abf4",
+    published_at: null,
+    published_revision: null,
+    revision: 2,
+    template_name: "components",
+    updated_at: "2024-12-05T17:27:30Z",
+};
+export const labelsData = {
+    en_US: {
+        id1: "Item 1",
+        id2: "Item 2",
+        id3: "Item 3",
+    },
+};
+export const colorModeOverrideTemplate = {
+    asset_base_url: "https://assets.pawwalls.com",
+    components_config: {
+        base: {
+            background: {
+                type: "color",
+                value: {
+                    light: {
+                        type: "hex",
+                        value: "#ffffff",
+                    },
+                },
+            },
+            stack: {
+                background_color: {
+                    dark: {
+                        degrees: 90,
+                        points: [
+                            {
+                                color: "#020024ff",
+                                percent: 0,
+                            },
+                            {
+                                color: "#00d4ffff",
+                                percent: 100,
+                            },
+                        ],
+                        type: "linear",
+                    },
+                    light: {
+                        degrees: 180,
+                        points: [
+                            {
+                                color: "#f8f8ffff",
+                                percent: 0,
+                            },
+                            {
+                                color: "#97aaae96",
+                                percent: 100,
+                            },
+                        ],
+                        type: "linear",
+                        value: "#ffffffff",
+                    },
+                },
+                border: null,
+                components: [
+                    {
+                        components: [],
+                        corner_radiuses: {
+                            bottom_leading: 0,
+                            bottom_trailing: 0,
+                            top_leading: 0,
+                            top_trailing: 0,
+                        },
+                        fit_mode: "fill",
+                        gradientColors: null,
+                        id: "0bp6105JWO",
+                        mask_shape: {
+                            corners: {
+                                bottom_leading: 0,
+                                bottom_trailing: 0,
+                                top_leading: 0,
+                                top_trailing: 0,
+                            },
+                            type: "rectangle",
+                        },
+                        name: "",
+                        override_source_lid: null,
+                        size: {
+                            height: {
+                                type: "fit",
+                                value: null,
+                            },
+                            width: {
+                                type: "fill",
+                                value: null,
+                            },
+                        },
+                        source: {
+                            light: {
+                                heic: "https://assets.pawwalls.com/1145211_1733245631.heic",
+                                heic_low_res: "https://assets.pawwalls.com/1145211_low_res_1733245631.heic",
+                                original: "https://assets.pawwalls.com/1145211_1733245631.jpg",
+                                webp: "https://assets.pawwalls.com/1145211_1733245631.webp",
+                                webp_low_res: "https://assets.pawwalls.com/1145211_low_res_1733245631.webp",
+                            },
+                        },
+                        type: "image",
+                    },
+                    {
+                        background_color: {
+                            dark: {
+                                type: "hex",
+                                value: "#ffffff00",
+                            },
+                            light: {
+                                type: "hex",
+                                value: "#ffffff00",
+                            },
+                        },
+                        color: {
+                            dark: {
+                                type: "hex",
+                                value: "#fc1414FF",
+                            },
+                            light: {
+                                type: "hex",
+                                value: "#494949FF",
+                            },
+                        },
+                        components: [],
+                        font_name: null,
+                        font_size: "heading_l",
+                        font_weight: "bold",
+                        horizontal_alignment: "center",
+                        id: "4uox9rm8Zx",
+                        margin: {
+                            bottom: 0,
+                            leading: 0,
+                            top: 0,
+                            trailing: 0,
+                        },
+                        name: "",
+                        padding: {
+                            bottom: 0,
+                            leading: 0,
+                            top: 0,
+                            trailing: 0,
+                        },
+                        size: {
+                            height: {
+                                type: "fit",
+                                value: null,
+                            },
+                            width: {
+                                type: "fill",
+                                value: null,
+                            },
+                        },
+                        text_lid: "GQ2t90mSKx",
+                        type: "text",
+                    },
+                    {
+                        background_color: null,
+                        border: null,
+                        components: [
+                            {
+                                id: "YTC7pkPmNS",
+                                is_selected_by_default: false,
+                                name: "",
+                                package_id: "$rc_weekly",
+                                stack: {
+                                    background_color: null,
+                                    border: {
+                                        color: {
+                                            light: {
+                                                type: "hex",
+                                                value: "#cccccc",
+                                            },
+                                        },
+                                        width: 1,
+                                    },
+                                    components: [
+                                        {
+                                            background_color: null,
+                                            color: {
+                                                dark: {
+                                                    type: "hex",
+                                                    value: "#fefefeFF",
+                                                },
+                                                light: {
+                                                    type: "hex",
+                                                    value: "#000000",
+                                                },
+                                            },
+                                            components: [],
+                                            font_name: null,
+                                            font_size: "heading_m",
+                                            font_weight: "bold",
+                                            horizontal_alignment: "leading",
+                                            id: "18y80hnm5-",
+                                            margin: {
+                                                bottom: 0,
+                                                leading: 0,
+                                                top: 0,
+                                                trailing: 0,
+                                            },
+                                            name: "",
+                                            padding: {
+                                                bottom: 0,
+                                                leading: 0,
+                                                top: 0,
+                                                trailing: 0,
+                                            },
+                                            size: {
+                                                height: {
+                                                    type: "fit",
+                                                    value: null,
+                                                },
+                                                width: {
+                                                    type: "fill",
+                                                    value: null,
+                                                },
+                                            },
+                                            text_lid: "eWT09h61W5",
+                                            type: "text",
+                                        },
+                                        {
+                                            background_color: null,
+                                            color: {
+                                                dark: {
+                                                    type: "hex",
+                                                    value: "#fcfcfcFF",
+                                                },
+                                                light: {
+                                                    type: "hex",
+                                                    value: "#000000",
+                                                },
+                                            },
+                                            components: [],
+                                            font_name: null,
+                                            font_size: "body_m",
+                                            font_weight: "regular",
+                                            horizontal_alignment: "leading",
+                                            id: "8qJjOJhB-r",
+                                            margin: {
+                                                bottom: 0,
+                                                leading: 0,
+                                                top: 0,
+                                                trailing: 0,
+                                            },
+                                            name: "",
+                                            padding: {
+                                                bottom: 0,
+                                                leading: 0,
+                                                top: 0,
+                                                trailing: 0,
+                                            },
+                                            size: {
+                                                height: {
+                                                    type: "fit",
+                                                    value: null,
+                                                },
+                                                width: {
+                                                    type: "fill",
+                                                    value: null,
+                                                },
+                                            },
+                                            text_lid: "Mv-pLWtPsF",
+                                            type: "text",
+                                        },
+                                    ],
+                                    dimension: {
+                                        alignment: "leading",
+                                        distribution: "space_between",
+                                        type: "vertical",
+                                    },
+                                    id: "JFHxEWTmeS",
+                                    margin: {
+                                        bottom: 0,
+                                        leading: 8,
+                                        top: 0,
+                                        trailing: 8,
+                                    },
+                                    name: "",
+                                    padding: {
+                                        bottom: 8,
+                                        leading: 8,
+                                        top: 8,
+                                        trailing: 8,
+                                    },
+                                    shadow: null,
+                                    shape: {
+                                        corners: {
+                                            bottom_leading: 8,
+                                            bottom_trailing: 8,
+                                            top_leading: 8,
+                                            top_trailing: 8,
+                                        },
+                                        type: "rectangle",
+                                    },
+                                    size: {
+                                        height: {
+                                            type: "fit",
+                                            value: null,
+                                        },
+                                        width: {
+                                            type: "fill",
+                                            value: null,
+                                        },
+                                    },
+                                    spacing: 0,
+                                    type: "stack",
+                                },
+                                type: "package",
+                            },
+                            {
+                                id: "_LOqgMuxYn",
+                                is_selected_by_default: false,
+                                name: "",
+                                package_id: "$rc_monthly",
+                                stack: {
+                                    background_color: null,
+                                    border: {
+                                        color: {
+                                            light: {
+                                                type: "hex",
+                                                value: "#cccccc",
+                                            },
+                                        },
+                                        width: 1,
+                                    },
+                                    components: [
+                                        {
+                                            background_color: null,
+                                            color: {
+                                                dark: {
+                                                    type: "hex",
+                                                    value: "#fdfcfcFF",
+                                                },
+                                                light: {
+                                                    type: "hex",
+                                                    value: "#000000",
+                                                },
+                                            },
+                                            components: [],
+                                            font_name: null,
+                                            font_size: "heading_m",
+                                            font_weight: "bold",
+                                            horizontal_alignment: "leading",
+                                            id: "REsW7-47Mq",
+                                            margin: {
+                                                bottom: 0,
+                                                leading: 0,
+                                                top: 0,
+                                                trailing: 0,
+                                            },
+                                            name: "",
+                                            padding: {
+                                                bottom: 0,
+                                                leading: 0,
+                                                top: 0,
+                                                trailing: 0,
+                                            },
+                                            size: {
+                                                height: {
+                                                    type: "fit",
+                                                    value: null,
+                                                },
+                                                width: {
+                                                    type: "fill",
+                                                    value: null,
+                                                },
+                                            },
+                                            text_lid: "qy4JKggbZ_",
+                                            type: "text",
+                                        },
+                                        {
+                                            background_color: null,
+                                            color: {
+                                                dark: {
+                                                    type: "hex",
+                                                    value: "#fffcfcFF",
+                                                },
+                                                light: {
+                                                    type: "hex",
+                                                    value: "#000000",
+                                                },
+                                            },
+                                            components: [],
+                                            font_name: null,
+                                            font_size: "body_m",
+                                            font_weight: "regular",
+                                            horizontal_alignment: "leading",
+                                            id: "qekcnIHsOq",
+                                            margin: {
+                                                bottom: 0,
+                                                leading: 0,
+                                                top: 0,
+                                                trailing: 0,
+                                            },
+                                            name: "",
+                                            padding: {
+                                                bottom: 0,
+                                                leading: 0,
+                                                top: 0,
+                                                trailing: 0,
+                                            },
+                                            size: {
+                                                height: {
+                                                    type: "fit",
+                                                    value: null,
+                                                },
+                                                width: {
+                                                    type: "fill",
+                                                    value: null,
+                                                },
+                                            },
+                                            text_lid: "fqh9Qp5Cb6",
+                                            type: "text",
+                                        },
+                                    ],
+                                    dimension: {
+                                        alignment: "leading",
+                                        distribution: "space_between",
+                                        type: "vertical",
+                                    },
+                                    id: "KLvqvTKsI-",
+                                    margin: {
+                                        bottom: 0,
+                                        leading: 8,
+                                        top: 0,
+                                        trailing: 8,
+                                    },
+                                    name: "",
+                                    padding: {
+                                        bottom: 8,
+                                        leading: 8,
+                                        top: 8,
+                                        trailing: 8,
+                                    },
+                                    shadow: null,
+                                    shape: {
+                                        corners: {
+                                            bottom_leading: 8,
+                                            bottom_trailing: 8,
+                                            top_leading: 8,
+                                            top_trailing: 8,
+                                        },
+                                        type: "rectangle",
+                                    },
+                                    size: {
+                                        height: {
+                                            type: "fit",
+                                            value: null,
+                                        },
+                                        width: {
+                                            type: "fill",
+                                            value: null,
+                                        },
+                                    },
+                                    spacing: 0,
+                                    type: "stack",
+                                },
+                                type: "package",
+                            },
+                            {
+                                id: "syL2cC85wO",
+                                is_selected_by_default: false,
+                                name: "",
+                                package_id: "$rc_annual",
+                                stack: {
+                                    background_color: null,
+                                    border: {
+                                        color: {
+                                            light: {
+                                                type: "hex",
+                                                value: "#cccccc",
+                                            },
+                                        },
+                                        width: 1,
+                                    },
+                                    components: [
+                                        {
+                                            background_color: null,
+                                            color: {
+                                                dark: {
+                                                    type: "hex",
+                                                    value: "#ffffffFF",
+                                                },
+                                                light: {
+                                                    type: "hex",
+                                                    value: "#000000",
+                                                },
+                                            },
+                                            components: [],
+                                            font_name: null,
+                                            font_size: "heading_m",
+                                            font_weight: "bold",
+                                            horizontal_alignment: "leading",
+                                            id: "zCLIkH7-oJ",
+                                            margin: {
+                                                bottom: 0,
+                                                leading: 0,
+                                                top: 0,
+                                                trailing: 0,
+                                            },
+                                            name: "",
+                                            padding: {
+                                                bottom: 0,
+                                                leading: 0,
+                                                top: 0,
+                                                trailing: 0,
+                                            },
+                                            size: {
+                                                height: {
+                                                    type: "fit",
+                                                    value: null,
+                                                },
+                                                width: {
+                                                    type: "fill",
+                                                    value: null,
+                                                },
+                                            },
+                                            text_lid: "1aIGPIMr3-",
+                                            type: "text",
+                                        },
+                                        {
+                                            background_color: null,
+                                            color: {
+                                                dark: {
+                                                    type: "hex",
+                                                    value: "#fffcfcFF",
+                                                },
+                                                light: {
+                                                    type: "hex",
+                                                    value: "#000000",
+                                                },
+                                            },
+                                            components: [],
+                                            font_name: null,
+                                            font_size: "body_m",
+                                            font_weight: "regular",
+                                            horizontal_alignment: "leading",
+                                            id: "j98F4O0Dcf",
+                                            margin: {
+                                                bottom: 0,
+                                                leading: 0,
+                                                top: 0,
+                                                trailing: 0,
+                                            },
+                                            name: "",
+                                            padding: {
+                                                bottom: 0,
+                                                leading: 0,
+                                                top: 0,
+                                                trailing: 0,
+                                            },
+                                            size: {
+                                                height: {
+                                                    type: "fit",
+                                                    value: null,
+                                                },
+                                                width: {
+                                                    type: "fill",
+                                                    value: null,
+                                                },
+                                            },
+                                            text_lid: "qaGYWWo19W",
+                                            type: "text",
+                                        },
+                                    ],
+                                    dimension: {
+                                        alignment: "leading",
+                                        distribution: "space_between",
+                                        type: "vertical",
+                                    },
+                                    id: "hXrlpq4P_I",
+                                    margin: {
+                                        bottom: 0,
+                                        leading: 8,
+                                        top: 0,
+                                        trailing: 8,
+                                    },
+                                    name: "",
+                                    padding: {
+                                        bottom: 8,
+                                        leading: 8,
+                                        top: 8,
+                                        trailing: 8,
+                                    },
+                                    shadow: null,
+                                    shape: {
+                                        corners: {
+                                            bottom_leading: 8,
+                                            bottom_trailing: 8,
+                                            top_leading: 8,
+                                            top_trailing: 8,
+                                        },
+                                        type: "rectangle",
+                                    },
+                                    size: {
+                                        height: {
+                                            type: "fit",
+                                            value: null,
+                                        },
+                                        width: {
+                                            type: "fill",
+                                            value: null,
+                                        },
+                                    },
+                                    spacing: 0,
+                                    type: "stack",
+                                },
+                                type: "package",
+                            },
+                        ],
+                        dimension: {
+                            alignment: "center",
+                            distribution: "start",
+                            type: "vertical",
+                        },
+                        id: "iUx3-qMY_T",
+                        margin: {
+                            bottom: 0,
+                            leading: 0,
+                            top: 0,
+                            trailing: 0,
+                        },
+                        name: "",
+                        padding: {
+                            bottom: 0,
+                            leading: 0,
+                            top: 0,
+                            trailing: 0,
+                        },
+                        shadow: null,
+                        shape: {
+                            corners: {
+                                bottom_leading: 0,
+                                bottom_trailing: 0,
+                                top_leading: 0,
+                                top_trailing: 0,
+                            },
+                            type: "rectangle",
+                        },
+                        size: {
+                            height: {
+                                type: "fit",
+                                value: null,
+                            },
+                            width: {
+                                type: "fill",
+                                value: null,
+                            },
+                        },
+                        spacing: 8,
+                        type: "stack",
+                    },
+                    {
+                        background_color: null,
+                        border: null,
+                        components: [
+                            {
+                                id: "URRzLzNzla",
+                                name: "",
+                                stack: {
+                                    background_color: {
+                                        dark: {
+                                            type: "hex",
+                                            value: "#fcfcfcFF",
+                                        },
+                                        light: {
+                                            type: "hex",
+                                            value: "#000000",
+                                        },
+                                    },
+                                    border: null,
+                                    components: [
+                                        {
+                                            background_color: {
+                                                light: {
+                                                    type: "hex",
+                                                    value: "#ffffff00",
+                                                },
+                                            },
+                                            color: {
+                                                dark: {
+                                                    type: "hex",
+                                                    value: "#010101FF",
+                                                },
+                                                light: {
+                                                    type: "hex",
+                                                    value: "#ffffff",
+                                                },
+                                            },
+                                            components: [],
+                                            font_name: null,
+                                            font_size: "body_m",
+                                            font_weight: "extra_bold",
+                                            horizontal_alignment: "center",
+                                            id: "OVmqLUtiTF",
+                                            margin: {
+                                                bottom: 0,
+                                                leading: 20,
+                                                top: 0,
+                                                trailing: 20,
+                                            },
+                                            name: "",
+                                            padding: {
+                                                bottom: 16,
+                                                leading: 16,
+                                                top: 16,
+                                                trailing: 16,
+                                            },
+                                            size: {
+                                                height: {
+                                                    type: "fit",
+                                                    value: null,
+                                                },
+                                                width: {
+                                                    type: "fill",
+                                                    value: null,
+                                                },
+                                            },
+                                            text_lid: "Lu4yCSo1-n",
+                                            type: "text",
+                                        },
+                                    ],
+                                    dimension: {
+                                        alignment: "leading",
+                                        distribution: "space_between",
+                                        type: "vertical",
+                                    },
+                                    id: "AA18HUHSH_",
+                                    margin: {
+                                        bottom: 60,
+                                        leading: 20,
+                                        top: 0,
+                                        trailing: 20,
+                                    },
+                                    name: "",
+                                    padding: {
+                                        bottom: 0,
+                                        leading: 0,
+                                        top: 0,
+                                        trailing: 0,
+                                    },
+                                    shadow: null,
+                                    shape: {
+                                        type: "pill",
+                                    },
+                                    size: {
+                                        height: {
+                                            type: "fit",
+                                            value: null,
+                                        },
+                                        width: {
+                                            type: "fill",
+                                            value: null,
+                                        },
+                                    },
+                                    spacing: 0,
+                                    type: "stack",
+                                },
+                                type: "purchase_button",
+                            },
+                        ],
+                        dimension: {
+                            alignment: "leading",
+                            distribution: "space_between",
+                            type: "vertical",
+                        },
+                        id: "1-ymFDvH4r",
+                        margin: {
+                            bottom: 0,
+                            leading: 0,
+                            top: 0,
+                            trailing: 0,
+                        },
+                        name: "",
+                        padding: {
+                            bottom: 0,
+                            leading: 0,
+                            top: 0,
+                            trailing: 0,
+                        },
+                        shadow: null,
+                        shape: {
+                            corners: {
+                                bottom_leading: 0,
+                                bottom_trailing: 0,
+                                top_leading: 0,
+                                top_trailing: 0,
+                            },
+                            type: "rectangle",
+                        },
+                        size: {
+                            height: {
+                                type: "fit",
+                                value: null,
+                            },
+                            width: {
+                                type: "fill",
+                                value: null,
+                            },
+                        },
+                        spacing: 0,
+                        type: "stack",
+                    },
+                ],
+                dimension: {
+                    alignment: "leading",
+                    distribution: "start",
+                    type: "vertical",
+                },
+                id: "iUMgmwia8M",
+                margin: {
+                    bottom: 0,
+                    leading: 0,
+                    top: 0,
+                    trailing: 0,
+                },
+                name: "Content",
+                padding: {
+                    bottom: 0,
+                    leading: 0,
+                    top: 0,
+                    trailing: 0,
+                },
+                shadow: null,
+                shape: {
+                    corners: {
+                        bottom_leading: 0,
+                        bottom_trailing: 0,
+                        top_leading: 0,
+                        top_trailing: 0,
+                    },
+                    type: "rectangle",
+                },
+                size: {
+                    height: {
+                        type: "fill",
+                        value: null,
+                    },
+                    width: {
+                        type: "fill",
+                        value: null,
+                    },
+                },
+                spacing: 20,
+                type: "stack",
+            },
+            sticky_footer: null,
+        },
+    },
+    components_localizations: {
+        en_US: {
+            "1aIGPIMr3-": "Yearly",
+            GQ2t90mSKx: "E2E Tests for Purchases JS",
+            "Lu4yCSo1-n": "PURCHASE",
+            "Mv-pLWtPsF": "This is the weekly package",
+            eWT09h61W5: "Weekly",
+            fqh9Qp5Cb6: "And this is the monthly one",
+            qaGYWWo19W: "Guess what this one is?",
+            qy4JKggbZ_: "Monthly",
+        },
+    },
+    config: {},
+    created_at: "2024-12-06T17:20:24Z",
+    default_locale: "en_US",
+    localized_strings: {
+        en_US: {},
+    },
+    localized_strings_by_tier: {},
+    offering_id: "ofrngb4d6b67d35",
+    published_at: null,
+    published_revision: null,
+    revision: 7,
+    template_name: "components",
+    updated_at: "2024-12-06T18:18:18Z",
+};
+export const paywallWithFooter = {
+    asset_base_url: "https://assets.pawwalls.com",
+    components_config: {
+        base: {
+            background: {
+                type: "color",
+                value: {
+                    light: {
+                        type: "hex",
+                        value: "#ffffff",
+                    },
+                },
+            },
+            stack: {
+                background_color: {
+                    light: {
+                        degrees: 180,
+                        points: [
+                            {
+                                color: "#f8f8ffff",
+                                percent: 0,
+                            },
+                            {
+                                color: "#97aaae96",
+                                percent: 100,
+                            },
+                        ],
+                        type: "linear",
+                        value: "#ffffffff",
+                    },
+                },
+                border: null,
+                components: [
+                    {
+                        components: [],
+                        corner_radiuses: {
+                            bottom_leading: 0,
+                            bottom_trailing: 0,
+                            top_leading: 0,
+                            top_trailing: 0,
+                        },
+                        fit_mode: "fill",
+                        gradientColors: null,
+                        id: "0bp6105JWO",
+                        mask_shape: {
+                            corners: {
+                                bottom_leading: 0,
+                                bottom_trailing: 0,
+                                top_leading: 0,
+                                top_trailing: 0,
+                            },
+                            type: "rectangle",
+                        },
+                        name: "",
+                        override_source_lid: null,
+                        size: {
+                            height: {
+                                type: "fit",
+                                value: null,
+                            },
+                            width: {
+                                type: "fill",
+                                value: null,
+                            },
+                        },
+                        source: {
+                            light: {
+                                heic: "https://assets.pawwalls.com/1145211_1733245631.heic",
+                                heic_low_res: "https://assets.pawwalls.com/1145211_low_res_1733245631.heic",
+                                original: "https://assets.pawwalls.com/1145211_1733245631.jpg",
+                                webp: "https://assets.pawwalls.com/1145211_1733245631.webp",
+                                webp_low_res: "https://assets.pawwalls.com/1145211_low_res_1733245631.webp",
+                            },
+                        },
+                        type: "image",
+                    },
+                    {
+                        background_color: null,
+                        color: {
+                            light: {
+                                type: "hex",
+                                value: "#494949FF",
+                            },
+                        },
+                        components: [],
+                        font_name: null,
+                        font_size: "heading_l",
+                        font_weight: "bold",
+                        horizontal_alignment: "center",
+                        id: "4uox9rm8Zx",
+                        margin: {
+                            bottom: 0,
+                            leading: 0,
+                            top: 0,
+                            trailing: 0,
+                        },
+                        name: "",
+                        padding: {
+                            bottom: 0,
+                            leading: 0,
+                            top: 0,
+                            trailing: 0,
+                        },
+                        size: {
+                            height: {
+                                type: "fit",
+                                value: null,
+                            },
+                            width: {
+                                type: "fill",
+                                value: null,
+                            },
+                        },
+                        text_lid: "GQ2t90mSKx",
+                        type: "text",
+                    },
+                    {
+                        background_color: null,
+                        border: null,
+                        components: [],
+                        dimension: {
+                            alignment: "leading",
+                            distribution: "space_between",
+                            type: "vertical",
+                        },
+                        id: "SyFDiDzvdG",
+                        margin: {
+                            bottom: 0,
+                            leading: 0,
+                            top: 0,
+                            trailing: 0,
+                        },
+                        name: "",
+                        padding: {
+                            bottom: 0,
+                            leading: 0,
+                            top: 0,
+                            trailing: 0,
+                        },
+                        shadow: null,
+                        shape: {
+                            corners: {
+                                bottom_leading: 0,
+                                bottom_trailing: 0,
+                                top_leading: 0,
+                                top_trailing: 0,
+                            },
+                            type: "rectangle",
+                        },
+                        size: {
+                            height: {
+                                type: "fit",
+                                value: null,
+                            },
+                            width: {
+                                type: "fill",
+                                value: null,
+                            },
+                        },
+                        spacing: 0,
+                        type: "stack",
+                    },
+                    {
+                        background_color: null,
+                        border: null,
+                        components: [
+                            {
+                                id: "YTC7pkPmNS",
+                                is_selected_by_default: false,
+                                name: "",
+                                package_id: "$rc_weekly",
+                                stack: {
+                                    background_color: null,
+                                    border: {
+                                        color: {
+                                            light: {
+                                                type: "hex",
+                                                value: "#cccccc",
+                                            },
+                                        },
+                                        width: 1,
+                                    },
+                                    components: [
+                                        {
+                                            background_color: null,
+                                            color: {
+                                                light: {
+                                                    type: "hex",
+                                                    value: "#000000",
+                                                },
+                                            },
+                                            components: [],
+                                            font_name: null,
+                                            font_size: "heading_m",
+                                            font_weight: "bold",
+                                            horizontal_alignment: "leading",
+                                            id: "18y80hnm5-",
+                                            margin: {
+                                                bottom: 0,
+                                                leading: 0,
+                                                top: 0,
+                                                trailing: 0,
+                                            },
+                                            name: "",
+                                            padding: {
+                                                bottom: 0,
+                                                leading: 0,
+                                                top: 0,
+                                                trailing: 0,
+                                            },
+                                            size: {
+                                                height: {
+                                                    type: "fit",
+                                                    value: null,
+                                                },
+                                                width: {
+                                                    type: "fill",
+                                                    value: null,
+                                                },
+                                            },
+                                            text_lid: "eWT09h61W5",
+                                            type: "text",
+                                        },
+                                        {
+                                            background_color: null,
+                                            color: {
+                                                light: {
+                                                    type: "hex",
+                                                    value: "#000000",
+                                                },
+                                            },
+                                            components: [],
+                                            font_name: null,
+                                            font_size: "body_m",
+                                            font_weight: "regular",
+                                            horizontal_alignment: "leading",
+                                            id: "8qJjOJhB-r",
+                                            margin: {
+                                                bottom: 0,
+                                                leading: 0,
+                                                top: 0,
+                                                trailing: 0,
+                                            },
+                                            name: "",
+                                            padding: {
+                                                bottom: 0,
+                                                leading: 0,
+                                                top: 0,
+                                                trailing: 0,
+                                            },
+                                            size: {
+                                                height: {
+                                                    type: "fit",
+                                                    value: null,
+                                                },
+                                                width: {
+                                                    type: "fill",
+                                                    value: null,
+                                                },
+                                            },
+                                            text_lid: "Mv-pLWtPsF",
+                                            type: "text",
+                                        },
+                                    ],
+                                    dimension: {
+                                        alignment: "leading",
+                                        distribution: "space_between",
+                                        type: "vertical",
+                                    },
+                                    id: "JFHxEWTmeS",
+                                    margin: {
+                                        bottom: 0,
+                                        leading: 8,
+                                        top: 0,
+                                        trailing: 8,
+                                    },
+                                    name: "",
+                                    padding: {
+                                        bottom: 8,
+                                        leading: 8,
+                                        top: 8,
+                                        trailing: 8,
+                                    },
+                                    shadow: null,
+                                    shape: {
+                                        corners: {
+                                            bottom_leading: 8,
+                                            bottom_trailing: 8,
+                                            top_leading: 8,
+                                            top_trailing: 8,
+                                        },
+                                        type: "rectangle",
+                                    },
+                                    size: {
+                                        height: {
+                                            type: "fit",
+                                            value: null,
+                                        },
+                                        width: {
+                                            type: "fill",
+                                            value: null,
+                                        },
+                                    },
+                                    spacing: 0,
+                                    type: "stack",
+                                },
+                                type: "package",
+                            },
+                            {
+                                id: "_LOqgMuxYn",
+                                is_selected_by_default: false,
+                                name: "",
+                                package_id: "$rc_monthly",
+                                stack: {
+                                    background_color: null,
+                                    border: {
+                                        color: {
+                                            light: {
+                                                type: "hex",
+                                                value: "#cccccc",
+                                            },
+                                        },
+                                        width: 1,
+                                    },
+                                    components: [
+                                        {
+                                            background_color: null,
+                                            color: {
+                                                light: {
+                                                    type: "hex",
+                                                    value: "#000000",
+                                                },
+                                            },
+                                            components: [],
+                                            font_name: null,
+                                            font_size: "heading_m",
+                                            font_weight: "bold",
+                                            horizontal_alignment: "leading",
+                                            id: "REsW7-47Mq",
+                                            margin: {
+                                                bottom: 0,
+                                                leading: 0,
+                                                top: 0,
+                                                trailing: 0,
+                                            },
+                                            name: "",
+                                            padding: {
+                                                bottom: 0,
+                                                leading: 0,
+                                                top: 0,
+                                                trailing: 0,
+                                            },
+                                            size: {
+                                                height: {
+                                                    type: "fit",
+                                                    value: null,
+                                                },
+                                                width: {
+                                                    type: "fill",
+                                                    value: null,
+                                                },
+                                            },
+                                            text_lid: "qy4JKggbZ_",
+                                            type: "text",
+                                        },
+                                        {
+                                            background_color: null,
+                                            color: {
+                                                light: {
+                                                    type: "hex",
+                                                    value: "#000000",
+                                                },
+                                            },
+                                            components: [],
+                                            font_name: null,
+                                            font_size: "body_m",
+                                            font_weight: "regular",
+                                            horizontal_alignment: "leading",
+                                            id: "qekcnIHsOq",
+                                            margin: {
+                                                bottom: 0,
+                                                leading: 0,
+                                                top: 0,
+                                                trailing: 0,
+                                            },
+                                            name: "",
+                                            padding: {
+                                                bottom: 0,
+                                                leading: 0,
+                                                top: 0,
+                                                trailing: 0,
+                                            },
+                                            size: {
+                                                height: {
+                                                    type: "fit",
+                                                    value: null,
+                                                },
+                                                width: {
+                                                    type: "fill",
+                                                    value: null,
+                                                },
+                                            },
+                                            text_lid: "fqh9Qp5Cb6",
+                                            type: "text",
+                                        },
+                                    ],
+                                    dimension: {
+                                        alignment: "leading",
+                                        distribution: "space_between",
+                                        type: "vertical",
+                                    },
+                                    id: "KLvqvTKsI-",
+                                    margin: {
+                                        bottom: 0,
+                                        leading: 8,
+                                        top: 0,
+                                        trailing: 8,
+                                    },
+                                    name: "",
+                                    padding: {
+                                        bottom: 8,
+                                        leading: 8,
+                                        top: 8,
+                                        trailing: 8,
+                                    },
+                                    shadow: null,
+                                    shape: {
+                                        corners: {
+                                            bottom_leading: 8,
+                                            bottom_trailing: 8,
+                                            top_leading: 8,
+                                            top_trailing: 8,
+                                        },
+                                        type: "rectangle",
+                                    },
+                                    size: {
+                                        height: {
+                                            type: "fit",
+                                            value: null,
+                                        },
+                                        width: {
+                                            type: "fill",
+                                            value: null,
+                                        },
+                                    },
+                                    spacing: 0,
+                                    type: "stack",
+                                },
+                                type: "package",
+                            },
+                            {
+                                id: "syL2cC85wO",
+                                is_selected_by_default: false,
+                                name: "",
+                                package_id: "$rc_annual",
+                                stack: {
+                                    background_color: null,
+                                    border: {
+                                        color: {
+                                            light: {
+                                                type: "hex",
+                                                value: "#cccccc",
+                                            },
+                                        },
+                                        width: 1,
+                                    },
+                                    components: [
+                                        {
+                                            background_color: null,
+                                            color: {
+                                                light: {
+                                                    type: "hex",
+                                                    value: "#000000",
+                                                },
+                                            },
+                                            components: [],
+                                            font_name: null,
+                                            font_size: "heading_m",
+                                            font_weight: "bold",
+                                            horizontal_alignment: "leading",
+                                            id: "zCLIkH7-oJ",
+                                            margin: {
+                                                bottom: 0,
+                                                leading: 0,
+                                                top: 0,
+                                                trailing: 0,
+                                            },
+                                            name: "",
+                                            padding: {
+                                                bottom: 0,
+                                                leading: 0,
+                                                top: 0,
+                                                trailing: 0,
+                                            },
+                                            size: {
+                                                height: {
+                                                    type: "fit",
+                                                    value: null,
+                                                },
+                                                width: {
+                                                    type: "fill",
+                                                    value: null,
+                                                },
+                                            },
+                                            text_lid: "1aIGPIMr3-",
+                                            type: "text",
+                                        },
+                                        {
+                                            background_color: null,
+                                            color: {
+                                                light: {
+                                                    type: "hex",
+                                                    value: "#000000",
+                                                },
+                                            },
+                                            components: [],
+                                            font_name: null,
+                                            font_size: "body_m",
+                                            font_weight: "regular",
+                                            horizontal_alignment: "leading",
+                                            id: "j98F4O0Dcf",
+                                            margin: {
+                                                bottom: 0,
+                                                leading: 0,
+                                                top: 0,
+                                                trailing: 0,
+                                            },
+                                            name: "",
+                                            padding: {
+                                                bottom: 0,
+                                                leading: 0,
+                                                top: 0,
+                                                trailing: 0,
+                                            },
+                                            size: {
+                                                height: {
+                                                    type: "fit",
+                                                    value: null,
+                                                },
+                                                width: {
+                                                    type: "fill",
+                                                    value: null,
+                                                },
+                                            },
+                                            text_lid: "qaGYWWo19W",
+                                            type: "text",
+                                        },
+                                    ],
+                                    dimension: {
+                                        alignment: "leading",
+                                        distribution: "space_between",
+                                        type: "vertical",
+                                    },
+                                    id: "hXrlpq4P_I",
+                                    margin: {
+                                        bottom: 0,
+                                        leading: 8,
+                                        top: 0,
+                                        trailing: 8,
+                                    },
+                                    name: "",
+                                    padding: {
+                                        bottom: 8,
+                                        leading: 8,
+                                        top: 8,
+                                        trailing: 8,
+                                    },
+                                    shadow: null,
+                                    shape: {
+                                        corners: {
+                                            bottom_leading: 8,
+                                            bottom_trailing: 8,
+                                            top_leading: 8,
+                                            top_trailing: 8,
+                                        },
+                                        type: "rectangle",
+                                    },
+                                    size: {
+                                        height: {
+                                            type: "fit",
+                                            value: null,
+                                        },
+                                        width: {
+                                            type: "fill",
+                                            value: null,
+                                        },
+                                    },
+                                    spacing: 0,
+                                    type: "stack",
+                                },
+                                type: "package",
+                            },
+                        ],
+                        dimension: {
+                            alignment: "center",
+                            distribution: "start",
+                            type: "vertical",
+                        },
+                        id: "iUx3-qMY_T",
+                        margin: {
+                            bottom: 0,
+                            leading: 0,
+                            top: 0,
+                            trailing: 0,
+                        },
+                        name: "",
+                        padding: {
+                            bottom: 0,
+                            leading: 0,
+                            top: 0,
+                            trailing: 0,
+                        },
+                        shadow: null,
+                        shape: {
+                            corners: {
+                                bottom_leading: 0,
+                                bottom_trailing: 0,
+                                top_leading: 0,
+                                top_trailing: 0,
+                            },
+                            type: "rectangle",
+                        },
+                        size: {
+                            height: {
+                                type: "fit",
+                                value: null,
+                            },
+                            width: {
+                                type: "fill",
+                                value: null,
+                            },
+                        },
+                        spacing: 8,
+                        type: "stack",
+                    },
+                    {
+                        background_color: null,
+                        border: null,
+                        components: [
+                            {
+                                id: "URRzLzNzla",
+                                name: "",
+                                stack: {
+                                    background_color: {
+                                        light: {
+                                            type: "hex",
+                                            value: "#000000",
+                                        },
+                                    },
+                                    border: null,
+                                    components: [
+                                        {
+                                            background_color: {
+                                                light: {
+                                                    type: "hex",
+                                                    value: "#ffffff00",
+                                                },
+                                            },
+                                            color: {
+                                                light: {
+                                                    type: "hex",
+                                                    value: "#ffffff",
+                                                },
+                                            },
+                                            components: [],
+                                            font_name: null,
+                                            font_size: "body_m",
+                                            font_weight: "extra_bold",
+                                            horizontal_alignment: "center",
+                                            id: "OVmqLUtiTF",
+                                            margin: {
+                                                bottom: 0,
+                                                leading: 20,
+                                                top: 0,
+                                                trailing: 20,
+                                            },
+                                            name: "",
+                                            padding: {
+                                                bottom: 16,
+                                                leading: 16,
+                                                top: 16,
+                                                trailing: 16,
+                                            },
+                                            size: {
+                                                height: {
+                                                    type: "fit",
+                                                    value: null,
+                                                },
+                                                width: {
+                                                    type: "fill",
+                                                    value: null,
+                                                },
+                                            },
+                                            text_lid: "Lu4yCSo1-n",
+                                            type: "text",
+                                        },
+                                    ],
+                                    dimension: {
+                                        alignment: "leading",
+                                        distribution: "space_between",
+                                        type: "vertical",
+                                    },
+                                    id: "AA18HUHSH_",
+                                    margin: {
+                                        bottom: 0,
+                                        leading: 20,
+                                        top: 0,
+                                        trailing: 20,
+                                    },
+                                    name: "",
+                                    padding: {
+                                        bottom: 0,
+                                        leading: 0,
+                                        top: 0,
+                                        trailing: 0,
+                                    },
+                                    shadow: null,
+                                    shape: {
+                                        type: "pill",
+                                    },
+                                    size: {
+                                        height: {
+                                            type: "fit",
+                                            value: null,
+                                        },
+                                        width: {
+                                            type: "fill",
+                                            value: null,
+                                        },
+                                    },
+                                    spacing: 0,
+                                    type: "stack",
+                                },
+                                type: "purchase_button",
+                            },
+                        ],
+                        dimension: {
+                            alignment: "leading",
+                            distribution: "space_between",
+                            type: "vertical",
+                        },
+                        id: "1-ymFDvH4r",
+                        margin: {
+                            bottom: 60,
+                            leading: 0,
+                            top: 0,
+                            trailing: 0,
+                        },
+                        name: "",
+                        padding: {
+                            bottom: 0,
+                            leading: 0,
+                            top: 0,
+                            trailing: 0,
+                        },
+                        shadow: null,
+                        shape: {
+                            corners: {
+                                bottom_leading: 0,
+                                bottom_trailing: 0,
+                                top_leading: 0,
+                                top_trailing: 0,
+                            },
+                            type: "rectangle",
+                        },
+                        size: {
+                            height: {
+                                type: "fit",
+                                value: null,
+                            },
+                            width: {
+                                type: "fill",
+                                value: null,
+                            },
+                        },
+                        spacing: 0,
+                        type: "stack",
+                    },
+                ],
+                dimension: {
+                    alignment: "leading",
+                    distribution: "start",
+                    type: "vertical",
+                },
+                id: "iUMgmwia8M",
+                margin: {
+                    bottom: 0,
+                    leading: 0,
+                    top: 0,
+                    trailing: 0,
+                },
+                name: "Content",
+                padding: {
+                    bottom: 0,
+                    leading: 0,
+                    top: 0,
+                    trailing: 0,
+                },
+                shadow: null,
+                shape: {
+                    corners: {
+                        bottom_leading: 0,
+                        bottom_trailing: 0,
+                        top_leading: 0,
+                        top_trailing: 0,
+                    },
+                    type: "rectangle",
+                },
+                size: {
+                    height: {
+                        type: "fill",
+                        value: null,
+                    },
+                    width: {
+                        type: "fill",
+                        value: null,
+                    },
+                },
+                spacing: 20,
+                type: "stack",
+            },
+            sticky_footer: {
+                id: "kHhCWlo9au",
+                name: "",
+                stack: {
+                    background_color: {
+                        light: {
+                            type: "hex",
+                            value: "#6c6c6cFF",
+                        },
+                    },
+                    border: undefined,
+                    components: [
+                        {
+                            background_color: null,
+                            color: {
+                                light: {
+                                    type: "hex",
+                                    value: "#ffffffFF",
+                                },
+                            },
+                            font_name: null,
+                            font_size: "body_m",
+                            font_weight: "extra_bold",
+                            horizontal_alignment: "center",
+                            id: "pFC3qrx4-c",
+                            margin: {
+                                bottom: 0,
+                                leading: 0,
+                                top: 0,
+                                trailing: 0,
+                            },
+                            name: "",
+                            padding: {
+                                bottom: 10,
+                                leading: 10,
+                                top: 10,
+                                trailing: 10,
+                            },
+                            size: {
+                                height: {
+                                    type: "fit",
+                                    value: null,
+                                },
+                                width: {
+                                    type: "fill",
+                                    value: null,
+                                },
+                            },
+                            text_lid: "GM2Sytqd5p",
+                            type: "text",
+                        },
+                    ],
+                    dimension: {
+                        alignment: "top",
+                        distribution: "space_between",
+                        type: "vertical",
+                    },
+                    id: "yI_0xF4hlJ",
+                    margin: {
+                        bottom: 0,
+                        leading: 0,
+                        top: 0,
+                        trailing: 0,
+                    },
+                    name: "Footer",
+                    padding: {
+                        bottom: 0,
+                        leading: 0,
+                        top: 0,
+                        trailing: 0,
+                    },
+                    shadow: {
+                        color: {
+                            light: {
+                                type: "hex",
+                                value: "#00000033",
+                            },
+                        },
+                        radius: 16,
+                        x: 0,
+                        y: -4,
+                    },
+                    shape: {
+                        corners: {
+                            bottom_leading: 0,
+                            bottom_trailing: 0,
+                            top_leading: 8,
+                            top_trailing: 8,
+                        },
+                        type: "rectangle",
+                    },
+                    size: {
+                        height: {
+                            type: "fit",
+                        },
+                        width: {
+                            type: "fill",
+                        },
+                    },
+                    spacing: 0,
+                    type: "stack",
+                },
+                type: "footer",
+            },
+        },
+    },
+    components_localizations: {
+        en_US: {
+            "1aIGPIMr3-": "Yearly",
+            GM2Sytqd5p: "Do it now before you regret it!",
+            GQ2t90mSKx: "E2E Tests for Purchases JS",
+            "Lu4yCSo1-n": "PURCHASE",
+            "Mv-pLWtPsF": "This is the weekly package",
+            eWT09h61W5: "Weekly",
+            fqh9Qp5Cb6: "And this is the monthly one",
+            qaGYWWo19W: "Guess what this one is?",
+            qy4JKggbZ_: "Monthly",
+        },
+    },
+    config: {},
+    created_at: "2024-12-03T17:07:27Z",
+    default_locale: "en_US",
+    localized_strings: {
+        en_US: {},
+    },
+    localized_strings_by_tier: {},
+    offering_id: "ofrngea57cd715b",
+    published_at: "2024-12-03T17:34:02Z",
+    published_revision: 4,
+    revision: 10,
+    template_name: "components",
+    updated_at: "2024-12-10T19:23:17Z",
+};
+export const errorPaywallData = {
+    asset_base_url: "https://assets.pawwalls.com",
+    components_config: {
+        base: {
+            stack: {
+                background_color: {
+                    light: {
+                        type: "hex",
+                        value: "#ffffff",
+                    },
+                },
+                border: null,
+                components: [
+                    {
+                        background_color: {
+                            light: {
+                                type: "hex",
+                                value: "#292631",
+                            },
+                        },
+                        border: null,
+                        components: [],
+                        dimension: {
+                            alignment: "leading",
+                            distribution: "start",
+                            type: "vertical",
+                        },
+                        id: "JV1fnpl_NV",
+                        margin: {
+                            bottom: 0,
+                            leading: 0,
+                            top: 0,
+                            trailing: 0,
+                        },
+                        name: "Stack",
+                        padding: {
+                            bottom: 50,
+                            leading: 0,
+                            top: 30,
+                            trailing: 0,
+                        },
+                        shape: {
+                            corners: {
+                                bottom_leading: 0,
+                                bottom_trailing: 0,
+                                top_leading: 0,
+                                top_trailing: 0,
+                            },
+                            type: "rectangle",
+                        },
+                        size: {
+                            height: {
+                                type: "fit",
+                                value: null,
+                            },
+                            width: {
+                                type: "fill",
+                                value: null,
+                            },
+                        },
+                        spacing: 0,
+                        // @ts-expect-error placing this intentionally to test the error boundary
+                        type: "stackkkk",
+                    },
+                ],
+                dimension: {
+                    alignment: "leading",
+                    distribution: "start",
+                    type: "vertical",
+                },
+                id: "YsB5GBfw1o",
+                margin: {
+                    bottom: 0,
+                    leading: 0,
+                    top: 0,
+                    trailing: 0,
+                },
+                name: "Root Paywall",
+                padding: {
+                    bottom: 0,
+                    leading: 0,
+                    top: 0,
+                    trailing: 0,
+                },
+                shape: null,
+                size: {
+                    height: {
+                        type: "fit",
+                        value: null,
+                    },
+                    width: {
+                        type: "fill",
+                        value: null,
+                    },
+                },
+                spacing: 20,
+                type: "stack",
+            },
+        },
+    },
+    components_localizations: {
+        en_US: {},
+    },
+    config: {},
+    created_at: "2024-11-07T04:36:37Z",
+    default_locale: "en_US",
+    localized_strings: {
+        en_US: {},
+    },
+    localized_strings_by_tier: {},
+    offering_id: "ofrngbfce748e08",
+    published_at: null,
+    published_revision: null,
+    revision: 14,
+    template_name: "components",
+    updated_at: "2024-11-08T22:38:41Z",
 };