{
  "app": {
    "version": "example/v1",
    "metadata": { "name": "box", "description": "box" },
    "spec": {
      "components": [
        {
          "id": "test_btn",
          "type": "plain/v1/button",
          "properties": { "text": { "raw": "Click", "format": "plain" } },
          "traits": [
            {
              "type": "core/v1/state",
              "properties": { "key": "count", "initialValue": 0 }
            },
            {
              "type": "core/v1/event",
              "properties": {
                "handlers": [
                  {
                    "type": "onClick",
                    "componentId": "test_btn",
                    "method": {
                      "name": "setValue",
                      "parameters": {
                        "key": "count",
                        "value": "{{ test_btn.count > 0 ? 0 : test_btn.count + 1 }}"
                      }
                    },
                    "wait": {},
                    "disabled": false
                  }
                ]
              }
            }
          ]
        },
        {
          "id": "box_container",
          "type": "chakra_ui/v1/box",
          "properties": {
            "my": 8,
            "p": 8,
            "display": "flex",
            "bg": "{{ test_btn.count % 2 ? 'teal' : 'white' }}",
            "border": "1px solid",
            "borderColor": "{{ test_btn.count % 2 ? 'white' : 'teal' }}",
            "borderRadius": 8,
            "h": 200
          },
          "traits": []
        },
        {
          "id": "box_child_1",
          "type": "chakra_ui/v1/box",
          "properties": {
            "mr": 4,
            "flex": 1,
            "bg": "{{ test_btn.count % 2 ? 'white' : 'teal' }}",
            "color": "{{ test_btn.count % 2 ? 'teal' : 'white' }}",
            "display": "flex",
            "alignItems": "center",
            "justifyContent": "center",
            "borderRadius": 4
          },
          "traits": [
            {
              "type": "core/v1/slot",
              "properties": { "container": { "id": "box_container", "slot": "content" } }
            }
          ]
        },
        {
          "id": "text1",
          "type": "core/v1/text",
          "properties": { "value": { "raw": "in box child 1", "format": "plain" } },
          "traits": [
            {
              "type": "core/v1/slot",
              "properties": { "container": { "id": "box_child_1", "slot": "content" } }
            }
          ]
        },
        {
          "id": "box_child_2",
          "type": "chakra_ui/v1/box",
          "properties": {
            "flex": 1,
            "bg": "{{ test_btn.count % 2 ? 'white' : 'teal' }}",
            "color": "{{ test_btn.count % 2 ? 'teal' : 'white' }}",
            "display": "flex",
            "alignItems": "center",
            "justifyContent": "center",
            "borderRadius": 4
          },
          "traits": [
            {
              "type": "core/v1/slot",
              "properties": { "container": { "id": "box_container", "slot": "content" } }
            }
          ]
        },
        {
          "id": "text2",
          "type": "core/v1/text",
          "properties": { "value": { "raw": "in box child 2", "format": "plain" } },
          "traits": [
            {
              "type": "core/v1/slot",
              "properties": { "container": { "id": "box_child_2", "slot": "content" } }
            }
          ]
        }
      ]
    }
  }
}