@claspo/common 7.3.1-dev.2 → 7.3.1-dev.3

package/src/document/DocumentCssVarsReplace.test.ts

@@ -1,2947 +0,0 @@
-import DocumentCssVarsReplace from './DocumentCssVarsReplace';
-
-describe('DocumentCssVarsReplace', function () {
-  it('should replace vars', function () {
-    const documentObject: any = {
-      'shared': {
-        'mobileBreakpointWidth': 576,
-        'headerFontFamily': '',
-        'textFontFamily': '',
-        'textClasses': {
-          'cl-text-class-h1': {
-            'id': 'cl-text-class-h1',
-            'name': 'Title',
-            'isHeader': true,
-            'styleAttributes': {
-              'color': 'var(--cl-schema-background)',
-              'textAlign': 'center',
-              'lineHeight': '120%',
-              'fontWeight': '700',
-              'fontSize': '23px',
-              'textShadow': 'none'
-            }
-          },
-          'cl-text-class-h2': {
-            'id': 'cl-text-class-h2',
-            'name': 'Subtitle',
-            'isHeader': true,
-            'styleAttributes': {
-              'color': 'var(--cl-schema-background)',
-              'textAlign': 'start',
-              'lineHeight': '120%',
-              'fontWeight': '700',
-              'fontSize': '19px',
-              'textShadow': 'none'
-            }
-          },
-          'cl-text-class-regular-text': {
-            'id': 'cl-text-class-regular-text',
-            'name': 'Regular text',
-            'isHeader': false,
-            'styleAttributes': {
-              'color': 'var(--cl-schema-background)',
-              'textAlign': 'start',
-              'lineHeight': '120%',
-              'fontWeight': '400',
-              'fontSize': '16px',
-              'textShadow': 'none'
-            }
-          },
-          'cl-text-class-button': {
-            'id': 'cl-text-class-button',
-            'name': 'Button text',
-            'isHeader': false,
-            'styleAttributes': {
-              'color': 'var(--cl-schema-background)',
-              'textAlign': 'center',
-              'lineHeight': '120%',
-              'fontWeight': '700',
-              'fontSize': '14px',
-              'textShadow': 'none'
-            }
-          },
-          'cl-text-class-input-label': {
-            'id': 'cl-text-class-input-label',
-            'name': 'Field title',
-            'isHeader': false,
-            'styleAttributes': {
-              'color': 'var(--cl-schema-background)',
-              'textAlign': 'start',
-              'lineHeight': '120%',
-              'fontWeight': '700',
-              'fontSize': '16px',
-              'textShadow': 'none'
-            }
-          },
-          'cl-text-class-input-text': {
-            'id': 'cl-text-class-input-text',
-            'name': 'Field text',
-            'isHeader': false,
-            'styleAttributes': {
-              'color': 'var(--cl-schema-background)',
-              'textAlign': 'start',
-              'lineHeight': '120%',
-              'fontWeight': '400',
-              'fontSize': '16px',
-              'textShadow': 'none'
-            }
-          }
-        },
-        'closeIcon': {
-          'desktop': {
-            'verticalOffset': '-42px',
-            'horizontalOffset': '-42px',
-            'width': '34px',
-            'height': '34px',
-            'content': '0',
-            'inlineSvg': true,
-            'color': 'rgb(255, 255, 255)'
-          },
-          'mobile': {
-            'verticalOffset': '-37px',
-            'horizontalOffset': '0px',
-            'width': '34px',
-            'height': '34px',
-            'content': '0',
-            'inlineSvg': true,
-            'color': 'rgb(255, 255, 255)'
-          }
-        },
-        'colorSchemaName': 'ACCENT',
-        'cssVars': {
-          'cl-schema-background': '#000',
-          'cl-schema-accent': 'rgb(44, 243, 82)'
-        }
-      },
-      'views': [
-        {
-          'id': 'eb81c193-b751-43ae-a2b7-fefc2f3d1f9d',
-          'path': [
-            0
-          ],
-          'label': 'DOCUMENT_VIEW_TYPE_DEFAULT',
-          'type': 'VIEW',
-          'name': 'SysContainerComponent',
-          'version': '1.0.0',
-          'props': {
-            'adaptiveStyles': {
-              'desktop': [
-                {
-                  'element': 'host',
-                  'styleAttributes': {
-                    'width': '400px',
-                    'minWidth': '400px',
-                    'height': 'auto',
-                    'minHeight': null,
-                    'flexDirection': 'column',
-                    'justifyContent': 'flex-start',
-                    'alignItems': 'center',
-                    'gap': '20px',
-                    'paddingTop': '0px',
-                    'paddingBottom': '0px',
-                    'paddingLeft': '0px',
-                    'paddingRight': '0px',
-                    'marginTop': '0px',
-                    'marginBottom': '0px',
-                    'marginLeft': '0px',
-                    'marginRight': '0px',
-                    'background': 'rgb(255, 255, 255)',
-                    'borderStyle': 'solid',
-                    'borderTopWidth': '0px',
-                    'borderBottomWidth': '0px',
-                    'borderLeftWidth': '0px',
-                    'borderRightWidth': '0px',
-                    'borderTopColor': 'rgb(0, 0, 0)',
-                    'borderLeftColor': 'rgb(0, 0, 0)',
-                    'borderBottomColor': 'rgb(0, 0, 0)',
-                    'borderRightColor': 'rgb(0, 0, 0)',
-                    'borderTopLeftRadius': '15px',
-                    'borderTopRightRadius': '15px',
-                    'borderBottomLeftRadius': '15px',
-                    'borderBottomRightRadius': '15px',
-                    'boxShadow': 'none'
-                  },
-                  'classes': ''
-                }
-              ],
-              'mobile': [
-                {
-                  'element': 'host',
-                  'styleAttributes': {
-                    'width': '320px',
-                    'minWidth': '320px',
-                    'height': 'auto',
-                    'minHeight': null,
-                    'flexDirection': 'column',
-                    'justifyContent': 'flex-start',
-                    'alignItems': 'center',
-                    'gap': '20px',
-                    'paddingTop': '0px',
-                    'paddingBottom': '0px',
-                    'paddingLeft': '0px',
-                    'paddingRight': '0px',
-                    'marginTop': '0px',
-                    'marginBottom': '0px',
-                    'marginLeft': '0px',
-                    'marginRight': '0px',
-                    'background': 'rgb(255, 255, 255)',
-                    'borderStyle': 'solid',
-                    'borderTopWidth': '0px',
-                    'borderBottomWidth': '0px',
-                    'borderLeftWidth': '0px',
-                    'borderRightWidth': '0px',
-                    'borderTopColor': 'rgb(0, 0, 0)',
-                    'borderLeftColor': 'rgb(0, 0, 0)',
-                    'borderBottomColor': 'rgb(0, 0, 0)',
-                    'borderRightColor': 'rgb(0, 0, 0)',
-                    'borderTopLeftRadius': '15px',
-                    'borderTopRightRadius': '15px',
-                    'borderBottomLeftRadius': '15px',
-                    'borderBottomRightRadius': '15px',
-                    'boxShadow': 'none'
-                  },
-                  'classes': ''
-                }
-              ]
-            }
-          },
-          'children': [
-            {
-              'id': '0bd30fe8-2fa2-47e6-8581-74b17c2df1fe',
-              'path': [
-                0,
-                0
-              ],
-              'type': 'CONTAINER',
-              'name': 'SysContainerComponent',
-              'version': '1.0.0',
-              'props': {
-                'adaptiveStyles': {
-                  'desktop': [
-                    {
-                      'element': 'host',
-                      'styleAttributes': {
-                        'width': '100%',
-                        'minWidth': null,
-                        'height': '100%',
-                        'minHeight': null,
-                        'flexDirection': 'column',
-                        'justifyContent': 'flex-start',
-                        'alignItems': 'flex-start',
-                        'gap': '20px',
-                        'paddingTop': '30px',
-                        'paddingBottom': '50px',
-                        'paddingLeft': '30px',
-                        'paddingRight': '30px',
-                        'marginTop': '0px',
-                        'marginBottom': '0px',
-                        'marginLeft': '0px',
-                        'marginRight': '0px',
-                        'background': 'url("https://forms.esputnik.com/img/templates/assets/form-template-img18.png") center center / cover no-repeat',
-                        'borderStyle': 'solid',
-                        'borderTopWidth': '0px',
-                        'borderBottomWidth': '0px',
-                        'borderLeftWidth': '0px',
-                        'borderRightWidth': '0px',
-                        'borderTopColor': 'rgb(0, 0, 0)',
-                        'borderLeftColor': 'rgb(0, 0, 0)',
-                        'borderBottomColor': 'rgb(0, 0, 0)',
-                        'borderRightColor': 'rgb(0, 0, 0)',
-                        'borderTopLeftRadius': '15px',
-                        'borderTopRightRadius': '15px',
-                        'borderBottomLeftRadius': '15px',
-                        'borderBottomRightRadius': '15px',
-                        'boxShadow': 'none'
-                      },
-                      'classes': ''
-                    }
-                  ],
-                  'mobile': [
-                    {
-                      'element': 'host',
-                      'styleAttributes': {
-                        'width': '100%',
-                        'minWidth': null,
-                        'height': '100%',
-                        'minHeight': null,
-                        'flexDirection': 'column',
-                        'justifyContent': 'flex-start',
-                        'alignItems': 'flex-start',
-                        'gap': '20px',
-                        'paddingTop': '30px',
-                        'paddingBottom': '50px',
-                        'paddingLeft': '30px',
-                        'paddingRight': '30px',
-                        'marginTop': '0px',
-                        'marginBottom': '0px',
-                        'marginLeft': '0px',
-                        'marginRight': '0px',
-                        'background': 'url("https://forms.esputnik.com/img/templates/assets/form-template-img18.png") center center / cover no-repeat',
-                        'borderStyle': 'solid',
-                        'borderTopWidth': '0px',
-                        'borderBottomWidth': '0px',
-                        'borderLeftWidth': '0px',
-                        'borderRightWidth': '0px',
-                        'borderTopColor': 'rgb(0, 0, 0)',
-                        'borderLeftColor': 'rgb(0, 0, 0)',
-                        'borderBottomColor': 'rgb(0, 0, 0)',
-                        'borderRightColor': 'rgb(0, 0, 0)',
-                        'borderTopLeftRadius': '15px',
-                        'borderTopRightRadius': '15px',
-                        'borderBottomLeftRadius': '15px',
-                        'borderBottomRightRadius': '15px',
-                        'boxShadow': 'none'
-                      },
-                      'classes': ''
-                    }
-                  ]
-                }
-              },
-              'children': [
-                {
-                  'id': '903286ba-e6d6-4aee-84f1-6f2ee389f13b',
-                  'path': [
-                    0,
-                    0,
-                    0
-                  ],
-                  'type': 'TEXT',
-                  'name': 'SysTextComponent',
-                  'version': '1.0.0',
-                  'props': {
-                    'adaptiveStyles': {
-                      'desktop': [
-                        {
-                          'element': 'host',
-                          'styleAttributes': {
-                            'width': '100%',
-                            'minWidth': null,
-                            'height': '100%',
-                            'minHeight': null,
-                            'marginTop': '0px',
-                            'marginBottom': '0px',
-                            'marginLeft': '0px',
-                            'marginRight': '0px'
-                          }
-                        },
-                        {
-                          'element': 'text',
-                          'styleAttributes': {
-                            'paddingTop': '0px',
-                            'paddingBottom': '0px',
-                            'paddingLeft': '0px',
-                            'paddingRight': '0px'
-                          },
-                          'classes': 'cl-text-class-h1'
-                        }
-                      ],
-                      'mobile': [
-                        {
-                          'element': 'host',
-                          'styleAttributes': {
-                            'width': '100%',
-                            'minWidth': null,
-                            'height': '100%',
-                            'minHeight': null,
-                            'marginTop': '0px',
-                            'marginBottom': '0px',
-                            'marginLeft': '0px',
-                            'marginRight': '0px'
-                          }
-                        },
-                        {
-                          'element': 'text',
-                          'styleAttributes': {
-                            'paddingTop': '0px',
-                            'paddingBottom': '0px',
-                            'paddingLeft': '0px',
-                            'paddingRight': '0px'
-                          },
-                          'classes': 'cl-text-class-h1'
-                        }
-                      ]
-                    },
-                    'content': {
-                      'text': 'Receive our personalized offers to your inbox'
-                    }
-                  }
-                },
-                {
-                  'path': [
-                    0,
-                    0,
-                    1
-                  ],
-                  'id': '36f2ab52-b061-4465-81f6-54283b752fde',
-                  'type': 'INPUT',
-                  'name': 'SysInputComponent',
-                  'version': '1.0.0',
-                  'props': {
-                    'content': {
-                      'placeholder': 'Email',
-                      'label': 'Label'
-                    },
-                    'control': {
-                      'name': 'email',
-                      'defaultValue': '',
-                      'validation': {
-                        'required': true,
-                        'validator': 'EMAIL',
-                        'validationErrors': {
-                          'EMAIL_IS_INVALID': 'Email is invalid',
-                          'REQUIRED': 'This field can\'t be empty'
-                        }
-                      }
-                    },
-                    'adaptiveStyles': {
-                      'desktop': [
-                        {
-                          'element': 'host',
-                          'styleAttributes': {
-                            'width': '100%',
-                            'minWidth': null,
-                            'height': '35px',
-                            'minHeight': '35px',
-                            'marginTop': '0px',
-                            'marginBottom': '0px',
-                            'marginLeft': '0px',
-                            'marginRight': '0px'
-                          },
-                          'classes': ''
-                        },
-                        {
-                          'element': 'input',
-                          'styleAttributes': {
-                            'background': 'rgb(255, 255, 255)',
-                            'borderStyle': 'solid',
-                            'borderTopWidth': '1px',
-                            'borderBottomWidth': '1px',
-                            'borderLeftWidth': '1px',
-                            'borderRightWidth': '1px',
-                            'borderTopColor': 'rgba(0, 0, 0, 0.2)',
-                            'borderLeftColor': 'rgba(0, 0, 0, 0.2)',
-                            'borderBottomColor': 'rgba(0, 0, 0, 0.2)',
-                            'borderRightColor': 'rgba(0, 0, 0, 0.2)',
-                            'borderTopLeftRadius': '8px',
-                            'borderTopRightRadius': '8px',
-                            'borderBottomLeftRadius': '8px',
-                            'borderBottomRightRadius': '8px',
-                            'boxShadow': 'none'
-                          },
-                          'placeholderStyleAttributes': {
-                            'color': 'rgb(81, 81, 81)'
-                          },
-                          'classes': 'cl-text-class-input-text'
-                        },
-                        {
-                          'element': 'label',
-                          'styleAttributes': {},
-                          'params': {
-                            'enabled': false,
-                            'position': 'TOP',
-                            'margin': 5
-                          },
-                          'classes': 'cl-text-class-input-label'
-                        }
-                      ],
-                      'mobile': [
-                        {
-                          'element': 'host',
-                          'styleAttributes': {
-                            'width': '100%',
-                            'minWidth': null,
-                            'height': '35px',
-                            'minHeight': '35px',
-                            'marginTop': '0px',
-                            'marginBottom': '0px',
-                            'marginLeft': '0px',
-                            'marginRight': '0px'
-                          },
-                          'classes': ''
-                        },
-                        {
-                          'element': 'input',
-                          'styleAttributes': {
-                            'background': 'rgb(255, 255, 255)',
-                            'borderStyle': 'solid',
-                            'borderTopWidth': '1px',
-                            'borderBottomWidth': '1px',
-                            'borderLeftWidth': '1px',
-                            'borderRightWidth': '1px',
-                            'borderTopColor': 'rgba(0, 0, 0, 0.2)',
-                            'borderLeftColor': 'rgba(0, 0, 0, 0.2)',
-                            'borderBottomColor': 'rgba(0, 0, 0, 0.2)',
-                            'borderRightColor': 'rgba(0, 0, 0, 0.2)',
-                            'borderTopLeftRadius': '8px',
-                            'borderTopRightRadius': '8px',
-                            'borderBottomLeftRadius': '8px',
-                            'borderBottomRightRadius': '8px',
-                            'boxShadow': 'none'
-                          },
-                          'placeholderStyleAttributes': {
-                            'color': 'rgb(81, 81, 81)'
-                          },
-                          'classes': 'cl-text-class-input-text'
-                        },
-                        {
-                          'element': 'label',
-                          'styleAttributes': {},
-                          'params': {
-                            'enabled': false,
-                            'position': 'TOP',
-                            'margin': 5
-                          },
-                          'classes': 'cl-text-class-input-label'
-                        }
-                      ]
-                    }
-                  }
-                },
-                {
-                  'id': 'f104d4ae-2f72-470c-b21b-967a36a1d6dc',
-                  'path': [
-                    0,
-                    0,
-                    2
-                  ],
-                  'type': 'BUTTON',
-                  'name': 'SysButtonComponent',
-                  'version': '1.0.0',
-                  'props': {
-                    'adaptiveStyles': {
-                      'desktop': [
-                        {
-                          'element': 'host',
-                          'styleAttributes': {
-                            'marginTop': '0px',
-                            'marginBottom': '0px',
-                            'marginLeft': '0px',
-                            'marginRight': '0px',
-                            'width': '100%',
-                            'minWidth': null,
-                            'height': '35px',
-                            'minHeight': '35px',
-                            'builder': {
-                              'styles': {}
-                            }
-                          }
-                        },
-                        {
-                          'element': 'button',
-                          'styleAttributes': {
-                            'width': '100%',
-                            'minWidth': null,
-                            'height': '100%',
-                            'minHeight': null,
-                            'background': 'var(--cl-schema-accent)',
-                            'borderStyle': 'solid',
-                            'borderTopWidth': '0px',
-                            'borderBottomWidth': '0px',
-                            'borderLeftWidth': '0px',
-                            'borderRightWidth': '0px',
-                            'borderTopColor': 'rgba(44, 243, 82, 1)',
-                            'borderLeftColor': 'rgba(44, 243, 82, 1)',
-                            'borderBottomColor': 'rgba(44, 243, 82, 1)',
-                            'borderRightColor': 'rgba(44, 243, 82, 1)',
-                            'borderTopLeftRadius': '8px',
-                            'borderTopRightRadius': '8px',
-                            'borderBottomLeftRadius': '8px',
-                            'borderBottomRightRadius': '8px',
-                            'paddingTop': '0px',
-                            'paddingBottom': '0px',
-                            'paddingLeft': '0px',
-                            'paddingRight': '0px',
-                            'boxShadow': '0px 2px 4px 0px rgba(0, 0, 0, 0.12)'
-                          },
-                          'hoverStyleAttributes': {
-                            'background': 'linear-gradient(180deg, rgb(153, 249, 171), rgba(44, 243, 82, 1), rgb(9, 163, 39))',
-                            'borderTopColor': 'rgb(0, 0, 0)',
-                            'borderLeftColor': 'rgb(0, 0, 0)',
-                            'borderBottomColor': 'rgb(0, 0, 0)',
-                            'borderRightColor': 'rgb(0, 0, 0)'
-                          },
-                          'classes': 'cl-text-class-button'
-                        }
-                      ],
-                      'mobile': [
-                        {
-                          'element': 'host',
-                          'styleAttributes': {
-                            'marginTop': '0px',
-                            'marginBottom': '0px',
-                            'marginLeft': '0px',
-                            'marginRight': '0px',
-                            'width': '100%',
-                            'minWidth': null,
-                            'height': '35px',
-                            'minHeight': '35px',
-                            'builder': {
-                              'styles': {}
-                            }
-                          }
-                        },
-                        {
-                          'element': 'button',
-                          'styleAttributes': {
-                            'width': '100%',
-                            'minWidth': null,
-                            'height': '100%',
-                            'minHeight': null,
-                            'background': 'var(--cl-schema-accent)',
-                            'borderStyle': 'solid',
-                            'borderTopWidth': '0px',
-                            'borderBottomWidth': '0px',
-                            'borderLeftWidth': '0px',
-                            'borderRightWidth': '0px',
-                            'borderTopColor': 'rgba(44, 243, 82, 1)',
-                            'borderLeftColor': 'rgba(44, 243, 82, 1)',
-                            'borderBottomColor': 'rgba(44, 243, 82, 1)',
-                            'borderRightColor': 'rgba(44, 243, 82, 1)',
-                            'borderTopLeftRadius': '8px',
-                            'borderTopRightRadius': '8px',
-                            'borderBottomLeftRadius': '8px',
-                            'borderBottomRightRadius': '8px',
-                            'paddingTop': '0px',
-                            'paddingBottom': '0px',
-                            'paddingLeft': '0px',
-                            'paddingRight': '0px',
-                            'boxShadow': '0px 2px 4px 0px rgba(0, 0, 0, 0.12)'
-                          },
-                          'hoverStyleAttributes': {
-                            'background': 'linear-gradient(180deg, rgb(153, 249, 171), rgba(44, 243, 82, 1), rgb(9, 163, 39))',
-                            'borderTopColor': 'rgb(0, 0, 0)',
-                            'borderLeftColor': 'rgb(0, 0, 0)',
-                            'borderBottomColor': 'rgb(0, 0, 0)',
-                            'borderRightColor': 'rgb(0, 0, 0)'
-                          },
-                          'classes': 'cl-text-class-button'
-                        }
-                      ]
-                    },
-                    'content': {
-                      'text': 'Subscribe'
-                    },
-                    'handlers': [
-                      {
-                        'type': 'CLICK',
-                        'relativeSelector': 'button',
-                        'actions': [
-                          {
-                            'type': 'SUBSCRIBE_CONTACT',
-                            'params': {
-                              'viewIndexOnSuccess': 1,
-                              'viewIndexOnSubscribed': 2,
-                              'viewIndexOnError': 3
-                            }
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                }
-              ]
-            }
-          ]
-        },
-        {
-          'id': '2da876a2-0c1b-48ca-ac09-a32ee9cc35ef',
-          'path': [
-            1
-          ],
-          'label': 'DOCUMENT_VIEW_TYPE_SUCCESS',
-          'type': 'VIEW',
-          'name': 'SysContainerComponent',
-          'version': '1.0.0',
-          'props': {
-            'adaptiveStyles': {
-              'desktop': [
-                {
-                  'element': 'host',
-                  'styleAttributes': {
-                    'width': '400px',
-                    'minWidth': '400px',
-                    'height': 'auto',
-                    'minHeight': null,
-                    'flexDirection': 'column',
-                    'justifyContent': 'flex-start',
-                    'alignItems': 'center',
-                    'gap': '20px',
-                    'paddingTop': '20px',
-                    'paddingBottom': '20px',
-                    'paddingLeft': '20px',
-                    'paddingRight': '20px',
-                    'marginTop': '0px',
-                    'marginBottom': '0px',
-                    'marginLeft': '0px',
-                    'marginRight': '0px',
-                    'background': 'rgb(255, 255, 255)',
-                    'borderStyle': 'solid',
-                    'borderTopWidth': '0px',
-                    'borderTopColor': 'rgb(0, 0, 0)',
-                    'borderBottomWidth': '0px',
-                    'borderBottomColor': 'rgb(0, 0, 0)',
-                    'borderLeftWidth': '0px',
-                    'borderLeftColor': 'rgb(0, 0, 0)',
-                    'borderRightWidth': '0px',
-                    'borderRightColor': 'rgb(0, 0, 0)',
-                    'borderTopLeftRadius': '15px',
-                    'borderTopRightRadius': '15px',
-                    'borderBottomLeftRadius': '15px',
-                    'borderBottomRightRadius': '15px',
-                    'boxShadow': 'none'
-                  },
-                  'classes': ''
-                }
-              ],
-              'mobile': [
-                {
-                  'element': 'host',
-                  'styleAttributes': {
-                    'width': '320px',
-                    'minWidth': '320px',
-                    'height': 'auto',
-                    'minHeight': null,
-                    'flexDirection': 'column',
-                    'justifyContent': 'flex-start',
-                    'alignItems': 'center',
-                    'gap': '20px',
-                    'paddingTop': '20px',
-                    'paddingBottom': '20px',
-                    'paddingLeft': '20px',
-                    'paddingRight': '20px',
-                    'marginTop': '0px',
-                    'marginBottom': '0px',
-                    'marginLeft': '0px',
-                    'marginRight': '0px',
-                    'background': 'rgb(255, 255, 255)',
-                    'borderStyle': 'solid',
-                    'borderTopWidth': '0px',
-                    'borderTopColor': 'rgb(0, 0, 0)',
-                    'borderBottomWidth': '0px',
-                    'borderBottomColor': 'rgb(0, 0, 0)',
-                    'borderLeftWidth': '0px',
-                    'borderLeftColor': 'rgb(0, 0, 0)',
-                    'borderRightWidth': '0px',
-                    'borderRightColor': 'rgb(0, 0, 0)',
-                    'borderTopLeftRadius': '15px',
-                    'borderTopRightRadius': '15px',
-                    'borderBottomLeftRadius': '15px',
-                    'borderBottomRightRadius': '15px',
-                    'boxShadow': 'none'
-                  },
-                  'classes': ''
-                }
-              ]
-            }
-          },
-          'children': [
-            {
-              'id': '4428a5f9-20c8-4d93-9a87-5b83e5ac7be2',
-              'path': [
-                1,
-                0
-              ],
-              'type': 'TEXT',
-              'name': 'SysTextComponent',
-              'version': '1.0.0',
-              'props': {
-                'adaptiveStyles': {
-                  'desktop': [
-                    {
-                      'element': 'host',
-                      'styleAttributes': {
-                        'width': '100%',
-                        'minWidth': null,
-                        'height': '100%',
-                        'minHeight': null,
-                        'marginTop': '0px',
-                        'marginBottom': '0px',
-                        'marginLeft': '0px',
-                        'marginRight': '0px'
-                      }
-                    },
-                    {
-                      'element': 'text',
-                      'styleAttributes': {
-                        'paddingTop': '0px',
-                        'paddingBottom': '0px',
-                        'paddingLeft': '0px',
-                        'paddingRight': '0px'
-                      },
-                      'classes': 'cl-text-class-h2'
-                    }
-                  ],
-                  'mobile': [
-                    {
-                      'element': 'host',
-                      'styleAttributes': {
-                        'width': '100%',
-                        'minWidth': null,
-                        'height': '100%',
-                        'minHeight': null,
-                        'marginTop': '0px',
-                        'marginBottom': '0px',
-                        'marginLeft': '0px',
-                        'marginRight': '0px'
-                      }
-                    },
-                    {
-                      'element': 'text',
-                      'styleAttributes': {
-                        'paddingTop': '0px',
-                        'paddingBottom': '0px',
-                        'paddingLeft': '0px',
-                        'paddingRight': '0px'
-                      },
-                      'classes': 'cl-text-class-h2'
-                    }
-                  ]
-                },
-                'content': {
-                  'text': 'Thanks for subscribe!'
-                }
-              }
-            },
-            {
-              'id': '95f540f9-9363-4f3a-b8db-f03b848927c1',
-              'path': [
-                1,
-                1
-              ],
-              'type': 'TEXT',
-              'name': 'SysTextComponent',
-              'version': '1.0.0',
-              'props': {
-                'adaptiveStyles': {
-                  'desktop': [
-                    {
-                      'element': 'host',
-                      'styleAttributes': {
-                        'width': '100%',
-                        'minWidth': null,
-                        'height': '100%',
-                        'minHeight': null,
-                        'marginTop': '0px',
-                        'marginBottom': '0px',
-                        'marginLeft': '0px',
-                        'marginRight': '0px'
-                      }
-                    },
-                    {
-                      'element': 'text',
-                      'styleAttributes': {
-                        'paddingTop': '0px',
-                        'paddingBottom': '0px',
-                        'paddingLeft': '0px',
-                        'paddingRight': '0px'
-                      },
-                      'classes': 'cl-text-class-regular-text'
-                    }
-                  ],
-                  'mobile': [
-                    {
-                      'element': 'host',
-                      'styleAttributes': {
-                        'width': '100%',
-                        'minWidth': null,
-                        'height': '100%',
-                        'minHeight': null,
-                        'marginTop': '0px',
-                        'marginBottom': '0px',
-                        'marginLeft': '0px',
-                        'marginRight': '0px'
-                      }
-                    },
-                    {
-                      'element': 'text',
-                      'styleAttributes': {
-                        'paddingTop': '0px',
-                        'paddingBottom': '0px',
-                        'paddingLeft': '0px',
-                        'paddingRight': '0px'
-                      },
-                      'classes': 'cl-text-class-regular-text'
-                    }
-                  ]
-                },
-                'content': {
-                  'text': 'We’ve sent an email with a confirmation link to your email address. To complete subscription, please click the confirmation link.'
-                }
-              }
-            }
-          ]
-        },
-        {
-          'id': '865c1323-7272-4001-b377-6bb4eee16d44',
-          'path': [
-            2
-          ],
-          'label': 'DOCUMENT_VIEW_TYPE_SUBSCRIBED',
-          'type': 'VIEW',
-          'name': 'SysContainerComponent',
-          'version': '1.0.0',
-          'props': {
-            'adaptiveStyles': {
-              'desktop': [
-                {
-                  'element': 'host',
-                  'styleAttributes': {
-                    'width': '400px',
-                    'minWidth': '400px',
-                    'height': 'auto',
-                    'minHeight': null,
-                    'flexDirection': 'column',
-                    'justifyContent': 'flex-start',
-                    'alignItems': 'center',
-                    'gap': '20px',
-                    'paddingTop': '20px',
-                    'paddingBottom': '20px',
-                    'paddingLeft': '20px',
-                    'paddingRight': '20px',
-                    'marginTop': '0px',
-                    'marginBottom': '0px',
-                    'marginLeft': '0px',
-                    'marginRight': '0px',
-                    'background': 'rgb(255, 255, 255)',
-                    'borderStyle': 'solid',
-                    'borderTopWidth': '0px',
-                    'borderTopColor': 'rgb(0, 0, 0)',
-                    'borderBottomWidth': '0px',
-                    'borderBottomColor': 'rgb(0, 0, 0)',
-                    'borderLeftWidth': '0px',
-                    'borderLeftColor': 'rgb(0, 0, 0)',
-                    'borderRightWidth': '0px',
-                    'borderRightColor': 'rgb(0, 0, 0)',
-                    'borderTopLeftRadius': '15px',
-                    'borderTopRightRadius': '15px',
-                    'borderBottomLeftRadius': '15px',
-                    'borderBottomRightRadius': '15px',
-                    'boxShadow': 'none'
-                  },
-                  'classes': ''
-                }
-              ],
-              'mobile': [
-                {
-                  'element': 'host',
-                  'styleAttributes': {
-                    'width': '320px',
-                    'minWidth': '320px',
-                    'height': 'auto',
-                    'minHeight': null,
-                    'flexDirection': 'column',
-                    'justifyContent': 'flex-start',
-                    'alignItems': 'center',
-                    'gap': '20px',
-                    'paddingTop': '20px',
-                    'paddingBottom': '20px',
-                    'paddingLeft': '20px',
-                    'paddingRight': '20px',
-                    'marginTop': '0px',
-                    'marginBottom': '0px',
-                    'marginLeft': '0px',
-                    'marginRight': '0px',
-                    'background': 'rgb(255, 255, 255)',
-                    'borderStyle': 'solid',
-                    'borderTopWidth': '0px',
-                    'borderTopColor': 'rgb(0, 0, 0)',
-                    'borderBottomWidth': '0px',
-                    'borderBottomColor': 'rgb(0, 0, 0)',
-                    'borderLeftWidth': '0px',
-                    'borderLeftColor': 'rgb(0, 0, 0)',
-                    'borderRightWidth': '0px',
-                    'borderRightColor': 'rgb(0, 0, 0)',
-                    'borderTopLeftRadius': '15px',
-                    'borderTopRightRadius': '15px',
-                    'borderBottomLeftRadius': '15px',
-                    'borderBottomRightRadius': '15px',
-                    'boxShadow': 'none'
-                  },
-                  'classes': ''
-                }
-              ]
-            }
-          },
-          'children': [
-            {
-              'id': '7f59153e-626b-4236-958b-4fac2ddc84c4',
-              'path': [
-                2,
-                0
-              ],
-              'type': 'TEXT',
-              'name': 'SysTextComponent',
-              'version': '1.0.0',
-              'props': {
-                'adaptiveStyles': {
-                  'desktop': [
-                    {
-                      'element': 'host',
-                      'styleAttributes': {
-                        'width': '100%',
-                        'minWidth': null,
-                        'height': '100%',
-                        'minHeight': null,
-                        'marginTop': '0px',
-                        'marginBottom': '0px',
-                        'marginLeft': '0px',
-                        'marginRight': '0px'
-                      }
-                    },
-                    {
-                      'element': 'text',
-                      'styleAttributes': {
-                        'paddingTop': '0px',
-                        'paddingBottom': '0px',
-                        'paddingLeft': '0px',
-                        'paddingRight': '0px'
-                      },
-                      'classes': 'cl-text-class-h2'
-                    }
-                  ],
-                  'mobile': [
-                    {
-                      'element': 'host',
-                      'styleAttributes': {
-                        'width': '100%',
-                        'minWidth': null,
-                        'height': '100%',
-                        'minHeight': null,
-                        'marginTop': '0px',
-                        'marginBottom': '0px',
-                        'marginLeft': '0px',
-                        'marginRight': '0px'
-                      }
-                    },
-                    {
-                      'element': 'text',
-                      'styleAttributes': {
-                        'paddingTop': '0px',
-                        'paddingBottom': '0px',
-                        'paddingLeft': '0px',
-                        'paddingRight': '0px'
-                      },
-                      'classes': 'cl-text-class-h2'
-                    }
-                  ]
-                },
-                'content': {
-                  'text': 'You’re already subscribed.'
-                }
-              }
-            },
-            {
-              'id': 'c2117990-b290-4539-bdb0-f6382e78d075',
-              'path': [
-                2,
-                1
-              ],
-              'type': 'TEXT',
-              'name': 'SysTextComponent',
-              'version': '1.0.0',
-              'props': {
-                'adaptiveStyles': {
-                  'desktop': [
-                    {
-                      'element': 'host',
-                      'styleAttributes': {
-                        'width': '100%',
-                        'minWidth': null,
-                        'height': '100%',
-                        'minHeight': null,
-                        'marginTop': '0px',
-                        'marginBottom': '0px',
-                        'marginLeft': '0px',
-                        'marginRight': '0px'
-                      }
-                    },
-                    {
-                      'element': 'text',
-                      'styleAttributes': {
-                        'paddingTop': '0px',
-                        'paddingBottom': '0px',
-                        'paddingLeft': '0px',
-                        'paddingRight': '0px'
-                      },
-                      'classes': 'cl-text-class-regular-text'
-                    }
-                  ],
-                  'mobile': [
-                    {
-                      'element': 'host',
-                      'styleAttributes': {
-                        'width': '100%',
-                        'minWidth': null,
-                        'height': '100%',
-                        'minHeight': null,
-                        'marginTop': '0px',
-                        'marginBottom': '0px',
-                        'marginLeft': '0px',
-                        'marginRight': '0px'
-                      }
-                    },
-                    {
-                      'element': 'text',
-                      'styleAttributes': {
-                        'paddingTop': '0px',
-                        'paddingBottom': '0px',
-                        'paddingLeft': '0px',
-                        'paddingRight': '0px'
-                      },
-                      'classes': 'cl-text-class-regular-text'
-                    }
-                  ]
-                },
-                'content': {
-                  'text': 'If you aren’t getting our emails, please check your Spam folder in case they are being delivered there instead of Inbox.'
-                }
-              }
-            }
-          ]
-        },
-        {
-          'id': '920b8363-0ee1-4482-81c8-ded4bf73d0e4',
-          'path': [
-            3
-          ],
-          'label': 'DOCUMENT_VIEW_TYPE_ERROR',
-          'type': 'VIEW',
-          'name': 'SysContainerComponent',
-          'version': '1.0.0',
-          'props': {
-            'adaptiveStyles': {
-              'desktop': [
-                {
-                  'element': 'host',
-                  'styleAttributes': {
-                    'width': '400px',
-                    'minWidth': '400px',
-                    'height': 'auto',
-                    'minHeight': null,
-                    'flexDirection': 'column',
-                    'justifyContent': 'flex-start',
-                    'alignItems': 'center',
-                    'gap': '20px',
-                    'paddingTop': '20px',
-                    'paddingBottom': '20px',
-                    'paddingLeft': '20px',
-                    'paddingRight': '20px',
-                    'marginTop': '0px',
-                    'marginBottom': '0px',
-                    'marginLeft': '0px',
-                    'marginRight': '0px',
-                    'background': 'rgb(255, 255, 255)',
-                    'borderStyle': 'solid',
-                    'borderTopWidth': '0px',
-                    'borderTopColor': 'rgb(0, 0, 0)',
-                    'borderBottomWidth': '0px',
-                    'borderBottomColor': 'rgb(0, 0, 0)',
-                    'borderLeftWidth': '0px',
-                    'borderLeftColor': 'rgb(0, 0, 0)',
-                    'borderRightWidth': '0px',
-                    'borderRightColor': 'rgb(0, 0, 0)',
-                    'borderTopLeftRadius': '15px',
-                    'borderTopRightRadius': '15px',
-                    'borderBottomLeftRadius': '15px',
-                    'borderBottomRightRadius': '15px',
-                    'boxShadow': 'none'
-                  },
-                  'classes': ''
-                }
-              ],
-              'mobile': [
-                {
-                  'element': 'host',
-                  'styleAttributes': {
-                    'width': '320px',
-                    'minWidth': '320px',
-                    'height': 'auto',
-                    'minHeight': null,
-                    'flexDirection': 'column',
-                    'justifyContent': 'flex-start',
-                    'alignItems': 'center',
-                    'gap': '20px',
-                    'paddingTop': '20px',
-                    'paddingBottom': '20px',
-                    'paddingLeft': '20px',
-                    'paddingRight': '20px',
-                    'marginTop': '0px',
-                    'marginBottom': '0px',
-                    'marginLeft': '0px',
-                    'marginRight': '0px',
-                    'background': 'rgb(255, 255, 255)',
-                    'borderStyle': 'solid',
-                    'borderTopWidth': '0px',
-                    'borderTopColor': 'rgb(0, 0, 0)',
-                    'borderBottomWidth': '0px',
-                    'borderBottomColor': 'rgb(0, 0, 0)',
-                    'borderLeftWidth': '0px',
-                    'borderLeftColor': 'rgb(0, 0, 0)',
-                    'borderRightWidth': '0px',
-                    'borderRightColor': 'rgb(0, 0, 0)',
-                    'borderTopLeftRadius': '15px',
-                    'borderTopRightRadius': '15px',
-                    'borderBottomLeftRadius': '15px',
-                    'borderBottomRightRadius': '15px',
-                    'boxShadow': 'none'
-                  },
-                  'classes': ''
-                }
-              ]
-            }
-          },
-          'children': [
-            {
-              'id': '530381f0-696c-4d13-b59a-e7d754035bfd',
-              'path': [
-                3,
-                0
-              ],
-              'type': 'TEXT',
-              'name': 'SysTextComponent',
-              'version': '1.0.0',
-              'props': {
-                'adaptiveStyles': {
-                  'desktop': [
-                    {
-                      'element': 'host',
-                      'styleAttributes': {
-                        'width': '100%',
-                        'minWidth': null,
-                        'height': '100%',
-                        'minHeight': null,
-                        'marginTop': '0px',
-                        'marginBottom': '0px',
-                        'marginLeft': '0px',
-                        'marginRight': '0px'
-                      }
-                    },
-                    {
-                      'element': 'text',
-                      'styleAttributes': {
-                        'paddingTop': '0px',
-                        'paddingBottom': '0px',
-                        'paddingLeft': '0px',
-                        'paddingRight': '0px'
-                      },
-                      'classes': 'cl-text-class-h2'
-                    }
-                  ],
-                  'mobile': [
-                    {
-                      'element': 'host',
-                      'styleAttributes': {
-                        'width': '100%',
-                        'minWidth': null,
-                        'height': '100%',
-                        'minHeight': null,
-                        'marginTop': '0px',
-                        'marginBottom': '0px',
-                        'marginLeft': '0px',
-                        'marginRight': '0px'
-                      }
-                    },
-                    {
-                      'element': 'text',
-                      'styleAttributes': {
-                        'paddingTop': '0px',
-                        'paddingBottom': '0px',
-                        'paddingLeft': '0px',
-                        'paddingRight': '0px'
-                      },
-                      'classes': 'cl-text-class-h2'
-                    }
-                  ]
-                },
-                'content': {
-                  'text': 'Something went wrong'
-                }
-              }
-            },
-            {
-              'id': '77724912-623e-44db-8c77-7716b0fefef5',
-              'path': [
-                3,
-                1
-              ],
-              'type': 'TEXT',
-              'name': 'SysTextComponent',
-              'version': '1.0.0',
-              'props': {
-                'adaptiveStyles': {
-                  'desktop': [
-                    {
-                      'element': 'host',
-                      'styleAttributes': {
-                        'width': '100%',
-                        'minWidth': null,
-                        'height': '100%',
-                        'minHeight': null,
-                        'marginTop': '0px',
-                        'marginBottom': '0px',
-                        'marginLeft': '0px',
-                        'marginRight': '0px'
-                      }
-                    },
-                    {
-                      'element': 'text',
-                      'styleAttributes': {
-                        'paddingTop': '0px',
-                        'paddingBottom': '0px',
-                        'paddingLeft': '0px',
-                        'paddingRight': '0px'
-                      },
-                      'classes': 'cl-text-class-regular-text'
-                    }
-                  ],
-                  'mobile': [
-                    {
-                      'element': 'host',
-                      'styleAttributes': {
-                        'width': '100%',
-                        'minWidth': null,
-                        'height': '100%',
-                        'minHeight': null,
-                        'marginTop': '0px',
-                        'marginBottom': '0px',
-                        'marginLeft': '0px',
-                        'marginRight': '0px'
-                      }
-                    },
-                    {
-                      'element': 'text',
-                      'styleAttributes': {
-                        'paddingTop': '0px',
-                        'paddingBottom': '0px',
-                        'paddingLeft': '0px',
-                        'paddingRight': '0px'
-                      },
-                      'classes': 'cl-text-class-regular-text'
-                    }
-                  ]
-                },
-                'content': {
-                  'text': 'Subscription failed. Please try to subscribe again.'
-                }
-              }
-            },
-            {
-              'id': 'f61853fb-0a67-475a-92f3-5f9c4a5ffd89',
-              'path': [
-                3,
-                2
-              ],
-              'type': 'BUTTON',
-              'name': 'SysButtonComponent',
-              'version': '1.0.0',
-              'props': {
-                'adaptiveStyles': {
-                  'desktop': [
-                    {
-                      'element': 'host',
-                      'styleAttributes': {
-                        'minWidth': null,
-                        'height': '35px',
-                        'minHeight': '35px',
-                        'marginTop': '0px',
-                        'marginBottom': '0px',
-                        'marginLeft': '0px',
-                        'marginRight': '0px',
-                        'width': '100%'
-                      }
-                    },
-                    {
-                      'element': 'button',
-                      'styleAttributes': {
-                        'width': '100%',
-                        'height': '100%',
-                        'background': 'linear-gradient(180deg, rgb(153, 249, 171), rgba(44, 243, 82, 1), rgb(9, 163, 39))',
-                        'borderStyle': 'solid',
-                        'borderTopWidth': '0px',
-                        'borderTopColor': 'rgba(44, 243, 82, 1)',
-                        'borderBottomWidth': '0px',
-                        'borderBottomColor': 'rgba(44, 243, 82, 1)',
-                        'borderLeftWidth': '0px',
-                        'borderLeftColor': 'rgba(44, 243, 82, 1)',
-                        'borderRightWidth': '0px',
-                        'borderRightColor': 'rgba(44, 243, 82, 1)',
-                        'borderTopLeftRadius': '8px',
-                        'borderTopRightRadius': '8px',
-                        'borderBottomLeftRadius': '8px',
-                        'borderBottomRightRadius': '8px',
-                        'boxShadow': '0px 2px 4px 0px rgba(0, 0, 0, 0.12)',
-                        'paddingTop': '0px',
-                        'paddingBottom': '0px',
-                        'paddingLeft': '0px',
-                        'paddingRight': '0px'
-                      },
-                      'hoverStyleAttributes': {
-                        'background': 'linear-gradient(180deg, rgb(153, 249, 171), rgba(44, 243, 82, 1), rgb(9, 163, 39))',
-                        'borderTopColor': 'rgb(0, 0, 0)',
-                        'borderBottomColor': 'rgb(0, 0, 0)',
-                        'borderLeftColor': 'rgb(0, 0, 0)',
-                        'borderRightColor': 'rgb(0, 0, 0)',
-                        'boxShadow': null
-                      },
-                      'classes': 'cl-text-class-button'
-                    }
-                  ],
-                  'mobile': [
-                    {
-                      'element': 'host',
-                      'styleAttributes': {
-                        'minWidth': null,
-                        'height': '35px',
-                        'minHeight': '35px',
-                        'marginTop': '0px',
-                        'marginBottom': '0px',
-                        'marginLeft': '0px',
-                        'marginRight': '0px',
-                        'width': '100%'
-                      }
-                    },
-                    {
-                      'element': 'button',
-                      'styleAttributes': {
-                        'width': '100%',
-                        'height': '100%',
-                        'background': 'linear-gradient(180deg, rgb(153, 249, 171), rgba(44, 243, 82, 1), rgb(9, 163, 39))',
-                        'borderStyle': 'solid',
-                        'borderTopWidth': '0px',
-                        'borderTopColor': 'rgba(44, 243, 82, 1)',
-                        'borderBottomWidth': '0px',
-                        'borderBottomColor': 'rgba(44, 243, 82, 1)',
-                        'borderLeftWidth': '0px',
-                        'borderLeftColor': 'rgba(44, 243, 82, 1)',
-                        'borderRightWidth': '0px',
-                        'borderRightColor': 'rgba(44, 243, 82, 1)',
-                        'borderTopLeftRadius': '8px',
-                        'borderTopRightRadius': '8px',
-                        'borderBottomLeftRadius': '8px',
-                        'borderBottomRightRadius': '8px',
-                        'boxShadow': '0px 2px 4px 0px rgba(0, 0, 0, 0.12)',
-                        'paddingTop': '0px',
-                        'paddingBottom': '0px',
-                        'paddingLeft': '0px',
-                        'paddingRight': '0px'
-                      },
-                      'hoverStyleAttributes': {
-                        'background': 'linear-gradient(180deg, rgb(153, 249, 171), rgba(44, 243, 82, 1), rgb(9, 163, 39))',
-                        'borderTopColor': 'rgb(0, 0, 0)',
-                        'borderBottomColor': 'rgb(0, 0, 0)',
-                        'borderLeftColor': 'rgb(0, 0, 0)',
-                        'borderRightColor': 'rgb(0, 0, 0)',
-                        'boxShadow': null
-                      },
-                      'classes': 'cl-text-class-button'
-                    }
-                  ]
-                },
-                'content': {
-                  'text': 'Try again'
-                },
-                'handlers': [
-                  {
-                    'type': 'CLICK',
-                    'relativeSelector': 'button',
-                    'actions': [
-                      {
-                        'type': 'SUBSCRIBE_CONTACT',
-                        'params': {
-                          'viewIndexOnSuccess': 1,
-                          'viewIndexOnSubscribed': 2,
-                          'viewIndexOnError': 3
-                        }
-                      }
-                    ]
-                  }
-                ]
-              }
-            }
-          ]
-        }
-      ]
-    };
-    const colorUpdate = {['cl-schema-accent']: '#f00'};
-    const documentUpdate = DocumentCssVarsReplace.replaceVars(documentObject, colorUpdate);
-    const documentUpdateString = JSON.stringify(documentUpdate);
-    const hasAccentColor = documentUpdateString.includes(`var(--${'cl-schema-accent'})`);
-    const hasBackgroundColor = documentUpdateString.includes(`var(--${'cl-schema-background'})`);
-    expect(hasAccentColor).toBeFalsy();
-    expect(hasBackgroundColor).toBeFalsy();
-
-  });
-
-  it('should replace values', function () {
-
-    // GIVEN
-    const documentObject: any = {
-      'shared': {
-        'mobileBreakpointWidth': 576,
-        'headerFontFamily': '',
-        'textFontFamily': '',
-        'textClasses': {
-          'cl-text-class-h1': {
-            'id': 'cl-text-class-h1',
-            'name': 'Title',
-            'isHeader': true,
-            'styleAttributes': {
-              'color': 'green',
-              'textAlign': 'center',
-              'lineHeight': '120%',
-              'fontWeight': '700',
-              'fontSize': '23px',
-              'textShadow': 'none'
-            }
-          },
-          'cl-text-class-h2': {
-            'id': 'cl-text-class-h2',
-            'name': 'Subtitle',
-            'isHeader': true,
-            'styleAttributes': {
-              'color': 'green',
-              'textAlign': 'start',
-              'lineHeight': '120%',
-              'fontWeight': '700',
-              'fontSize': '19px',
-              'textShadow': 'none'
-            }
-          },
-          'cl-text-class-regular-text': {
-            'id': 'cl-text-class-regular-text',
-            'name': 'Regular text',
-            'isHeader': false,
-            'styleAttributes': {
-              'color': 'green',
-              'textAlign': 'start',
-              'lineHeight': '120%',
-              'fontWeight': '400',
-              'fontSize': '16px',
-              'textShadow': 'none'
-            }
-          },
-          'cl-text-class-button': {
-            'id': 'cl-text-class-button',
-            'name': 'Button text',
-            'isHeader': false,
-            'styleAttributes': {
-              'color': 'green',
-              'textAlign': 'center',
-              'lineHeight': '120%',
-              'fontWeight': '700',
-              'fontSize': '14px',
-              'textShadow': 'none'
-            }
-          },
-          'cl-text-class-input-label': {
-            'id': 'cl-text-class-input-label',
-            'name': 'Field title',
-            'isHeader': false,
-            'styleAttributes': {
-              'color': 'green',
-              'textAlign': 'start',
-              'lineHeight': '120%',
-              'fontWeight': '700',
-              'fontSize': '16px',
-              'textShadow': 'none'
-            }
-          },
-          'cl-text-class-input-text': {
-            'id': 'cl-text-class-input-text',
-            'name': 'Field text',
-            'isHeader': false,
-            'styleAttributes': {
-              'color': 'green',
-              'textAlign': 'start',
-              'lineHeight': '120%',
-              'fontWeight': '400',
-              'fontSize': '16px',
-              'textShadow': 'none'
-            }
-          }
-        },
-        'closeIcon': {
-          'desktop': {
-            'verticalOffset': '-42px',
-            'horizontalOffset': '-42px',
-            'width': '34px',
-            'height': '34px',
-            'content': '0',
-            'inlineSvg': true,
-            'color': 'green'
-          },
-          'mobile': {
-            'verticalOffset': '-37px',
-            'horizontalOffset': '0px',
-            'width': '34px',
-            'height': '34px',
-            'content': '0',
-            'inlineSvg': true,
-            'color': 'rgb(255, 255, 255)'
-          }
-        },
-      },
-      'views': [
-        {
-          'id': 'eb81c193-b751-43ae-a2b7-fefc2f3d1f9d',
-          'path': [
-            0
-          ],
-          'label': 'DOCUMENT_VIEW_TYPE_DEFAULT',
-          'type': 'VIEW',
-          'name': 'SysContainerComponent',
-          'version': '1.0.0',
-          'props': {
-            'adaptiveStyles': {
-              'desktop': [
-                {
-                  'element': 'host',
-                  'styleAttributes': {
-                    'width': '400px',
-                    'minWidth': '400px',
-                    'height': 'auto',
-                    'minHeight': null,
-                    'flexDirection': 'column',
-                    'justifyContent': 'flex-start',
-                    'alignItems': 'center',
-                    'gap': '20px',
-                    'paddingTop': '0px',
-                    'paddingBottom': '0px',
-                    'paddingLeft': '0px',
-                    'paddingRight': '0px',
-                    'marginTop': '0px',
-                    'marginBottom': '0px',
-                    'marginLeft': '0px',
-                    'marginRight': '0px',
-                    'background': 'rgb(255, 255, 255)',
-                    'borderStyle': 'solid',
-                    'borderTopWidth': '0px',
-                    'borderBottomWidth': '0px',
-                    'borderLeftWidth': '0px',
-                    'borderRightWidth': '0px',
-                    'borderTopColor': 'rgb(0, 0, 0)',
-                    'borderLeftColor': 'rgb(0, 0, 0)',
-                    'borderBottomColor': 'rgb(0, 0, 0)',
-                    'borderRightColor': 'rgb(0, 0, 0)',
-                    'borderTopLeftRadius': '15px',
-                    'borderTopRightRadius': '15px',
-                    'borderBottomLeftRadius': '15px',
-                    'borderBottomRightRadius': '15px',
-                    'boxShadow': 'none'
-                  },
-                  'classes': ''
-                }
-              ],
-              'mobile': [
-                {
-                  'element': 'host',
-                  'styleAttributes': {
-                    'width': '320px',
-                    'minWidth': '320px',
-                    'height': 'auto',
-                    'minHeight': null,
-                    'flexDirection': 'column',
-                    'justifyContent': 'flex-start',
-                    'alignItems': 'center',
-                    'gap': '20px',
-                    'paddingTop': '0px',
-                    'paddingBottom': '0px',
-                    'paddingLeft': '0px',
-                    'paddingRight': '0px',
-                    'marginTop': '0px',
-                    'marginBottom': '0px',
-                    'marginLeft': '0px',
-                    'marginRight': '0px',
-                    'background': 'rgb(255, 255, 255)',
-                    'borderStyle': 'solid',
-                    'borderTopWidth': '0px',
-                    'borderBottomWidth': '0px',
-                    'borderLeftWidth': '0px',
-                    'borderRightWidth': '0px',
-                    'borderTopColor': 'rgb(0, 0, 0)',
-                    'borderLeftColor': 'rgb(0, 0, 0)',
-                    'borderBottomColor': 'rgb(0, 0, 0)',
-                    'borderRightColor': 'rgb(0, 0, 0)',
-                    'borderTopLeftRadius': '15px',
-                    'borderTopRightRadius': '15px',
-                    'borderBottomLeftRadius': '15px',
-                    'borderBottomRightRadius': '15px',
-                    'boxShadow': 'none'
-                  },
-                  'classes': ''
-                }
-              ]
-            }
-          },
-          'children': [
-            {
-              'id': '0bd30fe8-2fa2-47e6-8581-74b17c2df1fe',
-              'path': [
-                0,
-                0
-              ],
-              'type': 'CONTAINER',
-              'name': 'SysContainerComponent',
-              'version': '1.0.0',
-              'props': {
-                'adaptiveStyles': {
-                  'desktop': [
-                    {
-                      'element': 'host',
-                      'styleAttributes': {
-                        'width': '100%',
-                        'minWidth': null,
-                        'height': '100%',
-                        'minHeight': null,
-                        'flexDirection': 'column',
-                        'justifyContent': 'flex-start',
-                        'alignItems': 'flex-start',
-                        'gap': '20px',
-                        'paddingTop': '30px',
-                        'paddingBottom': '50px',
-                        'paddingLeft': '30px',
-                        'paddingRight': '30px',
-                        'marginTop': '0px',
-                        'marginBottom': '0px',
-                        'marginLeft': '0px',
-                        'marginRight': '0px',
-                        'background': 'url("https://forms.esputnik.com/img/templates/assets/form-template-img18.png") center center / cover no-repeat',
-                        'borderStyle': 'solid',
-                        'borderTopWidth': '0px',
-                        'borderBottomWidth': '0px',
-                        'borderLeftWidth': '0px',
-                        'borderRightWidth': '0px',
-                        'borderTopColor': 'rgb(0, 0, 0)',
-                        'borderLeftColor': 'rgb(0, 0, 0)',
-                        'borderBottomColor': 'rgb(0, 0, 0)',
-                        'borderRightColor': 'rgb(0, 0, 0)',
-                        'borderTopLeftRadius': '15px',
-                        'borderTopRightRadius': '15px',
-                        'borderBottomLeftRadius': '15px',
-                        'borderBottomRightRadius': '15px',
-                        'boxShadow': 'none'
-                      },
-                      'classes': ''
-                    }
-                  ],
-                  'mobile': [
-                    {
-                      'element': 'host',
-                      'styleAttributes': {
-                        'width': '100%',
-                        'minWidth': null,
-                        'height': '100%',
-                        'minHeight': null,
-                        'flexDirection': 'column',
-                        'justifyContent': 'flex-start',
-                        'alignItems': 'flex-start',
-                        'gap': '20px',
-                        'paddingTop': '30px',
-                        'paddingBottom': '50px',
-                        'paddingLeft': '30px',
-                        'paddingRight': '30px',
-                        'marginTop': '0px',
-                        'marginBottom': '0px',
-                        'marginLeft': '0px',
-                        'marginRight': '0px',
-                        'background': 'url("https://forms.esputnik.com/img/templates/assets/form-template-img18.png") center center / cover no-repeat',
-                        'borderStyle': 'solid',
-                        'borderTopWidth': '0px',
-                        'borderBottomWidth': '0px',
-                        'borderLeftWidth': '0px',
-                        'borderRightWidth': '0px',
-                        'borderTopColor': 'rgb(0, 0, 0)',
-                        'borderLeftColor': 'rgb(0, 0, 0)',
-                        'borderBottomColor': 'rgb(0, 0, 0)',
-                        'borderRightColor': 'rgb(0, 0, 0)',
-                        'borderTopLeftRadius': '15px',
-                        'borderTopRightRadius': '15px',
-                        'borderBottomLeftRadius': '15px',
-                        'borderBottomRightRadius': '15px',
-                        'boxShadow': 'none'
-                      },
-                      'classes': ''
-                    }
-                  ]
-                }
-              },
-              'children': [
-                {
-                  'id': '903286ba-e6d6-4aee-84f1-6f2ee389f13b',
-                  'path': [
-                    0,
-                    0,
-                    0
-                  ],
-                  'type': 'TEXT',
-                  'name': 'SysTextComponent',
-                  'version': '1.0.0',
-                  'props': {
-                    'adaptiveStyles': {
-                      'desktop': [
-                        {
-                          'element': 'host',
-                          'styleAttributes': {
-                            'width': '100%',
-                            'minWidth': null,
-                            'height': '100%',
-                            'minHeight': null,
-                            'marginTop': '0px',
-                            'marginBottom': '0px',
-                            'marginLeft': '0px',
-                            'marginRight': '0px'
-                          }
-                        },
-                        {
-                          'element': 'text',
-                          'styleAttributes': {
-                            'paddingTop': '0px',
-                            'paddingBottom': '0px',
-                            'paddingLeft': '0px',
-                            'paddingRight': '0px'
-                          },
-                          'classes': 'cl-text-class-h1'
-                        }
-                      ],
-                      'mobile': [
-                        {
-                          'element': 'host',
-                          'styleAttributes': {
-                            'width': '100%',
-                            'minWidth': null,
-                            'height': '100%',
-                            'minHeight': null,
-                            'marginTop': '0px',
-                            'marginBottom': '0px',
-                            'marginLeft': '0px',
-                            'marginRight': '0px'
-                          }
-                        },
-                        {
-                          'element': 'text',
-                          'styleAttributes': {
-                            'paddingTop': '0px',
-                            'paddingBottom': '0px',
-                            'paddingLeft': '0px',
-                            'paddingRight': '0px'
-                          },
-                          'classes': 'cl-text-class-h1'
-                        }
-                      ]
-                    },
-                    'content': {
-                      'text': 'Receive our personalized offers to your inbox'
-                    }
-                  }
-                },
-                {
-                  'path': [
-                    0,
-                    0,
-                    1
-                  ],
-                  'id': '36f2ab52-b061-4465-81f6-54283b752fde',
-                  'type': 'INPUT',
-                  'name': 'SysInputComponent',
-                  'version': '1.0.0',
-                  'props': {
-                    'content': {
-                      'placeholder': 'Email',
-                      'label': 'Label'
-                    },
-                    'control': {
-                      'name': 'email',
-                      'defaultValue': '',
-                      'validation': {
-                        'required': true,
-                        'validator': 'EMAIL',
-                        'validationErrors': {
-                          'EMAIL_IS_INVALID': 'Email is invalid',
-                          'REQUIRED': 'This field can\'t be empty'
-                        }
-                      }
-                    },
-                    'adaptiveStyles': {
-                      'desktop': [
-                        {
-                          'element': 'host',
-                          'styleAttributes': {
-                            'width': '100%',
-                            'minWidth': null,
-                            'height': '35px',
-                            'minHeight': '35px',
-                            'marginTop': '0px',
-                            'marginBottom': '0px',
-                            'marginLeft': '0px',
-                            'marginRight': '0px'
-                          },
-                          'classes': ''
-                        },
-                        {
-                          'element': 'input',
-                          'styleAttributes': {
-                            'background': 'rgb(255, 255, 255)',
-                            'borderStyle': 'solid',
-                            'borderTopWidth': '1px',
-                            'borderBottomWidth': '1px',
-                            'borderLeftWidth': '1px',
-                            'borderRightWidth': '1px',
-                            'borderTopColor': 'rgba(0, 0, 0, 0.2)',
-                            'borderLeftColor': 'rgba(0, 0, 0, 0.2)',
-                            'borderBottomColor': 'rgba(0, 0, 0, 0.2)',
-                            'borderRightColor': 'rgba(0, 0, 0, 0.2)',
-                            'borderTopLeftRadius': '8px',
-                            'borderTopRightRadius': '8px',
-                            'borderBottomLeftRadius': '8px',
-                            'borderBottomRightRadius': '8px',
-                            'boxShadow': 'none'
-                          },
-                          'placeholderStyleAttributes': {
-                            'color': 'rgb(81, 81, 81)'
-                          },
-                          'classes': 'cl-text-class-input-text'
-                        },
-                        {
-                          'element': 'label',
-                          'styleAttributes': {},
-                          'params': {
-                            'enabled': false,
-                            'position': 'TOP',
-                            'margin': 5
-                          },
-                          'classes': 'cl-text-class-input-label'
-                        }
-                      ],
-                      'mobile': [
-                        {
-                          'element': 'host',
-                          'styleAttributes': {
-                            'width': '100%',
-                            'minWidth': null,
-                            'height': '35px',
-                            'minHeight': '35px',
-                            'marginTop': '0px',
-                            'marginBottom': '0px',
-                            'marginLeft': '0px',
-                            'marginRight': '0px'
-                          },
-                          'classes': ''
-                        },
-                        {
-                          'element': 'input',
-                          'styleAttributes': {
-                            'background': 'rgb(255, 255, 255)',
-                            'borderStyle': 'solid',
-                            'borderTopWidth': '1px',
-                            'borderBottomWidth': '1px',
-                            'borderLeftWidth': '1px',
-                            'borderRightWidth': '1px',
-                            'borderTopColor': 'rgba(0, 0, 0, 0.2)',
-                            'borderLeftColor': 'rgba(0, 0, 0, 0.2)',
-                            'borderBottomColor': 'rgba(0, 0, 0, 0.2)',
-                            'borderRightColor': 'rgba(0, 0, 0, 0.2)',
-                            'borderTopLeftRadius': '8px',
-                            'borderTopRightRadius': '8px',
-                            'borderBottomLeftRadius': '8px',
-                            'borderBottomRightRadius': '8px',
-                            'boxShadow': 'none'
-                          },
-                          'placeholderStyleAttributes': {
-                            'color': 'rgb(81, 81, 81)'
-                          },
-                          'classes': 'cl-text-class-input-text'
-                        },
-                        {
-                          'element': 'label',
-                          'styleAttributes': {},
-                          'params': {
-                            'enabled': false,
-                            'position': 'TOP',
-                            'margin': 5
-                          },
-                          'classes': 'cl-text-class-input-label'
-                        }
-                      ]
-                    }
-                  }
-                },
-                {
-                  'id': 'f104d4ae-2f72-470c-b21b-967a36a1d6dc',
-                  'path': [
-                    0,
-                    0,
-                    2
-                  ],
-                  'type': 'BUTTON',
-                  'name': 'SysButtonComponent',
-                  'version': '1.0.0',
-                  'props': {
-                    'adaptiveStyles': {
-                      'desktop': [
-                        {
-                          'element': 'host',
-                          'styleAttributes': {
-                            'marginTop': '0px',
-                            'marginBottom': '0px',
-                            'marginLeft': '0px',
-                            'marginRight': '0px',
-                            'width': '100%',
-                            'minWidth': null,
-                            'height': '35px',
-                            'minHeight': '35px',
-                            'builder': {
-                              'styles': {}
-                            }
-                          }
-                        },
-                        {
-                          'element': 'button',
-                          'styleAttributes': {
-                            'width': '100%',
-                            'minWidth': null,
-                            'height': '100%',
-                            'minHeight': null,
-                            'background': 'var(--cl-schema-accent)',
-                            'borderStyle': 'solid',
-                            'borderTopWidth': '0px',
-                            'borderBottomWidth': '0px',
-                            'borderLeftWidth': '0px',
-                            'borderRightWidth': '0px',
-                            'borderTopColor': 'rgba(44, 243, 82, 1)',
-                            'borderLeftColor': 'rgba(44, 243, 82, 1)',
-                            'borderBottomColor': 'rgba(44, 243, 82, 1)',
-                            'borderRightColor': 'rgba(44, 243, 82, 1)',
-                            'borderTopLeftRadius': '8px',
-                            'borderTopRightRadius': '8px',
-                            'borderBottomLeftRadius': '8px',
-                            'borderBottomRightRadius': '8px',
-                            'paddingTop': '0px',
-                            'paddingBottom': '0px',
-                            'paddingLeft': '0px',
-                            'paddingRight': '0px',
-                            'boxShadow': '0px 2px 4px 0px rgba(0, 0, 0, 0.12)'
-                          },
-                          'hoverStyleAttributes': {
-                            'background': 'linear-gradient(180deg, rgb(153, 249, 171), rgba(44, 243, 82, 1), rgb(9, 163, 39))',
-                            'borderTopColor': 'rgb(0, 0, 0)',
-                            'borderLeftColor': 'rgb(0, 0, 0)',
-                            'borderBottomColor': 'rgb(0, 0, 0)',
-                            'borderRightColor': 'rgb(0, 0, 0)'
-                          },
-                          'classes': 'cl-text-class-button'
-                        }
-                      ],
-                      'mobile': [
-                        {
-                          'element': 'host',
-                          'styleAttributes': {
-                            'marginTop': '0px',
-                            'marginBottom': '0px',
-                            'marginLeft': '0px',
-                            'marginRight': '0px',
-                            'width': '100%',
-                            'minWidth': null,
-                            'height': '35px',
-                            'minHeight': '35px',
-                            'builder': {
-                              'styles': {}
-                            }
-                          }
-                        },
-                        {
-                          'element': 'button',
-                          'styleAttributes': {
-                            'width': '100%',
-                            'minWidth': null,
-                            'height': '100%',
-                            'minHeight': null,
-                            'background': 'var(--cl-schema-accent)',
-                            'borderStyle': 'solid',
-                            'borderTopWidth': '0px',
-                            'borderBottomWidth': '0px',
-                            'borderLeftWidth': '0px',
-                            'borderRightWidth': '0px',
-                            'borderTopColor': 'rgba(44, 243, 82, 1)',
-                            'borderLeftColor': 'rgba(44, 243, 82, 1)',
-                            'borderBottomColor': 'rgba(44, 243, 82, 1)',
-                            'borderRightColor': 'rgba(44, 243, 82, 1)',
-                            'borderTopLeftRadius': '8px',
-                            'borderTopRightRadius': '8px',
-                            'borderBottomLeftRadius': '8px',
-                            'borderBottomRightRadius': '8px',
-                            'paddingTop': '0px',
-                            'paddingBottom': '0px',
-                            'paddingLeft': '0px',
-                            'paddingRight': '0px',
-                            'boxShadow': '0px 2px 4px 0px rgba(0, 0, 0, 0.12)'
-                          },
-                          'hoverStyleAttributes': {
-                            'background': 'linear-gradient(180deg, rgb(153, 249, 171), rgba(44, 243, 82, 1), rgb(9, 163, 39))',
-                            'borderTopColor': 'rgb(0, 0, 0)',
-                            'borderLeftColor': 'rgb(0, 0, 0)',
-                            'borderBottomColor': 'rgb(0, 0, 0)',
-                            'borderRightColor': 'rgb(0, 0, 0)'
-                          },
-                          'classes': 'cl-text-class-button'
-                        }
-                      ]
-                    },
-                    'content': {
-                      'text': 'Subscribe'
-                    },
-                    'handlers': [
-                      {
-                        'type': 'CLICK',
-                        'relativeSelector': 'button',
-                        'actions': [
-                          {
-                            'type': 'SUBSCRIBE_CONTACT',
-                            'params': {
-                              'viewIndexOnSuccess': 1,
-                              'viewIndexOnSubscribed': 2,
-                              'viewIndexOnError': 3
-                            }
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                }
-              ]
-            }
-          ]
-        },
-        {
-          'id': '2da876a2-0c1b-48ca-ac09-a32ee9cc35ef',
-          'path': [
-            1
-          ],
-          'label': 'DOCUMENT_VIEW_TYPE_SUCCESS',
-          'type': 'VIEW',
-          'name': 'SysContainerComponent',
-          'version': '1.0.0',
-          'props': {
-            'adaptiveStyles': {
-              'desktop': [
-                {
-                  'element': 'host',
-                  'styleAttributes': {
-                    'width': '400px',
-                    'minWidth': '400px',
-                    'height': 'auto',
-                    'minHeight': null,
-                    'flexDirection': 'column',
-                    'justifyContent': 'flex-start',
-                    'alignItems': 'center',
-                    'gap': '20px',
-                    'paddingTop': '20px',
-                    'paddingBottom': '20px',
-                    'paddingLeft': '20px',
-                    'paddingRight': '20px',
-                    'marginTop': '0px',
-                    'marginBottom': '0px',
-                    'marginLeft': '0px',
-                    'marginRight': '0px',
-                    'background': 'rgb(255, 255, 255)',
-                    'borderStyle': 'solid',
-                    'borderTopWidth': '0px',
-                    'borderTopColor': 'rgb(0, 0, 0)',
-                    'borderBottomWidth': '0px',
-                    'borderBottomColor': 'rgb(0, 0, 0)',
-                    'borderLeftWidth': '0px',
-                    'borderLeftColor': 'rgb(0, 0, 0)',
-                    'borderRightWidth': '0px',
-                    'borderRightColor': 'rgb(0, 0, 0)',
-                    'borderTopLeftRadius': '15px',
-                    'borderTopRightRadius': '15px',
-                    'borderBottomLeftRadius': '15px',
-                    'borderBottomRightRadius': '15px',
-                    'boxShadow': 'none'
-                  },
-                  'classes': ''
-                }
-              ],
-              'mobile': [
-                {
-                  'element': 'host',
-                  'styleAttributes': {
-                    'width': '320px',
-                    'minWidth': '320px',
-                    'height': 'auto',
-                    'minHeight': null,
-                    'flexDirection': 'column',
-                    'justifyContent': 'flex-start',
-                    'alignItems': 'center',
-                    'gap': '20px',
-                    'paddingTop': '20px',
-                    'paddingBottom': '20px',
-                    'paddingLeft': '20px',
-                    'paddingRight': '20px',
-                    'marginTop': '0px',
-                    'marginBottom': '0px',
-                    'marginLeft': '0px',
-                    'marginRight': '0px',
-                    'background': 'rgb(255, 255, 255)',
-                    'borderStyle': 'solid',
-                    'borderTopWidth': '0px',
-                    'borderTopColor': 'rgb(0, 0, 0)',
-                    'borderBottomWidth': '0px',
-                    'borderBottomColor': 'rgb(0, 0, 0)',
-                    'borderLeftWidth': '0px',
-                    'borderLeftColor': 'rgb(0, 0, 0)',
-                    'borderRightWidth': '0px',
-                    'borderRightColor': 'rgb(0, 0, 0)',
-                    'borderTopLeftRadius': '15px',
-                    'borderTopRightRadius': '15px',
-                    'borderBottomLeftRadius': '15px',
-                    'borderBottomRightRadius': '15px',
-                    'boxShadow': 'none'
-                  },
-                  'classes': ''
-                }
-              ]
-            }
-          },
-          'children': [
-            {
-              'id': '4428a5f9-20c8-4d93-9a87-5b83e5ac7be2',
-              'path': [
-                1,
-                0
-              ],
-              'type': 'TEXT',
-              'name': 'SysTextComponent',
-              'version': '1.0.0',
-              'props': {
-                'adaptiveStyles': {
-                  'desktop': [
-                    {
-                      'element': 'host',
-                      'styleAttributes': {
-                        'width': '100%',
-                        'minWidth': null,
-                        'height': '100%',
-                        'minHeight': null,
-                        'marginTop': '0px',
-                        'marginBottom': '0px',
-                        'marginLeft': '0px',
-                        'marginRight': '0px'
-                      }
-                    },
-                    {
-                      'element': 'text',
-                      'styleAttributes': {
-                        'paddingTop': '0px',
-                        'paddingBottom': '0px',
-                        'paddingLeft': '0px',
-                        'paddingRight': '0px'
-                      },
-                      'classes': 'cl-text-class-h2'
-                    }
-                  ],
-                  'mobile': [
-                    {
-                      'element': 'host',
-                      'styleAttributes': {
-                        'width': '100%',
-                        'minWidth': null,
-                        'height': '100%',
-                        'minHeight': null,
-                        'marginTop': '0px',
-                        'marginBottom': '0px',
-                        'marginLeft': '0px',
-                        'marginRight': '0px'
-                      }
-                    },
-                    {
-                      'element': 'text',
-                      'styleAttributes': {
-                        'paddingTop': '0px',
-                        'paddingBottom': '0px',
-                        'paddingLeft': '0px',
-                        'paddingRight': '0px'
-                      },
-                      'classes': 'cl-text-class-h2'
-                    }
-                  ]
-                },
-                'content': {
-                  'text': 'Thanks for subscribe!'
-                }
-              }
-            },
-            {
-              'id': '95f540f9-9363-4f3a-b8db-f03b848927c1',
-              'path': [
-                1,
-                1
-              ],
-              'type': 'TEXT',
-              'name': 'SysTextComponent',
-              'version': '1.0.0',
-              'props': {
-                'adaptiveStyles': {
-                  'desktop': [
-                    {
-                      'element': 'host',
-                      'styleAttributes': {
-                        'width': '100%',
-                        'minWidth': null,
-                        'height': '100%',
-                        'minHeight': null,
-                        'marginTop': '0px',
-                        'marginBottom': '0px',
-                        'marginLeft': '0px',
-                        'marginRight': '0px'
-                      }
-                    },
-                    {
-                      'element': 'text',
-                      'styleAttributes': {
-                        'paddingTop': '0px',
-                        'paddingBottom': '0px',
-                        'paddingLeft': '0px',
-                        'paddingRight': '0px'
-                      },
-                      'classes': 'cl-text-class-regular-text'
-                    }
-                  ],
-                  'mobile': [
-                    {
-                      'element': 'host',
-                      'styleAttributes': {
-                        'width': '100%',
-                        'minWidth': null,
-                        'height': '100%',
-                        'minHeight': null,
-                        'marginTop': '0px',
-                        'marginBottom': '0px',
-                        'marginLeft': '0px',
-                        'marginRight': '0px'
-                      }
-                    },
-                    {
-                      'element': 'text',
-                      'styleAttributes': {
-                        'paddingTop': '0px',
-                        'paddingBottom': '0px',
-                        'paddingLeft': '0px',
-                        'paddingRight': '0px'
-                      },
-                      'classes': 'cl-text-class-regular-text'
-                    }
-                  ]
-                },
-                'content': {
-                  'text': 'We’ve sent an email with a confirmation link to your email address. To complete subscription, please click the confirmation link.'
-                }
-              }
-            }
-          ]
-        },
-        {
-          'id': '865c1323-7272-4001-b377-6bb4eee16d44',
-          'path': [
-            2
-          ],
-          'label': 'DOCUMENT_VIEW_TYPE_SUBSCRIBED',
-          'type': 'VIEW',
-          'name': 'SysContainerComponent',
-          'version': '1.0.0',
-          'props': {
-            'adaptiveStyles': {
-              'desktop': [
-                {
-                  'element': 'host',
-                  'styleAttributes': {
-                    'width': '400px',
-                    'minWidth': '400px',
-                    'height': 'auto',
-                    'minHeight': null,
-                    'flexDirection': 'column',
-                    'justifyContent': 'flex-start',
-                    'alignItems': 'center',
-                    'gap': '20px',
-                    'paddingTop': '20px',
-                    'paddingBottom': '20px',
-                    'paddingLeft': '20px',
-                    'paddingRight': '20px',
-                    'marginTop': '0px',
-                    'marginBottom': '0px',
-                    'marginLeft': '0px',
-                    'marginRight': '0px',
-                    'background': 'rgb(255, 255, 255)',
-                    'borderStyle': 'solid',
-                    'borderTopWidth': '0px',
-                    'borderTopColor': 'rgb(0, 0, 0)',
-                    'borderBottomWidth': '0px',
-                    'borderBottomColor': 'rgb(0, 0, 0)',
-                    'borderLeftWidth': '0px',
-                    'borderLeftColor': 'rgb(0, 0, 0)',
-                    'borderRightWidth': '0px',
-                    'borderRightColor': 'rgb(0, 0, 0)',
-                    'borderTopLeftRadius': '15px',
-                    'borderTopRightRadius': '15px',
-                    'borderBottomLeftRadius': '15px',
-                    'borderBottomRightRadius': '15px',
-                    'boxShadow': 'none'
-                  },
-                  'classes': ''
-                }
-              ],
-              'mobile': [
-                {
-                  'element': 'host',
-                  'styleAttributes': {
-                    'width': '320px',
-                    'minWidth': '320px',
-                    'height': 'auto',
-                    'minHeight': null,
-                    'flexDirection': 'column',
-                    'justifyContent': 'flex-start',
-                    'alignItems': 'center',
-                    'gap': '20px',
-                    'paddingTop': '20px',
-                    'paddingBottom': '20px',
-                    'paddingLeft': '20px',
-                    'paddingRight': '20px',
-                    'marginTop': '0px',
-                    'marginBottom': '0px',
-                    'marginLeft': '0px',
-                    'marginRight': '0px',
-                    'background': 'rgb(255, 255, 255)',
-                    'borderStyle': 'solid',
-                    'borderTopWidth': '0px',
-                    'borderTopColor': 'rgb(0, 0, 0)',
-                    'borderBottomWidth': '0px',
-                    'borderBottomColor': 'rgb(0, 0, 0)',
-                    'borderLeftWidth': '0px',
-                    'borderLeftColor': 'rgb(0, 0, 0)',
-                    'borderRightWidth': '0px',
-                    'borderRightColor': 'rgb(0, 0, 0)',
-                    'borderTopLeftRadius': '15px',
-                    'borderTopRightRadius': '15px',
-                    'borderBottomLeftRadius': '15px',
-                    'borderBottomRightRadius': '15px',
-                    'boxShadow': 'none'
-                  },
-                  'classes': ''
-                }
-              ]
-            }
-          },
-          'children': [
-            {
-              'id': '7f59153e-626b-4236-958b-4fac2ddc84c4',
-              'path': [
-                2,
-                0
-              ],
-              'type': 'TEXT',
-              'name': 'SysTextComponent',
-              'version': '1.0.0',
-              'props': {
-                'adaptiveStyles': {
-                  'desktop': [
-                    {
-                      'element': 'host',
-                      'styleAttributes': {
-                        'width': '100%',
-                        'minWidth': null,
-                        'height': '100%',
-                        'minHeight': null,
-                        'marginTop': '0px',
-                        'marginBottom': '0px',
-                        'marginLeft': '0px',
-                        'marginRight': '0px'
-                      }
-                    },
-                    {
-                      'element': 'text',
-                      'styleAttributes': {
-                        'paddingTop': '0px',
-                        'paddingBottom': '0px',
-                        'paddingLeft': '0px',
-                        'paddingRight': '0px'
-                      },
-                      'classes': 'cl-text-class-h2'
-                    }
-                  ],
-                  'mobile': [
-                    {
-                      'element': 'host',
-                      'styleAttributes': {
-                        'width': '100%',
-                        'minWidth': null,
-                        'height': '100%',
-                        'minHeight': null,
-                        'marginTop': '0px',
-                        'marginBottom': '0px',
-                        'marginLeft': '0px',
-                        'marginRight': '0px'
-                      }
-                    },
-                    {
-                      'element': 'text',
-                      'styleAttributes': {
-                        'paddingTop': '0px',
-                        'paddingBottom': '0px',
-                        'paddingLeft': '0px',
-                        'paddingRight': '0px'
-                      },
-                      'classes': 'cl-text-class-h2'
-                    }
-                  ]
-                },
-                'content': {
-                  'text': 'You’re already subscribed.'
-                }
-              }
-            },
-            {
-              'id': 'c2117990-b290-4539-bdb0-f6382e78d075',
-              'path': [
-                2,
-                1
-              ],
-              'type': 'TEXT',
-              'name': 'SysTextComponent',
-              'version': '1.0.0',
-              'props': {
-                'adaptiveStyles': {
-                  'desktop': [
-                    {
-                      'element': 'host',
-                      'styleAttributes': {
-                        'width': '100%',
-                        'minWidth': null,
-                        'height': '100%',
-                        'minHeight': null,
-                        'marginTop': '0px',
-                        'marginBottom': '0px',
-                        'marginLeft': '0px',
-                        'marginRight': '0px'
-                      }
-                    },
-                    {
-                      'element': 'text',
-                      'styleAttributes': {
-                        'paddingTop': '0px',
-                        'paddingBottom': '0px',
-                        'paddingLeft': '0px',
-                        'paddingRight': '0px'
-                      },
-                      'classes': 'cl-text-class-regular-text'
-                    }
-                  ],
-                  'mobile': [
-                    {
-                      'element': 'host',
-                      'styleAttributes': {
-                        'width': '100%',
-                        'minWidth': null,
-                        'height': '100%',
-                        'minHeight': null,
-                        'marginTop': '0px',
-                        'marginBottom': '0px',
-                        'marginLeft': '0px',
-                        'marginRight': '0px'
-                      }
-                    },
-                    {
-                      'element': 'text',
-                      'styleAttributes': {
-                        'paddingTop': '0px',
-                        'paddingBottom': '0px',
-                        'paddingLeft': '0px',
-                        'paddingRight': '0px'
-                      },
-                      'classes': 'cl-text-class-regular-text'
-                    }
-                  ]
-                },
-                'content': {
-                  'text': 'If you aren’t getting our emails, please check your Spam folder in case they are being delivered there instead of Inbox.'
-                }
-              }
-            }
-          ]
-        },
-        {
-          'id': '920b8363-0ee1-4482-81c8-ded4bf73d0e4',
-          'path': [
-            3
-          ],
-          'label': 'DOCUMENT_VIEW_TYPE_ERROR',
-          'type': 'VIEW',
-          'name': 'SysContainerComponent',
-          'version': '1.0.0',
-          'props': {
-            'adaptiveStyles': {
-              'desktop': [
-                {
-                  'element': 'host',
-                  'styleAttributes': {
-                    'width': '400px',
-                    'minWidth': '400px',
-                    'height': 'auto',
-                    'minHeight': null,
-                    'flexDirection': 'column',
-                    'justifyContent': 'flex-start',
-                    'alignItems': 'center',
-                    'gap': '20px',
-                    'paddingTop': '20px',
-                    'paddingBottom': '20px',
-                    'paddingLeft': '20px',
-                    'paddingRight': '20px',
-                    'marginTop': '0px',
-                    'marginBottom': '0px',
-                    'marginLeft': '0px',
-                    'marginRight': '0px',
-                    'background': 'rgb(255, 255, 255)',
-                    'borderStyle': 'solid',
-                    'borderTopWidth': '0px',
-                    'borderTopColor': 'rgb(0, 0, 0)',
-                    'borderBottomWidth': '0px',
-                    'borderBottomColor': 'rgb(0, 0, 0)',
-                    'borderLeftWidth': '0px',
-                    'borderLeftColor': 'rgb(0, 0, 0)',
-                    'borderRightWidth': '0px',
-                    'borderRightColor': 'rgb(0, 0, 0)',
-                    'borderTopLeftRadius': '15px',
-                    'borderTopRightRadius': '15px',
-                    'borderBottomLeftRadius': '15px',
-                    'borderBottomRightRadius': '15px',
-                    'boxShadow': 'none'
-                  },
-                  'classes': ''
-                }
-              ],
-              'mobile': [
-                {
-                  'element': 'host',
-                  'styleAttributes': {
-                    'width': '320px',
-                    'minWidth': '320px',
-                    'height': 'auto',
-                    'minHeight': null,
-                    'flexDirection': 'column',
-                    'justifyContent': 'flex-start',
-                    'alignItems': 'center',
-                    'gap': '20px',
-                    'paddingTop': '20px',
-                    'paddingBottom': '20px',
-                    'paddingLeft': '20px',
-                    'paddingRight': '20px',
-                    'marginTop': '0px',
-                    'marginBottom': '0px',
-                    'marginLeft': '0px',
-                    'marginRight': '0px',
-                    'background': 'rgb(255, 255, 255)',
-                    'borderStyle': 'solid',
-                    'borderTopWidth': '0px',
-                    'borderTopColor': 'rgb(0, 0, 0)',
-                    'borderBottomWidth': '0px',
-                    'borderBottomColor': 'rgb(0, 0, 0)',
-                    'borderLeftWidth': '0px',
-                    'borderLeftColor': 'rgb(0, 0, 0)',
-                    'borderRightWidth': '0px',
-                    'borderRightColor': 'rgb(0, 0, 0)',
-                    'borderTopLeftRadius': '15px',
-                    'borderTopRightRadius': '15px',
-                    'borderBottomLeftRadius': '15px',
-                    'borderBottomRightRadius': '15px',
-                    'boxShadow': 'none'
-                  },
-                  'classes': ''
-                }
-              ]
-            }
-          },
-          'children': [
-            {
-              'id': '530381f0-696c-4d13-b59a-e7d754035bfd',
-              'path': [
-                3,
-                0
-              ],
-              'type': 'TEXT',
-              'name': 'SysTextComponent',
-              'version': '1.0.0',
-              'props': {
-                'adaptiveStyles': {
-                  'desktop': [
-                    {
-                      'element': 'host',
-                      'styleAttributes': {
-                        'width': '100%',
-                        'minWidth': null,
-                        'height': '100%',
-                        'minHeight': null,
-                        'marginTop': '0px',
-                        'marginBottom': '0px',
-                        'marginLeft': '0px',
-                        'marginRight': '0px'
-                      }
-                    },
-                    {
-                      'element': 'text',
-                      'styleAttributes': {
-                        'paddingTop': '0px',
-                        'paddingBottom': '0px',
-                        'paddingLeft': '0px',
-                        'paddingRight': '0px'
-                      },
-                      'classes': 'cl-text-class-h2'
-                    }
-                  ],
-                  'mobile': [
-                    {
-                      'element': 'host',
-                      'styleAttributes': {
-                        'width': '100%',
-                        'minWidth': null,
-                        'height': '100%',
-                        'minHeight': null,
-                        'marginTop': '0px',
-                        'marginBottom': '0px',
-                        'marginLeft': '0px',
-                        'marginRight': '0px'
-                      }
-                    },
-                    {
-                      'element': 'text',
-                      'styleAttributes': {
-                        'paddingTop': '0px',
-                        'paddingBottom': '0px',
-                        'paddingLeft': '0px',
-                        'paddingRight': '0px'
-                      },
-                      'classes': 'cl-text-class-h2'
-                    }
-                  ]
-                },
-                'content': {
-                  'text': 'Something went wrong'
-                }
-              }
-            },
-            {
-              'id': '77724912-623e-44db-8c77-7716b0fefef5',
-              'path': [
-                3,
-                1
-              ],
-              'type': 'TEXT',
-              'name': 'SysTextComponent',
-              'version': '1.0.0',
-              'props': {
-                'adaptiveStyles': {
-                  'desktop': [
-                    {
-                      'element': 'host',
-                      'styleAttributes': {
-                        'width': '100%',
-                        'minWidth': null,
-                        'height': '100%',
-                        'minHeight': null,
-                        'marginTop': '0px',
-                        'marginBottom': '0px',
-                        'marginLeft': '0px',
-                        'marginRight': '0px'
-                      }
-                    },
-                    {
-                      'element': 'text',
-                      'styleAttributes': {
-                        'paddingTop': '0px',
-                        'paddingBottom': '0px',
-                        'paddingLeft': '0px',
-                        'paddingRight': '0px'
-                      },
-                      'classes': 'cl-text-class-regular-text'
-                    }
-                  ],
-                  'mobile': [
-                    {
-                      'element': 'host',
-                      'styleAttributes': {
-                        'width': '100%',
-                        'minWidth': null,
-                        'height': '100%',
-                        'minHeight': null,
-                        'marginTop': '0px',
-                        'marginBottom': '0px',
-                        'marginLeft': '0px',
-                        'marginRight': '0px'
-                      }
-                    },
-                    {
-                      'element': 'text',
-                      'styleAttributes': {
-                        'paddingTop': '0px',
-                        'paddingBottom': '0px',
-                        'paddingLeft': '0px',
-                        'paddingRight': '0px'
-                      },
-                      'classes': 'cl-text-class-regular-text'
-                    }
-                  ]
-                },
-                'content': {
-                  'text': 'Subscription failed. Please try to subscribe again.'
-                }
-              }
-            },
-            {
-              'id': 'f61853fb-0a67-475a-92f3-5f9c4a5ffd89',
-              'path': [
-                3,
-                2
-              ],
-              'type': 'BUTTON',
-              'name': 'SysButtonComponent',
-              'version': '1.0.0',
-              'props': {
-                'adaptiveStyles': {
-                  'desktop': [
-                    {
-                      'element': 'host',
-                      'styleAttributes': {
-                        'minWidth': null,
-                        'height': '35px',
-                        'minHeight': '35px',
-                        'marginTop': '0px',
-                        'marginBottom': '0px',
-                        'marginLeft': '0px',
-                        'marginRight': '0px',
-                        'width': '100%'
-                      }
-                    },
-                    {
-                      'element': 'button',
-                      'styleAttributes': {
-                        'width': '100%',
-                        'height': '100%',
-                        'background': 'linear-gradient(180deg, rgb(153, 249, 171), rgba(44, 243, 82, 1), rgb(9, 163, 39))',
-                        'borderStyle': 'solid',
-                        'borderTopWidth': '0px',
-                        'borderTopColor': 'rgba(44, 243, 82, 1)',
-                        'borderBottomWidth': '0px',
-                        'borderBottomColor': 'rgba(44, 243, 82, 1)',
-                        'borderLeftWidth': '0px',
-                        'borderLeftColor': 'rgba(44, 243, 82, 1)',
-                        'borderRightWidth': '0px',
-                        'borderRightColor': 'rgba(44, 243, 82, 1)',
-                        'borderTopLeftRadius': '8px',
-                        'borderTopRightRadius': '8px',
-                        'borderBottomLeftRadius': '8px',
-                        'borderBottomRightRadius': '8px',
-                        'boxShadow': '0px 2px 4px 0px rgba(0, 0, 0, 0.12)',
-                        'paddingTop': '0px',
-                        'paddingBottom': '0px',
-                        'paddingLeft': '0px',
-                        'paddingRight': '0px'
-                      },
-                      'hoverStyleAttributes': {
-                        'background': 'linear-gradient(180deg, rgb(153, 249, 171), rgba(44, 243, 82, 1), rgb(9, 163, 39))',
-                        'borderTopColor': 'rgb(0, 0, 0)',
-                        'borderBottomColor': 'rgb(0, 0, 0)',
-                        'borderLeftColor': 'rgb(0, 0, 0)',
-                        'borderRightColor': 'rgb(0, 0, 0)',
-                        'boxShadow': null
-                      },
-                      'classes': 'cl-text-class-button'
-                    }
-                  ],
-                  'mobile': [
-                    {
-                      'element': 'host',
-                      'styleAttributes': {
-                        'minWidth': null,
-                        'height': '35px',
-                        'minHeight': '35px',
-                        'marginTop': '0px',
-                        'marginBottom': '0px',
-                        'marginLeft': '0px',
-                        'marginRight': '0px',
-                        'width': '100%'
-                      }
-                    },
-                    {
-                      'element': 'button',
-                      'styleAttributes': {
-                        'width': '100%',
-                        'height': '100%',
-                        'background': 'linear-gradient(180deg, rgb(153, 249, 171), rgba(44, 243, 82, 1), rgb(9, 163, 39))',
-                        'borderStyle': 'solid',
-                        'borderTopWidth': '0px',
-                        'borderTopColor': 'rgba(44, 243, 82, 1)',
-                        'borderBottomWidth': '0px',
-                        'borderBottomColor': 'rgba(44, 243, 82, 1)',
-                        'borderLeftWidth': '0px',
-                        'borderLeftColor': 'rgba(44, 243, 82, 1)',
-                        'borderRightWidth': '0px',
-                        'borderRightColor': 'rgba(44, 243, 82, 1)',
-                        'borderTopLeftRadius': '8px',
-                        'borderTopRightRadius': '8px',
-                        'borderBottomLeftRadius': '8px',
-                        'borderBottomRightRadius': '8px',
-                        'boxShadow': '0px 2px 4px 0px rgba(0, 0, 0, 0.12)',
-                        'paddingTop': '0px',
-                        'paddingBottom': '0px',
-                        'paddingLeft': '0px',
-                        'paddingRight': '0px'
-                      },
-                      'hoverStyleAttributes': {
-                        'background': 'linear-gradient(180deg, rgb(153, 249, 171), rgba(44, 243, 82, 1), rgb(9, 163, 39))',
-                        'borderTopColor': 'rgb(0, 0, 0)',
-                        'borderBottomColor': 'rgb(0, 0, 0)',
-                        'borderLeftColor': 'rgb(0, 0, 0)',
-                        'borderRightColor': 'rgb(0, 0, 0)',
-                        'boxShadow': null
-                      },
-                      'classes': 'cl-text-class-button'
-                    }
-                  ]
-                },
-                'content': {
-                  'text': 'Try again'
-                },
-                'handlers': [
-                  {
-                    'type': 'CLICK',
-                    'relativeSelector': 'button',
-                    'actions': [
-                      {
-                        'type': 'SUBSCRIBE_CONTACT',
-                        'params': {
-                          'viewIndexOnSuccess': 1,
-                          'viewIndexOnSubscribed': 2,
-                          'viewIndexOnError': 3
-                        }
-                      }
-                    ]
-                  }
-                ]
-              }
-            }
-          ]
-        }
-      ]
-    };
-    const colorUpdate = {['cl-schema-accent']: 'green'};
-
-    // WHEN
-    const documentUpdate: any = DocumentCssVarsReplace.replaceValues(documentObject, colorUpdate);
-
-    // THEN
-    // text class color replaced with var (all 6 text classes share same pattern)
-    expect(documentUpdate.shared.textClasses['cl-text-class-h1'].styleAttributes.color).toBe('var(--cl-schema-accent)');
-    // close icon color replaced with var
-    expect(documentUpdate.shared.closeIcon.desktop.color).toBe('var(--cl-schema-accent)');
-    // button background already had var() - preserved
-    expect(documentUpdate.views[0].children[0].children[2].props.adaptiveStyles.desktop[1].styleAttributes.background).toBe('var(--cl-schema-accent)');
-
-  });
-});