docs: improved docs for FieldGroup component

docs/package.json

@@ -7,33 +7,33 @@
     "build": "astro build && node scripts/afterBuild.js"
   },
   "dependencies": {
-    "@astrojs/mdx": "^1.1.5",
-    "@astrojs/sitemap": "^3.0.3",
-    "@astrojs/vue": "^3.0.4",
+    "@astrojs/mdx": "^1.1.0",
+    "@astrojs/sitemap": "^3.0.0",
+    "@astrojs/vue": "^3.0.0",
     "@docsearch/css": "^3.5.2",
     "@docsearch/js": "^3.5.2",
     "@floating-ui/dom": "^1.5.3",
     "@stackblitz/sdk": "^1.9.0",
-    "@types/fs-extra": "^11.0.4",
-    "@types/lodash-es": "^4.17.11",
+    "@types/fs-extra": "^11.0.2",
+    "@types/lodash-es": "^4.17.9",
     "@vee-validate/valibot": "^4.11.8",
     "@vee-validate/yup": "^4.11.8",
     "@vee-validate/zod": "^4.11.8",
-    "@vue/repl": "^2.7.0",
-    "@vueuse/core": "^10.6.1",
-    "astro": "^3.5.5",
+    "@vue/repl": "^2.5.8",
+    "@vueuse/core": "^10.4.1",
+    "astro": "^3.1.2",
     "autoprefixer": "^10.4.16",
     "fs-extra": "^11.1.1",
     "jsdom": "^22.1.0",
     "lodash-es": "^4.17.21",
-    "remark-gfm": "^4.0.0",
-    "shiki": "^0.14.5",
-    "tailwindcss": "^3.3.5",
+    "remark-gfm": "^3.0.1",
+    "shiki": "^0.14.4",
+    "tailwindcss": "^3.3.3",
     "unist-util-visit": "^5.0.0",
-    "valibot": "^0.20.1",
+    "valibot": "^0.17.0",
     "vee-validate": "^4.11.8",
-    "vue": "^3.3.8",
-    "yup": "^1.3.2",
-    "zod": "^3.22.4"
+    "vue": "^3.3.0",
+    "yup": "^1.2.0",
+    "zod": "^3.22.2"
   }
 }

docs/src/pages/api/field-group.mdx

@@ -5,12 +5,28 @@ description: API reference for the Field Group component
 menuTitle: '<FieldGroup />'
 order: 5
 ---
+
 import CodeTitle from '@/components/CodeTitle.vue';
+import DocBadge from '@/components/DocBadge.vue';
 
-# FieldGroup <DocBadge title="v4.5" />
+# FieldGroup <DocBadge title="v4.7" />
 
 The `<FieldGroup />` component is used to provide state of group of fields. It is a renderless component, meaning it doesn't render anything of its own.
-It can be
+
+```vue-html
+  <Form>
+    <FieldGroup v-slot="{ meta }">
+        <Field name="addressField" type="text" />
+        <Field name="addressField2" type="text" />
+
+        Is address group valid ? {{ meta.valid }}
+    </FieldGroup>
+    <button>Submit</button>
+  </Form>
+```
+
+It can be nested which means there can be `FieldGroup` inside `FieldGroup` (like on example):
+
 ```vue-html
   <Form>
     <FieldGroup v-slot="{ meta }">
@@ -45,4 +61,4 @@ This is a **read-only** property which gives access to aggregated state of field
 
 ### Ref
 
-Ref gives access to the same `meta: FieldGroupMeta` value as slot.
+Ref gives access to the same `meta: FieldGroupMeta` value as slot.