diff --git a/components/doc/checkbox/apidoc.js b/components/doc/checkbox/apidoc.js
index 644ab784f9..7e5f40f9de 100644
--- a/components/doc/checkbox/apidoc.js
+++ b/components/doc/checkbox/apidoc.js
@@ -1,7 +1,7 @@
-import Link from "next/link";
-import { CodeHighlight } from "../common/codehighlight";
-import { DevelopmentSection } from "../common/developmentsection";
-import { DocSectionText } from "../common/docsectiontext";
+import Link from 'next/link';
+import { CodeHighlight } from '../common/codehighlight';
+import { DevelopmentSection } from '../common/developmentsection';
+import { DocSectionText } from '../common/docsectiontext';
 
 export function ApiDoc(props) {
     return (
@@ -155,7 +155,9 @@ export function ApiDoc(props) {
             </div>
 
             <h3>Styling</h3>
-            <p>Following is the list of structural style classes, for theming classes visit <Link href="/theming">theming</Link> page.</p>
+            <p>
+                Following is the list of structural style classes, for theming classes visit <Link href="/theming">theming</Link> page.
+            </p>
             <div className="doc-tablewrapper">
                 <table className="doc-table">
                     <thead>
@@ -185,8 +187,8 @@ export function ApiDoc(props) {
             <DevelopmentSection>
                 <h4>Screen Reader</h4>
                 <p>
-                    Checkbox component uses a hidden native checkbox element internally that is only visible to screen readers. Value to describe the component can either be provided via <i>label</i> tag combined with <i>inputId</i> prop or
-                    using <i>aria-labelledby</i>, <i>aria-label</i> props.
+                    Checkbox component uses a hidden native checkbox element internally that is only visible to screen readers. Value to describe the component can either be provided via <i>label</i> tag combined with <i>inputId</i> prop or using{' '}
+                    <i>aria-labelledby</i>, <i>aria-label</i> props.
                 </p>
                 <CodeHighlight>
                     {`
@@ -225,9 +227,9 @@ export function ApiDoc(props) {
                     </table>
                 </div>
             </DevelopmentSection>
-            
+
             <h5>Dependencies</h5>
             <p>None.</p>
         </>
-    )
-}
\ No newline at end of file
+    );
+}
diff --git a/components/doc/checkbox/basicdoc.js b/components/doc/checkbox/basicdoc.js
index 5229a922c5..590b9b13c2 100644
--- a/components/doc/checkbox/basicdoc.js
+++ b/components/doc/checkbox/basicdoc.js
@@ -1,7 +1,7 @@
-import { useState } from "react";
-import { Checkbox } from "../../lib/checkbox/Checkbox";
-import { DocSectionText } from "../common/docsectiontext";
-import { DocSectionCode } from "../common/docsectioncode";
+import { useState } from 'react';
+import { Checkbox } from '../../lib/checkbox/Checkbox';
+import { DocSectionText } from '../common/docsectiontext';
+import { DocSectionCode } from '../common/docsectioncode';
 
 export function BasicDoc(props) {
     const [checked, setChecked] = useState(false);
@@ -42,9 +42,9 @@ export default function BasicDemo() {
                 Checkbox is used as a controlled input with <i>checked</i> and <i>onChange</i> properties.
             </DocSectionText>
             <div className="card flex justify-content-center">
-                <Checkbox onChange={e => setChecked(e.checked)} checked={checked}></Checkbox>
+                <Checkbox onChange={(e) => setChecked(e.checked)} checked={checked}></Checkbox>
             </div>
             <DocSectionCode code={code} />
         </>
-    )
+    );
 }
diff --git a/components/doc/checkbox/disableddoc.js b/components/doc/checkbox/disableddoc.js
index ab519ab395..7bc12f11c4 100644
--- a/components/doc/checkbox/disableddoc.js
+++ b/components/doc/checkbox/disableddoc.js
@@ -1,6 +1,6 @@
-import { Checkbox } from "../../lib/checkbox/Checkbox";
-import { DocSectionText } from "../common/docsectiontext";
-import { DocSectionCode } from "../common/docsectioncode";
+import { Checkbox } from '../../lib/checkbox/Checkbox';
+import { DocSectionText } from '../common/docsectiontext';
+import { DocSectionCode } from '../common/docsectioncode';
 
 export function DisabledDoc(props) {
     const code = {
@@ -37,5 +37,5 @@ export default function DisabledDemo() {
             </div>
             <DocSectionCode code={code} />
         </>
-    )
+    );
 }
diff --git a/components/doc/checkbox/dynamicdoc.js b/components/doc/checkbox/dynamicdoc.js
index dfb3abe23a..8d778def9e 100644
--- a/components/doc/checkbox/dynamicdoc.js
+++ b/components/doc/checkbox/dynamicdoc.js
@@ -1,7 +1,7 @@
-import { useState } from "react";
-import { Checkbox } from "../../lib/checkbox/Checkbox";
-import { DocSectionText } from "../common/docsectiontext";
-import { DocSectionCode } from "../common/docsectioncode";
+import { useState } from 'react';
+import { Checkbox } from '../../lib/checkbox/Checkbox';
+import { DocSectionText } from '../common/docsectiontext';
+import { DocSectionCode } from '../common/docsectioncode';
 
 export function DynamicDoc(props) {
     const categories = [
@@ -15,10 +15,8 @@ export function DynamicDoc(props) {
     const onCategoryChange = (e) => {
         let _selectedCategories = [...selectedCategories];
 
-        if (e.checked)
-            _selectedCategories.push(e.value);
-        else
-            _selectedCategories = _selectedCategories.filter(category => category.key !== e.value.key);
+        if (e.checked) _selectedCategories.push(e.value);
+        else _selectedCategories = _selectedCategories.filter((category) => category.key !== e.value.key);
 
         setSelectedCategories(_selectedCategories);
     };
@@ -121,16 +119,16 @@ export default function DynamicDemo() {
 
     return (
         <>
-            <DocSectionText {...props}>
-                Checkboxes can be generated using a list of values.
-            </DocSectionText>
+            <DocSectionText {...props}>Checkboxes can be generated using a list of values.</DocSectionText>
             <div className="card flex justify-content-center">
                 <div className="flex flex-column gap-3">
                     {categories.map((category) => {
                         return (
                             <div key={category.key} className="flex align-items-center">
                                 <Checkbox inputId={category.key} name="category" value={category} onChange={onCategoryChange} checked={selectedCategories.some((item) => item.key === category.key)} />
-                                <label htmlFor={category.key} className="ml-2">{category.name}</label>
+                                <label htmlFor={category.key} className="ml-2">
+                                    {category.name}
+                                </label>
                             </div>
                         );
                     })}
@@ -138,5 +136,5 @@ export default function DynamicDemo() {
             </div>
             <DocSectionCode code={code} />
         </>
-    )
+    );
 }
diff --git a/components/doc/checkbox/groupdoc.js b/components/doc/checkbox/groupdoc.js
index b642551159..c8a9023fe8 100644
--- a/components/doc/checkbox/groupdoc.js
+++ b/components/doc/checkbox/groupdoc.js
@@ -1,7 +1,7 @@
-import { useState } from "react";
-import { Checkbox } from "../../lib/checkbox/Checkbox";
-import { DocSectionText } from "../common/docsectiontext";
-import { DocSectionCode } from "../common/docsectioncode";
+import { useState } from 'react';
+import { Checkbox } from '../../lib/checkbox/Checkbox';
+import { DocSectionText } from '../common/docsectiontext';
+import { DocSectionCode } from '../common/docsectioncode';
 
 export function GroupDoc(props) {
     const [ingredients, setIngredients] = useState([]);
@@ -9,13 +9,11 @@ export function GroupDoc(props) {
     const onIngredientsChange = (e) => {
         let _ingredients = [...ingredients];
 
-        if (e.checked)
-            _ingredients.push(e.value);
-        else
-            _ingredients.splice(_ingredients.indexOf(e.value), 1);
+        if (e.checked) _ingredients.push(e.value);
+        else _ingredients.splice(_ingredients.indexOf(e.value), 1);
 
         setIngredients(_ingredients);
-    }
+    };
 
     const code = {
         basic: `
@@ -122,30 +120,36 @@ export default function GroupDemo() {
 
     return (
         <>
-            <DocSectionText {...props}>
-                Multiple checkboxes can be grouped together.
-            </DocSectionText>
+            <DocSectionText {...props}>Multiple checkboxes can be grouped together.</DocSectionText>
             <div className="card flex justify-content-center">
                 <div className="flex flex-wrap gap-3">
                     <div className="flex align-items-center">
                         <Checkbox inputId="ingredient1" name="pizza" value="Cheese" onChange={onIngredientsChange} checked={ingredients.includes('Cheese')} />
-                        <label htmlFor="ingredient1" className="ml-2">Cheese</label>
+                        <label htmlFor="ingredient1" className="ml-2">
+                            Cheese
+                        </label>
                     </div>
                     <div className="flex align-items-center">
                         <Checkbox inputId="ingredient2" name="pizza" value="Mushroom" onChange={onIngredientsChange} checked={ingredients.includes('Mushroom')} />
-                        <label htmlFor="ingredient2" className="ml-2">Mushroom</label>
+                        <label htmlFor="ingredient2" className="ml-2">
+                            Mushroom
+                        </label>
                     </div>
                     <div className="flex align-items-center">
                         <Checkbox inputId="ingredient3" name="pizza" value="Pepper" onChange={onIngredientsChange} checked={ingredients.includes('Pepper')} />
-                        <label htmlFor="ingredient3" className="ml-2">Pepper</label>
+                        <label htmlFor="ingredient3" className="ml-2">
+                            Pepper
+                        </label>
                     </div>
                     <div className="flex align-items-center">
                         <Checkbox inputId="ingredient4" name="pizza" value="Onion" onChange={onIngredientsChange} checked={ingredients.includes('Onion')} />
-                        <label htmlFor="ingredient4" className="ml-2">Onion</label>
+                        <label htmlFor="ingredient4" className="ml-2">
+                            Onion
+                        </label>
                     </div>
                 </div>
             </div>
             <DocSectionCode code={code} />
         </>
-    )
+    );
 }
diff --git a/components/doc/checkbox/importdoc.js b/components/doc/checkbox/importdoc.js
index 817dea58dc..6c96e2c67b 100644
--- a/components/doc/checkbox/importdoc.js
+++ b/components/doc/checkbox/importdoc.js
@@ -1,5 +1,5 @@
-import { DocSectionText } from "../common/docsectiontext";
-import { DocSectionCode } from "../common/docsectioncode";
+import { DocSectionText } from '../common/docsectiontext';
+import { DocSectionCode } from '../common/docsectioncode';
 
 export function ImportDoc(props) {
     const code = {
@@ -13,5 +13,5 @@ import { Checkbox } from 'primereact/checkbox';
             <DocSectionText {...props}></DocSectionText>
             <DocSectionCode code={code} hideToggleCode hideCodeSandbox />
         </>
-    )
-}
\ No newline at end of file
+    );
+}
diff --git a/components/doc/common/docsectionnav.js b/components/doc/common/docsectionnav.js
index 01802d188d..477c56684e 100644
--- a/components/doc/common/docsectionnav.js
+++ b/components/doc/common/docsectionnav.js
@@ -1,15 +1,15 @@
 export function DocSectionNav(props) {
     return (
-        <div className="w-12rem px-3 hidden xl:block" style={{flexGrow: 0, flexShrink: 0, flexBasis: 'auto'}}>
-            <ul className="list-none p-0 m-0 sticky" style={{top: '7rem'}}>
-                {
-                    props.docs.map(doc => (
-                        <li key={doc.label}>
-                            <button className="p-link block p-1 text-color hover:text-primary" onClick={() => document.getElementById(doc.id).parentElement.scrollIntoView({block: 'b', behavior: 'smooth'})}>{doc.label}</button>
-                        </li>
-                    ))
-                }
+        <div className="w-12rem px-3 hidden xl:block" style={{ flexGrow: 0, flexShrink: 0, flexBasis: 'auto' }}>
+            <ul className="list-none p-0 m-0 sticky" style={{ top: '7rem' }}>
+                {props.docs.map((doc) => (
+                    <li key={doc.label}>
+                        <button className="p-link block p-1 text-color hover:text-primary" onClick={() => document.getElementById(doc.id).parentElement.scrollIntoView({ block: 'b', behavior: 'smooth' })}>
+                            {doc.label}
+                        </button>
+                    </li>
+                ))}
             </ul>
         </div>
-    )
+    );
 }
diff --git a/components/doc/common/docsectiontext.js b/components/doc/common/docsectiontext.js
index f2672f036d..fa88acf86b 100644
--- a/components/doc/common/docsectiontext.js
+++ b/components/doc/common/docsectiontext.js
@@ -1,5 +1,5 @@
-import Link from "next/link";
-import { useRouter } from "next/router";
+import Link from 'next/link';
+import { useRouter } from 'next/router';
 
 export function DocSectionText(props) {
     const router = useRouter();
@@ -9,10 +9,10 @@ export function DocSectionText(props) {
             <h2 className="doc-section-label">
                 {props.label}
                 <Link href={router.basePath + router.pathname + '#' + props.id} target="_self">
-                    <a id={props.id} >#</a>
+                    <a id={props.id}>#</a>
                 </Link>
             </h2>
             {props.children && <p class="doc-section-description">{props.children}</p>}
         </>
     );
-}
\ No newline at end of file
+}
diff --git a/components/doc/inputswitch/apidoc.js b/components/doc/inputswitch/apidoc.js
index 6d5183fbef..1b8c32e0fe 100644
--- a/components/doc/inputswitch/apidoc.js
+++ b/components/doc/inputswitch/apidoc.js
@@ -1,7 +1,7 @@
-import Link from "next/link";
-import { CodeHighlight } from "../common/codehighlight";
-import { DevelopmentSection } from "../common/developmentsection";
-import { DocSectionText } from "../common/docsectiontext";
+import Link from 'next/link';
+import { CodeHighlight } from '../common/codehighlight';
+import { DevelopmentSection } from '../common/developmentsection';
+import { DocSectionText } from '../common/docsectiontext';
 
 export function ApiDoc(props) {
     return (
@@ -162,8 +162,8 @@ export function ApiDoc(props) {
             <DevelopmentSection>
                 <h4>Screen Reader</h4>
                 <p>
-                    InputSwitch component uses a hidden native checkbox element with <i>switch</i> role internally that is only visible to screen readers. Value to describe the component can either be provided via <i>label</i> tag combined
-                    with <i>inputId</i> prop or using <i>aria-labelledby</i>, <i>aria-label</i> props.
+                    InputSwitch component uses a hidden native checkbox element with <i>switch</i> role internally that is only visible to screen readers. Value to describe the component can either be provided via <i>label</i> tag combined with{' '}
+                    <i>inputId</i> prop or using <i>aria-labelledby</i>, <i>aria-label</i> props.
                 </p>
                 <CodeHighlight>
                     {`
@@ -202,9 +202,9 @@ export function ApiDoc(props) {
                     </table>
                 </div>
             </DevelopmentSection>
-            
+
             <h4>Dependencies</h4>
             <p>None.</p>
         </>
-    )
-}
\ No newline at end of file
+    );
+}
diff --git a/components/doc/inputswitch/basicdoc.js b/components/doc/inputswitch/basicdoc.js
index 902c00f99e..532fd05d27 100644
--- a/components/doc/inputswitch/basicdoc.js
+++ b/components/doc/inputswitch/basicdoc.js
@@ -1,7 +1,7 @@
-import { useState } from "react";
-import { InputSwitch } from "../../lib/inputswitch/InputSwitch";
-import { DocSectionText } from "../common/docsectiontext";
-import { DocSectionCode } from "../common/docsectioncode";
+import { useState } from 'react';
+import { InputSwitch } from '../../lib/inputswitch/InputSwitch';
+import { DocSectionText } from '../common/docsectiontext';
+import { DocSectionCode } from '../common/docsectioncode';
 
 export function BasicDoc(props) {
     const [checked, setChecked] = useState(false);
@@ -46,5 +46,5 @@ export default function BasicDemo() {
             </div>
             <DocSectionCode code={code} />
         </>
-    )
+    );
 }
diff --git a/components/doc/inputswitch/disableddoc.js b/components/doc/inputswitch/disableddoc.js
index 8f23deb32e..035d7e1dac 100644
--- a/components/doc/inputswitch/disableddoc.js
+++ b/components/doc/inputswitch/disableddoc.js
@@ -1,7 +1,7 @@
-import { useState } from "react";
-import { InputSwitch } from "../../lib/inputswitch/InputSwitch";
-import { DocSectionText } from "../common/docsectiontext";
-import { DocSectionCode } from "../common/docsectioncode";
+import { useState } from 'react';
+import { InputSwitch } from '../../lib/inputswitch/InputSwitch';
+import { DocSectionText } from '../common/docsectiontext';
+import { DocSectionCode } from '../common/docsectioncode';
 
 export function DisabledDoc(props) {
     const code = {
@@ -40,5 +40,5 @@ export default function DisabledDemo() {
             </div>
             <DocSectionCode code={code} />
         </>
-    )
+    );
 }
diff --git a/components/doc/inputswitch/importdoc.js b/components/doc/inputswitch/importdoc.js
index 84806bcdd4..470e5c5caa 100644
--- a/components/doc/inputswitch/importdoc.js
+++ b/components/doc/inputswitch/importdoc.js
@@ -1,5 +1,5 @@
-import { DocSectionText } from "../common/docsectiontext";
-import { DocSectionCode } from "../common/docsectioncode";
+import { DocSectionText } from '../common/docsectiontext';
+import { DocSectionCode } from '../common/docsectioncode';
 
 export function ImportDoc(props) {
     const code = {
@@ -13,5 +13,5 @@ import { InputSwitch } from 'primereact/inputswitch';
             <DocSectionText {...props}></DocSectionText>
             <DocSectionCode code={code} hideToggleCode hideCodeSandbox />
         </>
-    )
-}
\ No newline at end of file
+    );
+}
diff --git a/components/doc/inputswitch/preselectiondoc.js b/components/doc/inputswitch/preselectiondoc.js
index 9830998683..cf3879820e 100644
--- a/components/doc/inputswitch/preselectiondoc.js
+++ b/components/doc/inputswitch/preselectiondoc.js
@@ -1,7 +1,7 @@
-import { useState } from "react";
-import { InputSwitch } from "../../lib/inputswitch/InputSwitch";
-import { DocSectionText } from "../common/docsectiontext";
-import { DocSectionCode } from "../common/docsectioncode";
+import { useState } from 'react';
+import { InputSwitch } from '../../lib/inputswitch/InputSwitch';
+import { DocSectionText } from '../common/docsectiontext';
+import { DocSectionCode } from '../common/docsectioncode';
 
 export function PreselectionDoc(props) {
     const [checked, setChecked] = useState(true);
@@ -46,5 +46,5 @@ export default function PreselectionDemo() {
             </div>
             <DocSectionCode code={code} />
         </>
-    )
+    );
 }
diff --git a/components/doc/inputtext/apidoc.js b/components/doc/inputtext/apidoc.js
index 4d05dab42d..4dd8d3c78f 100644
--- a/components/doc/inputtext/apidoc.js
+++ b/components/doc/inputtext/apidoc.js
@@ -1,7 +1,7 @@
-import Link from "next/link";
-import { CodeHighlight } from "../common/codehighlight";
-import { DevelopmentSection } from "../common/developmentsection";
-import { DocSectionText } from "../common/docsectiontext";
+import Link from 'next/link';
+import { CodeHighlight } from '../common/codehighlight';
+import { DevelopmentSection } from '../common/developmentsection';
+import { DocSectionText } from '../common/docsectiontext';
 
 export function ApiDoc(props) {
     return (
@@ -73,8 +73,8 @@ export function ApiDoc(props) {
             <DevelopmentSection>
                 <h4>Screen Reader</h4>
                 <p>
-                    InputText component renders a native input element that implicitly includes any passed prop. Value to describe the component can either be provided via <i>label</i> tag combined with <i>id</i> prop or using{' '}
-                    <i>aria-labelledby</i>, <i>aria-label</i> props.
+                    InputText component renders a native input element that implicitly includes any passed prop. Value to describe the component can either be provided via <i>label</i> tag combined with <i>id</i> prop or using <i>aria-labelledby</i>,{' '}
+                    <i>aria-label</i> props.
                 </p>
                 <CodeHighlight>
                     {`
@@ -111,5 +111,5 @@ export function ApiDoc(props) {
             <h3>Dependencies</h3>
             <p>None.</p>
         </>
-    )
-}
\ No newline at end of file
+    );
+}
diff --git a/components/doc/inputtext/basicdoc.js b/components/doc/inputtext/basicdoc.js
index 98f966c529..e52849a08d 100644
--- a/components/doc/inputtext/basicdoc.js
+++ b/components/doc/inputtext/basicdoc.js
@@ -1,7 +1,7 @@
-import { useState } from "react";
-import { InputText } from "../../lib/inputtext/InputText";
-import { DocSectionText } from "../common/docsectiontext";
-import { DocSectionCode } from "../common/docsectioncode";
+import { useState } from 'react';
+import { InputText } from '../../lib/inputtext/InputText';
+import { DocSectionText } from '../common/docsectiontext';
+import { DocSectionCode } from '../common/docsectioncode';
 
 export function BasicDoc(props) {
     const [value, setValue] = useState('');
@@ -46,5 +46,5 @@ export default function BasicDemo() {
             </div>
             <DocSectionCode code={code} />
         </>
-    )
+    );
 }
diff --git a/components/doc/inputtext/disableddoc.js b/components/doc/inputtext/disableddoc.js
index 2060ad040b..f46d2c2233 100644
--- a/components/doc/inputtext/disableddoc.js
+++ b/components/doc/inputtext/disableddoc.js
@@ -1,6 +1,6 @@
-import { InputText } from "../../lib/inputtext/InputText";
-import { DocSectionText } from "../common/docsectiontext";
-import { DocSectionCode } from "../common/docsectioncode";
+import { InputText } from '../../lib/inputtext/InputText';
+import { DocSectionText } from '../common/docsectiontext';
+import { DocSectionCode } from '../common/docsectioncode';
 
 export function DisabledDoc(props) {
     const code = {
@@ -37,5 +37,5 @@ export default function DisabledDemo() {
             </div>
             <DocSectionCode code={code} />
         </>
-    )
+    );
 }
diff --git a/components/doc/inputtext/floatlabeldoc.js b/components/doc/inputtext/floatlabeldoc.js
index bacf4c6996..6929a9d77e 100644
--- a/components/doc/inputtext/floatlabeldoc.js
+++ b/components/doc/inputtext/floatlabeldoc.js
@@ -1,7 +1,7 @@
-import { useState } from "react";
-import { InputText } from "../../lib/inputtext/InputText";
-import { DocSectionText } from "../common/docsectiontext";
-import { DocSectionCode } from "../common/docsectioncode";
+import { useState } from 'react';
+import { InputText } from '../../lib/inputtext/InputText';
+import { DocSectionText } from '../common/docsectiontext';
+import { DocSectionCode } from '../common/docsectioncode';
 
 export function FloatLabelDoc(props) {
     const [value, setValue] = useState('');
@@ -58,5 +58,5 @@ export default function FloatLabelDemo() {
             </div>
             <DocSectionCode code={code} />
         </>
-    )
+    );
 }
diff --git a/components/doc/inputtext/helptextdoc.js b/components/doc/inputtext/helptextdoc.js
index 667bea3508..98df5f2111 100644
--- a/components/doc/inputtext/helptextdoc.js
+++ b/components/doc/inputtext/helptextdoc.js
@@ -1,6 +1,6 @@
-import { InputText } from "../../lib/inputtext/InputText";
-import { DocSectionCode } from "../common/docsectioncode";
-import { DocSectionText } from "../common/docsectiontext";
+import { InputText } from '../../lib/inputtext/InputText';
+import { DocSectionCode } from '../common/docsectioncode';
+import { DocSectionText } from '../common/docsectiontext';
 
 export function HelpTextDoc(props) {
     const code = {
@@ -58,16 +58,12 @@ export default function HelpTextDemo() {
             </DocSectionText>
             <div className="card flex justify-content-center">
                 <div className="flex flex-column gap-2">
-                    <label htmlFor="username">
-                        Username
-                    </label>
+                    <label htmlFor="username">Username</label>
                     <InputText id="username" aria-describedby="username-help" />
-                    <small id="username-help">
-                        Enter your username to reset your password.
-                    </small>
+                    <small id="username-help">Enter your username to reset your password.</small>
                 </div>
             </div>
             <DocSectionCode code={code} />
         </>
-    )
+    );
 }
diff --git a/components/doc/inputtext/iconsdoc.js b/components/doc/inputtext/iconsdoc.js
index 60aafb4ad6..bb5a7026fe 100644
--- a/components/doc/inputtext/iconsdoc.js
+++ b/components/doc/inputtext/iconsdoc.js
@@ -1,6 +1,6 @@
-import { InputText } from "../../lib/inputtext/InputText";
-import { DocSectionText } from "../common/docsectiontext";
-import { DocSectionCode } from "../common/docsectioncode";
+import { InputText } from '../../lib/inputtext/InputText';
+import { DocSectionText } from '../common/docsectiontext';
+import { DocSectionCode } from '../common/docsectioncode';
 
 export function IconsDoc(props) {
     const code = {
@@ -75,5 +75,5 @@ export default function IconsDemo() {
             </div>
             <DocSectionCode code={code} />
         </>
-    )
+    );
 }
diff --git a/components/doc/inputtext/importdoc.js b/components/doc/inputtext/importdoc.js
index b9381be21b..5568752e7d 100644
--- a/components/doc/inputtext/importdoc.js
+++ b/components/doc/inputtext/importdoc.js
@@ -1,5 +1,5 @@
-import { DocSectionText } from "../common/docsectiontext";
-import { DocSectionCode } from "../common/docsectioncode";
+import { DocSectionText } from '../common/docsectiontext';
+import { DocSectionCode } from '../common/docsectioncode';
 
 export function ImportDoc(props) {
     const code = {
@@ -13,5 +13,5 @@ import { InputText } from 'primereact/inputtext';
             <DocSectionText {...props}></DocSectionText>
             <DocSectionCode code={code} hideToggleCode hideCodeSandbox />
         </>
-    )
-}
\ No newline at end of file
+    );
+}
diff --git a/components/doc/inputtext/invaliddoc.js b/components/doc/inputtext/invaliddoc.js
index f085496b55..13656f9339 100644
--- a/components/doc/inputtext/invaliddoc.js
+++ b/components/doc/inputtext/invaliddoc.js
@@ -1,6 +1,6 @@
-import { InputText } from "../../lib/inputtext/InputText";
-import { DocSectionText } from "../common/docsectiontext";
-import { DocSectionCode } from "../common/docsectioncode";
+import { InputText } from '../../lib/inputtext/InputText';
+import { DocSectionText } from '../common/docsectiontext';
+import { DocSectionCode } from '../common/docsectioncode';
 
 export function InvalidDoc(props) {
     const code = {
@@ -50,7 +50,7 @@ export default function InvalidDemo() {
 }
         `
     };
-    
+
     return (
         <>
             <DocSectionText {...props}>
@@ -58,9 +58,7 @@ export default function InvalidDemo() {
             </DocSectionText>
             <div className="card flex justify-content-center">
                 <div className="flex flex-column gap-2">
-                    <label htmlFor="username">
-                        Username
-                    </label>
+                    <label htmlFor="username">Username</label>
                     <InputText id="username" aria-describedby="username-help" className="p-invalid" />
                     <small id="username-help" className="p-error">
                         Username is not available.
@@ -69,5 +67,5 @@ export default function InvalidDemo() {
             </div>
             <DocSectionCode code={code} />
         </>
-    )
+    );
 }
diff --git a/components/doc/inputtext/keyfilterdoc.js b/components/doc/inputtext/keyfilterdoc.js
index a32273bb06..bb1f47375d 100644
--- a/components/doc/inputtext/keyfilterdoc.js
+++ b/components/doc/inputtext/keyfilterdoc.js
@@ -1,7 +1,7 @@
-import Link from "next/link";
-import { InputText } from "../../lib/inputtext/InputText";
-import { DocSectionText } from "../common/docsectiontext";
-import { DocSectionCode } from "../common/docsectioncode";
+import Link from 'next/link';
+import { InputText } from '../../lib/inputtext/InputText';
+import { DocSectionText } from '../common/docsectiontext';
+import { DocSectionCode } from '../common/docsectioncode';
 
 export function KeyFilterDoc(props) {
     const code = {
@@ -38,5 +38,5 @@ export default function KeyFilterDemo() {
             </div>
             <DocSectionCode code={code} />
         </>
-    )
-}
\ No newline at end of file
+    );
+}
diff --git a/components/doc/inputtext/sizesdoc.js b/components/doc/inputtext/sizesdoc.js
index 283f3e69e6..0f90c38a7b 100644
--- a/components/doc/inputtext/sizesdoc.js
+++ b/components/doc/inputtext/sizesdoc.js
@@ -1,6 +1,6 @@
-import { InputText } from "../../lib/inputtext/InputText";
-import { DocSectionText } from "../common/docsectiontext";
-import { DocSectionCode } from "../common/docsectioncode";
+import { InputText } from '../../lib/inputtext/InputText';
+import { DocSectionText } from '../common/docsectiontext';
+import { DocSectionCode } from '../common/docsectioncode';
 
 export function SizesDoc(props) {
     const code = {
@@ -51,5 +51,5 @@ export default function SizesDemo() {
             </div>
             <DocSectionCode code={code} />
         </>
-    )
+    );
 }
diff --git a/components/doc/inputtextarea/apidoc.js b/components/doc/inputtextarea/apidoc.js
index a9625b9fe4..8f668217ab 100644
--- a/components/doc/inputtextarea/apidoc.js
+++ b/components/doc/inputtextarea/apidoc.js
@@ -1,7 +1,7 @@
-import Link from "next/link";
-import { CodeHighlight } from "../common/codehighlight";
-import { DevelopmentSection } from "../common/developmentsection";
-import { DocSectionText } from "../common/docsectiontext";
+import Link from 'next/link';
+import { CodeHighlight } from '../common/codehighlight';
+import { DevelopmentSection } from '../common/developmentsection';
+import { DocSectionText } from '../common/docsectiontext';
 
 export function ApiDoc(props) {
     return (
@@ -106,5 +106,5 @@ export function ApiDoc(props) {
             <h4>Dependencies</h4>
             <p>None.</p>
         </>
-    )
-}
\ No newline at end of file
+    );
+}
diff --git a/components/doc/inputtextarea/autoresizedoc.js b/components/doc/inputtextarea/autoresizedoc.js
index f34b9ba8e9..a3715e2fa4 100644
--- a/components/doc/inputtextarea/autoresizedoc.js
+++ b/components/doc/inputtextarea/autoresizedoc.js
@@ -1,7 +1,7 @@
-import { useState } from "react";
-import { InputTextarea } from "../../lib/inputtextarea/InputTextarea";
-import { DocSectionText } from "../common/docsectiontext";
-import { DocSectionCode } from "../common/docsectioncode";
+import { useState } from 'react';
+import { InputTextarea } from '../../lib/inputtextarea/InputTextarea';
+import { DocSectionText } from '../common/docsectiontext';
+import { DocSectionCode } from '../common/docsectioncode';
 
 export function AutoResizeDoc(props) {
     const [value, setValue] = useState('');
@@ -38,13 +38,11 @@ export default function AutoResizeDemo() {
 
     return (
         <>
-            <DocSectionText {...props}>
-                In auto resize mode, textarea grows instead of displaying a scrollbar.
-            </DocSectionText>
+            <DocSectionText {...props}>In auto resize mode, textarea grows instead of displaying a scrollbar.</DocSectionText>
             <div className="card flex justify-content-center">
                 <InputTextarea rows={5} cols={30} value={value} onChange={(e) => setValue(event.target.value)} autoResize />
             </div>
             <DocSectionCode code={code} />
         </>
-    )
+    );
 }
diff --git a/components/doc/inputtextarea/basicdoc.js b/components/doc/inputtextarea/basicdoc.js
index e8194cc307..30b874bc03 100644
--- a/components/doc/inputtextarea/basicdoc.js
+++ b/components/doc/inputtextarea/basicdoc.js
@@ -1,7 +1,7 @@
-import { useState } from "react";
-import { InputTextarea } from "../../lib/inputtextarea/InputTextarea";
-import { DocSectionText } from "../common/docsectiontext";
-import { DocSectionCode } from "../common/docsectioncode";
+import { useState } from 'react';
+import { InputTextarea } from '../../lib/inputtextarea/InputTextarea';
+import { DocSectionText } from '../common/docsectiontext';
+import { DocSectionCode } from '../common/docsectioncode';
 
 export function BasicDoc(props) {
     const [value, setValue] = useState('');
@@ -46,5 +46,5 @@ export default function BasicDemo() {
             </div>
             <DocSectionCode code={code} />
         </>
-    )
+    );
 }
diff --git a/components/doc/inputtextarea/disableddoc.js b/components/doc/inputtextarea/disableddoc.js
index 2eee966b85..74f19cf648 100644
--- a/components/doc/inputtextarea/disableddoc.js
+++ b/components/doc/inputtextarea/disableddoc.js
@@ -1,6 +1,6 @@
-import { InputTextarea } from "../../lib/inputtextarea/InputTextarea";
-import { DocSectionText } from "../common/docsectiontext";
-import { DocSectionCode } from "../common/docsectioncode";
+import { InputTextarea } from '../../lib/inputtextarea/InputTextarea';
+import { DocSectionText } from '../common/docsectiontext';
+import { DocSectionCode } from '../common/docsectioncode';
 
 export function DisabledDoc(props) {
     const code = {
@@ -33,9 +33,9 @@ export default function DisabledDemo() {
                 <i>disabled</i> prop prevents a textarea from being editable.
             </DocSectionText>
             <div className="card flex justify-content-center">
-                <InputTextarea disabled rows={5} cols={30} value="Disabled"/>
+                <InputTextarea disabled rows={5} cols={30} value="Disabled" />
             </div>
             <DocSectionCode code={code} />
         </>
-    )
+    );
 }
diff --git a/components/doc/inputtextarea/floatlabeldoc.js b/components/doc/inputtextarea/floatlabeldoc.js
index 0b064d71bf..bf4b83d6c5 100644
--- a/components/doc/inputtextarea/floatlabeldoc.js
+++ b/components/doc/inputtextarea/floatlabeldoc.js
@@ -1,7 +1,7 @@
-import { useState } from "react";
-import { InputTextarea } from "../../lib/inputtextarea/InputTextarea";
-import { DocSectionText } from "../common/docsectiontext";
-import { DocSectionCode } from "../common/docsectioncode";
+import { useState } from 'react';
+import { InputTextarea } from '../../lib/inputtextarea/InputTextarea';
+import { DocSectionText } from '../common/docsectiontext';
+import { DocSectionCode } from '../common/docsectioncode';
 
 export function FloatLabelDoc(props) {
     const [value, setValue] = useState('');
@@ -62,5 +62,5 @@ export default function FloatLabelDemo() {
             </div>
             <DocSectionCode code={code} />
         </>
-    )
+    );
 }
diff --git a/components/doc/inputtextarea/importdoc.js b/components/doc/inputtextarea/importdoc.js
index a29d1fd26e..a43a3e9300 100644
--- a/components/doc/inputtextarea/importdoc.js
+++ b/components/doc/inputtextarea/importdoc.js
@@ -1,5 +1,5 @@
-import { DocSectionText } from "../common/docsectiontext";
-import { DocSectionCode } from "../common/docsectioncode";
+import { DocSectionText } from '../common/docsectiontext';
+import { DocSectionCode } from '../common/docsectioncode';
 
 export function ImportDoc(props) {
     const code = {
@@ -13,5 +13,5 @@ import { InputTextarea } from 'primereact/inputtextarea';
             <DocSectionText {...props}></DocSectionText>
             <DocSectionCode code={code} hideToggleCode hideCodeSandbox />
         </>
-    )
-}
\ No newline at end of file
+    );
+}
diff --git a/components/doc/radiobutton/apidoc.js b/components/doc/radiobutton/apidoc.js
index 4c13592071..a3aed710d6 100644
--- a/components/doc/radiobutton/apidoc.js
+++ b/components/doc/radiobutton/apidoc.js
@@ -1,7 +1,7 @@
-import Link from "next/link";
-import { CodeHighlight } from "../common/codehighlight";
-import { DevelopmentSection } from "../common/developmentsection";
-import { DocSectionText } from "../common/docsectiontext";
+import Link from 'next/link';
+import { CodeHighlight } from '../common/codehighlight';
+import { DevelopmentSection } from '../common/developmentsection';
+import { DocSectionText } from '../common/docsectiontext';
 
 export function ApiDoc(props) {
     return (
@@ -151,8 +151,8 @@ export function ApiDoc(props) {
             <DevelopmentSection>
                 <h4>Screen Reader</h4>
                 <p>
-                    RadioButton component uses a hidden native radio button element internally that is only visible to screen readers. Value to describe the component can either be provided via <i>label</i> tag combined with <i>inputId</i>{' '}
-                    prop or using <i>aria-labelledby</i>, <i>aria-label</i> props.
+                    RadioButton component uses a hidden native radio button element internally that is only visible to screen readers. Value to describe the component can either be provided via <i>label</i> tag combined with <i>inputId</i> prop or
+                    using <i>aria-labelledby</i>, <i>aria-label</i> props.
                 </p>
                 <CodeHighlight>
                     {`
@@ -212,5 +212,5 @@ export function ApiDoc(props) {
             <h4>Dependencies</h4>
             <p>None.</p>
         </>
-    )
-}
\ No newline at end of file
+    );
+}
diff --git a/components/doc/radiobutton/disableddoc.js b/components/doc/radiobutton/disableddoc.js
index bff9dbbcc2..c100826665 100644
--- a/components/doc/radiobutton/disableddoc.js
+++ b/components/doc/radiobutton/disableddoc.js
@@ -1,6 +1,6 @@
-import { RadioButton } from "../../lib/radiobutton/RadioButton";
-import { DocSectionText } from "../common/docsectiontext";
-import { DocSectionCode } from "../common/docsectioncode";
+import { RadioButton } from '../../lib/radiobutton/RadioButton';
+import { DocSectionText } from '../common/docsectiontext';
+import { DocSectionCode } from '../common/docsectioncode';
 
 export function DisabledDoc(props) {
     const code = {
@@ -37,5 +37,5 @@ export default function DisabledDemo() {
             </div>
             <DocSectionCode code={code} />
         </>
-    )
+    );
 }
diff --git a/components/doc/radiobutton/dynamicdoc.js b/components/doc/radiobutton/dynamicdoc.js
index 240b2e395a..0566f93ac5 100644
--- a/components/doc/radiobutton/dynamicdoc.js
+++ b/components/doc/radiobutton/dynamicdoc.js
@@ -1,7 +1,7 @@
-import { useState } from "react";
-import { RadioButton } from "../../lib/radiobutton/RadioButton";
-import { DocSectionText } from "../common/docsectiontext";
-import { DocSectionCode } from "../common/docsectioncode";
+import { useState } from 'react';
+import { RadioButton } from '../../lib/radiobutton/RadioButton';
+import { DocSectionText } from '../common/docsectiontext';
+import { DocSectionCode } from '../common/docsectioncode';
 
 export function DynamicDoc(props) {
     const categories = [
@@ -88,16 +88,16 @@ export default function DynamicDemo() {
 
     return (
         <>
-            <DocSectionText {...props}>
-                RadioButtons can be generated using a list of values.
-            </DocSectionText>
+            <DocSectionText {...props}>RadioButtons can be generated using a list of values.</DocSectionText>
             <div className="card flex justify-content-center">
                 <div className="flex flex-column gap-3">
                     {categories.map((category) => {
                         return (
                             <div key={category.key} className="flex align-items-center">
                                 <RadioButton inputId={category.key} name="category" value={category} onChange={(e) => setSelectedCategory(e.value)} checked={selectedCategory.key === category.key} />
-                                <label htmlFor={category.key} className="ml-2">{category.name}</label>
+                                <label htmlFor={category.key} className="ml-2">
+                                    {category.name}
+                                </label>
                             </div>
                         );
                     })}
@@ -105,5 +105,5 @@ export default function DynamicDemo() {
             </div>
             <DocSectionCode code={code} />
         </>
-    )
+    );
 }
diff --git a/components/doc/radiobutton/groupdoc.js b/components/doc/radiobutton/groupdoc.js
index 5708e5548d..874481ad61 100644
--- a/components/doc/radiobutton/groupdoc.js
+++ b/components/doc/radiobutton/groupdoc.js
@@ -1,7 +1,7 @@
-import { useState } from "react";
-import { RadioButton } from "../../lib/radiobutton/RadioButton";
-import { DocSectionText } from "../common/docsectiontext";
-import { DocSectionCode } from "../common/docsectioncode";
+import { useState } from 'react';
+import { RadioButton } from '../../lib/radiobutton/RadioButton';
+import { DocSectionText } from '../common/docsectiontext';
+import { DocSectionCode } from '../common/docsectioncode';
 
 export function GroupDoc(props) {
     const [ingredient, setIngredient] = useState('');
@@ -96,23 +96,31 @@ export default function GroupDemo() {
                 <div className="flex flex-wrap gap-3">
                     <div className="flex align-items-center">
                         <RadioButton inputId="ingredient1" name="pizza" value="Cheese" onChange={(e) => setIngredient(e.value)} checked={ingredient === 'Cheese'} />
-                        <label htmlFor="ingredient1" className="ml-2">Cheese</label>
+                        <label htmlFor="ingredient1" className="ml-2">
+                            Cheese
+                        </label>
                     </div>
                     <div className="flex align-items-center">
                         <RadioButton inputId="ingredient2" name="pizza" value="Mushroom" onChange={(e) => setIngredient(e.value)} checked={ingredient === 'Mushroom'} />
-                        <label htmlFor="ingredient2" className="ml-2">Mushroom</label>
+                        <label htmlFor="ingredient2" className="ml-2">
+                            Mushroom
+                        </label>
                     </div>
                     <div className="flex align-items-center">
                         <RadioButton inputId="ingredient3" name="pizza" value="Pepper" onChange={(e) => setIngredient(e.value)} checked={ingredient === 'Pepper'} />
-                        <label htmlFor="ingredient3" className="ml-2">Pepper</label>
+                        <label htmlFor="ingredient3" className="ml-2">
+                            Pepper
+                        </label>
                     </div>
                     <div className="flex align-items-center">
                         <RadioButton inputId="ingredient4" name="pizza" value="Onion" onChange={(e) => setIngredient(e.value)} checked={ingredient === 'Onion'} />
-                        <label htmlFor="ingredient4" className="ml-2">Onion</label>
+                        <label htmlFor="ingredient4" className="ml-2">
+                            Onion
+                        </label>
                     </div>
                 </div>
             </div>
             <DocSectionCode code={code} />
         </>
-    )
+    );
 }
diff --git a/components/doc/radiobutton/importdoc.js b/components/doc/radiobutton/importdoc.js
index c2cdaec58f..90e7aff9c2 100644
--- a/components/doc/radiobutton/importdoc.js
+++ b/components/doc/radiobutton/importdoc.js
@@ -1,5 +1,5 @@
-import { DocSectionText } from "../common/docsectiontext";
-import { DocSectionCode } from "../common/docsectioncode";
+import { DocSectionText } from '../common/docsectiontext';
+import { DocSectionCode } from '../common/docsectioncode';
 
 export function ImportDoc(props) {
     const code = {
@@ -13,5 +13,5 @@ import { RadioButton } from 'primereact/radiobutton';
             <DocSectionText {...props}></DocSectionText>
             <DocSectionCode code={code} hideToggleCode hideCodeSandbox />
         </>
-    )
-}
\ No newline at end of file
+    );
+}
diff --git a/components/doc/slider/apidoc.js b/components/doc/slider/apidoc.js
index 9dc255389d..662944cec5 100644
--- a/components/doc/slider/apidoc.js
+++ b/components/doc/slider/apidoc.js
@@ -1,7 +1,7 @@
-import Link from "next/link";
-import { CodeHighlight } from "../common/codehighlight";
-import { DevelopmentSection } from "../common/developmentsection";
-import { DocSectionText } from "../common/docsectiontext";
+import Link from 'next/link';
+import { CodeHighlight } from '../common/codehighlight';
+import { DevelopmentSection } from '../common/developmentsection';
+import { DocSectionText } from '../common/docsectiontext';
 
 export function ApiDoc(props) {
     return (
@@ -156,8 +156,8 @@ export function ApiDoc(props) {
             <DevelopmentSection>
                 <h4>Screen Reader</h4>
                 <p>
-                    Slider element component uses <i>slider</i> role on the handle in addition to the <i>aria-orientation</i>, <i>aria-valuemin</i>, <i>aria-valuemax</i> and <i>aria-valuenow</i> attributes. Value to describe the component can
-                    be defined using
+                    Slider element component uses <i>slider</i> role on the handle in addition to the <i>aria-orientation</i>, <i>aria-valuemin</i>, <i>aria-valuemax</i> and <i>aria-valuenow</i> attributes. Value to describe the component can be
+                    defined using
                     <i>aria-labelledby</i> and <i>aria-label</i> props.
                 </p>
                 <CodeHighlight>
@@ -230,9 +230,9 @@ export function ApiDoc(props) {
                     </table>
                 </div>
             </DevelopmentSection>
-            
+
             <h4>Dependencies</h4>
             <p>None.</p>
         </>
-    )
-}
\ No newline at end of file
+    );
+}
diff --git a/components/doc/slider/basicdoc.js b/components/doc/slider/basicdoc.js
index 421663a645..753b209d3e 100644
--- a/components/doc/slider/basicdoc.js
+++ b/components/doc/slider/basicdoc.js
@@ -1,7 +1,7 @@
-import { useState } from "react";
-import { Slider } from "../../lib/slider/Slider";
-import { DocSectionText } from "../common/docsectiontext";
-import { DocSectionCode } from "../common/docsectioncode";
+import { useState } from 'react';
+import { Slider } from '../../lib/slider/Slider';
+import { DocSectionText } from '../common/docsectiontext';
+import { DocSectionCode } from '../common/docsectioncode';
 
 export function BasicDoc(props) {
     const [value, setValue] = useState(null);
@@ -46,5 +46,5 @@ export default function BasicDemo() {
             </div>
             <DocSectionCode code={code} />
         </>
-    )
+    );
 }
diff --git a/components/doc/slider/importdoc.js b/components/doc/slider/importdoc.js
index 6e4a3e0610..7dac620323 100644
--- a/components/doc/slider/importdoc.js
+++ b/components/doc/slider/importdoc.js
@@ -1,5 +1,5 @@
-import { DocSectionText } from "../common/docsectiontext";
-import { DocSectionCode } from "../common/docsectioncode";
+import { DocSectionText } from '../common/docsectiontext';
+import { DocSectionCode } from '../common/docsectioncode';
 
 export function ImportDoc(props) {
     const code = {
@@ -13,5 +13,5 @@ import { Slider } from 'primereact/slider';
             <DocSectionText {...props}></DocSectionText>
             <DocSectionCode code={code} hideToggleCode hideCodeSandbox />
         </>
-    )
-}
\ No newline at end of file
+    );
+}
diff --git a/components/doc/slider/inputdoc.js b/components/doc/slider/inputdoc.js
index 0fd794826e..ae9645fc3a 100644
--- a/components/doc/slider/inputdoc.js
+++ b/components/doc/slider/inputdoc.js
@@ -1,8 +1,8 @@
-import { useState } from "react";
-import { Slider } from "../../lib/slider/Slider";
-import { InputText } from "../../lib/inputtext/InputText";
-import { DocSectionText } from "../common/docsectiontext";
-import { DocSectionCode } from "../common/docsectioncode";
+import { useState } from 'react';
+import { Slider } from '../../lib/slider/Slider';
+import { InputText } from '../../lib/inputtext/InputText';
+import { DocSectionText } from '../common/docsectiontext';
+import { DocSectionCode } from '../common/docsectioncode';
 
 export function InputDoc(props) {
     const [value, setValue] = useState(50);
@@ -50,9 +50,7 @@ export default function InputDemo() {
 
     return (
         <>
-            <DocSectionText {...props}>
-                Slider can be connected to an input field using two-way binding.
-            </DocSectionText>
+            <DocSectionText {...props}>Slider can be connected to an input field using two-way binding.</DocSectionText>
             <div className="card flex justify-content-center">
                 <div className="w-14rem">
                     <InputText value={value} onChange={(e) => setValue(e.target.value)} className="w-full" />
@@ -61,5 +59,5 @@ export default function InputDemo() {
             </div>
             <DocSectionCode code={code} />
         </>
-    )
+    );
 }
diff --git a/components/doc/slider/rangedoc.js b/components/doc/slider/rangedoc.js
index a7c6d51ad0..fd8e3de0f5 100644
--- a/components/doc/slider/rangedoc.js
+++ b/components/doc/slider/rangedoc.js
@@ -1,10 +1,10 @@
-import { useState } from "react";
-import { Slider } from "../../lib/slider/Slider";
-import { DocSectionText } from "../common/docsectiontext";
-import { DocSectionCode } from "../common/docsectioncode";
+import { useState } from 'react';
+import { Slider } from '../../lib/slider/Slider';
+import { DocSectionText } from '../common/docsectiontext';
+import { DocSectionCode } from '../common/docsectioncode';
 
 export function RangeDoc(props) {
-    const [value, setValue] = useState([20,80]);
+    const [value, setValue] = useState([20, 80]);
 
     const code = {
         basic: `
@@ -46,5 +46,5 @@ export default function RangeDemo() {
             </div>
             <DocSectionCode code={code} />
         </>
-    )
+    );
 }
diff --git a/components/doc/slider/stepdoc.js b/components/doc/slider/stepdoc.js
index 346565c85d..1a870882c3 100644
--- a/components/doc/slider/stepdoc.js
+++ b/components/doc/slider/stepdoc.js
@@ -1,7 +1,7 @@
-import { useState } from "react";
-import { Slider } from "../../lib/slider/Slider";
-import { DocSectionText } from "../common/docsectiontext";
-import { DocSectionCode } from "../common/docsectioncode";
+import { useState } from 'react';
+import { Slider } from '../../lib/slider/Slider';
+import { DocSectionText } from '../common/docsectiontext';
+import { DocSectionCode } from '../common/docsectioncode';
 
 export function StepDoc(props) {
     const [value, setValue] = useState(20);
@@ -46,5 +46,5 @@ export default function StepDemo() {
             </div>
             <DocSectionCode code={code} />
         </>
-    )
+    );
 }
diff --git a/components/doc/slider/verticaldoc.js b/components/doc/slider/verticaldoc.js
index 7abfdea882..c7662200c0 100644
--- a/components/doc/slider/verticaldoc.js
+++ b/components/doc/slider/verticaldoc.js
@@ -1,7 +1,7 @@
-import { useState } from "react";
-import { Slider } from "../../lib/slider/Slider";
-import { DocSectionText } from "../common/docsectiontext";
-import { DocSectionCode } from "../common/docsectioncode";
+import { useState } from 'react';
+import { Slider } from '../../lib/slider/Slider';
+import { DocSectionText } from '../common/docsectiontext';
+import { DocSectionCode } from '../common/docsectioncode';
 
 export function VerticalDoc(props) {
     const [value, setValue] = useState(50);
@@ -46,5 +46,5 @@ export default function VerticalDemo() {
             </div>
             <DocSectionCode code={code} />
         </>
-    )
+    );
 }
diff --git a/pages/inputtext/index.js b/pages/inputtext/index.js
index e4e733cae1..2f880eaa84 100644
--- a/pages/inputtext/index.js
+++ b/pages/inputtext/index.js
@@ -33,7 +33,7 @@ const InputTextDemo = () => {
         {
             id: 'icons',
             label: 'Icons',
-            component: IconsDoc 
+            component: IconsDoc
         },
         {
             id: 'keyfilter',
@@ -74,7 +74,7 @@ const InputTextDemo = () => {
                 <title>React InputText Component</title>
                 <meta name="description" content="InputText is an extension to standard input element with theming and keyfiltering." />
             </Head>
-            
+
             <div className="content-section introduction">
                 <div className="feature-intro">
                     <h1>InputText</h1>