Update docs

doc/inputgroup/BasicDoc.vue

@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>An InputGroup is created by wrapping the input and add-ons inside an element with a <i>p-inputgroup</i> class where add-ons also should be inside an element with <i>.p-inputgroup-addon</i> class.</p>
+        <p>A group is created by wrapping the input and add-ons with the <i>InputGroup</i> component. Each add-on element is defined as a child of <i>InputGroupAddon</i> component.</p>
     </DocSectionText>
     <div class="card flex flex-column md:flex-row gap-3">
         <InputGroup>

doc/inputgroup/ImportDoc.vue

@@ -0,0 +1,19 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+import InputGroup from 'primevue/inputgroup';
+import InputGroupAddon from 'primevue/inputgroupaddon';
+`
+            }
+        };
+    }
+};
+</script>

pages/inputgroup/index.vue

@@ -10,17 +10,23 @@
 </template>
 
 <script>
+import AccessibilityDoc from '@/doc/inputgroup/AccessibilityDoc.vue';
 import BasicDoc from '@/doc/inputgroup/BasicDoc.vue';
 import ButtonDoc from '@/doc/inputgroup/ButtonDoc.vue';
 import CheckboxDoc from '@/doc/inputgroup/CheckboxDoc.vue';
+import ImportDoc from '@/doc/inputgroup/ImportDoc.vue';
 import MultipleDoc from '@/doc/inputgroup/MultipleDoc.vue';
 import PTComponent from '@/doc/inputgroup/pt/index.vue';
-import AccessibilityDoc from '@/doc/inputgroup/AccessibilityDoc.vue';
 
 export default {
     data() {
         return {
             docs: [
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
                 {
                     id: 'basic',
                     label: 'Basic',