diff --git a/components/doc/autocomplete/filleddoc.js b/components/doc/autocomplete/filleddoc.js
new file mode 100644
index 0000000000..6de79a0a22
--- /dev/null
+++ b/components/doc/autocomplete/filleddoc.js
@@ -0,0 +1,71 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { AutoComplete } from '@/components/lib/autocomplete/AutoComplete';
+import { useState } from 'react';
+
+export function FilledDoc(props) {
+    const [value, setValue] = useState('');
+    const [items, setItems] = useState([]);
+
+    const search = (event) => {
+        setItems([...Array(10).keys()].map((item) => event.query + '-' + item));
+    };
+
+    const code = {
+        basic: `
+<AutoComplete value={value} suggestions={items} completeMethod={search} onChange={(e) => setValue(e.value)} variant="filled" />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { AutoComplete } from "primereact/autocomplete";
+
+export default function FilledDemo() {
+    const [value, setValue] = useState('');
+    const [items, setItems] = useState([]);
+
+    const search = (event) => {
+        setItems([...Array(10).keys()].map(item => event.query + '-' + item));
+    }
+
+    return (
+        <div className="card flex justify-content-center">
+            <AutoComplete value={value} suggestions={items} completeMethod={search} onChange={(e) => setValue(e.value)} variant="filled" />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { AutoComplete, AutoCompleteCompleteEvent } from "primereact/autocomplete";
+
+export default function FilledDemo() {
+    const [value, setValue] = useState<string>('');
+    const [items, setItems] = useState<string[]>([]);
+
+    const search = (event: AutoCompleteCompleteEvent) => {
+        setItems([...Array(10).keys()].map(item => event.query + '-' + item));
+    }
+
+    return (
+        <div className="card flex justify-content-center">
+            <AutoComplete value={value} suggestions={items} completeMethod={search} onChange={(e) => setValue(e.value)} variant="filled" />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <AutoComplete value={value} suggestions={items} completeMethod={search} onChange={(e) => setValue(e.value)} variant="filled" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/autocomplete/form/formikdoc.js b/components/doc/autocomplete/form/formikdoc.js
deleted file mode 100644
index c06936b3bc..0000000000
--- a/components/doc/autocomplete/form/formikdoc.js
+++ /dev/null
@@ -1,234 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { AutoComplete } from '@/components/lib/autocomplete/AutoComplete';
-import { Button } from '@/components/lib/button/Button';
-import { Toast } from '@/components/lib/toast/Toast';
-import { classNames } from '@/components/lib/utils/Utils';
-import { useFormik } from 'formik';
-import { useRef, useState } from 'react';
-
-export function FormikDoc(props) {
-    const toast = useRef(null);
-    const [items, setItems] = useState([]);
-
-    const show = () => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: formik.values.item });
-    };
-
-    const search = (event) => {
-        setItems([...Array(10).keys()].map((item) => event.query + '-' + item));
-    };
-
-    const formik = useFormik({
-        initialValues: {
-            item: ''
-        },
-        validate: (data) => {
-            let errors = {};
-
-            if (!data.item) {
-                errors.item = 'Value is required.';
-            }
-
-            return errors;
-        },
-        onSubmit: (data) => {
-            data.item && show(data);
-            formik.resetForm();
-        }
-    });
-
-    const isFormFieldInvalid = (name) => !!(formik.touched[name] && formik.errors[name]);
-
-    const getFormErrorMessage = (name) => {
-        return isFormFieldInvalid(name) ? <small className="p-error">{formik.errors[name]}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    const code = {
-        basic: `
-<form onSubmit={formik.handleSubmit} className="flex flex-column gap-2">
-    <div className="mb-2">Value</div>
-    <Toast ref={toast} />
-    <AutoComplete
-        id="item"
-        name="item"
-        value={formik.values.item}
-        suggestions={items}
-        completeMethod={search}
-        onChange={(e) => {
-            formik.setFieldValue('item', e.value);
-        }}
-    />
-    {getFormErrorMessage('item')}
-    <Button type="submit" label="Submit" className="mt-2" />
-</form>
-        `,
-        javascript: `
-import React, {useState, useRef } from "react";
-import { useFormik } from 'formik';
-import { Button } from 'primereact/button';
-import { classNames } from 'primereact/utils';
-import { AutoComplete } from "primereact/autocomplete";
-import { Toast } from 'primereact/toast';
-
-export default function FormikDoc() {
-    const toast = useRef(null);
-    const [items, setItems] = useState([]);
-
-    const show = () => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: formik.values.item });
-    };
-
-    const search = (event) => {
-        setItems([...Array(10).keys()].map((item) => event.query + '-' + item));
-    };
-
-    const formik = useFormik({
-        initialValues: {
-            item: ''
-        },
-        validate: (data) => {
-            let errors = {};
-
-            if (!data.item) {
-                errors.item = 'Value is required.';
-            }
-
-            return errors;
-        },
-        onSubmit: (data) => {
-            data.item && show(data);
-            formik.resetForm();
-        }
-    });
-
-    const isFormFieldInvalid = (name) => !!(formik.touched[name] && formik.errors[name]);
-
-    const getFormErrorMessage = (name) => {
-        return isFormFieldInvalid(name) ? <small className="p-error">{formik.errors[name]}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    return (
-        <div className="card flex justify-content-center">
-            <form onSubmit={formik.handleSubmit} className="flex flex-column gap-2">
-                <label htmlFor="ac_item">Value</label>
-                <Toast ref={toast} />
-                <AutoComplete
-                    inputId="ac_item"
-                    name="item"
-                    value={formik.values.item}
-                    suggestions={items}
-                    completeMethod={search}
-                    className={classNames({ 'p-invalid': isFormFieldInvalid('item') })}
-                    onChange={(e) => {
-                        formik.setFieldValue('item', e.value);
-                    }}
-                />
-                {getFormErrorMessage('item')}
-                <Button type="submit" label="Submit" />
-            </form>
-        </div>
-    )
-}
-        `,
-        typescript: `
-import React, {useState, useRef } from "react";
-import { useFormik } from 'formik';
-import { Button } from 'primereact/button';
-import { classNames } from 'primereact/utils';
-import { AutoComplete } from "primereact/autocomplete";
-import { Toast } from 'primereact/toast';
-
-export default function FormikDoc() {
-    const toast = useRef(null);
-    const [items, setItems] = useState([]);
-
-    const show = () => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: formik.values.item });
-    };
-
-    const search = (event) => {
-        setItems([...Array(10).keys()].map((item) => event.query + '-' + item));
-    };
-
-    const formik = useFormik({
-        initialValues: {
-            item: ''
-        },
-        validate: (data) => {
-            let errors = {};
-
-            if (!data.item) {
-                errors.item = 'Value is required.';
-            }
-
-            return errors;
-        },
-        onSubmit: (data) => {
-            data.item && show(data);
-            formik.resetForm();
-        }
-    });
-
-    const isFormFieldInvalid = (name) => !!(formik.touched[name] && formik.errors[name]);
-
-    const getFormErrorMessage = (name) => {
-        return isFormFieldInvalid(name) ? <small className="p-error">{formik.errors[name]}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    return (
-        <div className="card flex justify-content-center">
-            <form onSubmit={formik.handleSubmit} className="flex flex-column gap-2">
-                <label htmlFor="ac_item">Value</label>
-                <Toast ref={toast} />
-                <AutoComplete
-                    inputId="ac_item"
-                    name="item"
-                    value={formik.values.item}
-                    suggestions={items}
-                    completeMethod={search}
-                    className={classNames({ 'p-invalid': isFormFieldInvalid('item') })}
-                    onChange={(e) => {
-                        formik.setFieldValue('item', e.value);
-                    }}
-                />
-                {getFormErrorMessage('item')}
-                <Button type="submit" label="Submit" />
-            </form>
-        </div>
-    )
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props}>
-                <p>
-                    <a href="https://formik.org/">Formik</a> is a popular library for handling forms in React.
-                </p>
-            </DocSectionText>
-            <div className="card flex justify-content-center">
-                <form onSubmit={formik.handleSubmit} className="flex flex-column gap-2">
-                    <label htmlFor="ac_item">Value</label>
-                    <Toast ref={toast} />
-                    <AutoComplete
-                        inputId="ac_item"
-                        name="item"
-                        value={formik.values.item}
-                        suggestions={items}
-                        completeMethod={search}
-                        className={classNames({ 'p-invalid': isFormFieldInvalid('item') })}
-                        onChange={(e) => {
-                            formik.setFieldValue('item', e.value);
-                        }}
-                    />
-                    {getFormErrorMessage('item')}
-                    <Button type="submit" label="Submit" />
-                </form>
-            </div>
-
-            <DocSectionCode code={code} dependencies={{ formik: '^2.2.6' }} />
-        </>
-    );
-}
diff --git a/components/doc/autocomplete/form/hookformdoc.js b/components/doc/autocomplete/form/hookformdoc.js
deleted file mode 100644
index aa4fb17df1..0000000000
--- a/components/doc/autocomplete/form/hookformdoc.js
+++ /dev/null
@@ -1,197 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { AutoComplete } from '@/components/lib/autocomplete/AutoComplete';
-import { Button } from '@/components/lib/button/Button';
-import { Toast } from '@/components/lib/toast/Toast';
-import { classNames } from '@/components/lib/utils/Utils';
-import { useRef, useState } from 'react';
-import { Controller, useForm } from 'react-hook-form';
-
-export function HookFormDoc(props) {
-    const toast = useRef(null);
-    const [items, setItems] = useState([]);
-    const defaultValues = { value: '' };
-    const form = useForm({ defaultValues });
-    const errors = form.formState.errors;
-
-    const show = () => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: form.getValues('value') });
-    };
-
-    const search = (event) => {
-        setItems([...Array(10).keys()].map((item) => event.query + '-' + item));
-    };
-
-    const onSubmit = (data) => {
-        data.value && show();
-        form.reset();
-    };
-
-    const getFormErrorMessage = (name) => {
-        return errors[name] ? <small className="p-error">{errors[name].message}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    const code = {
-        basic: `
-<form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-column gap-2">
-    <Toast ref={toast} />
-    <Controller
-        name="value"
-        control={form.control}
-        rules={{ required: 'Value is required.' }}
-        render={({ field, fieldState }) => (
-            <>
-                <label htmlFor={field.name}>
-                    Value
-                </label>
-                <AutoComplete inputId={field.name} value={field.value} onChange={field.onChange} inputRef={field.ref} suggestions={items} completeMethod={search} className={classNames({ 'p-invalid': fieldState.error })} />
-                {getFormErrorMessage(field.name)}
-            </>
-        )}
-    />
-    <Button label="Submit" type="submit" icon="pi pi-check" />
-</form>
-        `,
-        javascript: `
-import React, {useRef, useState } from 'react';
-import { Controller, useForm } from 'react-hook-form';
-import { Button } from 'primereact/button';
-import { classNames } from 'primereact/utils';
-import { AutoComplete } from "primereact/autocomplete";
-import { Toast } from "primereact/toast";
-
-export default function HookFormDoc() {
-    const toast = useRef(null);
-    const [items, setItems] = useState([]);
-    const defaultValues = { value: '' };
-    const form = useForm({ defaultValues });
-    const errors = form.formState.errors;
-
-    const show = () => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: form.getValues('value') });
-    };
-
-    const search = (event) => {
-        setItems([...Array(10).keys()].map((item) => event.query + '-' + item));
-    };
-
-    const onSubmit = (data) => {
-        data.value && show();
-        form.reset();
-    };
-
-    const getFormErrorMessage = (name) => {
-        return errors[name] ? <small className="p-error">{errors[name].message}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    return (
-        <div className="card flex justify-content-center">
-            <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-column gap-2">
-                <Toast ref={toast} />
-                <Controller
-                    name="value"
-                    control={form.control}
-                    rules={{ required: 'Value is required.' }}
-                    render={({ field, fieldState }) => (
-                        <>
-                            <label htmlFor={field.name}>
-                                Value
-                            </label>
-                            <AutoComplete inputId={field.name} value={field.value} onChange={field.onChange} inputRef={field.ref} suggestions={items} completeMethod={search} className={classNames({ 'p-invalid': fieldState.error })} />
-                            {getFormErrorMessage(field.name)}
-                        </>
-                    )}
-                />
-                <Button label="Submit" type="submit" icon="pi pi-check" />
-            </form>
-        </div>
-    )
-}
-        `,
-        typescript: `
-import React, {useRef, useState } from 'react';
-import { Controller, useForm } from 'react-hook-form';
-import { Button } from 'primereact/button';
-import { classNames } from 'primereact/utils';
-import { AutoComplete } from "primereact/autocomplete";
-import { Toast } from "primereact/toast";
-
-export default function HookFormDoc() {
-    const toast = useRef(null);
-    const [items, setItems] = useState([]);
-    const defaultValues = { value: '' };
-    const form = useForm({ defaultValues });
-    const errors = form.formState.errors;
-
-    const show = () => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: form.getValues('value') });
-    };
-
-    const search = (event) => {
-        setItems([...Array(10).keys()].map((item) => event.query + '-' + item));
-    };
-
-    const onSubmit = (data) => {
-        data.value && show();
-        form.reset();
-    };
-
-    const getFormErrorMessage = (name) => {
-        return errors[name] ? <small className="p-error">{errors[name].message}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    return (
-        <div className="card flex justify-content-center">
-            <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-column gap-2">
-                <Toast ref={toast} />
-                <Controller
-                    name="value"
-                    control={form.control}
-                    rules={{ required: 'Value is required.' }}
-                    render={({ field, fieldState }) => (
-                        <>
-                            <label htmlFor={field.name}>
-                                Value
-                            </label>
-                            <AutoComplete inputId={field.name} value={field.value} onChange={field.onChange} inputRef={field.ref} suggestions={items} completeMethod={search} className={classNames({ 'p-invalid': fieldState.error })} />
-                            {getFormErrorMessage(field.name)}
-                        </>
-                    )}
-                />
-                <Button label="Submit" type="submit" icon="pi pi-check" />
-            </form>
-        </div>
-    )
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props}>
-                <p>
-                    <a href="https://react-hook-form.com/">React Hook Form</a> is another popular React library to handle forms.
-                </p>
-            </DocSectionText>
-            <div className="card flex justify-content-center">
-                <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-column gap-2">
-                    <Toast ref={toast} />
-                    <Controller
-                        name="value"
-                        control={form.control}
-                        rules={{ required: 'Value is required.' }}
-                        render={({ field, fieldState }) => (
-                            <>
-                                <label htmlFor={field.name}>Value</label>
-                                <AutoComplete inputId={field.name} value={field.value} onChange={field.onChange} inputRef={field.ref} suggestions={items} completeMethod={search} className={classNames({ 'p-invalid': fieldState.error })} />
-                                {getFormErrorMessage(field.name)}
-                            </>
-                        )}
-                    />
-                    <Button label="Submit" type="submit" icon="pi pi-check" />
-                </form>
-            </div>
-            <DocSectionCode code={code} dependencies={{ 'react-hook-form': '^7.39.4' }} />
-        </>
-    );
-}
diff --git a/components/doc/autocomplete/invaliddoc.js b/components/doc/autocomplete/invaliddoc.js
index 8bda7ff412..c374c7828c 100644
--- a/components/doc/autocomplete/invaliddoc.js
+++ b/components/doc/autocomplete/invaliddoc.js
@@ -13,7 +13,7 @@ export function InvalidDoc(props) {
 
     const code = {
         basic: `
-<AutoComplete value={value} suggestions={items} completeMethod={search} onChange={(e) => setValue(e.value)} className="p-invalid" />
+<AutoComplete invalid={value.length < 1} value={value} suggestions={items} completeMethod={search} onChange={(e) => setValue(e.value)} />
         `,
         javascript: `
 import React, { useState } from "react";
@@ -29,7 +29,7 @@ export default function InvalidDemo() {
 
     return (
         <div className="card flex justify-content-center">
-            <AutoComplete value={value} suggestions={items} completeMethod={search} onChange={(e) => setValue(e.value)} className="p-invalid" />
+            <AutoComplete invalid={value.length < 1} value={value} suggestions={items} completeMethod={search} onChange={(e) => setValue(e.value)} />
         </div>
     )
 }
@@ -48,7 +48,7 @@ export default function InvalidDemo() {
 
     return (
         <div className="card flex justify-content-center">
-            <AutoComplete value={value} suggestions={items} completeMethod={search} onChange={(e) => setValue(e.value)} className="p-invalid" />
+            <AutoComplete invalid={value.length < 1} value={value} suggestions={items} completeMethod={search} onChange={(e) => setValue(e.value)} />
         </div>
     )
 }
@@ -59,11 +59,11 @@ export default function InvalidDemo() {
         <>
             <DocSectionText {...props}>
                 <p>
-                    Invalid state style is added using the <i>p-invalid</i> class to indicate a failed validation.
+                    Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.
                 </p>
             </DocSectionText>
             <div className="card flex justify-content-center">
-                <AutoComplete value={value} suggestions={items} completeMethod={search} onChange={(e) => setValue(e.value)} className="p-invalid" />
+                <AutoComplete invalid={value.length < 1} value={value} suggestions={items} completeMethod={search} onChange={(e) => setValue(e.value)} />
             </div>
             <DocSectionCode code={code} />
         </>
diff --git a/components/doc/calendar/filleddoc.js b/components/doc/calendar/filleddoc.js
new file mode 100644
index 0000000000..bc40cba1ea
--- /dev/null
+++ b/components/doc/calendar/filleddoc.js
@@ -0,0 +1,57 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Calendar } from '@/components/lib/calendar/Calendar';
+import { useState } from 'react';
+
+export function FilledDoc(props) {
+    const [date, setDate] = useState(null);
+
+    const code = {
+        basic: `
+<Calendar variant="filled" value={date} onChange={(e) => setDate(e.value)} />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { Calendar } from 'primereact/calendar';
+
+export default function FilledDemo() {
+    const [date, setDate] = useState(null);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Calendar variant="filled" value={date} onChange={(e) => setDate(e.value)} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { Calendar } from 'primereact/calendar';
+import { Nullable } from "primereact/ts-helpers";
+
+export default function FilledDemo() {
+    const [date, setDate] = useState<Nullable<Date>>(null);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Calendar variant="filled" value={date} onChange={(e) => setDate(e.value)} />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Calendar variant="filled" value={date} onChange={(e) => setDate(e.value)} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/calendar/floatlabeldoc.js b/components/doc/calendar/floatlabeldoc.js
index 6c19eea8ba..6645847e7f 100644
--- a/components/doc/calendar/floatlabeldoc.js
+++ b/components/doc/calendar/floatlabeldoc.js
@@ -1,6 +1,8 @@
 import { DocSectionCode } from '@/components/doc/common/docsectioncode';
 import { DocSectionText } from '@/components/doc/common/docsectiontext';
 import { Calendar } from '@/components/lib/calendar/Calendar';
+import { FloatLabel } from '@/components/lib/floatlabel/FloatLabel';
+import Link from 'next/link';
 import { useState } from 'react';
 
 export function FloatLabelDoc(props) {
@@ -8,24 +10,25 @@ export function FloatLabelDoc(props) {
 
     const code = {
         basic: `
-<span className="p-float-label">
+<FloatLabel>
     <Calendar inputId="birth_date" value={date} onChange={(e) => setDate(e.value)} />
     <label htmlFor="birth_date">Birth Date</label>
-</span>
+</FloatLabel>
         `,
         javascript: `
 import React, { useState } from "react";
 import { Calendar } from 'primereact/calendar';
+import { FloatLabel } from 'primereact/floatlabel';
 
 export default function FloatLabelDemo() {
     const [date, setDate] = useState(null);
 
     return (
         <div className="card flex justify-content-center">
-            <span className="p-float-label">
+            <FloatLabel>
                 <Calendar inputId="birth_date" value={date} onChange={(e) => setDate(e.value)} />
                 <label htmlFor="birth_date">Birth Date</label>
-            </span>
+            </FloatLabel>
         </div>
     )
 }
@@ -33,6 +36,7 @@ export default function FloatLabelDemo() {
         typescript: `
 import React, { useState } from "react";
 import { Calendar } from 'primereact/calendar';
+import { FloatLabel } from 'primereact/floatlabel';
 import { Nullable } from "primereact/ts-helpers";
 
 export default function FloatLabelDemo() {
@@ -40,10 +44,10 @@ export default function FloatLabelDemo() {
 
     return (
         <div className="card flex justify-content-center">
-            <span className="p-float-label">
+            <FloatLabel>
                 <Calendar inputId="birth_date" value={date} onChange={(e) => setDate(e.value)} />
                 <label htmlFor="birth_date">Birth Date</label>
-            </span>
+            </FloatLabel>
         </div>
     )
 }
@@ -53,13 +57,15 @@ export default function FloatLabelDemo() {
     return (
         <>
             <DocSectionText {...props}>
-                <p>A floating label appears on top of the input field when focused.</p>
+                <p>
+                    A floating label appears on top of the input field when focused. Visit <Link href="/floatlabel">FloatLabel</Link> documentation for more information.
+                </p>
             </DocSectionText>
             <div className="card flex justify-content-center">
-                <span className="p-float-label">
+                <FloatLabel>
                     <Calendar inputId="birth_date" value={date} onChange={(e) => setDate(e.value)} />
                     <label htmlFor="birth_date">Birth Date</label>
-                </span>
+                </FloatLabel>
             </div>
             <DocSectionCode code={code} />
         </>
diff --git a/components/doc/calendar/form/formikdoc.js b/components/doc/calendar/form/formikdoc.js
deleted file mode 100644
index 06c3a716e8..0000000000
--- a/components/doc/calendar/form/formikdoc.js
+++ /dev/null
@@ -1,217 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { Button } from '@/components/lib/button/Button';
-import { Calendar } from '@/components/lib/calendar/Calendar';
-import { Toast } from '@/components/lib/toast/Toast';
-import { classNames } from '@/components/lib/utils/Utils';
-import { useFormik } from 'formik';
-import { useRef } from 'react';
-
-export function FormikDoc(props) {
-    const toast = useRef(null);
-
-    const show = () => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: formik.values.date.toLocaleDateString() });
-    };
-
-    const formik = useFormik({
-        initialValues: {
-            date: ''
-        },
-        validate: (data) => {
-            let errors = {};
-
-            if (!data.date) {
-                errors.date = 'Date is required.';
-            }
-
-            return errors;
-        },
-        onSubmit: (data) => {
-            if (!formik.errors.date) {
-                data && show(data);
-                formik.resetForm();
-            }
-        }
-    });
-
-    const isFormFieldInvalid = (name) => !!(formik.touched[name] && formik.errors[name]);
-
-    const getFormErrorMessage = (name) => {
-        return isFormFieldInvalid(name) ? <small className="p-error">{formik.errors[name]}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    const code = {
-        basic: `
-<form onSubmit={formik.handleSubmit} className="flex flex-column gap-2">
-    <label htmlFor="cal_date">Date</label>
-    <Toast ref={toast} />
-    <Calendar
-        inputId="cal_date"
-        name="date"
-        value={formik.values.date}
-        className={classNames({ 'p-invalid': isFormFieldInvalid('date') })}
-        onChange={(e) => {
-            formik.setFieldValue('date', e.target.value);
-        }}
-    />
-    {getFormErrorMessage('date')}
-    <Button type="submit" label="Submit" />
-</form>
-        `,
-        javascript: `
-import React, {useRef} from 'react';
-import { useFormik } from 'formik';
-import { Calendar } from "primereact/calendar";
-import { Button } from 'primereact/button';
-import { Toast } from 'primereact/toast';
-import { classNames } from 'primereact/utils';
-
-export default function FormikDoc() {
-    const toast = useRef(null);
-
-    const show = () => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: formik.values.date.toLocaleDateString() });
-    };
-
-    const formik = useFormik({
-        initialValues: {
-            date: ''
-        },
-        validate: (data) => {
-            let errors = {};
-
-            if (!data.date) {
-                errors.date = 'Date is required.';
-            }
-
-            return errors;
-        },
-        onSubmit: (data) => {
-            if (!formik.errors.date) {
-                data && show(data);
-                formik.resetForm();
-            }
-        }
-    });
-
-    const isFormFieldInvalid = (name) => !!(formik.touched[name] && formik.errors[name]);
-
-    const getFormErrorMessage = (name) => {
-        return isFormFieldInvalid(name) ? <small className="p-error">{formik.errors[name]}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    return (
-        <div className="card flex justify-content-center">
-            <form onSubmit={formik.handleSubmit} className="flex flex-column gap-2">
-                <label htmlFor="cal_date">Date</label>
-                <Toast ref={toast} />
-                <Calendar
-                    inputId="cal_date"
-                    name="date"
-                    value={formik.values.date}
-                    className={classNames({ 'p-invalid': isFormFieldInvalid('date') })}
-                    onChange={(e) => {
-                        formik.setFieldValue('date', e.target.value);
-                    }}
-                />
-                {getFormErrorMessage('date')}
-                <Button type="submit" label="Submit" />
-            </form>
-        </div>
-    )
-}
-        `,
-        typescript: `
-import React, {useRef} from 'react';
-import { useFormik } from 'formik';
-import { Calendar } from "primereact/calendar";
-import { Button } from 'primereact/button';
-import { Toast } from 'primereact/toast';
-import { classNames } from 'primereact/utils';
-
-export default function FormikDoc() {
-    const toast = useRef(null);
-
-    const show = () => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: formik.values.date.toLocaleDateString() });
-    };
-
-    const formik = useFormik({
-        initialValues: {
-            date: ''
-        },
-        validate: (data) => {
-            let errors = {};
-
-            if (!data.date) {
-                errors.date = 'Date is required.';
-            }
-
-            return errors;
-        },
-        onSubmit: (data) => {
-            if (!formik.errors.date) {
-                data && show(data);
-                formik.resetForm();
-            }
-        }
-    });
-
-    const isFormFieldInvalid = (name) => !!(formik.touched[name] && formik.errors[name]);
-
-    const getFormErrorMessage = (name) => {
-        return isFormFieldInvalid(name) ? <small className="p-error">{formik.errors[name]}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    return (
-        <div className="card flex justify-content-center">
-            <form onSubmit={formik.handleSubmit} className="flex flex-column gap-2">
-                <label htmlFor="cal_date">Date</label>
-                <Toast ref={toast} />
-                <Calendar
-                    inputId="cal_date"
-                    name="date"
-                    value={formik.values.date}
-                    className={classNames({ 'p-invalid': isFormFieldInvalid('date') })}
-                    onChange={(e) => {
-                        formik.setFieldValue('date', e.target.value);
-                    }}
-                />
-                {getFormErrorMessage('date')}
-                <Button type="submit" label="Submit" />
-            </form>
-        </div>
-    )
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props}>
-                <p>
-                    <a href="https://formik.org/">Formik</a> is a popular library for handling forms in React.
-                </p>
-            </DocSectionText>
-            <div className="card flex justify-content-center">
-                <form onSubmit={formik.handleSubmit} className="flex flex-column gap-2">
-                    <label htmlFor="cal_date">Date</label>
-                    <Toast ref={toast} />
-                    <Calendar
-                        inputId="cal_date"
-                        name="date"
-                        value={formik.values.date}
-                        className={classNames({ 'p-invalid': isFormFieldInvalid('date') })}
-                        onChange={(e) => {
-                            formik.setFieldValue('date', e.target.value);
-                        }}
-                    />
-                    {getFormErrorMessage('date')}
-                    <Button type="submit" label="Submit" />
-                </form>
-            </div>
-            <DocSectionCode code={code} dependencies={{ formik: '^2.1.4' }} />
-        </>
-    );
-}
diff --git a/components/doc/calendar/form/hookfromdoc.js b/components/doc/calendar/form/hookfromdoc.js
deleted file mode 100644
index b5b04a1781..0000000000
--- a/components/doc/calendar/form/hookfromdoc.js
+++ /dev/null
@@ -1,179 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { Button } from '@/components/lib/button/Button';
-import { Calendar } from '@/components/lib/calendar/Calendar';
-import { Toast } from '@/components/lib/toast/Toast';
-import { classNames } from '@/components/lib/utils/Utils';
-import { useRef } from 'react';
-import { Controller, useForm } from 'react-hook-form';
-
-export function HookFormDoc(props) {
-    const toast = useRef(null);
-    const defaultValues = { date: null };
-    const form = useForm({ defaultValues });
-    const errors = form.formState.errors;
-
-    const show = () => {
-        const date = new Date(form.getValues('date')).toLocaleDateString();
-
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: date });
-    };
-
-    const onSubmit = (data) => {
-        data.date && show();
-        form.reset();
-    };
-
-    const getFormErrorMessage = (name) => {
-        return errors[name] ? <small className="p-error">{errors[name].message}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    const code = {
-        basic: `
-<Toast ref={toast} />
-<Controller
-    name="date"
-    control={form.control}
-    rules={{ required: 'Date is required.' }}
-    render={({ field, fieldState }) => (
-        <>
-            <label htmlFor={field.name}>Date</label>
-            <Calendar inputId={field.name} value={field.value} onChange={field.onChange} dateFormat="dd/mm/yy" className={classNames({ 'p-invalid': fieldState.error })} />
-            {getFormErrorMessage(field.name)}
-        </>
-    )}
-/>
-        `,
-        javascript: `
-import React, { useRef } from 'react';
-import { Controller, useForm } from 'react-hook-form';
-import { Button } from 'primereact/button';
-import { classNames } from 'primereact/utils';
-import { Calendar } from "primereact/calendar";
-import { Toast } from "primereact/toast";
-
-export default function HookFormDoc() {
-    const toast = useRef(null);
-    const defaultValues = { date: null };
-    const form = useForm({ defaultValues });
-    const errors = form.formState.errors;
-
-const show = () => {
-    const date = new Date(form.getValues('date')).toLocaleDateString();
-    
-    toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: date });
-};
-
-    const onSubmit = (data) => {
-        data.date && show();
-        form.reset();
-    };
-
-    const getFormErrorMessage = (name) => {
-        return errors[name] ? <small className="p-error">{errors[name].message}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    return (
-        <div className="card flex justify-content-center">
-            <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-column gap-2">
-                <Toast ref={toast} />
-                <Controller
-                    name="date"
-                    control={form.control}
-                    rules={{ required: 'Date is required.' }}
-                    render={({ field, fieldState }) => (
-                        <>
-                            <label htmlFor={field.name}>Date</label>
-                            <Calendar inputId={field.name} value={field.value} onChange={field.onChange} dateFormat="dd/mm/yy" className={classNames({ 'p-invalid': fieldState.error })} />
-                            {getFormErrorMessage(field.name)}
-                        </>
-                    )}
-                />
-                <Button label="Submit" type="submit" icon="pi pi-check" />
-            </form>
-        </div>
-    )
-}
-        `,
-        typescript: `
-import React, { useRef } from 'react';
-import { Controller, useForm } from 'react-hook-form';
-import { Button } from 'primereact/button';
-import { classNames } from 'primereact/utils';
-import { Calendar } from "primereact/calendar";
-import { Toast } from "primereact/toast";
-
-export default function HookFormDoc() {
-    const toast = useRef(null);
-    const defaultValues = { date: null };
-    const form = useForm({ defaultValues });
-    const errors = form.formState.errors;
-
-const show = () => {
-    const date = new Date(form.getValues('date')).toLocaleDateString();
-    
-    toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: date });
-};
-
-    const onSubmit = (data) => {
-        data.date && show();
-        form.reset();
-    };
-
-    const getFormErrorMessage = (name) => {
-        return errors[name] ? <small className="p-error">{errors[name].message}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    return (
-        <div className="card flex justify-content-center">
-            <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-column gap-2">
-                <Toast ref={toast} />
-                <Controller
-                    name="date"
-                    control={form.control}
-                    rules={{ required: 'Date is required.' }}
-                    render={({ field, fieldState }) => (
-                        <>
-                            <label htmlFor={field.name}>Date</label>
-                            <Calendar inputId={field.name} value={field.value} onChange={field.onChange} dateFormat="dd/mm/yy" className={classNames({ 'p-invalid': fieldState.error })} />
-                            {getFormErrorMessage(field.name)}
-                        </>
-                    )}
-                />
-                <Button label="Submit" type="submit" icon="pi pi-check" />
-            </form>
-        </div>
-    )
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props}>
-                <p>
-                    <a href="https://react-hook-form.com/">React Hook Form</a> is another popular React library to handle forms.
-                </p>
-            </DocSectionText>
-            <div className="card flex justify-content-center">
-                <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-column gap-2">
-                    <Toast ref={toast} />
-                    <Controller
-                        name="date"
-                        control={form.control}
-                        rules={{ required: 'Date is required.' }}
-                        render={({ field, fieldState }) => (
-                            <>
-                                <label htmlFor={field.name}>Date</label>
-                                <Calendar inputId={field.name} value={field.value} onChange={field.onChange} dateFormat="dd/mm/yy" className={classNames({ 'p-invalid': fieldState.error })} />
-                                {getFormErrorMessage(field.name)}
-                            </>
-                        )}
-                    />
-                    <Button label="Submit" type="submit" icon="pi pi-check" />
-                </form>
-            </div>
-            <DocSectionCode code={code} dependencies={{ 'react-hook-form': '^7.39.4' }} />
-        </>
-    );
-}
diff --git a/components/doc/calendar/invaliddoc.js b/components/doc/calendar/invaliddoc.js
index a72653555f..a05a779a64 100644
--- a/components/doc/calendar/invaliddoc.js
+++ b/components/doc/calendar/invaliddoc.js
@@ -5,7 +5,7 @@ import { Calendar } from '@/components/lib/calendar/Calendar';
 export function InvalidDoc(props) {
     const code = {
         basic: `
-<Calendar className="p-invalid" />
+<Calendar invalid/>
         `,
         javascript: `
 import React, { useState } from "react";
@@ -14,7 +14,7 @@ import { Calendar } from 'primereact/calendar';
 export default function InvalidDemo() {
     return (
         <div className="card flex justify-content-center">
-            <Calendar className="p-invalid" />
+            <Calendar invalid/>
         </div>
     )
 }
@@ -26,7 +26,7 @@ import { Calendar } from 'primereact/calendar';
 export default function InvalidDemo() {
     return (
         <div className="card flex justify-content-center">
-            <Calendar className="p-invalid" />
+            <Calendar invalid/>
         </div>
     )
 }
@@ -37,11 +37,11 @@ export default function InvalidDemo() {
         <>
             <DocSectionText {...props}>
                 <p>
-                    Invalid state style is added using the <i>p-invalid</i> class to indicate a failed validation.
+                    Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.
                 </p>
             </DocSectionText>
             <div className="card flex justify-content-center">
-                <Calendar className="p-invalid" />
+                <Calendar invalid />
             </div>
             <DocSectionCode code={code} />
         </>
diff --git a/components/doc/cascadeselect/filleddoc.js b/components/doc/cascadeselect/filleddoc.js
new file mode 100644
index 0000000000..8fea37d572
--- /dev/null
+++ b/components/doc/cascadeselect/filleddoc.js
@@ -0,0 +1,316 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { CascadeSelect } from '@/components/lib/cascadeselect/CascadeSelect';
+import { useState } from 'react';
+
+export function FilledDoc(props) {
+    const [selectedCity, setSelectedCity] = useState(null);
+    const countries = [
+        {
+            name: 'Australia',
+            code: 'AU',
+            states: [
+                {
+                    name: 'New South Wales',
+                    cities: [
+                        { cname: 'Sydney', code: 'A-SY' },
+                        { cname: 'Newcastle', code: 'A-NE' },
+                        { cname: 'Wollongong', code: 'A-WO' }
+                    ]
+                },
+                {
+                    name: 'Queensland',
+                    cities: [
+                        { cname: 'Brisbane', code: 'A-BR' },
+                        { cname: 'Townsville', code: 'A-TO' }
+                    ]
+                }
+            ]
+        },
+        {
+            name: 'Canada',
+            code: 'CA',
+            states: [
+                {
+                    name: 'Quebec',
+                    cities: [
+                        { cname: 'Montreal', code: 'C-MO' },
+                        { cname: 'Quebec City', code: 'C-QU' }
+                    ]
+                },
+                {
+                    name: 'Ontario',
+                    cities: [
+                        { cname: 'Ottawa', code: 'C-OT' },
+                        { cname: 'Toronto', code: 'C-TO' }
+                    ]
+                }
+            ]
+        },
+        {
+            name: 'United States',
+            code: 'US',
+            states: [
+                {
+                    name: 'California',
+                    cities: [
+                        { cname: 'Los Angeles', code: 'US-LA' },
+                        { cname: 'San Diego', code: 'US-SD' },
+                        { cname: 'San Francisco', code: 'US-SF' }
+                    ]
+                },
+                {
+                    name: 'Florida',
+                    cities: [
+                        { cname: 'Jacksonville', code: 'US-JA' },
+                        { cname: 'Miami', code: 'US-MI' },
+                        { cname: 'Tampa', code: 'US-TA' },
+                        { cname: 'Orlando', code: 'US-OR' }
+                    ]
+                },
+                {
+                    name: 'Texas',
+                    cities: [
+                        { cname: 'Austin', code: 'US-AU' },
+                        { cname: 'Dallas', code: 'US-DA' },
+                        { cname: 'Houston', code: 'US-HO' }
+                    ]
+                }
+            ]
+        }
+    ];
+
+    const code = {
+        basic: `
+<CascadeSelect variant="filled" value={selectedCity} onChange={(e) => setSelectedCity(e.value)} options={countries} 
+    optionLabel="cname" optionGroupLabel="name" optionGroupChildren={['states', 'cities']}
+    className="w-full md:w-14rem" breakpoint="767px" placeholder="Select a City" style={{ minWidth: '14rem' }}  />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { CascadeSelect } from 'primereact/cascadeselect';
+
+export default function FilledDemo() {
+    const [selectedCity, setSelectedCity] = useState(null);
+    const countries = [
+        {
+            name: 'Australia',
+            code: 'AU',
+            states: [
+                {
+                    name: 'New South Wales',
+                    cities: [
+                        {cname: 'Sydney', code: 'A-SY'},
+                        {cname: 'Newcastle', code: 'A-NE'},
+                        {cname: 'Wollongong', code: 'A-WO'}
+                    ]
+                },
+                {
+                    name: 'Queensland',
+                    cities: [
+                        {cname: 'Brisbane', code: 'A-BR'},
+                        {cname: 'Townsville', code: 'A-TO'}
+                    ]
+                },
+
+            ]
+        },
+        {
+            name: 'Canada',
+            code: 'CA',
+            states: [
+                {
+                    name: 'Quebec',
+                    cities: [
+                        {cname: 'Montreal', code: 'C-MO'},
+                        {cname: 'Quebec City', code: 'C-QU'}
+                    ]
+                },
+                {
+                    name: 'Ontario',
+                    cities: [
+                        {cname: 'Ottawa', code: 'C-OT'},
+                        {cname: 'Toronto', code: 'C-TO'}
+                    ]
+                },
+
+            ]
+        },
+        {
+            name: 'United States',
+            code: 'US',
+            states: [
+                {
+                    name: 'California',
+                    cities: [
+                        {cname: 'Los Angeles', code: 'US-LA'},
+                        {cname: 'San Diego', code: 'US-SD'},
+                        {cname: 'San Francisco', code: 'US-SF'}
+                    ]
+                },
+                {
+                    name: 'Florida',
+                    cities: [
+                        {cname: 'Jacksonville', code: 'US-JA'},
+                        {cname: 'Miami', code: 'US-MI'},
+                        {cname: 'Tampa', code: 'US-TA'},
+                        {cname: 'Orlando', code: 'US-OR'}
+                    ]
+                },
+                {
+                    name: 'Texas',
+                    cities: [
+                        {cname: 'Austin', code: 'US-AU'},
+                        {cname: 'Dallas', code: 'US-DA'},
+                        {cname: 'Houston', code: 'US-HO'}
+                    ]
+                }
+            ]
+        }
+    ];
+
+    return (
+        <div className="card flex justify-content-center">
+            <CascadeSelect variant="filled" value={selectedCity} onChange={(e) => setSelectedCity(e.value)} options={countries} 
+                optionLabel="cname" optionGroupLabel="name" optionGroupChildren={['states', 'cities']}
+                className="w-full md:w-14rem" breakpoint="767px" placeholder="Select a City" style={{ minWidth: '14rem' }}  />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { CascadeSelect, CascadeSelectChangeEvent } from 'primereact/cascadeselect';
+
+interface City {
+    cname: string;
+    code: string;
+}
+
+interface CountryState {
+    name: string;
+    cities: City[];
+}
+
+interface Country {
+    name: string;
+    code: string;
+    states: CountryState[];
+}
+
+export default function FilledDemo() {
+    const [selectedCity, setSelectedCity] = useState<City | null>(null);
+    const countries: Country[] = [
+        {
+            name: 'Australia',
+            code: 'AU',
+            states: [
+                {
+                    name: 'New South Wales',
+                    cities: [
+                        {cname: 'Sydney', code: 'A-SY'},
+                        {cname: 'Newcastle', code: 'A-NE'},
+                        {cname: 'Wollongong', code: 'A-WO'}
+                    ]
+                },
+                {
+                    name: 'Queensland',
+                    cities: [
+                        {cname: 'Brisbane', code: 'A-BR'},
+                        {cname: 'Townsville', code: 'A-TO'}
+                    ]
+                },
+
+            ]
+        },
+        {
+            name: 'Canada',
+            code: 'CA',
+            states: [
+                {
+                    name: 'Quebec',
+                    cities: [
+                        {cname: 'Montreal', code: 'C-MO'},
+                        {cname: 'Quebec City', code: 'C-QU'}
+                    ]
+                },
+                {
+                    name: 'Ontario',
+                    cities: [
+                        {cname: 'Ottawa', code: 'C-OT'},
+                        {cname: 'Toronto', code: 'C-TO'}
+                    ]
+                },
+
+            ]
+        },
+        {
+            name: 'United States',
+            code: 'US',
+            states: [
+                {
+                    name: 'California',
+                    cities: [
+                        {cname: 'Los Angeles', code: 'US-LA'},
+                        {cname: 'San Diego', code: 'US-SD'},
+                        {cname: 'San Francisco', code: 'US-SF'}
+                    ]
+                },
+                {
+                    name: 'Florida',
+                    cities: [
+                        {cname: 'Jacksonville', code: 'US-JA'},
+                        {cname: 'Miami', code: 'US-MI'},
+                        {cname: 'Tampa', code: 'US-TA'},
+                        {cname: 'Orlando', code: 'US-OR'}
+                    ]
+                },
+                {
+                    name: 'Texas',
+                    cities: [
+                        {cname: 'Austin', code: 'US-AU'},
+                        {cname: 'Dallas', code: 'US-DA'},
+                        {cname: 'Houston', code: 'US-HO'}
+                    ]
+                }
+            ]
+        }
+    ];
+
+    return (
+        <div className="card flex justify-content-center">
+            <CascadeSelect variant="filled" value={selectedCity} onChange={(e: CascadeSelectChangeEvent) => setSelectedCity(e.value)} options={countries} 
+                optionLabel="cname" optionGroupLabel="name" optionGroupChildren={['states', 'cities']}
+                className="w-full md:w-14rem" breakpoint="767px" placeholder="Select a City" style={{ minWidth: '14rem' }}  />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <CascadeSelect
+                    variant="filled"
+                    value={selectedCity}
+                    onChange={(e) => setSelectedCity(e.value)}
+                    options={countries}
+                    optionLabel="cname"
+                    optionGroupLabel="name"
+                    optionGroupChildren={['states', 'cities']}
+                    className="w-full md:w-14rem"
+                    breakpoint="767px"
+                    placeholder="Select a City"
+                    style={{ minWidth: '14rem' }}
+                />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/cascadeselect/floatlabeldoc.js b/components/doc/cascadeselect/floatlabeldoc.js
index 8cee8092a3..b4f0b05abf 100644
--- a/components/doc/cascadeselect/floatlabeldoc.js
+++ b/components/doc/cascadeselect/floatlabeldoc.js
@@ -1,6 +1,8 @@
 import { DocSectionCode } from '@/components/doc/common/docsectioncode';
 import { DocSectionText } from '@/components/doc/common/docsectiontext';
 import { CascadeSelect } from '@/components/lib/cascadeselect/CascadeSelect';
+import { FloatLabel } from '@/components/lib/floatlabel/FloatLabel';
+import Link from 'next/link';
 import { useState } from 'react';
 
 export function FloatLabelDoc(props) {
@@ -82,16 +84,17 @@ export function FloatLabelDoc(props) {
 
     const code = {
         basic: `
-<span className="p-float-label">
+<FloatLabel>
     <CascadeSelect inputId="cs-city" value={selectedCity} onChange={(e) => setSelectedCity(e.value)} options={countries} 
         optionLabel="cname" optionGroupLabel="name" optionGroupChildren={['states', 'cities']}
         className="w-full md:w-14rem" breakpoint="767px" style={{ minWidth: '14rem' }} />
     <label htmlFor="cs-city">City</label>
-</span>
+</FloatLabel>
         `,
         javascript: `
 import React, { useState } from "react";
 import { CascadeSelect } from 'primereact/cascadeselect';
+import { FloatLabel } from 'primereact/floatlabel';
 
 export default function FloatLabelDemo() {
     const [selectedCity, setSelectedCity] = useState(null);
@@ -174,12 +177,12 @@ export default function FloatLabelDemo() {
 
     return (
         <div className="card flex justify-content-center">
-            <span className="p-float-label">
+            <FloatLabel>
                 <CascadeSelect inputId="cs-city" value={selectedCity} onChange={(e) => setSelectedCity(e.value)} options={countries} 
                     optionLabel="cname" optionGroupLabel="name" optionGroupChildren={['states', 'cities']}
                     className="w-full md:w-14rem" breakpoint="767px" style={{ minWidth: '14rem' }} />
                 <label htmlFor="cs-city">City</label>
-            </span>
+            </FloatLabel>
         </div>
     )
 }
@@ -187,6 +190,7 @@ export default function FloatLabelDemo() {
         typescript: `
 import React, { useState } from "react";
 import { CascadeSelect, CascadeSelectChangeEvent } from 'primereact/cascadeselect';
+import { FloatLabel } from 'primereact/floatlabel';
 
 interface City {
     cname: string;
@@ -285,12 +289,12 @@ export default function FloatLabelDemo() {
 
     return (
         <div className="card flex justify-content-center">
-            <span className="p-float-label">
+            <FloatLabel>
                 <CascadeSelect inputId="cs-city" value={selectedCity} onChange={(e: CascadeSelectChangeEvent) => setSelectedCity(e.value)} options={countries} 
                     optionLabel="cname" optionGroupLabel="name" optionGroupChildren={['states', 'cities']}
                     className="w-full md:w-14rem" breakpoint="767px" style={{ minWidth: '14rem' }} />
                 <label htmlFor="cs-city">City</label>
-            </span>
+            </FloatLabel>
         </div>
     )
 }
@@ -300,10 +304,12 @@ export default function FloatLabelDemo() {
     return (
         <>
             <DocSectionText {...props}>
-                <p>A floating label appears on top of the input field when focused.</p>
+                <p>
+                    A floating label appears on top of the input field when focused. Visit <Link href="/floatlabel">FloatLabel</Link> documentation for more information.
+                </p>
             </DocSectionText>
             <div className="card flex justify-content-center">
-                <span className="p-float-label">
+                <FloatLabel>
                     <CascadeSelect
                         inputId="cs-city"
                         value={selectedCity}
@@ -317,7 +323,7 @@ export default function FloatLabelDemo() {
                         style={{ minWidth: '14rem' }}
                     />
                     <label htmlFor="cs-city">City</label>
-                </span>
+                </FloatLabel>
             </div>
             <DocSectionCode code={code} />
         </>
diff --git a/components/doc/cascadeselect/form/formikdoc.js b/components/doc/cascadeselect/form/formikdoc.js
deleted file mode 100644
index 7415133023..0000000000
--- a/components/doc/cascadeselect/form/formikdoc.js
+++ /dev/null
@@ -1,470 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { Button } from '@/components/lib/button/Button';
-import { CascadeSelect } from '@/components/lib/cascadeselect/CascadeSelect';
-import { Toast } from '@/components/lib/toast/Toast';
-import { classNames } from '@/components/lib/utils/Utils';
-import { useFormik } from 'formik';
-import { useRef } from 'react';
-
-export function FormikDoc(props) {
-    const toast = useRef(null);
-    const countries = [
-        {
-            name: 'Australia',
-            code: 'AU',
-            states: [
-                {
-                    name: 'New South Wales',
-                    cities: [
-                        { cname: 'Sydney', code: 'A-SY' },
-                        { cname: 'Newcastle', code: 'A-NE' },
-                        { cname: 'Wollongong', code: 'A-WO' }
-                    ]
-                },
-                {
-                    name: 'Queensland',
-                    cities: [
-                        { cname: 'Brisbane', code: 'A-BR' },
-                        { cname: 'Townsville', code: 'A-TO' }
-                    ]
-                }
-            ]
-        },
-        {
-            name: 'Canada',
-            code: 'CA',
-            states: [
-                {
-                    name: 'Quebec',
-                    cities: [
-                        { cname: 'Montreal', code: 'C-MO' },
-                        { cname: 'Quebec City', code: 'C-QU' }
-                    ]
-                },
-                {
-                    name: 'Ontario',
-                    cities: [
-                        { cname: 'Ottawa', code: 'C-OT' },
-                        { cname: 'Toronto', code: 'C-TO' }
-                    ]
-                }
-            ]
-        },
-        {
-            name: 'United States',
-            code: 'US',
-            states: [
-                {
-                    name: 'California',
-                    cities: [
-                        { cname: 'Los Angeles', code: 'US-LA' },
-                        { cname: 'San Diego', code: 'US-SD' },
-                        { cname: 'San Francisco', code: 'US-SF' }
-                    ]
-                },
-                {
-                    name: 'Florida',
-                    cities: [
-                        { cname: 'Jacksonville', code: 'US-JA' },
-                        { cname: 'Miami', code: 'US-MI' },
-                        { cname: 'Tampa', code: 'US-TA' },
-                        { cname: 'Orlando', code: 'US-OR' }
-                    ]
-                },
-                {
-                    name: 'Texas',
-                    cities: [
-                        { cname: 'Austin', code: 'US-AU' },
-                        { cname: 'Dallas', code: 'US-DA' },
-                        { cname: 'Houston', code: 'US-HO' }
-                    ]
-                }
-            ]
-        }
-    ];
-
-    const show = (data) => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: `${data.city.cname}` });
-    };
-
-    const formik = useFormik({
-        initialValues: {
-            city: null
-        },
-        validate: (data) => {
-            let errors = {};
-
-            if (!data.city) {
-                errors.city = 'City is required.';
-            }
-
-            return errors;
-        },
-        onSubmit: (data) => {
-            data && show(data);
-            formik.resetForm();
-        }
-    });
-
-    const isFormFieldInvalid = (name) => !!(formik.touched[name] && formik.errors[name]);
-
-    const getFormErrorMessage = (name) => {
-        return isFormFieldInvalid(name) ? <small className="p-error">{formik.errors[name]}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    const code = {
-        basic: `
-<Toast ref={toast} />
-<CascadeSelect
-    inputId="cc_city"
-    name="city"
-    value={formik.values.city}
-    options={countries}
-    optionLabel="cname"
-    optionGroupLabel="name"
-    optionGroupChildren={['states', 'cities']}
-    style={{ minWidth: '14rem' }}
-    breakpoint="767px"
-    placeholder="Select a City"
-    onChange={(e) => {
-        formik.setFieldValue('city', e.value);
-    }}
-/>
-{getFormErrorMessage('city')}
-<Button type="submit" label="Submit" />
-        `,
-        javascript: `
-import React, { useRef } from "react";
-import { useFormik } from 'formik';
-import { CascadeSelect } from 'primereact/cascadeselect';
-import { Button } from 'primereact/button';
-import { Toast } from 'primereact/toast';
-
-export default function FormikDoc() {
-    const toast = useRef(null);
-    const countries = [
-        {
-            name: 'Australia',
-            code: 'AU',
-            states: [
-                {
-                    name: 'New South Wales',
-                    cities: [
-                        { cname: 'Sydney', code: 'A-SY' },
-                        { cname: 'Newcastle', code: 'A-NE' },
-                        { cname: 'Wollongong', code: 'A-WO' }
-                    ]
-                },
-                {
-                    name: 'Queensland',
-                    cities: [
-                        { cname: 'Brisbane', code: 'A-BR' },
-                        { cname: 'Townsville', code: 'A-TO' }
-                    ]
-                }
-            ]
-        },
-        {
-            name: 'Canada',
-            code: 'CA',
-            states: [
-                {
-                    name: 'Quebec',
-                    cities: [
-                        { cname: 'Montreal', code: 'C-MO' },
-                        { cname: 'Quebec City', code: 'C-QU' }
-                    ]
-                },
-                {
-                    name: 'Ontario',
-                    cities: [
-                        { cname: 'Ottawa', code: 'C-OT' },
-                        { cname: 'Toronto', code: 'C-TO' }
-                    ]
-                }
-            ]
-        },
-        {
-            name: 'United States',
-            code: 'US',
-            states: [
-                {
-                    name: 'California',
-                    cities: [
-                        { cname: 'Los Angeles', code: 'US-LA' },
-                        { cname: 'San Diego', code: 'US-SD' },
-                        { cname: 'San Francisco', code: 'US-SF' }
-                    ]
-                },
-                {
-                    name: 'Florida',
-                    cities: [
-                        { cname: 'Jacksonville', code: 'US-JA' },
-                        { cname: 'Miami', code: 'US-MI' },
-                        { cname: 'Tampa', code: 'US-TA' },
-                        { cname: 'Orlando', code: 'US-OR' }
-                    ]
-                },
-                {
-                    name: 'Texas',
-                    cities: [
-                        { cname: 'Austin', code: 'US-AU' },
-                        { cname: 'Dallas', code: 'US-DA' },
-                        { cname: 'Houston', code: 'US-HO' }
-                    ]
-                }
-            ]
-        }
-    ];
-
-    const show = (data) => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: \`\${data.city.cname}\`});
-    };
-
-    const formik = useFormik({
-        initialValues: {
-            city: null
-        },
-        validate: (data) => {
-            let errors = {};
-
-            if (!data.city) {
-                errors.city = 'City is required.';
-            }
-
-            return errors;
-        },
-        onSubmit: (data) => {
-            data && show(data);
-            formik.resetForm();
-        }
-    });
-
-    const isFormFieldInvalid = (name) => !!(formik.touched[name] && formik.errors[name]);
-
-    const getFormErrorMessage = (name) => {
-        return isFormFieldInvalid(name) ? <small className="p-error">{formik.errors[name]}</small> : <small className="p-error">&nbsp;</small>;
-
-    };
-
-    return (
-        <div className="card flex justify-content-center">
-            <form onSubmit={formik.handleSubmit} className="flex flex-column gap-2">
-                <label htmlFor="cc_city">Select a city</label>
-                <Toast ref={toast} />
-                <CascadeSelect
-                    inputId="cc_city"
-                    name="city"
-                    value={formik.values.city}
-                    options={countries}
-                    optionLabel="cname"
-                    optionGroupLabel="name"
-                    optionGroupChildren={['states', 'cities']}
-                    style={{ minWidth: '14rem' }}
-                    breakpoint="767px"
-                    placeholder="Select a City"
-                    onChange={(e) => {
-                        formik.setFieldValue('city', e.value);
-                    }}
-                />
-                {getFormErrorMessage('city')}
-                <Button type="submit" label="Submit" />
-            </form>
-        </div>
-    )
-}
-        `,
-        typescript: `
-import React, { useRef } from "react";
-import { useFormik } from 'formik';
-import { CascadeSelect, CascadeSelectChangeEvent } from 'primereact/cascadeselect';
-import { Button } from 'primereact/button';
-import { Toast } from 'primereact/toast';
-
-interface City {
-    cname: string;
-    code: string;
-}
-
-interface CountryState {
-    name: string;
-    cities: City[];
-}
-
-interface Country {
-    name: string;
-    code: string;
-    states: CountryState[];
-}
-
-export default function FormikDoc() {
-    const toast = useRef(null);
-    const countries: Country[] = [
-        {
-            name: 'Australia',
-            code: 'AU',
-            states: [
-                {
-                    name: 'New South Wales',
-                    cities: [
-                        { cname: 'Sydney', code: 'A-SY' },
-                        { cname: 'Newcastle', code: 'A-NE' },
-                        { cname: 'Wollongong', code: 'A-WO' }
-                    ]
-                },
-                {
-                    name: 'Queensland',
-                    cities: [
-                        { cname: 'Brisbane', code: 'A-BR' },
-                        { cname: 'Townsville', code: 'A-TO' }
-                    ]
-                }
-            ]
-        },
-        {
-            name: 'Canada',
-            code: 'CA',
-            states: [
-                {
-                    name: 'Quebec',
-                    cities: [
-                        { cname: 'Montreal', code: 'C-MO' },
-                        { cname: 'Quebec City', code: 'C-QU' }
-                    ]
-                },
-                {
-                    name: 'Ontario',
-                    cities: [
-                        { cname: 'Ottawa', code: 'C-OT' },
-                        { cname: 'Toronto', code: 'C-TO' }
-                    ]
-                }
-            ]
-        },
-        {
-            name: 'United States',
-            code: 'US',
-            states: [
-                {
-                    name: 'California',
-                    cities: [
-                        { cname: 'Los Angeles', code: 'US-LA' },
-                        { cname: 'San Diego', code: 'US-SD' },
-                        { cname: 'San Francisco', code: 'US-SF' }
-                    ]
-                },
-                {
-                    name: 'Florida',
-                    cities: [
-                        { cname: 'Jacksonville', code: 'US-JA' },
-                        { cname: 'Miami', code: 'US-MI' },
-                        { cname: 'Tampa', code: 'US-TA' },
-                        { cname: 'Orlando', code: 'US-OR' }
-                    ]
-                },
-                {
-                    name: 'Texas',
-                    cities: [
-                        { cname: 'Austin', code: 'US-AU' },
-                        { cname: 'Dallas', code: 'US-DA' },
-                        { cname: 'Houston', code: 'US-HO' }
-                    ]
-                }
-            ]
-        }
-    ];
-
-    const show = (data) => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: \`\${data.city.cname}\`});
-    };
-
-    const formik = useFormik({
-        initialValues: {
-            city: null
-        },
-        validate: (data) => {
-            let errors = {};
-
-            if (!data.city) {
-                errors.city = 'City is required.';
-            }
-
-            return errors;
-        },
-        onSubmit: (data) => {
-            data && show(data);
-            formik.resetForm();
-        }
-    });
-
-    const isFormFieldInvalid = (name) => !!(formik.touched[name] && formik.errors[name]);
-
-    const getFormErrorMessage = (name) => {
-        return isFormFieldInvalid(name) ? <small className="p-error">{formik.errors[name]}</small> : <small className="p-error">&nbsp;</small>;
-
-    };
-
-    return (
-        <div className="card flex justify-content-center">
-            <form onSubmit={formik.handleSubmit} className="flex flex-column gap-2">
-                <label htmlFor="cc_city">Select a city</label>
-                <Toast ref={toast} />
-                <CascadeSelect
-                    inputId="cc_city"
-                    name="city"
-                    value={formik.values.city}
-                    options={countries}
-                    optionLabel="cname"
-                    optionGroupLabel="name"
-                    optionGroupChildren={['states', 'cities']}
-                    style={{ minWidth: '14rem' }}
-                    breakpoint="767px"
-                    placeholder="Select a City"
-                    onChange={(e: CascadeSelectChangeEvent) => {
-                        formik.setFieldValue('city', e.value);
-                    }}
-                />
-                {getFormErrorMessage('city')}
-                <Button type="submit" label="Submit" />
-            </form>
-        </div>
-    )
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props}>
-                <p>
-                    <a href="https://formik.org/">Formik</a> is a popular library for handling forms in React.
-                </p>
-            </DocSectionText>
-            <div className="card flex justify-content-center">
-                <form onSubmit={formik.handleSubmit} className="flex flex-column gap-2">
-                    <Toast ref={toast} />
-                    <CascadeSelect
-                        inputId="cc_city"
-                        name="city"
-                        value={formik.values.city}
-                        options={countries}
-                        optionLabel="cname"
-                        optionGroupLabel="name"
-                        optionGroupChildren={['states', 'cities']}
-                        style={{ minWidth: '14rem' }}
-                        breakpoint="767px"
-                        placeholder="Select a City"
-                        className={classNames({ 'p-invalid': isFormFieldInvalid('city') })}
-                        onChange={(e) => {
-                            formik.setFieldValue('city', e.value);
-                        }}
-                    />
-                    {getFormErrorMessage('city')}
-                    <Button type="submit" label="Submit" />
-                </form>
-            </div>
-            <DocSectionCode code={code} dependencies={{ formik: '^2.2.6' }} />
-        </>
-    );
-}
diff --git a/components/doc/cascadeselect/form/hookformdoc.js b/components/doc/cascadeselect/form/hookformdoc.js
deleted file mode 100644
index 3b7880e78e..0000000000
--- a/components/doc/cascadeselect/form/hookformdoc.js
+++ /dev/null
@@ -1,478 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { Button } from '@/components/lib/button/Button';
-import { CascadeSelect } from '@/components/lib/cascadeselect/CascadeSelect';
-import { Toast } from '@/components/lib/toast/Toast';
-import { classNames } from '@/components/lib/utils/Utils';
-import { useRef } from 'react';
-import { Controller, useForm } from 'react-hook-form';
-
-export function HookFormDoc(props) {
-    const toast = useRef(null);
-    const countries = [
-        {
-            name: 'Australia',
-            code: 'AU',
-            states: [
-                {
-                    name: 'New South Wales',
-                    cities: [
-                        { cname: 'Sydney', code: 'A-SY' },
-                        { cname: 'Newcastle', code: 'A-NE' },
-                        { cname: 'Wollongong', code: 'A-WO' }
-                    ]
-                },
-                {
-                    name: 'Queensland',
-                    cities: [
-                        { cname: 'Brisbane', code: 'A-BR' },
-                        { cname: 'Townsville', code: 'A-TO' }
-                    ]
-                }
-            ]
-        },
-        {
-            name: 'Canada',
-            code: 'CA',
-            states: [
-                {
-                    name: 'Quebec',
-                    cities: [
-                        { cname: 'Montreal', code: 'C-MO' },
-                        { cname: 'Quebec City', code: 'C-QU' }
-                    ]
-                },
-                {
-                    name: 'Ontario',
-                    cities: [
-                        { cname: 'Ottawa', code: 'C-OT' },
-                        { cname: 'Toronto', code: 'C-TO' }
-                    ]
-                }
-            ]
-        },
-        {
-            name: 'United States',
-            code: 'US',
-            states: [
-                {
-                    name: 'California',
-                    cities: [
-                        { cname: 'Los Angeles', code: 'US-LA' },
-                        { cname: 'San Diego', code: 'US-SD' },
-                        { cname: 'San Francisco', code: 'US-SF' }
-                    ]
-                },
-                {
-                    name: 'Florida',
-                    cities: [
-                        { cname: 'Jacksonville', code: 'US-JA' },
-                        { cname: 'Miami', code: 'US-MI' },
-                        { cname: 'Tampa', code: 'US-TA' },
-                        { cname: 'Orlando', code: 'US-OR' }
-                    ]
-                },
-                {
-                    name: 'Texas',
-                    cities: [
-                        { cname: 'Austin', code: 'US-AU' },
-                        { cname: 'Dallas', code: 'US-DA' },
-                        { cname: 'Houston', code: 'US-HO' }
-                    ]
-                }
-            ]
-        }
-    ];
-
-    const show = (data) => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: `${data.city.cname}` });
-    };
-
-    const defaultValues = {
-        city: null
-    };
-
-    const {
-        control,
-        formState: { errors },
-        handleSubmit,
-        reset
-    } = useForm({ defaultValues });
-
-    const onSubmit = (data) => {
-        data.city && show(data);
-
-        reset();
-    };
-
-    const getFormErrorMessage = (name) => {
-        return errors[name] ? <small className="p-error">{errors[name].message}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    const code = {
-        basic: `
-<Toast ref={toast} />
-<Controller
-    name="city"
-    control={control}
-    rules={{ required: 'City is required.' }}
-    render={({ field }) => (
-        <CascadeSelect
-            id={field.name}
-            name="city"
-            value={field.value}
-            options={countries}
-            optionLabel="cname"
-            optionGroupLabel="name"
-            optionGroupChildren={['states', 'cities']}
-            style={{ minWidth: '14rem' }}
-            breakpoint="767px"
-            placeholder="Select a City"
-            onChange={(e) => field.onChange(e.value)}
-        />
-    )}
-/>
-{getFormErrorMessage('city')}
-<Button type="submit" label="Submit" />
-        `,
-        javascript: `
-import React, { useRef } from "react";
-import { useForm, Controller } from 'react-hook-form';
-import { CascadeSelect } from 'primereact/cascadeselect';
-import { Button } from 'primereact/button';
-import { Toast } from 'primereact/toast';
-import { classNames } from 'primereact/utils';
-
-export default function HookFormDoc() {
-    const toast = useRef(null);
-    const countries = [
-        {
-            name: 'Australia',
-            code: 'AU',
-            states: [
-                {
-                    name: 'New South Wales',
-                    cities: [
-                        { cname: 'Sydney', code: 'A-SY' },
-                        { cname: 'Newcastle', code: 'A-NE' },
-                        { cname: 'Wollongong', code: 'A-WO' }
-                    ]
-                },
-                {
-                    name: 'Queensland',
-                    cities: [
-                        { cname: 'Brisbane', code: 'A-BR' },
-                        { cname: 'Townsville', code: 'A-TO' }
-                    ]
-                }
-            ]
-        },
-        {
-            name: 'Canada',
-            code: 'CA',
-            states: [
-                {
-                    name: 'Quebec',
-                    cities: [
-                        { cname: 'Montreal', code: 'C-MO' },
-                        { cname: 'Quebec City', code: 'C-QU' }
-                    ]
-                },
-                {
-                    name: 'Ontario',
-                    cities: [
-                        { cname: 'Ottawa', code: 'C-OT' },
-                        { cname: 'Toronto', code: 'C-TO' }
-                    ]
-                }
-            ]
-        },
-        {
-            name: 'United States',
-            code: 'US',
-            states: [
-                {
-                    name: 'California',
-                    cities: [
-                        { cname: 'Los Angeles', code: 'US-LA' },
-                        { cname: 'San Diego', code: 'US-SD' },
-                        { cname: 'San Francisco', code: 'US-SF' }
-                    ]
-                },
-                {
-                    name: 'Florida',
-                    cities: [
-                        { cname: 'Jacksonville', code: 'US-JA' },
-                        { cname: 'Miami', code: 'US-MI' },
-                        { cname: 'Tampa', code: 'US-TA' },
-                        { cname: 'Orlando', code: 'US-OR' }
-                    ]
-                },
-                {
-                    name: 'Texas',
-                    cities: [
-                        { cname: 'Austin', code: 'US-AU' },
-                        { cname: 'Dallas', code: 'US-DA' },
-                        { cname: 'Houston', code: 'US-HO' }
-                    ]
-                }
-            ]
-        }
-    ];
-
-    const show = (data) => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: \`\${data.city.cname}\` });
-    };
-
-    const defaultValues = {
-        city: null
-    };
-
-    const {
-        control,
-        formState: { errors },
-        handleSubmit,
-        reset
-    } = useForm({ defaultValues });
-
-    const onSubmit = (data) => {
-        data.city && show(data);
-
-        reset();
-    };
-
-    const getFormErrorMessage = (name) => {
-        return errors[name] ? <small className="p-error">{errors[name].message}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    return (
-        <div className="card flex justify-content-center">
-            <form onSubmit={handleSubmit(onSubmit)} className="flex flex-column gap-2">
-                <Toast ref={toast} />
-                <Controller
-                    name="city"
-                    control={control}
-                    rules={{ required: 'City is required.' }}
-                    render={({ field, fieldState }) => (
-                        <CascadeSelect
-                            id={field.name}
-                            name="city"
-                            value={field.value}
-                            options={countries}
-                            optionLabel="cname"
-                            optionGroupLabel="name"
-                            optionGroupChildren={['states', 'cities']}
-                            style={{ minWidth: '14rem' }}
-                            breakpoint="767px"
-                            placeholder="Select a City"
-                            className={classNames({ 'p-invalid': fieldState.error })}
-                            onChange={(e) => field.onChange(e.value)}
-                        />
-                    )}
-                />
-                {getFormErrorMessage('city')}
-                <Button type="submit" label="Submit" />
-            </form>
-        </div>
-    )
-}
-        `,
-        typescript: `
-import React, { useRef } from "react";
-import { useForm, Controller } from 'react-hook-form';
-import { CascadeSelect, CascadeSelectChangeEvent } from 'primereact/cascadeselect';
-import { Button } from 'primereact/button';
-import { Toast } from 'primereact/toast';
-import { classNames } from 'primereact/utils';
-
-interface City {
-    cname: string;
-    code: string;
-}
-
-interface CountryState {
-    name: string;
-    cities: City[];
-}
-
-interface Country {
-    name: string;
-    code: string;
-    states: CountryState[];
-}
-
-export default function HookFormDoc() {
-    const toast = useRef(null);
-    const countries: Country[] = [
-        {
-            name: 'Australia',
-            code: 'AU',
-            states: [
-                {
-                    name: 'New South Wales',
-                    cities: [
-                        { cname: 'Sydney', code: 'A-SY' },
-                        { cname: 'Newcastle', code: 'A-NE' },
-                        { cname: 'Wollongong', code: 'A-WO' }
-                    ]
-                },
-                {
-                    name: 'Queensland',
-                    cities: [
-                        { cname: 'Brisbane', code: 'A-BR' },
-                        { cname: 'Townsville', code: 'A-TO' }
-                    ]
-                }
-            ]
-        },
-        {
-            name: 'Canada',
-            code: 'CA',
-            states: [
-                {
-                    name: 'Quebec',
-                    cities: [
-                        { cname: 'Montreal', code: 'C-MO' },
-                        { cname: 'Quebec City', code: 'C-QU' }
-                    ]
-                },
-                {
-                    name: 'Ontario',
-                    cities: [
-                        { cname: 'Ottawa', code: 'C-OT' },
-                        { cname: 'Toronto', code: 'C-TO' }
-                    ]
-                }
-            ]
-        },
-        {
-            name: 'United States',
-            code: 'US',
-            states: [
-                {
-                    name: 'California',
-                    cities: [
-                        { cname: 'Los Angeles', code: 'US-LA' },
-                        { cname: 'San Diego', code: 'US-SD' },
-                        { cname: 'San Francisco', code: 'US-SF' }
-                    ]
-                },
-                {
-                    name: 'Florida',
-                    cities: [
-                        { cname: 'Jacksonville', code: 'US-JA' },
-                        { cname: 'Miami', code: 'US-MI' },
-                        { cname: 'Tampa', code: 'US-TA' },
-                        { cname: 'Orlando', code: 'US-OR' }
-                    ]
-                },
-                {
-                    name: 'Texas',
-                    cities: [
-                        { cname: 'Austin', code: 'US-AU' },
-                        { cname: 'Dallas', code: 'US-DA' },
-                        { cname: 'Houston', code: 'US-HO' }
-                    ]
-                }
-            ]
-        }
-    ];
-
-    const show = (data) => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: \`\${data.city.cname}\` });
-    };
-
-    const defaultValues = {
-        city: null
-    };
-
-    const {
-        control,
-        formState: { errors },
-        handleSubmit,
-        reset
-    } = useForm({ defaultValues });
-
-    const onSubmit = (data) => {
-        data.city && show(data);
-
-        reset();
-    };
-
-    const getFormErrorMessage = (name) => {
-        return errors[name] ? <small className="p-error">{errors[name].message}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    return (
-        <div className="card flex justify-content-center">
-            <form onSubmit={handleSubmit(onSubmit)} className="flex flex-column gap-2">
-                <Toast ref={toast} />
-                <Controller
-                    name="city"
-                    control={control}
-                    rules={{ required: 'City is required.' }}
-                    render={({ field, fieldState }) => (
-                        <CascadeSelect
-                            id={field.name}
-                            name="city"
-                            value={field.value}
-                            options={countries}
-                            optionLabel="cname"
-                            optionGroupLabel="name"
-                            optionGroupChildren={['states', 'cities']}
-                            style={{ minWidth: '14rem' }}
-                            breakpoint="767px"
-                            placeholder="Select a City"
-                            className={classNames({ 'p-invalid': fieldState.error })}
-                            onChange={(e: CascadeSelectChangeEvent) => field.onChange(e.value)}
-                        />
-                    )}
-                />
-                {getFormErrorMessage('city')}
-                <Button type="submit" label="Submit" />
-            </form>
-        </div>
-    )
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props}>
-                <p>
-                    <a href="https://react-hook-form.com/">React Hook Form</a> is another popular React library to handle forms.
-                </p>
-            </DocSectionText>
-            <div className="card flex justify-content-center">
-                <form onSubmit={handleSubmit(onSubmit)} className="flex flex-column gap-2">
-                    <Toast ref={toast} />
-                    <Controller
-                        name="city"
-                        control={control}
-                        rules={{ required: 'City is required.' }}
-                        render={({ field, fieldState }) => (
-                            <CascadeSelect
-                                id={field.name}
-                                name="city"
-                                value={field.value}
-                                options={countries}
-                                optionLabel={'cname'}
-                                optionGroupLabel={'name'}
-                                optionGroupChildren={['states', 'cities']}
-                                style={{ minWidth: '14rem' }}
-                                breakpoint="767px"
-                                placeholder={'Select a City'}
-                                className={classNames({ 'p-invalid': fieldState.error })}
-                                onChange={(e) => field.onChange(e.value)}
-                            />
-                        )}
-                    />
-                    {getFormErrorMessage('city')}
-                    <Button type="submit" label="Submit" />
-                </form>
-            </div>
-            <DocSectionCode code={code} dependencies={{ 'react-hook-form': '^7.39.4' }} />
-        </>
-    );
-}
diff --git a/components/doc/cascadeselect/invaliddoc.js b/components/doc/cascadeselect/invaliddoc.js
index 4a7819bee8..b2d117fefa 100644
--- a/components/doc/cascadeselect/invaliddoc.js
+++ b/components/doc/cascadeselect/invaliddoc.js
@@ -82,9 +82,9 @@ export function InvalidDoc(props) {
 
     const code = {
         basic: `
-<CascadeSelect value={selectedCity} onChange={(e) => setSelectedCity(e.value)} options={countries} 
+<CascadeSelect invalid value={selectedCity} onChange={(e) => setSelectedCity(e.value)} options={countries} 
     optionLabel="cname" optionGroupLabel="name" optionGroupChildren={['states', 'cities']}
-    className="p-invalid w-full md:w-14rem" breakpoint="767px" placeholder="Select a City" style={{ minWidth: '14rem' }} />
+    className="w-full md:w-14rem" breakpoint="767px" placeholder="Select a City" style={{ minWidth: '14rem' }} />
         `,
         javascript: `
 import React, { useState } from "react";
@@ -171,9 +171,9 @@ export default function InvalidDemo() {
 
     return (
         <div className="card flex justify-content-center">
-            <CascadeSelect value={selectedCity} onChange={(e) => setSelectedCity(e.value)} options={countries} 
+            <CascadeSelect invalid value={selectedCity} onChange={(e) => setSelectedCity(e.value)} options={countries} 
                 optionLabel="cname" optionGroupLabel="name" optionGroupChildren={['states', 'cities']}
-                className="p-invalid w-full md:w-14rem" breakpoint="767px" placeholder="Select a City" style={{ minWidth: '14rem' }} />
+                className="w-full md:w-14rem" breakpoint="767px" placeholder="Select a City" style={{ minWidth: '14rem' }} />
         </div>
     )
 }
@@ -279,9 +279,9 @@ export default function InvalidDemo() {
 
     return (
         <div className="card flex justify-content-center">
-            <CascadeSelect value={selectedCity} onChange={(e: CascadeSelectChangeEvent) => setSelectedCity(e.value)} options={countries} 
+            <CascadeSelect invalid value={selectedCity} onChange={(e: CascadeSelectChangeEvent) => setSelectedCity(e.value)} options={countries} 
                 optionLabel="cname" optionGroupLabel="name" optionGroupChildren={['states', 'cities']}
-                className="p-invalid w-full md:w-14rem" breakpoint="767px" placeholder="Select a City" style={{ minWidth: '14rem' }} />
+                className="w-full md:w-14rem" breakpoint="767px" placeholder="Select a City" style={{ minWidth: '14rem' }} />
         </div>
     )
 }
@@ -292,18 +292,19 @@ export default function InvalidDemo() {
         <>
             <DocSectionText {...props}>
                 <p>
-                    Invalid state style is added using the <i>p-invalid</i> class to indicate a failed validation.
+                    Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.
                 </p>
             </DocSectionText>
             <div className="card flex justify-content-center">
                 <CascadeSelect
+                    invalid
                     value={selectedCity}
                     onChange={(e) => setSelectedCity(e.value)}
                     options={countries}
                     optionLabel="cname"
                     optionGroupLabel="name"
                     optionGroupChildren={['states', 'cities']}
-                    className="p-invalid w-full md:w-14rem"
+                    className="w-full md:w-14rem"
                     breakpoint="767px"
                     placeholder="Select a City"
                     style={{ minWidth: '14rem' }}
diff --git a/components/doc/checkbox/filleddoc.js b/components/doc/checkbox/filleddoc.js
new file mode 100644
index 0000000000..fd1ac79533
--- /dev/null
+++ b/components/doc/checkbox/filleddoc.js
@@ -0,0 +1,56 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Checkbox } from '@/components/lib/checkbox/Checkbox';
+import { useState } from 'react';
+
+export function FilledDoc(props) {
+    const [checked, setChecked] = useState(false);
+
+    const code = {
+        basic: `
+<Checkbox onChange={e => setChecked(e.checked)} checked={checked}></Checkbox>
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { Checkbox } from "primereact/checkbox";
+
+export default function FilledDemo() {
+    const [checked, setChecked] = useState(false);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Checkbox variant="filled" onChange={e => setChecked(e.checked)} checked={checked}></Checkbox>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { Checkbox } from "primereact/checkbox";
+
+export default function FilledDemo() {
+    const [checked, setChecked] = useState<boolean>(false);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Checkbox variant="filled" onChange={e => setChecked(e.checked)} checked={checked}></Checkbox>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Checkbox variant="filled" onChange={(e) => setChecked(e.checked)} checked={checked} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/checkbox/form/formikdoc.js b/components/doc/checkbox/form/formikdoc.js
deleted file mode 100644
index dfe2d57770..0000000000
--- a/components/doc/checkbox/form/formikdoc.js
+++ /dev/null
@@ -1,208 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { Button } from '@/components/lib/button/Button';
-import { Checkbox } from '@/components/lib/checkbox/Checkbox';
-import { Toast } from '@/components/lib/toast/Toast';
-import { classNames } from '@/components/lib/utils/Utils';
-import { useFormik } from 'formik';
-import { useRef } from 'react';
-
-export function FormikDoc(props) {
-    const toast = useRef(null);
-
-    const show = () => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: 'The form is successfully submitted.' });
-    };
-
-    const formik = useFormik({
-        initialValues: {
-            checked: false
-        },
-        validate: (data) => {
-            let errors = {};
-
-            if (!data.checked) {
-                errors.checked = 'Accept is required.';
-            }
-
-            return errors;
-        },
-        onSubmit: (data) => {
-            data && show(data);
-            formik.resetForm();
-        }
-    });
-
-    const isFormFieldInvalid = (name) => !!(formik.touched[name] && formik.errors[name]);
-
-    const getFormErrorMessage = (name) => {
-        return isFormFieldInvalid(name) ? <small className="p-error">{formik.errors[name]}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    const code = {
-        basic: `
-<Toast ref={toast} />
-<Checkbox
-    id="checked"
-    name="checked"
-    checked={formik.values.checked}
-    className={classNames({ 'p-invalid': isFormFieldInvalid('checked') })}
-    onChange={(e) => {
-        formik.setFieldValue('checked', e.checked);
-    }}
-></Checkbox>
-{getFormErrorMessage('checked')}
-<Button type="submit" label="Submit" />
-`,
-        javascript: `
-import React, { useRef } from "react";
-import { useFormik } from 'formik';
-import { Button } from 'primereact/button';
-import { Toast } from 'primereact/toast';
-import { Checkbox } from "primereact/checkbox";
-import { classNames } from 'primereact/utils';
-
-export default function FormikDoc() {
-    const toast = useRef(null);
-
-    const show = () => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: 'The form is successfully submitted.' });
-    };
-
-    const formik = useFormik({
-        initialValues: {
-            checked: false
-        },
-        validate: (data) => {
-            let errors = {};
-
-            if (!data.checked) {
-                errors.checked = 'Accept is required.';
-            }
-
-            return errors;
-        },
-        onSubmit: (data) => {
-            data && show(data);
-            formik.resetForm();
-        }
-    });
-
-    const isFormFieldInvalid = (name) => !!(formik.touched[name] && formik.errors[name]);
-
-    const getFormErrorMessage = (name) => {
-        return isFormFieldInvalid(name) ? <small className="p-error">{formik.errors[name]}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    return (
-        <div className="card flex justify-content-center">
-            <form onSubmit={formik.handleSubmit} className="flex flex-column align-items-center gap-2">
-                <div>I've read and accept the terms & conditions.</div>
-                <Toast ref={toast} />
-                <Checkbox
-                    id="checked"
-                    name="checked"
-                    checked={formik.values.checked}
-                    className={classNames({ 'p-invalid': isFormFieldInvalid('checked') })}
-                    onChange={(e) => {
-                        formik.setFieldValue('checked', e.checked);
-                    }}
-                ></Checkbox>
-                {getFormErrorMessage('checked')}
-                <Button type="submit" label="Submit" />
-            </form>
-        </div>
-    )
-}
-        `,
-        typescript: `
-import React, { useRef } from "react";
-import { useFormik } from 'formik';
-import { Button } from 'primereact/button';
-import { Toast } from 'primereact/toast';
-import { Checkbox } from "primereact/checkbox";
-import { classNames } from 'primereact/utils';
-
-export default function FormikDoc() {
-    const toast = useRef(null);
-
-    const show = () => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: 'The form is successfully submitted.' });
-    };
-
-    const formik = useFormik({
-        initialValues: {
-            checked: false
-        },
-        validate: (data) => {
-            let errors = {};
-
-            if (!data.checked) {
-                errors.checked = 'Accept is required.';
-            }
-
-            return errors;
-        },
-        onSubmit: (data) => {
-            data && show(data);
-            formik.resetForm();
-        }
-    });
-
-    const isFormFieldInvalid = (name) => !!(formik.touched[name] && formik.errors[name]);
-
-    const getFormErrorMessage = (name) => {
-        return isFormFieldInvalid(name) ? <small className="p-error">{formik.errors[name]}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    return (
-        <div className="card flex justify-content-center">
-            <form onSubmit={formik.handleSubmit} className="flex flex-column align-items-center gap-2">
-                <div>I've read and accept the terms & conditions.</div>
-                <Toast ref={toast} />
-                <Checkbox
-                    id="checked"
-                    name="checked"
-                    checked={formik.values.checked}
-                    className={classNames({ 'p-invalid': isFormFieldInvalid('checked') })}
-                    onChange={(e) => {
-                        formik.setFieldValue('checked', e.checked);
-                    }}
-                ></Checkbox>
-                {getFormErrorMessage('checked')}
-                <Button type="submit" label="Submit" />
-            </form>
-        </div>
-    )
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props}>
-                <p>
-                    <a href="https://formik.org/">Formik</a> is a popular library for handling forms in React.
-                </p>
-            </DocSectionText>
-            <div className="card flex justify-content-center">
-                <form onSubmit={formik.handleSubmit} className="flex flex-column align-items-center gap-2">
-                    <div>I've read and accept the terms & conditions.</div>
-                    <Toast ref={toast} />
-                    <Checkbox
-                        id="checked"
-                        name="checked"
-                        checked={formik.values.checked}
-                        className={classNames({ 'p-invalid': isFormFieldInvalid('checked') })}
-                        onChange={(e) => {
-                            formik.setFieldValue('checked', e.checked);
-                        }}
-                    />
-                    {getFormErrorMessage('checked')}
-                    <Button type="submit" label="Submit" />
-                </form>
-            </div>
-            <DocSectionCode code={code} dependencies={{ formik: '^2.2.6' }} />
-        </>
-    );
-}
diff --git a/components/doc/checkbox/form/hookformdoc.js b/components/doc/checkbox/form/hookformdoc.js
deleted file mode 100644
index 25bbb9560f..0000000000
--- a/components/doc/checkbox/form/hookformdoc.js
+++ /dev/null
@@ -1,205 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { Button } from '@/components/lib/button/Button';
-import { Checkbox } from '@/components/lib/checkbox/Checkbox';
-import { Toast } from '@/components/lib/toast/Toast';
-import { classNames } from '@/components/lib/utils/Utils';
-import { useRef } from 'react';
-import { Controller, useForm } from 'react-hook-form';
-
-export function HookFormDoc(props) {
-    const toast = useRef(null);
-
-    const show = () => {
-        // TO DO: Add detail content to the toast.
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: 'The form is successfully submitted.' });
-    };
-
-    const defaultValues = {
-        checked: false
-    };
-
-    const {
-        control,
-        formState: { errors },
-        handleSubmit,
-        reset
-    } = useForm({ defaultValues });
-
-    const onSubmit = (data) => {
-        data.checked && show();
-
-        reset();
-    };
-
-    const getFormErrorMessage = (name) => {
-        return errors[name] ? <small className="p-error">{errors[name].message}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    const code = {
-        basic: `
-<Toast ref={toast} />
-<Controller
-    name="checked"
-    control={control}
-    rules={{ required: 'Accept is required.' }}
-    render={({ field, fieldState }) => (
-        <>
-            <label htmlFor={field.name} className={classNames({ 'p-error': errors.checked })}></label>
-            <Checkbox inputId={field.name} checked={field.value} inputRef={field.ref} className={classNames({ 'p-invalid mr-1': fieldState.error })} onChange={(e) => field.onChange(e.checked)} />
-            {getFormErrorMessage(field.name)}
-        </>
-        `,
-        javascript: `
-import React, { useRef } from 'react';
-import { Controller, useForm } from 'react-hook-form';
-import { Button } from 'primereact/button';
-import { classNames } from 'primereact/utils';
-import { Toast } from 'primereact/toast';
-import { Checkbox } from "primereact/checkbox";
-
-export default function HookFormDoc() {
-    const toast = useRef(null);
-
-    const show = () => {
-        // TO DO: Add detail content to the toast.
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: 'The form is successfully submitted.' });
-    };
-
-    const defaultValues = {
-        checked: false
-    };
-
-    const {
-        control,
-        formState: { errors },
-        handleSubmit,
-        reset
-    } = useForm({ defaultValues });
-
-    const onSubmit = (data) => {
-        data.checked && show();
-
-        reset();
-    };
-
-    const getFormErrorMessage = (name) => {
-        return errors[name] ? <small className="p-error">{errors[name].message}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    return (
-        <div className="card flex justify-content-center">
-            <form onSubmit={handleSubmit(onSubmit)} className="flex flex-column align-items-center gap-2">
-                I've read and accept the terms & conditions.
-                <Toast ref={toast} />
-                <Controller
-                    name="checked"
-                    control={control}
-                    rules={{ required: 'Accept is required.' }}
-                    render={({ field, fieldState }) => (
-                        <>
-                            <label htmlFor={field.name} className={classNames({ 'p-error': errors.checked })}></label>
-                            <Checkbox inputId={field.name} checked={field.value} inputRef={field.ref} className={classNames({ 'p-invalid': fieldState.error })} onChange={(e) => field.onChange(e.checked)} />
-                            {getFormErrorMessage(field.name)}
-                        </>
-                    )}
-                />
-                <Button label="Submit" type="submit" icon="pi pi-check" />
-            </form>
-        </div>
-    )
-}
-        `,
-        typescript: `
-import React, { useRef } from 'react';
-import { Controller, useForm } from 'react-hook-form';
-import { Button } from 'primereact/button';
-import { classNames } from 'primereact/utils';
-import { Toast } from 'primereact/toast';
-import { Checkbox } from "primereact/checkbox";
-
-export default function HookFormDoc() {
-    const toast = useRef(null);
-
-    const show = () => {
-        // TO DO: Add detail content to the toast.
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: 'The form is successfully submitted.' });
-    };
-
-    const defaultValues = {
-        checked: false
-    };
-
-    const {
-        control,
-        formState: { errors },
-        handleSubmit,
-        reset
-    } = useForm({ defaultValues });
-
-    const onSubmit = (data) => {
-        data.checked && show();
-
-        reset();
-    };
-
-    const getFormErrorMessage = (name) => {
-        return errors[name] ? <small className="p-error">{errors[name].message}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    return (
-        <div className="card flex justify-content-center">
-            <form onSubmit={handleSubmit(onSubmit)} className="flex flex-column align-items-center gap-2">
-                I've read and accept the terms & conditions.
-                <Toast ref={toast} />
-                <Controller
-                    name="checked"
-                    control={control}
-                    rules={{ required: 'Accept is required.' }}
-                    render={({ field, fieldState }) => (
-                        <>
-                            <label htmlFor={field.name} className={classNames({ 'p-error': errors.checked })}></label>
-                            <Checkbox inputId={field.name} checked={field.value} inputRef={field.ref} className={classNames({ 'p-invalid': fieldState.error })} onChange={(e) => field.onChange(e.checked)} />
-                            {getFormErrorMessage(field.name)}
-                        </>
-                    )}
-                />
-                <Button label="Submit" type="submit" icon="pi pi-check" />
-            </form>
-        </div>
-    )
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props}>
-                <p>
-                    <a href="https://react-hook-form.com/">React Hook Form</a> is another popular React library to handle forms.
-                </p>
-            </DocSectionText>
-            <div className="card flex justify-content-center">
-                <form onSubmit={handleSubmit(onSubmit)} className="flex flex-column align-items-center gap-2">
-                    I've read and accept the terms & conditions.
-                    <Toast ref={toast} />
-                    <Controller
-                        name="checked"
-                        control={control}
-                        rules={{ required: 'Accept is required.' }}
-                        render={({ field, fieldState }) => (
-                            <>
-                                <label htmlFor={field.name} className={classNames({ 'p-error': errors.checked })} />
-                                <Checkbox inputId={field.name} checked={field.value} inputRef={field.ref} className={classNames({ 'p-invalid': fieldState.error })} onChange={(e) => field.onChange(e.checked)} />
-                                {getFormErrorMessage(field.name)}
-                            </>
-                        )}
-                    />
-                    <Button label="Submit" type="submit" icon="pi pi-check" />
-                </form>
-            </div>
-
-            <DocSectionCode code={code} dependencies={{ 'react-hook-form': '^7.39.4' }} />
-        </>
-    );
-}
diff --git a/components/doc/checkbox/invaliddoc.js b/components/doc/checkbox/invaliddoc.js
index 95b8ec8b46..900cfddcfe 100644
--- a/components/doc/checkbox/invaliddoc.js
+++ b/components/doc/checkbox/invaliddoc.js
@@ -1,20 +1,25 @@
 import { DocSectionCode } from '@/components/doc/common/docsectioncode';
 import { DocSectionText } from '@/components/doc/common/docsectiontext';
 import { Checkbox } from '@/components/lib/checkbox/Checkbox';
+import { useState } from 'react';
 
 export function InvalidDoc(props) {
+    const [checked, setChecked] = useState(false);
+
     const code = {
         basic: `
-<Checkbox className="p-invalid"></Checkbox>
+<Checkbox invalid={!checked} onChange={(e) => setChecked(e.checked)} checked={checked}></Checkbox>
         `,
         javascript: `
 import React, { useState } from "react";
 import { Checkbox } from "primereact/checkbox";
 
-export default function InvalidDemo() {
+export default function InvalidDemo() { 
+    const [checked, setChecked] = useState(false);
+
     return (
         <div className="card flex justify-content-center">
-            <Checkbox className="p-invalid"></Checkbox>
+            <Checkbox invalid={!checked} onChange={(e) => setChecked(e.checked)} checked={checked}></Checkbox>
         </div>
     )
 }
@@ -24,9 +29,11 @@ import React, { useState } from "react";
 import { Checkbox } from "primereact/checkbox";
 
 export default function InvalidDemo() {
+    const [checked, setChecked] = useState(false);
+
     return (
         <div className="card flex justify-content-center">
-            <Checkbox className="p-invalid"></Checkbox>
+            <Checkbox invalid={!checked} onChange={(e) => setChecked(e.checked)} checked={checked}></Checkbox>
         </div>
     )
 }
@@ -37,11 +44,11 @@ export default function InvalidDemo() {
         <>
             <DocSectionText {...props}>
                 <p>
-                    Invalid state style is added using the <i>p-invalid</i> class to indicate a failed validation.
+                    Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.
                 </p>
             </DocSectionText>
             <div className="card flex justify-content-center">
-                <Checkbox className="p-invalid" />
+                <Checkbox invalid={!checked} onChange={(e) => setChecked(e.checked)} checked={checked} />
             </div>
             <DocSectionCode code={code} />
         </>
diff --git a/components/doc/chips/filleddoc.js b/components/doc/chips/filleddoc.js
new file mode 100644
index 0000000000..ffc1b2f969
--- /dev/null
+++ b/components/doc/chips/filleddoc.js
@@ -0,0 +1,56 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Chips } from '@/components/lib/chips/Chips';
+import { useState } from 'react';
+
+export function FilledDoc(props) {
+    const [value, setValue] = useState([]);
+
+    const code = {
+        basic: `
+<Chips variant="filled" value={value} onChange={(e) => setValue(e.value)} />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { Chips } from "primereact/chips";
+
+export default function FilledDemo() {
+    const [value, setValue] = useState([]);
+
+    return (
+        <div className="card p-fluid">
+            <Chips variant="filled" value={value} onChange={(e) => setValue(e.value)} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { Chips, ChipsChangeEvent } from "primereact/chips";
+
+export default function FilledDemo() {
+    const [value, setValue] = useState<string[]>([]);
+
+    return (
+        <div className="card p-fluid">
+            <Chips variant="filled" value={value} onChange={(e: ChipsChangeEvent) => setValue(e.value)} />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.
+                </p>
+            </DocSectionText>
+            <div className="card p-fluid">
+                <Chips variant="filled" value={value} onChange={(e) => setValue(e.value)} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/chips/floatlabeldoc.js b/components/doc/chips/floatlabeldoc.js
index 0e2fa24097..d0e4d09f99 100644
--- a/components/doc/chips/floatlabeldoc.js
+++ b/components/doc/chips/floatlabeldoc.js
@@ -1,6 +1,8 @@
 import { DocSectionCode } from '@/components/doc/common/docsectioncode';
 import { DocSectionText } from '@/components/doc/common/docsectiontext';
 import { Chips } from '@/components/lib/chips/Chips';
+import { FloatLabel } from '@/components/lib/floatlabel/FloatLabel';
+import Link from 'next/link';
 import { useState } from 'react';
 
 export function FloatLabelDoc(props) {
@@ -8,24 +10,25 @@ export function FloatLabelDoc(props) {
 
     const code = {
         basic: `
-<span className="p-float-label">
+<FloatLabel>
     <Chips id="username" value={value} onChange={(e) => setValue(e.value)} />
     <label htmlFor="username">Username</label>
-</span>
+</FloatLabel>
         `,
         javascript: `
 import React, { useState } from "react";
 import { Chips } from "primereact/chips";
+import { FloatLabel } from "primereact/floatlabel";
 
 export default function FloatLabelDemo() {
     const [value, setValue] = useState([]);
 
     return (
         <div className="card p-fluid">
-            <span className="p-float-label">
+            <FloatLabel>
                 <Chips id="username" value={value} onChange={(e) => setValue(e.value)} />
                 <label htmlFor="username">Username</label>
-            </span>
+            </FloatLabel>
         </div>
     )
 }
@@ -33,16 +36,17 @@ export default function FloatLabelDemo() {
         typescript: `
 import React, { useState } from "react";
 import { Chips, ChipsChangeEvent } from "primereact/chips";
+import { FloatLabel } from "primereact/floatlabel";
 
 export default function FloatLabelDemo() {
     const [value, setValue] = useState<string[]>([]);
 
     return (
         <div className="card p-fluid">
-            <span className="p-float-label">
+            <FloatLabel>
                 <Chips id="username" value={value} onChange={(e: ChipsChangeEvent) => setValue(e.value)} />
                 <label htmlFor="username">Username</label>
-            </span>
+            </FloatLabel>
         </div>
     )
 }
@@ -52,13 +56,15 @@ export default function FloatLabelDemo() {
     return (
         <>
             <DocSectionText {...props}>
-                <p>A floating label appears on top of the input field when focused.</p>
+                <p>
+                    A floating label appears on top of the input field when focused. Visit <Link href="/floatlabel">FloatLabel</Link> documentation for more information.
+                </p>
             </DocSectionText>
             <div className="card p-fluid">
-                <span className="p-float-label">
+                <FloatLabel>
                     <Chips id="username" value={value} onChange={(e) => setValue(e.value)} />
                     <label htmlFor="username">Username</label>
-                </span>
+                </FloatLabel>
             </div>
             <DocSectionCode code={code} />
         </>
diff --git a/components/doc/chips/form/formikdoc.js b/components/doc/chips/form/formikdoc.js
deleted file mode 100644
index cadefb4072..0000000000
--- a/components/doc/chips/form/formikdoc.js
+++ /dev/null
@@ -1,217 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { Button } from '@/components/lib/button/Button';
-import { Chips } from '@/components/lib/chips/Chips';
-import { Toast } from '@/components/lib/toast/Toast';
-import { classNames } from '@/components/lib/utils/Utils';
-import { useFormik } from 'formik';
-import { useRef } from 'react';
-
-export function FormikDoc(props) {
-    const toast = useRef(null);
-
-    const show = (data) => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: `${data.chipArray}` });
-    };
-
-    const formik = useFormik({
-        initialValues: {
-            chipArray: []
-        },
-        validate: (data) => {
-            let errors = {};
-
-            if (!data.chipArray.length > 0) {
-                errors.chipArray = 'At least one chip is required.';
-            }
-
-            return errors;
-        },
-        onSubmit: (data) => {
-            data.chipArray.length > 0 && show(data);
-            formik.resetForm();
-        }
-    });
-
-    const isFormFieldInvalid = (name) => !!(formik.touched[name] && formik.errors[name]);
-
-    const getFormErrorMessage = (name) => {
-        return isFormFieldInvalid(name) ? <small className="p-error">{formik.errors[name]}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    const code = {
-        basic: `
-<Toast ref={toast} />
-<Chips
-    inputId="c_chipArray"
-    name="chipArray"
-    value={formik.values.chipArray}
-    className={classNames({ 'p-invalid': isFormFieldInvalid('chipArray') })}
-    onChange={(e) => {
-        formik.setFieldValue('chipArray', e.value);
-    }}
-    pt={{
-        input: { autoComplete: 'off' }
-    }}
-/>
-{getFormErrorMessage('chipArray')}
-<Button type="submit" label="Submit" className='w-7rem' />
-        `,
-        javascript: `
-import React, { useRef } from "react";
-import { useFormik } from 'formik';
-import { Chips } from 'primereact/chips';
-import { Button } from 'primereact/button';
-import { Toast } from 'primereact/toast';
-import { classNames } from 'primereact/utils';
-
-export default function FormikDoc() {
-    const toast = useRef(null);
-
-    const show = (data) => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: \`\${data.chipArray}\` });
-    };
-
-    const formik = useFormik({
-        initialValues: {
-            chipArray: []
-        },
-        validate: (data) => {
-            let errors = {};
-
-            if (!data.chipArray.length > 0) {
-                errors.chipArray = 'At least one chip is required.';
-            }
-
-            return errors;
-        },
-        onSubmit: (data) => {
-            data.chipArray.length > 0 && show(data);
-            formik.resetForm();
-        }
-    });
-
-    const isFormFieldInvalid = (name) => !!(formik.touched[name] && formik.errors[name]);
-
-    const getFormErrorMessage = (name) => {
-        return isFormFieldInvalid(name) ? <small className="p-error">{formik.errors[name]}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    return (
-        <div className="card p-fluid justify-content-center">
-            <form onSubmit={formik.handleSubmit} className="flex flex-column gap-2">
-                <Toast ref={toast} />
-                <Chips
-                    inputId="c_chipArray"
-                    name="chipArray"
-                    value={formik.values.chipArray}
-                    className={classNames({ 'p-invalid': isFormFieldInvalid('chipArray') })}
-                    onChange={(e) => {
-                        formik.setFieldValue('chipArray', e.value);
-                    }}
-                    pt={{
-                        input: { autoComplete: 'off' }
-                    }}
-                />
-                {getFormErrorMessage('chipArray')}
-                <Button type="submit" label="Submit" className='w-7rem' />
-            </form>
-        </div>
-    )
-}
-        `,
-        typescript: `
-import React, { useRef } from "react";
-import { useFormik } from 'formik';
-import { Chips } from 'primereact/chips';
-import { Button } from 'primereact/button';
-import { Toast } from 'primereact/toast';
-import { classNames } from 'primereact/utils';
-
-export default function FormikDoc() {
-    const toast = useRef(null);
-
-    const show = (data) => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: \`\${data.chipArray}\` });
-    };
-
-    const formik = useFormik({
-        initialValues: {
-            chipArray: []
-        },
-        validate: (data) => {
-            let errors = {};
-
-            if (!data.chipArray.length > 0) {
-                errors.chipArray = 'At least one chip is required.';
-            }
-
-            return errors;
-        },
-        onSubmit: (data) => {
-            data.chipArray.length > 0 && show(data);
-            formik.resetForm();
-        }
-    });
-
-    const isFormFieldInvalid = (name) => !!(formik.touched[name] && formik.errors[name]);
-
-    const getFormErrorMessage = (name) => {
-        return isFormFieldInvalid(name) ? <small className="p-error">{formik.errors[name]}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    return (
-        <div className="card p-fluid justify-content-center">
-            <form onSubmit={formik.handleSubmit} className="flex flex-column gap-2">
-                <Toast ref={toast} />
-                <Chips
-                    inputId="c_chipArray"
-                    name="chipArray"
-                    value={formik.values.chipArray}
-                    className={classNames({ 'p-invalid': isFormFieldInvalid('chipArray') })}
-                    onChange={(e) => {
-                        formik.setFieldValue('chipArray', e.value);
-                    }}
-                    pt={{
-                        input: { autoComplete: 'off' }
-                    }}
-                />
-                {getFormErrorMessage('chipArray')}
-                <Button type="submit" label="Submit" className='w-7rem' />
-            </form>
-        </div>
-    )
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props}>
-                <p>
-                    <a href="https://formik.org/">Formik</a> is a popular library for handling forms in React.
-                </p>
-            </DocSectionText>
-            <div className="card p-fluid justify-content-center">
-                <form onSubmit={formik.handleSubmit} className="flex flex-column gap-2">
-                    <Toast ref={toast} />
-                    <Chips
-                        inputId="c_chipArray"
-                        name="chipArray"
-                        value={formik.values.chipArray}
-                        className={classNames({ 'p-invalid': isFormFieldInvalid('chipArray') })}
-                        onChange={(e) => {
-                            formik.setFieldValue('chipArray', e.value);
-                        }}
-                        pt={{
-                            input: { autoComplete: 'off' }
-                        }}
-                    />
-                    {getFormErrorMessage('chipArray')}
-                    <Button type="submit" label="Submit" className="w-7rem" />
-                </form>
-            </div>
-            <DocSectionCode code={code} dependencies={{ formik: '^2.2.6' }} />
-        </>
-    );
-}
diff --git a/components/doc/chips/form/hookformdoc.js b/components/doc/chips/form/hookformdoc.js
deleted file mode 100644
index bff944e6a7..0000000000
--- a/components/doc/chips/form/hookformdoc.js
+++ /dev/null
@@ -1,181 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { Button } from '@/components/lib/button/Button';
-import { Chips } from '@/components/lib/chips/Chips';
-import { Toast } from '@/components/lib/toast/Toast';
-import { classNames } from '@/components/lib/utils/Utils';
-import { useRef } from 'react';
-import { Controller, useForm } from 'react-hook-form';
-
-export function HookFormDoc(props) {
-    const toast = useRef(null);
-
-    const show = (data) => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: `${data.chipArray}` });
-    };
-
-    const defaultValues = {
-        chipArray: null
-    };
-
-    const {
-        control,
-        formState: { errors },
-        handleSubmit,
-        reset
-    } = useForm({ defaultValues });
-
-    const onSubmit = (data) => {
-        data.chipArray.length > 0 && show(data);
-
-        reset();
-    };
-
-    const getFormErrorMessage = (name) => {
-        return errors[name] ? <small className="p-error">{errors[name].message}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    const code = {
-        basic: `
-<Toast ref={toast} />
-<Controller
-    name="chipArray"
-    control={control}
-    rules={{ required: 'At least one chip is required.' }}
-    render={({ field, fieldState }) => <Chips id={field.name} name="chipArray" value={field.value} onChange={(e) => field.onChange(e.value)} className={classNames({ 'p-invalid': fieldState.error })} />}
-/>
-{getFormErrorMessage('chipArray')}
-<Button type="submit" label="Submit" className="w-7rem" />
-        `,
-        javascript: `
-import React, { useRef } from "react";
-import { useForm, Controller } from 'react-hook-form';
-import { Chips } from 'primereact/chips';
-import { Button } from 'primereact/button';
-import { Toast } from 'primereact/toast';
-import { classNames } from 'primereact/utils';
-
-export default function HookFormDoc() {
-    const toast = useRef(null);
-
-    const show = (data) => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: \`\${data.chipArray}\` });
-    };
-
-    const defaultValues = {
-        chipArray: null
-    };
-
-    const {
-        control,
-        formState: { errors },
-        handleSubmit,
-        reset
-    } = useForm({ defaultValues });
-
-    const onSubmit = (data) => {
-        data.chipArray.length > 0 && show(data);
-
-        reset();
-    };
-
-    const getFormErrorMessage = (name) => {
-        return errors[name] ? <small className="p-error">{errors[name].message}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    return (
-        <div className="card p-fluid justify-content-center">
-            <form onSubmit={handleSubmit(onSubmit)} className="flex flex-column gap-2">
-                <Toast ref={toast} />
-                <Controller
-                    name="chipArray"
-                    control={control}
-                    rules={{ required: 'At least one chip is required.' }}
-                    render={({ field, fieldState }) => <Chips id={field.name} name="chipArray" value={field.value} onChange={(e) => field.onChange(e.value)} className={classNames({ 'p-invalid': fieldState.error })} />}
-                />
-                {getFormErrorMessage('chipArray')}
-                <Button type="submit" label="Submit" className="w-7rem" />
-            </form>
-        </div>
-    )
-}
-        `,
-        typescript: `
-import React, { useRef } from "react";
-import { useForm, Controller } from 'react-hook-form';
-import { Chips } from 'primereact/chips';
-import { Button } from 'primereact/button';
-import { Toast } from 'primereact/toast';
-import { classNames } from 'primereact/utils';
-
-export default function HookFormDoc() {
-    const toast = useRef(null);
-
-    const show = (data) => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: \`\${data.chipArray}\` });
-    };
-
-    const defaultValues = {
-        chipArray: null
-    };
-
-    const {
-        control,
-        formState: { errors },
-        handleSubmit,
-        reset
-    } = useForm({ defaultValues });
-
-    const onSubmit = (data) => {
-        data.chipArray.length > 0 && show(data);
-
-        reset();
-    };
-
-    const getFormErrorMessage = (name) => {
-        return errors[name] ? <small className="p-error">{errors[name].message}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    return (
-        <div className="card p-fluid justify-content-center">
-            <form onSubmit={handleSubmit(onSubmit)} className="flex flex-column gap-2">
-                <Toast ref={toast} />
-                <Controller
-                    name="chipArray"
-                    control={control}
-                    rules={{ required: 'At least one chip is required.' }}
-                    render={({ field, fieldState }) => <Chips id={field.name} name="chipArray" value={field.value} onChange={(e) => field.onChange(e.value)} className={classNames({ 'p-invalid': fieldState.error })} />}
-                />
-                {getFormErrorMessage('chipArray')}
-                <Button type="submit" label="Submit" className="w-7rem" />
-            </form>
-        </div>
-    )
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props}>
-                <p>
-                    <a href="https://react-hook-form.com/">React Hook Form</a> is another popular React library to handle forms.
-                </p>
-            </DocSectionText>
-            <div className="card p-fluid justify-content-center">
-                <form onSubmit={handleSubmit(onSubmit)} className="flex flex-column gap-2">
-                    <Toast ref={toast} />
-                    <Controller
-                        name="chipArray"
-                        control={control}
-                        rules={{ required: 'At least one chip is required.' }}
-                        render={({ field, fieldState }) => <Chips id={field.name} name="chipArray" value={field.value} onChange={(e) => field.onChange(e.value)} className={classNames({ 'p-invalid': fieldState.error })} />}
-                    />
-                    {getFormErrorMessage('chipArray')}
-                    <Button type="submit" label="Submit" className="w-7rem" />
-                </form>
-            </div>
-            <DocSectionCode code={code} dependencies={{ 'react-hook-form': '^7.39.4' }} />
-        </>
-    );
-}
diff --git a/components/doc/chips/invaliddoc.js b/components/doc/chips/invaliddoc.js
index ed8b41e63d..07fa6efed2 100644
--- a/components/doc/chips/invaliddoc.js
+++ b/components/doc/chips/invaliddoc.js
@@ -8,7 +8,7 @@ export function InvalidDoc(props) {
 
     const code = {
         basic: `
-<Chips value={value} onChange={(e) => setValue(e.value)} />
+<Chips invalid value={value} onChange={(e) => setValue(e.value)} />
         `,
         javascript: `
 import React, { useState } from "react";
@@ -19,7 +19,7 @@ export default function InvalidDemo() {
 
     return (
         <div className="card p-fluid">
-            <Chips value={value} onChange={(e) => setValue(e.value)} className="p-invalid" />
+            <Chips invalid value={value} onChange={(e) => setValue(e.value)} />
         </div>
     )
 }
@@ -33,7 +33,7 @@ export default function InvalidDemo() {
 
     return (
         <div className="card p-fluid">
-            <Chips value={value} onChange={(e: ChipsChangeEvent) => setValue(e.value)} className="p-invalid" />
+            <Chips invalid value={value} onChange={(e: ChipsChangeEvent) => setValue(e.value)} />
         </div>
     )
 }
@@ -44,11 +44,11 @@ export default function InvalidDemo() {
         <>
             <DocSectionText {...props}>
                 <p>
-                    Invalid state style is added using the <i>p-invalid</i> class to indicate a failed validation.
+                    Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.
                 </p>
             </DocSectionText>
             <div className="card p-fluid">
-                <Chips value={value} onChange={(e) => setValue(e.value)} className="p-invalid" />
+                <Chips invalid value={value} onChange={(e) => setValue(e.value)} />
             </div>
             <DocSectionCode code={code} />
         </>
diff --git a/components/doc/colorpicker/form/formikdoc.js b/components/doc/colorpicker/form/formikdoc.js
deleted file mode 100644
index df1300963e..0000000000
--- a/components/doc/colorpicker/form/formikdoc.js
+++ /dev/null
@@ -1,208 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { Button } from '@/components/lib/button/Button';
-import { ColorPicker } from '@/components/lib/colorpicker/ColorPicker';
-import { Toast } from '@/components/lib/toast/Toast';
-import { classNames } from '@/components/lib/utils/Utils';
-import { useFormik } from 'formik';
-import { useRef } from 'react';
-
-export function FormikDoc(props) {
-    const toast = useRef(null);
-
-    const show = (data) => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: `#${data.color.toUpperCase()}` });
-    };
-
-    const formik = useFormik({
-        initialValues: {
-            color: ''
-        },
-        validate: (data) => {
-            let errors = {};
-
-            if (!data.color) {
-                errors.color = 'Color is required.';
-            }
-
-            return errors;
-        },
-        onSubmit: (data) => {
-            data.color && show(data);
-            formik.resetForm();
-        }
-    });
-
-    const isFormFieldInvalid = (name) => !!(formik.touched[name] && formik.errors[name]);
-
-    const getFormErrorMessage = (name) => {
-        return isFormFieldInvalid(name) ? <small className="p-error">{formik.errors[name]}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    const code = {
-        basic: `
-<Toast ref={toast} />
-<ColorPicker
-    id="color"
-    name="color"
-    value={formik.values.color}
-    className={classNames({ 'p-invalid': isFormFieldInvalid('item') })}
-    onChange={(e) => {
-        formik.setFieldValue('color', e.value);
-    }}
-/>
-{getFormErrorMessage('color')}
-<Button type="submit" label="Submit" />
-        `,
-        javascript: `
-import React, { useRef } from "react";
-import { useFormik } from 'formik';
-import { ColorPicker } from 'primereact/colorpicker';
-import { Button } from 'primereact/button';
-import { Toast } from 'primereact/toast';
-import { classNames } from 'primereact/utils';
-
-export default function FormikDoc() {
-    const toast = useRef(null);
-
-    const show = (data) => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: \`#\${data.color.toUpperCase()}\` });
-    };
-
-    const formik = useFormik({
-        initialValues: {
-            color: ''
-        },
-        validate: (data) => {
-            let errors = {};
-
-            if (!data.color) {
-                errors.color = 'Color is required.';
-            }
-
-            return errors;
-        },
-        onSubmit: (data) => {
-            data.color && show(data);
-            formik.resetForm();
-        }
-    });
-
-    const isFormFieldInvalid = (name) => !!(formik.touched[name] && formik.errors[name]);
-
-    const getFormErrorMessage = (name) => {
-        return isFormFieldInvalid(name) ? <small className="p-error">{formik.errors[name]}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    return (
-        <div className="card flex justify-content-center">
-            <form onSubmit={formik.handleSubmit} className="flex flex-column align-items-center gap-2">
-                <Toast ref={toast} />
-                <ColorPicker
-                    id="color"
-                    name="color"
-                    value={formik.values.color}
-                    className={classNames({ 'p-invalid': isFormFieldInvalid('item') })}
-                    onChange={(e) => {
-                        formik.setFieldValue('color', e.value);
-                    }}
-                />
-
-                {getFormErrorMessage('color')}
-                <Button type="submit" label="Submit" />
-            </form>
-        </div>
-    )
-}
-        `,
-        typescript: `
-import React, { useRef } from "react";
-import { useFormik } from 'formik';
-import { ColorPicker } from 'primereact/colorpicker';
-import { Button } from 'primereact/button';
-import { Toast } from 'primereact/toast';
-import { classNames } from 'primereact/utils';
-
-export default function FormikDoc() {
-    const toast = useRef(null);
-
-    const show = (data) => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: \`#\${data.color.toUpperCase()}\` });
-    };
-
-    const formik = useFormik({
-        initialValues: {
-            color: ''
-        },
-        validate: (data) => {
-            let errors = {};
-
-            if (!data.color) {
-                errors.color = 'Color is required.';
-            }
-
-            return errors;
-        },
-        onSubmit: (data) => {
-            data.color && show(data);
-            formik.resetForm();
-        }
-    });
-
-    const isFormFieldInvalid = (name) => !!(formik.touched[name] && formik.errors[name]);
-
-    const getFormErrorMessage = (name) => {
-        return isFormFieldInvalid(name) ? <small className="p-error">{formik.errors[name]}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    return (
-        <div className="card flex justify-content-center">
-            <form onSubmit={formik.handleSubmit} className="flex flex-column align-items-center gap-2">
-                <Toast ref={toast} />
-                <ColorPicker
-                    id="color"
-                    name="color"
-                    value={formik.values.color}
-                    className={classNames({ 'p-invalid': isFormFieldInvalid('item') })}
-                    onChange={(e) => {
-                        formik.setFieldValue('color', e.value);
-                    }}
-                />
-
-                {getFormErrorMessage('color')}
-                <Button type="submit" label="Submit" />
-            </form>
-        </div>
-    )
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props}>
-                <p>
-                    <a href="https://formik.org/">Formik</a> is a popular library for handling forms in React.
-                </p>
-            </DocSectionText>
-            <div className="card flex justify-content-center ">
-                <form onSubmit={formik.handleSubmit} className="flex flex-column align-items-center gap-2">
-                    <Toast ref={toast} />
-                    <ColorPicker
-                        id="color"
-                        name="color"
-                        value={formik.values.color}
-                        className={classNames({ 'p-invalid': isFormFieldInvalid('color') })}
-                        onChange={(e) => {
-                            formik.setFieldValue('color', e.value);
-                        }}
-                    />
-
-                    {getFormErrorMessage('color')}
-                    <Button type="submit" label="Submit" />
-                </form>
-            </div>
-            <DocSectionCode code={code} dependencies={{ formik: '^2.2.6' }} />
-        </>
-    );
-}
diff --git a/components/doc/colorpicker/form/hookformdoc.js b/components/doc/colorpicker/form/hookformdoc.js
deleted file mode 100644
index 683748957d..0000000000
--- a/components/doc/colorpicker/form/hookformdoc.js
+++ /dev/null
@@ -1,181 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { Button } from '@/components/lib/button/Button';
-import { ColorPicker } from '@/components/lib/colorpicker/ColorPicker';
-import { Toast } from '@/components/lib/toast/Toast';
-import { classNames } from '@/components/lib/utils/Utils';
-import { useRef } from 'react';
-import { Controller, useForm } from 'react-hook-form';
-
-export function HookFormDoc(props) {
-    const toast = useRef(null);
-
-    const show = (data) => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: `#${data.color.toUpperCase()}` });
-    };
-
-    const defaultValues = {
-        color: ''
-    };
-
-    const {
-        control,
-        formState: { errors },
-        handleSubmit,
-        reset
-    } = useForm({ defaultValues });
-
-    const onSubmit = (data) => {
-        data.color && show(data);
-
-        reset();
-    };
-
-    const getFormErrorMessage = (name) => {
-        return errors[name] ? <small className="p-error">{errors[name].message}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    const code = {
-        basic: `
-<Toast ref={toast} />
-<Controller
-name="color"
-control={control}
-    rules={{ required: 'Color is required.' }}
-    render={({ field, fieldState }) => <ColorPicker name="color" control={control} value={field.value} className={classNames({ 'p-invalid': fieldState.error })} onChange={(e) => field.onChange(e.value)} />}
-    />
-    {getFormErrorMessage('color')}
-<Button type="submit" label="Submit" />
-        `,
-        javascript: `
-import React, { useRef } from "react";
-import { useForm, Controller } from 'react-hook-form';
-import { ColorPicker } from 'primereact/colorpicker';
-import { Button } from 'primereact/button';
-import { Toast } from 'primereact/toast';
-import { classNames } from 'primereact/utils';
-
-export default function HookFormDoc() {
-    const toast = useRef(null);
-
-    const show = (data) => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail:\`#\${data.color.toUpperCase()}\`});
-    };
-
-    const defaultValues = {
-        color: ''
-    };
-
-    const {
-        control,
-        formState: { errors },
-        handleSubmit,
-        reset
-    } = useForm({ defaultValues });
-
-    const onSubmit = (data) => {
-        data.color && show(data);
-
-        reset();
-    };
-
-    const getFormErrorMessage = (name) => {
-        return errors[name] ? <small className="p-error">{errors[name].message}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    return (
-        <div className="card flex justify-content-center">
-            <form onSubmit={handleSubmit(onSubmit)} className="flex flex-column align-items-center gap-2">
-                <Toast ref={toast} />
-                <Controller
-                    name="color"
-                    control={control}
-                    rules={{ required: 'Color is required.' }}
-                    render={({ field, fieldState }) => <ColorPicker name="color" control={control} value={field.value} className={classNames({ 'p-invalid': fieldState.error })} onChange={(e) => field.onChange(e.value)} />}
-                />
-                {getFormErrorMessage('color')}
-                <Button type="submit" label="Submit" />
-            </form>
-        </div>
-    )
-}
-        `,
-        typescript: `
-import React, { useRef } from "react";
-import { useForm, Controller } from 'react-hook-form';
-import { ColorPicker } from 'primereact/colorpicker';
-import { Button } from 'primereact/button';
-import { Toast } from 'primereact/toast';
-import { classNames } from 'primereact/utils';
-
-export default function HookFormDoc() {
-    const toast = useRef(null);
-
-    const show = (data) => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: detail:\`#\${data.color.toUpperCase()}\`});
-    };
-
-    const defaultValues = {
-        color: ''
-    };
-
-    const {
-        control,
-        formState: { errors },
-        handleSubmit,
-        reset
-    } = useForm({ defaultValues });
-
-    const onSubmit = (data) => {
-        data.color && show(data);
-
-        reset();
-    };
-
-    const getFormErrorMessage = (name) => {
-        return errors[name] ? <small className="p-error">{errors[name].message}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    return (
-        <div className="card flex justify-content-center">
-            <form onSubmit={handleSubmit(onSubmit)} className="flex flex-column align-items-center gap-2">
-                <Toast ref={toast} />
-                <Controller
-                    name="color"
-                    control={control}
-                    rules={{ required: 'Color is required.' }}
-                    render={({ field, fieldState }) => <ColorPicker name="color" control={control} value={field.value} className={classNames({ 'p-invalid': fieldState.error })} onChange={(e) => field.onChange(e.value)} />}
-                />
-                {getFormErrorMessage('color')}
-                <Button type="submit" label="Submit" />
-            </form>
-        </div>
-    )
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props}>
-                <p>
-                    <a href="https://react-hook-form.com/">React Hook Form</a> is another popular React library to handle forms.
-                </p>
-            </DocSectionText>
-            <div className="card flex justify-content-center">
-                <form onSubmit={handleSubmit(onSubmit)} className="flex flex-column align-items-center gap-2">
-                    <Toast ref={toast} />
-                    <Controller
-                        name="color"
-                        control={control}
-                        rules={{ required: 'Color is required.' }}
-                        render={({ field, fieldState }) => <ColorPicker name="color" control={control} value={field.value} className={classNames({ 'p-invalid': fieldState.error })} onChange={(e) => field.onChange(e.value)} />}
-                    />
-                    {getFormErrorMessage('color')}
-                    <Button type="submit" label="Submit" />
-                </form>
-            </div>
-            <DocSectionCode code={code} dependencies={{ 'react-hook-form': '^7.39.4' }} />
-        </>
-    );
-}
diff --git a/components/doc/common/apidoc/index.json b/components/doc/common/apidoc/index.json
index b3b7adcb8a..806d2336c8 100644
--- a/components/doc/common/apidoc/index.json
+++ b/components/doc/common/apidoc/index.json
@@ -4021,6 +4021,14 @@
                             "default": "",
                             "description": "Value of the component."
                         },
+                        {
+                            "name": "variant",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"filled\" | \"outlined\"",
+                            "default": "outlined",
+                            "description": "Specifies the input variant of the component."
+                        },
                         {
                             "name": "virtualScrollerOptions",
                             "optional": true,
@@ -6540,6 +6548,14 @@
                             "default": "null",
                             "description": "Value of the component."
                         },
+                        {
+                            "name": "variant",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"filled\" | \"outlined\"",
+                            "default": "outlined",
+                            "description": "Specifies the input variant of the component."
+                        },
                         {
                             "name": "view",
                             "optional": true,
@@ -7713,6 +7729,13 @@
                             "type": "boolean",
                             "description": "When specified, disables the component."
                         },
+                        {
+                            "name": "variant",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"filled\" | \"outlined\"",
+                            "description": "Specifies the input variant of the component."
+                        },
                         {
                             "name": "disabledDates",
                             "optional": true,
@@ -9350,6 +9373,14 @@
                             "type": "any",
                             "default": "",
                             "description": "Value of the component."
+                        },
+                        {
+                            "name": "variant",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"filled\" | \"outlined\"",
+                            "default": "outlined",
+                            "description": "Specifies the input variant of the component."
                         }
                     ]
                 },
@@ -10340,6 +10371,14 @@
                             "type": "any",
                             "default": "",
                             "description": "Value of the component."
+                        },
+                        {
+                            "name": "variant",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"filled\" | \"outlined\"",
+                            "default": "outlined",
+                            "description": "Specifies the input variant of the component."
                         }
                     ]
                 },
@@ -11004,6 +11043,14 @@
                             "type": "string[]",
                             "default": "",
                             "description": "Value of the component."
+                        },
+                        {
+                            "name": "variant",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"filled\" | \"outlined\"",
+                            "default": "outlined",
+                            "description": "Specifies the input variant of the component."
                         }
                     ]
                 },
@@ -23329,6 +23376,14 @@
                             "default": "",
                             "description": "The template of selected item."
                         },
+                        {
+                            "name": "variant",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"filled\" | \"outlined\"",
+                            "default": "outlined",
+                            "description": "Specifies the input variant of the component."
+                        },
                         {
                             "name": "virtualScrollerOptions",
                             "optional": true,
@@ -30281,6 +30336,14 @@
                             "type": "string",
                             "default": "",
                             "description": "The value of component"
+                        },
+                        {
+                            "name": "variant",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"filled\" | \"outlined\"",
+                            "default": "outlined",
+                            "description": "Specifies the input variant of the component."
                         }
                     ]
                 },
@@ -30822,6 +30885,14 @@
                             "type": "null | number",
                             "default": "",
                             "description": "Value of the component."
+                        },
+                        {
+                            "name": "variant",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"filled\" | \"outlined\"",
+                            "default": "outlined",
+                            "description": "Specifies the input variant of the component."
                         }
                     ]
                 },
@@ -31491,6 +31562,14 @@
                             "type": "string",
                             "default": "",
                             "description": "The value of component"
+                        },
+                        {
+                            "name": "variant",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"filled\" | \"outlined\"",
+                            "default": "outlined",
+                            "description": "Specifies the input variant of the component."
                         }
                     ]
                 },
@@ -31692,6 +31771,14 @@
                             "type": "string",
                             "default": "",
                             "description": "The value of component"
+                        },
+                        {
+                            "name": "variant",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"filled\" | \"outlined\"",
+                            "default": "outlined",
+                            "description": "Specifies the input variant of the component."
                         }
                     ]
                 },
@@ -36030,6 +36117,14 @@
                             "default": "",
                             "description": "Value of the component."
                         },
+                        {
+                            "name": "variant",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"filled\" | \"outlined\"",
+                            "default": "outlined",
+                            "description": "Specifies the input variant of the component."
+                        },
                         {
                             "name": "virtualScrollerOptions",
                             "optional": true,
@@ -41140,6 +41235,13 @@
                             "type": "boolean",
                             "description": "When present, it specifies that the component should have invalid state style."
                         },
+                        {
+                            "name": "variant",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"filled\" | \"outlined\"",
+                            "description": "Specifies the input variant of the component."
+                        },
                         {
                             "name": "panel",
                             "optional": true,
@@ -42688,6 +42790,14 @@
                             "type": "any",
                             "default": "",
                             "description": "Value of the radio."
+                        },
+                        {
+                            "name": "variant",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"filled\" | \"outlined\"",
+                            "default": "outlined",
+                            "description": "Specifies the input variant of the component."
                         }
                     ]
                 },
@@ -53063,6 +53173,14 @@
                             "type": "ReactNode | Function",
                             "default": "",
                             "description": "The template of selected values."
+                        },
+                        {
+                            "name": "variant",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"filled\" | \"outlined\"",
+                            "default": "outlined",
+                            "description": "Specifies the input variant of the component."
                         }
                     ]
                 },
@@ -55573,6 +55691,14 @@
                             "type": "null | boolean",
                             "default": "",
                             "description": "Value of the TriStateCheckbox."
+                        },
+                        {
+                            "name": "variant",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"filled\" | \"outlined\"",
+                            "default": "outlined",
+                            "description": "Specifies the input variant of the component."
                         }
                     ]
                 },
diff --git a/components/doc/dropdown/filleddoc.js b/components/doc/dropdown/filleddoc.js
new file mode 100644
index 0000000000..39f787dbd7
--- /dev/null
+++ b/components/doc/dropdown/filleddoc.js
@@ -0,0 +1,85 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Dropdown } from '@/components/lib/dropdown/Dropdown';
+import { useState } from 'react';
+
+export function FilledDoc(props) {
+    const [selectedCity, setSelectedCity] = useState(null);
+    const cities = [
+        { name: 'New York', code: 'NY' },
+        { name: 'Rome', code: 'RM' },
+        { name: 'London', code: 'LDN' },
+        { name: 'Istanbul', code: 'IST' },
+        { name: 'Paris', code: 'PRS' }
+    ];
+
+    const code = {
+        basic: `
+<Dropdown variant="filled" value={selectedCity} onChange={(e) => setSelectedCity(e.value)} options={cities} optionLabel="name" 
+    placeholder="Select a City" className="w-full md:w-14rem" />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { Dropdown } from 'primereact/dropdown';
+
+export default function FilledDemo() {
+    const [selectedCity, setSelectedCity] = useState(null);
+    const cities = [
+        { name: 'New York', code: 'NY' },
+        { name: 'Rome', code: 'RM' },
+        { name: 'London', code: 'LDN' },
+        { name: 'Istanbul', code: 'IST' },
+        { name: 'Paris', code: 'PRS' }
+    ];
+
+    return (
+        <div className="card flex justify-content-center">
+            <Dropdown variant="filled" value={selectedCity} onChange={(e) => setSelectedCity(e.value)} options={cities} optionLabel="name" 
+                placeholder="Select a City" className="w-full md:w-14rem" />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { Dropdown, DropdownChangeEvent } from 'primereact/dropdown';
+
+interface City {
+    name: string;
+    code: string;
+}
+
+export default function FilledDemo() {
+    const [selectedCity, setSelectedCity] = useState<City | null>(null);
+    const cities: City[] = [
+        { name: 'New York', code: 'NY' },
+        { name: 'Rome', code: 'RM' },
+        { name: 'London', code: 'LDN' },
+        { name: 'Istanbul', code: 'IST' },
+        { name: 'Paris', code: 'PRS' }
+    ];
+
+    return (
+        <div className="card flex justify-content-center">
+            <Dropdown variant="filled" value={selectedCity} onChange={(e: DropdownChangeEvent) => setSelectedCity(e.value)} options={cities} optionLabel="name" 
+                placeholder="Select a City" className="w-full md:w-14rem" />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Dropdown variant="filled" value={selectedCity} onChange={(e) => setSelectedCity(e.value)} options={cities} optionLabel="name" placeholder="Select a City" className="w-full md:w-14rem" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/dropdown/floatlabeldoc.js b/components/doc/dropdown/floatlabeldoc.js
index f4e0025c78..7477afe488 100644
--- a/components/doc/dropdown/floatlabeldoc.js
+++ b/components/doc/dropdown/floatlabeldoc.js
@@ -1,6 +1,7 @@
 import { DocSectionCode } from '@/components/doc/common/docsectioncode';
 import { DocSectionText } from '@/components/doc/common/docsectiontext';
 import { Dropdown } from '@/components/lib/dropdown/Dropdown';
+import { FloatLabel } from '@/components/lib/floatlabel/FloatLabel';
 import { useState } from 'react';
 
 export function FloatLabelDoc(props) {
@@ -15,14 +16,15 @@ export function FloatLabelDoc(props) {
 
     const code = {
         basic: `
-<span className="p-float-label w-full md:w-14rem">
+<FloatLabel>
     <Dropdown inputId="dd-city" value={selectedCity} onChange={(e) => setSelectedCity(e.value)} options={cities} optionLabel="name" className="w-full" />
     <label htmlFor="dd-city">Select a City</label>
-</span>
+</FloatLabel>
         `,
         javascript: `
 import React, { useState } from "react";
 import { Dropdown } from 'primereact/dropdown';
+import { FloatLabel } from 'primereact/floatlabel';
 
 export default function FloatLabelDemo() {
     const [selectedCity, setSelectedCity] = useState(null);
@@ -36,10 +38,10 @@ export default function FloatLabelDemo() {
 
     return (
         <div className="card flex justify-content-center">
-            <span className="p-float-label w-full md:w-14rem">
+            <FloatLabel className="w-full md:w-14rem">
                 <Dropdown inputId="dd-city" value={selectedCity} onChange={(e) => setSelectedCity(e.value)} options={cities} optionLabel="name" className="w-full" />
                 <label htmlFor="dd-city">Select a City</label>
-            </span>
+            </FloatLabel>
         </div>
     )
 }
@@ -47,6 +49,7 @@ export default function FloatLabelDemo() {
         typescript: `
 import React, { useState } from "react";
 import { Dropdown, DropdownChangeEvent } from 'primereact/dropdown';
+import { FloatLabel } from 'primereact/floatlabel';
 
 interface City {
     name: string;
@@ -65,10 +68,10 @@ export default function FloatLabelDemo() {
 
     return (
         <div className="card flex justify-content-center">
-            <span className="p-float-label w-full md:w-14rem">
+            <FloatLabel className="w-full md:w-14rem">
                 <Dropdown inputId="dd-city" value={selectedCity} onChange={(e: DropdownChangeEvent) => setSelectedCity(e.value)} options={cities} optionLabel="name" className="w-full" />
                 <label htmlFor="dd-city">Select a City</label>
-            </span>
+            </FloatLabel>
         </div>
     )
 }
@@ -81,10 +84,10 @@ export default function FloatLabelDemo() {
                 <p>A floating label appears on top of the input field when focused.</p>
             </DocSectionText>
             <div className="card flex justify-content-center">
-                <span className="p-float-label w-full md:w-14rem">
+                <FloatLabel className="w-full md:w-14rem">
                     <Dropdown inputId="dd-city" value={selectedCity} onChange={(e) => setSelectedCity(e.value)} options={cities} optionLabel="name" className="w-full" />
                     <label htmlFor="dd-city">Select a City</label>
-                </span>
+                </FloatLabel>
             </div>
             <DocSectionCode code={code} />
         </>
diff --git a/components/doc/dropdown/form/formikdoc.js b/components/doc/dropdown/form/formikdoc.js
deleted file mode 100644
index 3d3c664e06..0000000000
--- a/components/doc/dropdown/form/formikdoc.js
+++ /dev/null
@@ -1,242 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { Button } from '@/components/lib/button/Button';
-import { Dropdown } from '@/components/lib/dropdown/Dropdown';
-import { Toast } from '@/components/lib/toast/Toast';
-import { classNames } from '@/components/lib/utils/Utils';
-import { useFormik } from 'formik';
-import { useRef } from 'react';
-
-export function FormikDoc(props) {
-    const toast = useRef(null);
-    const cities = [
-        { name: 'New York', code: 'NY' },
-        { name: 'Rome', code: 'RM' },
-        { name: 'London', code: 'LDN' },
-        { name: 'Istanbul', code: 'IST' },
-        { name: 'Paris', code: 'PRS' }
-    ];
-
-    const show = (data) => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: `${data.city.name}` });
-    };
-
-    const formik = useFormik({
-        initialValues: {
-            city: ''
-        },
-        validate: (data) => {
-            let errors = {};
-
-            if (!data.city) {
-                errors.city = 'City is required.';
-            }
-
-            return errors;
-        },
-        onSubmit: (data) => {
-            data.city && show(data);
-            formik.resetForm();
-        }
-    });
-
-    const isFormFieldInvalid = (name) => !!(formik.touched[name] && formik.errors[name]);
-
-    const getFormErrorMessage = (name) => {
-        return isFormFieldInvalid(name) ? <small className="p-error">{formik.errors[name]}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    const code = {
-        basic: `
-<Toast ref={toast} />
-<Dropdown
-    inputId="city"
-    name="city"
-    value={formik.values.city}
-    options={cities}
-    optionLabel="name"
-    placeholder="Select a City"
-    onChange={(e) => {
-        formik.setFieldValue('city', e.value);
-    }}
-/>
-{getFormErrorMessage('city')}
-<Button type="submit" label="Submit" />
-        `,
-        javascript: `
-import React, { useRef } from "react";
-import { useFormik } from 'formik';
-import { Dropdown } from 'primereact/dropdown';
-import { Button } from 'primereact/button';
-import { Toast } from 'primereact/toast';
-import { classNames } from 'primereact/utils';
-
-export default function FormikDoc() {
-    const toast = useRef(null);
-    const cities = [
-        { name: 'New York', code: 'NY' },
-        { name: 'Rome', code: 'RM' },
-        { name: 'London', code: 'LDN' },
-        { name: 'Istanbul', code: 'IST' },
-        { name: 'Paris', code: 'PRS' }
-    ];
-
-    const show = (data) => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: \`\${data.city.name}\` });
-    };
-
-    const formik = useFormik({
-        initialValues: {
-            city: ''
-        },
-        validate: (data) => {
-            let errors = {};
-
-            if (!data.city) {
-                errors.city = 'City is required.';
-            }
-
-            return errors;
-        },
-        onSubmit: (data) => {
-            data.city && show(data);
-            formik.resetForm();
-        }
-    });
-
-    const isFormFieldInvalid = (name) => !!(formik.touched[name] && formik.errors[name]);
-
-    const getFormErrorMessage = (name) => {
-        return isFormFieldInvalid(name) ? <small className="p-error">{formik.errors[name]}</small> : <small className="p-error">&nbsp;</small>;
-    };
-    
-    return (
-        <div className="card flex justify-content-center">
-            <form onSubmit={formik.handleSubmit} className="flex flex-column align-items-center gap-2">
-                <Toast ref={toast} />
-                <Dropdown
-                    inputId="city"
-                    name="city"
-                    value={formik.values.city}
-                    options={cities}
-                    optionLabel="name"
-                    placeholder="Select a City"
-                    className={classNames({ 'p-invalid': isFormFieldInvalid('city') })}
-                    onChange={(e) => {
-                        formik.setFieldValue('city', e.value);
-                    }}
-                />
-                {getFormErrorMessage('city')}
-                <Button type="submit" label="Submit" />
-            </form>
-        </div>
-    )
-}
-        `,
-        typescript: `
-import React, { useRef } from "react";
-import { useFormik } from 'formik';
-import { Dropdown, DropdownChangeEvent } from 'primereact/dropdown';
-import { Button } from 'primereact/button';
-import { Toast } from 'primereact/toast';
-import { classNames } from 'primereact/utils';
-
-interface City {
-    name: string;
-    code: string;
-}
-
-export default function FormikDoc() {
-    const toast = useRef(null);
-    const cities: City[] = [
-        { name: 'New York', code: 'NY' },
-        { name: 'Rome', code: 'RM' },
-        { name: 'London', code: 'LDN' },
-        { name: 'Istanbul', code: 'IST' },
-        { name: 'Paris', code: 'PRS' }
-    ];
-
-    const show = (data) => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: \`\${data.city.name}\` });
-    };
-
-    const formik = useFormik({
-        initialValues: {
-            city: ''
-        },
-        validate: (data) => {
-            let errors = {};
-
-            if (!data.city) {
-                errors.city = 'City is required.';
-            }
-
-            return errors;
-        },
-        onSubmit: (data) => {
-            data.city && show(data);
-            formik.resetForm();
-        }
-    });
-
-    const isFormFieldInvalid = (name) => !!(formik.touched[name] && formik.errors[name]);
-
-    const getFormErrorMessage = (name) => {
-        return isFormFieldInvalid(name) ? <small className="p-error">{formik.errors[name]}</small> : <small className="p-error">&nbsp;</small>;
-    };
-    
-    return (
-        <div className="card flex justify-content-center">
-            <form onSubmit={formik.handleSubmit} className="flex flex-column align-items-center gap-2">
-                <Toast ref={toast} />
-                <Dropdown
-                    inputId="city"
-                    name="city"
-                    value={formik.values.city}
-                    options={cities}
-                    optionLabel="name"
-                    placeholder="Select a City"
-                    className={classNames({ 'p-invalid': isFormFieldInvalid('city') })}
-                    onChange={(e: DropdownChangeEvent) => {
-                        formik.setFieldValue('city', e.value);
-                    }}
-                />
-                {getFormErrorMessage('city')}
-                <Button type="submit" label="Submit" />
-            </form>
-        </div>
-    )
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props}>
-                <p>
-                    <a href="https://formik.org/">Formik</a> is a popular library for handling forms in React.
-                </p>
-            </DocSectionText>
-            <div className="card flex justify-content-center">
-                <form onSubmit={formik.handleSubmit} className="flex flex-column align-items-center gap-2">
-                    <Toast ref={toast} />
-                    <Dropdown
-                        inputId="city"
-                        name="city"
-                        value={formik.values.city}
-                        options={cities}
-                        optionLabel="name"
-                        placeholder="Select a City"
-                        className={classNames({ 'p-invalid': isFormFieldInvalid('city') })}
-                        onChange={(e) => {
-                            formik.setFieldValue('city', e.value);
-                        }}
-                    />
-                    {getFormErrorMessage('city')}
-                    <Button type="submit" label="Submit" />
-                </form>
-            </div>
-            <DocSectionCode code={code} dependencies={{ formik: '^2.2.6' }} />
-        </>
-    );
-}
diff --git a/components/doc/dropdown/form/hookformdoc.js b/components/doc/dropdown/form/hookformdoc.js
deleted file mode 100644
index c624007719..0000000000
--- a/components/doc/dropdown/form/hookformdoc.js
+++ /dev/null
@@ -1,251 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { Button } from '@/components/lib/button/Button';
-import { Dropdown } from '@/components/lib/dropdown/Dropdown';
-import { Toast } from '@/components/lib/toast/Toast';
-import { classNames } from '@/components/lib/utils/Utils';
-import { useRef } from 'react';
-import { Controller, useForm } from 'react-hook-form';
-
-export function HookFormDoc(props) {
-    const toast = useRef(null);
-    const cities = [
-        { name: 'New York', code: 'NY' },
-        { name: 'Rome', code: 'RM' },
-        { name: 'London', code: 'LDN' },
-        { name: 'Istanbul', code: 'IST' },
-        { name: 'Paris', code: 'PRS' }
-    ];
-
-    const show = (data) => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: `${data.city.name}` });
-    };
-
-    const defaultValues = {
-        city: ''
-    };
-
-    const {
-        control,
-        formState: { errors },
-        handleSubmit,
-        reset
-    } = useForm({ defaultValues });
-
-    const onSubmit = (data) => {
-        data.city && show(data);
-
-        reset();
-    };
-
-    const getFormErrorMessage = (name) => {
-        return errors[name] ? <small className="p-error">{errors[name].message}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    const code = {
-        basic: `
-<Toast ref={toast} />
-<Controller
-    name="city"
-    control={control}
-    rules={{ required: 'City is required.' }}
-    render={({ field, fieldState }) => (
-            <Dropdown
-                id={field.name}
-                value={field.value}
-                optionLabel="name"
-                placeholder="Select a City"
-                options={cities}
-                focusInputRef={field.ref}
-                onChange={(e) => field.onChange(e.value)}
-                className={classNames({ 'p-invalid': fieldState.error })}
-            />
-    )}
-/>
-{getFormErrorMessage('city')}
-<Button type="submit" label="Submit" />
-        `,
-        javascript: `
-import React, { useRef } from "react";
-import { useForm, Controller } from 'react-hook-form';
-import { Dropdown } from 'primereact/dropdown';
-import { Button } from 'primereact/button';
-import { Toast } from 'primereact/toast';
-import { classNames } from 'primereact/utils';
-
-export default function HookFormDoc() {
-    const toast = useRef(null);
-    const cities = [
-        { name: 'New York', code: 'NY' },
-        { name: 'Rome', code: 'RM' },
-        { name: 'London', code: 'LDN' },
-        { name: 'Istanbul', code: 'IST' },
-        { name: 'Paris', code: 'PRS' }
-    ];
-
-    const show = (data) => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: \`\${data.city.name}\` });
-    };
-
-    const defaultValues = {
-        city: ''
-    };
-
-    const {
-        control,
-        formState: { errors },
-        handleSubmit,
-        reset
-    } = useForm({ defaultValues });
-
-    const onSubmit = (data) => {
-        data.city && show(data);
-
-        reset();
-    };
-
-    const getFormErrorMessage = (name) => {
-        return errors[name] ? <small className="p-error">{errors[name].message}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    return (
-        <div className="card flex justify-content-center">
-            <form onSubmit={handleSubmit(onSubmit)} className="flex flex-column align-items-center gap-2">
-                <Toast ref={toast} />
-                <Controller
-                    name="city"
-                    control={control}
-                    rules={{ required: 'City is required.' }}
-                    render={({ field, fieldState }) => (
-                            <Dropdown
-                                id={field.name}
-                                value={field.value}
-                                optionLabel="name"
-                                placeholder="Select a City"
-                                options={cities}
-                                focusInputRef={field.ref}
-                                onChange={(e) => field.onChange(e.value)}
-                                className={classNames({ 'p-invalid': fieldState.error })}
-                            />
-                    )}
-                />
-                {getFormErrorMessage('city')}
-                <Button type="submit" label="Submit" />
-            </form>
-        </div>
-    )
-}
-        `,
-        typescript: `
-import React, { useRef } from "react";
-import { useForm, Controller } from 'react-hook-form';
-import { Dropdown } from 'primereact/dropdown';
-import { Button } from 'primereact/button';
-import { Toast } from 'primereact/toast';
-import { classNames } from 'primereact/utils';
-
-interface City {
-    name: string;
-    code: string;
-}
-
-export default function HookFormDoc() {
-    const toast = useRef(null);
-    const cities: City[] = [
-        { name: 'New York', code: 'NY' },
-        { name: 'Rome', code: 'RM' },
-        { name: 'London', code: 'LDN' },
-        { name: 'Istanbul', code: 'IST' },
-        { name: 'Paris', code: 'PRS' }
-    ];
-
-    const show = (data) => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: \`\${data.city.name}\` });
-    };
-
-    const defaultValues = {
-        city: ''
-    };
-
-    const {
-        control,
-        formState: { errors },
-        handleSubmit,
-        reset
-    } = useForm({ defaultValues });
-
-    const onSubmit = (data) => {
-        data.city && show(data);
-
-        reset();
-    };
-
-    const getFormErrorMessage = (name) => {
-        return errors[name] ? <small className="p-error">{errors[name].message}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    return (
-        <div className="card flex justify-content-center">
-            <form onSubmit={handleSubmit(onSubmit)} className="flex flex-column align-items-center gap-2">
-                <Toast ref={toast} />
-                <Controller
-                    name="city"
-                    control={control}
-                    rules={{ required: 'City is required.' }}
-                    render={({ field, fieldState }) => (
-                            <Dropdown
-                                id={field.name}
-                                value={field.value}
-                                optionLabel="name"
-                                placeholder="Select a City"
-                                options={cities}
-                                focusInputRef={field.ref}
-                                onChange={(e) => field.onChange(e.value)}
-                                className={classNames({ 'p-invalid': fieldState.error })}
-                            />
-                    )}
-                />
-                {getFormErrorMessage('city')}
-                <Button type="submit" label="Submit" />
-            </form>
-        </div>
-    )
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props}>
-                <p>
-                    <a href="https://react-hook-form.com/">React Hook Form</a> is another popular React library to handle forms.
-                </p>
-            </DocSectionText>
-            <div className="card flex justify-content-center">
-                <form onSubmit={handleSubmit(onSubmit)} className="flex flex-column align-items-center gap-2">
-                    <Toast ref={toast} />
-                    <Controller
-                        name="city"
-                        control={control}
-                        rules={{ required: 'City is required.' }}
-                        render={({ field, fieldState }) => (
-                            <Dropdown
-                                id={field.name}
-                                value={field.value}
-                                optionLabel="name"
-                                placeholder="Select a City"
-                                options={cities}
-                                focusInputRef={field.ref}
-                                onChange={(e) => field.onChange(e.value)}
-                                className={classNames({ 'p-invalid': fieldState.error })}
-                            />
-                        )}
-                    />
-                    {getFormErrorMessage('city')}
-                    <Button type="submit" label="Submit" />
-                </form>
-            </div>
-            <DocSectionCode code={code} dependencies={{ 'react-hook-form': '^7.39.4' }} />
-        </>
-    );
-}
diff --git a/components/doc/dropdown/invaliddoc.js b/components/doc/dropdown/invaliddoc.js
index d5d4b9b18f..94ba38a970 100644
--- a/components/doc/dropdown/invaliddoc.js
+++ b/components/doc/dropdown/invaliddoc.js
@@ -15,8 +15,8 @@ export function InvalidDoc(props) {
 
     const code = {
         basic: `
-<Dropdown value={selectedCity} onChange={(e) => setSelectedCity(e.value)} options={cities} optionLabel="name" 
-    placeholder="Select a City" className="p-invalid w-full md:w-14rem" />
+<Dropdown invalid value={selectedCity} onChange={(e) => setSelectedCity(e.value)} options={cities} optionLabel="name" 
+    placeholder="Select a City" className="w-full md:w-14rem" />
         `,
         javascript: `
 import React, { useState } from "react";
@@ -34,8 +34,8 @@ export default function InvalidDemo() {
 
     return (
         <div className="card flex justify-content-center">
-            <Dropdown value={selectedCity} onChange={(e) => setSelectedCity(e.value)} options={cities} optionLabel="name" 
-                placeholder="Select a City" className="p-invalid w-full md:w-14rem" />
+            <Dropdown invalid value={selectedCity} onChange={(e) => setSelectedCity(e.value)} options={cities} optionLabel="name" 
+                placeholder="Select a City" className="w-full md:w-14rem" />
         </div>
     )
 }
@@ -61,8 +61,8 @@ export default function InvalidDemo() {
 
     return (
         <div className="card flex justify-content-center">
-            <Dropdown value={selectedCity} onChange={(e: DropdownChangeEvent) => setSelectedCity(e.value)} options={cities} optionLabel="name" 
-                placeholder="Select a City" className="p-invalid w-full md:w-14rem" />
+            <Dropdown invalid value={selectedCity} onChange={(e: DropdownChangeEvent) => setSelectedCity(e.value)} options={cities} optionLabel="name" 
+                placeholder="Select a City" className="w-full md:w-14rem" />
         </div>
     )
 }
@@ -73,11 +73,11 @@ export default function InvalidDemo() {
         <>
             <DocSectionText {...props}>
                 <p>
-                    Invalid state style is added using the <i>p-invalid</i> class to indicate a failed validation.
+                    Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.
                 </p>
             </DocSectionText>
             <div className="card flex justify-content-center">
-                <Dropdown value={selectedCity} onChange={(e) => setSelectedCity(e.value)} options={cities} optionLabel="name" placeholder="Select a City" className="p-invalid w-full md:w-14rem" />
+                <Dropdown invalid value={selectedCity} onChange={(e) => setSelectedCity(e.value)} options={cities} optionLabel="name" placeholder="Select a City" className="w-full md:w-14rem" />
             </div>
             <DocSectionCode code={code} />
         </>
diff --git a/components/doc/editor/form/formikdoc.js b/components/doc/editor/form/formikdoc.js
deleted file mode 100644
index 88ba7579b7..0000000000
--- a/components/doc/editor/form/formikdoc.js
+++ /dev/null
@@ -1,250 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { Button } from '@/components/lib/button/Button';
-import { Editor } from '@/components/lib/editor/Editor';
-import { Toast } from '@/components/lib/toast/Toast';
-import { useFormik } from 'formik';
-import { useRef } from 'react';
-
-export function FormikDoc(props) {
-    const toast = useRef(null);
-
-    const show = () => {
-        toast.current.show({ severity: 'success', summary: 'Blog Submitted', detail: 'The blog is uploaded' });
-    };
-
-    const renderHeader = () => {
-        return (
-            <span className="ql-formats">
-                <button className="ql-bold" aria-label="Bold" />
-                <button className="ql-italic" aria-label="Italic" />
-                <button className="ql-underline" aria-label="Underline" />
-            </span>
-        );
-    };
-
-    const header = renderHeader();
-
-    const formik = useFormik({
-        initialValues: {
-            blog: ''
-        },
-        validate: (data) => {
-            let errors = {};
-
-            if (!data.blog || data.blog === '\n') {
-                errors.blog = 'Content is required.';
-            }
-
-            return errors;
-        },
-        onSubmit: (data) => {
-            data.blog && show();
-            formik.resetForm();
-        }
-    });
-
-    const isFormFieldInvalid = (name) => !!(formik.touched[name] && formik.errors[name]);
-
-    const getFormErrorMessage = (name) => {
-        return isFormFieldInvalid(name) ? <small className="p-error">{formik.errors[name]}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    const code = {
-        basic: `
-<Toast ref={toast} />
-<Editor
-    id="blog"
-    name="blog"
-    value={formik.values.blog}
-    headerTemplate={header}
-    onTextChange={(e) => {
-        formik.setFieldValue('blog', e.textValue);
-    }}
-    style={{ height: '320px' }}
-/>
-{getFormErrorMessage('blog')}
-<Button type="submit" label="Save" />
-        `,
-        javascript: `
-import React, { useRef } from "react";
-import { useFormik } from 'formik';
-import { Editor } from 'primereact/editor';
-import { Button } from 'primereact/button';
-import { Toast } from 'primereact/toast';
-
-export default function FormikDoc() {
-    const toast = useRef(null);
-
-    const show = () => {
-        toast.current.show({ severity: 'success', summary: 'Blog Submitted', detail: 'The blog is uploaded' });
-    };
-
-    const renderHeader = () => {
-        return (
-            <span className="ql-formats">
-                <button className="ql-bold" aria-label="Bold"></button>
-                <button className="ql-italic" aria-label="Italic"></button>
-                <button className="ql-underline" aria-label="Underline"></button>
-            </span>
-        );
-    };
-
-    const header = renderHeader();
-
-    const formik = useFormik({
-        initialValues: {
-            blog: ''
-        },
-        validate: (data) => {
-            let errors = {};
-
-            if (!data.blog || data.blog === \`n\`) {
-                
-                errors.blog = 'Content is required.';
-            }
-
-            return errors;
-        },
-        onSubmit: (data) => {
-            data.blog && show();
-            formik.resetForm();
-        }
-    });
-
-    const isFormFieldInvalid = (name) => !!(formik.touched[name] && formik.errors[name]);
-
-    const getFormErrorMessage = (name) => {
-        return isFormFieldInvalid(name) ? <small className="p-error">{formik.errors[name]}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    return (
-        <div className="card">
-            <form onSubmit={formik.handleSubmit}>
-                <Toast ref={toast} />
-                <Editor
-                    id="blog"
-                    name="blog"
-                    value={formik.values.blog}
-                    headerTemplate={header}
-                    onTextChange={(e) => {
-                        formik.setFieldValue('blog', e.textValue);
-                    }}
-                    style={{ height: '320px' }}
-                />
-                <div className="flex flex-wrap justify-content-between align-items-center gap-3 mt-3">
-                    {getFormErrorMessage('blog')}
-                    <Button type="submit" label="Save" />
-                </div>
-            </form>
-        </div>
-    )
-}
-        `,
-        typescript: `
-import React, { useRef } from "react";
-import { useFormik } from 'formik';
-import { Editor, EditorTextChangeEvent } from 'primereact/editor';
-import { Button } from 'primereact/button';
-import { Toast } from 'primereact/toast';
-
-export default function FormikDoc() {
-    const toast = useRef(null);
-
-    const show = () => {
-        toast.current.show({ severity: 'success', summary: 'Blog Submitted', detail: 'The blog is uploaded' });
-    };
-
-    const renderHeader = () => {
-        return (
-            <span className="ql-formats">
-                <button className="ql-bold" aria-label="Bold"></button>
-                <button className="ql-italic" aria-label="Italic"></button>
-                <button className="ql-underline" aria-label="Underline"></button>
-            </span>
-        );
-    };
-
-    const header = renderHeader();
-
-    const formik = useFormik({
-        initialValues: {
-            blog: ''
-        },
-        validate: (data) => {
-            let errors = {};
-
-            if (!data.blog || data.blog === \`n\`) {
-                
-                errors.blog = 'Content is required.';
-            }
-
-            return errors;
-        },
-        onSubmit: (data) => {
-            data.blog && show();
-            formik.resetForm();
-        }
-    });
-
-    const isFormFieldInvalid = (name) => !!(formik.touched[name] && formik.errors[name]);
-
-    const getFormErrorMessage = (name) => {
-        return isFormFieldInvalid(name) ? <small className="p-error">{formik.errors[name]}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    return (
-        <div className="card">
-            <form onSubmit={formik.handleSubmit}>
-                <Toast ref={toast} />
-                <Editor
-                    id="blog"
-                    name="blog"
-                    value={formik.values.blog}
-                    headerTemplate={header}
-                    onTextChange={(e: EditorTextChangeEvent) => {
-                        formik.setFieldValue('blog', e.textValue);
-                    }}
-                    style={{ height: '320px' }}
-                />
-                <div className="flex flex-wrap justify-content-between align-items-center gap-3 mt-3">
-                    {getFormErrorMessage('blog')}
-                    <Button type="submit" label="Save" />
-                </div>
-            </form>
-        </div>
-    )
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props}>
-                <p>
-                    <a href="https://formik.org/">Formik</a> is a popular library for handling forms in React.
-                </p>
-            </DocSectionText>
-            <div className="card">
-                <form onSubmit={formik.handleSubmit}>
-                    <Toast ref={toast} />
-                    <Editor
-                        id="blog"
-                        name="blog"
-                        value={formik.values.blog}
-                        headerTemplate={header}
-                        onTextChange={(e) => {
-                            formik.setFieldValue('blog', e.textValue);
-                        }}
-                        style={{ height: '320px' }}
-                    />
-                    <div className="flex flex-wrap justify-content-between align-items-center gap-3 mt-3">
-                        {getFormErrorMessage('blog')}
-                        <Button type="submit" label="Save" />
-                    </div>
-                </form>
-            </div>
-            <DocSectionCode code={code} dependencies={{ formik: '^2.2.6', quill: '1.3.7' }} />
-        </>
-    );
-}
diff --git a/components/doc/editor/form/hookformdoc.js b/components/doc/editor/form/hookformdoc.js
deleted file mode 100644
index 00cc88f458..0000000000
--- a/components/doc/editor/form/hookformdoc.js
+++ /dev/null
@@ -1,220 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { Button } from '@/components/lib/button/Button';
-import { Editor } from '@/components/lib/editor/Editor';
-import { Toast } from '@/components/lib/toast/Toast';
-import { useRef } from 'react';
-import { Controller, useForm } from 'react-hook-form';
-
-export function HookFormDoc(props) {
-    const toast = useRef(null);
-
-    const show = () => {
-        toast.current.show({ severity: 'success', summary: 'Submission Received', detail: 'The blog is uploaded' });
-    };
-
-    const renderHeader = () => {
-        return (
-            <span className="ql-formats">
-                <button className="ql-bold" aria-label="Bold" />
-                <button className="ql-italic" aria-label="Italic" />
-                <button className="ql-underline" aria-label="Underline" />
-            </span>
-        );
-    };
-
-    const header = renderHeader();
-
-    const defaultValues = {
-        blog: ''
-    };
-
-    const {
-        control,
-        formState: { errors },
-        handleSubmit,
-        reset
-    } = useForm({ defaultValues });
-
-    const onSubmit = (data) => {
-        data.blog && show();
-
-        reset();
-    };
-
-    const getFormErrorMessage = (name) => {
-        return errors[name] ? <small className="p-error">{errors[name].message}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    const code = {
-        basic: `
-<Toast ref={toast} />
-<Controller
-    name="blog"
-    control={control}
-    rules={{ required: 'Content is required.' }}
-    render={({ field }) => <Editor id={field.name} name="blog" value={field.value} headerTemplate={header} onTextChange={(e) => field.onChange(e.textValue)} style={{ height: '320px' }} />}
-/
-{getFormErrorMessage('blog')}
-<Button type="submit" label="Save" />
-        `,
-        javascript: `
-import React, { useRef } from "react";
-import { useForm, Controller } from 'react-hook-form';
-import { Editor } from 'primereact/editor';
-import { Button } from 'primereact/button';
-import { Toast } from 'primereact/toast';
-
-export default function HookFormDoc() {
-    const toast = useRef(null);
-
-    const show = () => {
-        toast.current.show({ severity: 'success', summary: 'Submission Received', detail: 'The blog is uploaded' });
-    };
-
-    const renderHeader = () => {
-        return (
-            <span className="ql-formats">
-                <button className="ql-bold" aria-label="Bold"></button>
-                <button className="ql-italic" aria-label="Italic"></button>
-                <button className="ql-underline" aria-label="Underline"></button>
-            </span>
-        );
-    };
-
-    const header = renderHeader();
-
-    const defaultValues = {
-        blog: ''
-    };
-
-    const {
-        control,
-        formState: { errors },
-        handleSubmit,
-        reset
-    } = useForm({ defaultValues });
-
-    const onSubmit = (data) => {
-        data.blog && show();
-
-        reset();
-    };
-
-    const getFormErrorMessage = (name) => {
-        return errors[name] ? <small className="p-error">{errors[name].message}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    return (
-        <div className="card">
-            <form onSubmit={handleSubmit(onSubmit)}>
-                <Toast ref={toast} />
-                <Controller
-                    name="blog"
-                    control={control}
-                    rules={{ required: 'Content is required.' }}
-                    render={({ field }) => <Editor id={field.name} name="blog" value={field.value} headerTemplate={header} onTextChange={(e) => field.onChange(e.textValue)} style={{ height: '320px' }} />}
-                />
-                <div className="flex flex-wrap justify-content-between align-items-center gap-3 mt-3">
-                    {getFormErrorMessage('blog')}
-                    <Button type="submit" label="Save" />
-                </div>
-            </form>
-        </div>
-    )
-}
-        `,
-        typescript: `
-import React, { useRef } from "react";
-import { useForm, Controller } from 'react-hook-form';
-import { Editor, EditorTextChangeEvent } from 'primereact/editor';
-import { Button } from 'primereact/button';
-import { Toast } from 'primereact/toast';
-
-export default function HookFormDoc() {
-    const toast = useRef(null);
-
-    const show = () => {
-        toast.current.show({ severity: 'success', summary: 'Submission Received', detail: 'The blog is uploaded' });
-    };
-
-    const renderHeader = () => {
-        return (
-            <span className="ql-formats">
-                <button className="ql-bold" aria-label="Bold"></button>
-                <button className="ql-italic" aria-label="Italic"></button>
-                <button className="ql-underline" aria-label="Underline"></button>
-            </span>
-        );
-    };
-
-    const header = renderHeader();
-
-    const defaultValues = {
-        blog: ''
-    };
-
-    const {
-        control,
-        formState: { errors },
-        handleSubmit,
-        reset
-    } = useForm({ defaultValues });
-
-    const onSubmit = (data) => {
-        data.blog && show();
-
-        reset();
-    };
-
-    const getFormErrorMessage = (name) => {
-        return errors[name] ? <small className="p-error">{errors[name].message}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    return (
-        <div className="card">
-            <form onSubmit={handleSubmit(onSubmit)}>
-                <Toast ref={toast} />
-                <Controller
-                    name="blog"
-                    control={control}
-                    rules={{ required: 'Content is required.' }}
-                    render={({ field }) => <Editor id={field.name} name="blog" value={field.value} headerTemplate={header} onTextChange={(e: EditorTextChangeEvent) => field.onChange(e.textValue)} style={{ height: '320px' }} />}
-                />
-                <div className="flex flex-wrap justify-content-between align-items-center gap-3 mt-3">
-                    {getFormErrorMessage('blog')}
-                    <Button type="submit" label="Save" />
-                </div>
-            </form>
-        </div>
-    )
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props}>
-                <p>
-                    <a href="https://react-hook-form.com/">React Hook Form</a> is another popular React library to handle forms.
-                </p>
-            </DocSectionText>
-            <div className="card">
-                <form onSubmit={handleSubmit(onSubmit)}>
-                    <Toast ref={toast} />
-                    <Controller
-                        name="blog"
-                        control={control}
-                        rules={{ required: 'Content is required.' }}
-                        render={({ field }) => <Editor id={field.name} name="blog" value={field.value} headerTemplate={header} onTextChange={(e) => field.onChange(e.textValue)} style={{ height: '320px' }} />}
-                    />
-                    <div className="flex flex-wrap justify-content-between align-items-center gap-3 mt-3">
-                        {getFormErrorMessage('blog')}
-                        <Button type="submit" label="Save" />
-                    </div>
-                </form>
-            </div>
-            <DocSectionCode code={code} dependencies={{ 'react-hook-form': '^7.39.4', quill: '1.3.7' }} />
-        </>
-    );
-}
diff --git a/components/doc/inputmask/filleddoc.js b/components/doc/inputmask/filleddoc.js
new file mode 100644
index 0000000000..0312504a88
--- /dev/null
+++ b/components/doc/inputmask/filleddoc.js
@@ -0,0 +1,56 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { InputMask } from '@/components/lib/inputmask/InputMask';
+import { useState } from 'react';
+
+export function FilledDoc(props) {
+    const [value, setValue] = useState();
+
+    const code = {
+        basic: `
+<InputMask variant="filled" value={value} onChange={(e) => setValue(e.target.value)} mask="99-999999" placeholder="99-999999" />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { InputMask } from "primereact/inputmask";
+
+export default function FilledDemo() {
+    const [value, setValue] = useState();
+
+    return (
+        <div className="card flex justify-content-center">
+            <InputMask variant="filled" value={value} onChange={(e) => setValue(e.target.value)} mask="99-999999" placeholder="99-999999"/>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { InputMask, InputMaskChangeEvent } from "primereact/inputmask";
+
+export default function FilledDemo() {
+    const [value, setValue] = useState<string | undefined>();
+
+    return (
+        <div className="card flex justify-content-center">
+            <InputMask variant="filled" value={value} onChange={(e: InputMaskChangeEvent) => setValue(e.target.value)} mask="99-999999" placeholder="99-999999"/>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <InputMask variant="filled" value={value} onChange={(e) => setValue(e.target.value)} mask="99-999999" placeholder="99-999999" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/inputmask/floatlabeldoc.js b/components/doc/inputmask/floatlabeldoc.js
index 9130433dab..a3a81208f9 100644
--- a/components/doc/inputmask/floatlabeldoc.js
+++ b/components/doc/inputmask/floatlabeldoc.js
@@ -1,6 +1,8 @@
 import { DocSectionCode } from '@/components/doc/common/docsectioncode';
 import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { FloatLabel } from '@/components/lib/floatlabel/FloatLabel';
 import { InputMask } from '@/components/lib/inputmask/InputMask';
+import Link from 'next/link';
 import { useState } from 'react';
 
 export function FloatLabelDoc(props) {
@@ -8,24 +10,25 @@ export function FloatLabelDoc(props) {
 
     const code = {
         basic: `
-<span className="p-float-label">
+<FloatLabel>
     <InputMask id="ssn_input" value={value} onChange={(e) => setValue(e.target.value)} mask="999-99-9999" />
     <label htmlFor="ssn_input">SSN</label>
-</span>
+</FloatLabel>
         `,
         javascript: `
 import React, { useState } from "react";
 import { InputMask } from "primereact/inputmask";
+import { FloatLabel } from "primereact/floatlabel";
 
 export default function FloatLabelDemo() {
     const [value, setValue] = useState();
 
     return (
         <div className="card flex justify-content-center">
-            <span className="p-float-label">
+            <FloatLabel>
                 <InputMask id="ssn_input" value={value} onChange={(e) => setValue(e.target.value)} mask="999-99-9999" />
                 <label htmlFor="ssn_input">SSN</label>
-            </span>
+            </FloatLabel>
         </div>
     )
 }
@@ -33,16 +36,17 @@ export default function FloatLabelDemo() {
         typescript: `
 import React, { useState } from "react";
 import { InputMask, InputMaskChangeEvent } from "primereact/inputmask";
+import { FloatLabel } from "primereact/floatlabel";
 
 export default function FloatLabelDemo() {
     const [value, setValue] = useState<string | undefined>();
 
     return (
         <div className="card flex justify-content-center">
-            <span className="p-float-label">
+            <FloatLabel>
                 <InputMask id="ssn_input" value={value} onChange={(e: InputMaskChangeEvent) => setValue(e.target.value)} mask="999-99-9999" />
                 <label htmlFor="ssn_input">SSN</label>
-            </span>
+            </FloatLabel>
         </div>
     )
 }
@@ -52,13 +56,15 @@ export default function FloatLabelDemo() {
     return (
         <>
             <DocSectionText {...props}>
-                <p>A floating label appears on top of the input field when focused.</p>
+                <p>
+                    A floating label appears on top of the input field when focused. Visit <Link href="/floatlabel">FloatLabel</Link> documentation for more information.
+                </p>
             </DocSectionText>
             <div className="card flex justify-content-center">
-                <span className="p-float-label">
+                <FloatLabel>
                     <InputMask id="ssn_input" value={value} onChange={(e) => setValue(e.target.value)} mask="999-99-9999" />
                     <label htmlFor="ssn_input">SSN</label>
-                </span>
+                </FloatLabel>
             </div>
             <DocSectionCode code={code} />
         </>
diff --git a/components/doc/inputmask/form/formikdoc.js b/components/doc/inputmask/form/formikdoc.js
deleted file mode 100644
index c99f9ec3b5..0000000000
--- a/components/doc/inputmask/form/formikdoc.js
+++ /dev/null
@@ -1,212 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { Button } from '@/components/lib/button/Button';
-import { InputMask } from '@/components/lib/inputmask/InputMask';
-import { Toast } from '@/components/lib/toast/Toast';
-import { classNames } from '@/components/lib/utils/Utils';
-import { useFormik } from 'formik';
-import { useRef } from 'react';
-
-export function FormikDoc(props) {
-    const toast = useRef(null);
-
-    const show = () => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: formik.values.value });
-    };
-
-    const formik = useFormik({
-        initialValues: {
-            value: ''
-        },
-        validate: (data) => {
-            let errors = {};
-
-            if (!data.value) {
-                errors.value = 'Phone is required.';
-            }
-
-            return errors;
-        },
-        onSubmit: (data) => {
-            data && show(data);
-            formik.resetForm();
-        }
-    });
-
-    const isFormFieldInvalid = (name) => !!(formik.touched[name] && formik.errors[name]);
-
-    const getFormErrorMessage = (name) => {
-        return isFormFieldInvalid(name) ? <small className="p-error">{formik.errors[name]}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    const code = {
-        basic: `
-<Toast ref={toast} />
-<InputMask
-    id="value"
-    name="value"
-    value={formik.values.value}
-    onChange={(e) => {
-        formik.setFieldValue('value', e.target.value);
-    }}
-    mask="99-999999"
-    placeholder="99-999999"
-    className={classNames({ 'p-invalid': isFormFieldInvalid('value') })}
-/>
-{getFormErrorMessage('value')}
-<Button type="submit" label="Submit" />
-`,
-        javascript: `
-import React, { useRef } from "react";
-import { useFormik } from 'formik';
-import { InputMask } from "primereact/inputmask";
-import { Button } from 'primereact/button';
-import { Toast } from 'primereact/toast';
-import { classNames } from 'primereact/utils';
-
-export default function FormikDoc() {
-    const toast = useRef(null);
-
-    const show = () => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: formik.values.value });
-    };
-
-    const formik = useFormik({
-        initialValues: {
-            value: ''
-        },
-        validate: (data) => {
-            let errors = {};
-
-            if (!data.value) {
-                errors.value = 'Phone is required.';
-            }
-
-            return errors;
-        },
-        onSubmit: (data) => {
-            data && show(data);
-            formik.resetForm();
-        }
-    });
-
-    const isFormFieldInvalid = (name) => !!(formik.touched[name] && formik.errors[name]);
-
-    const getFormErrorMessage = (name) => {
-        return isFormFieldInvalid(name) ? <small className="p-error">{formik.errors[name]}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    return (
-        <div className="card flex justify-content-center">
-            <form onSubmit={formik.handleSubmit} className="flex flex-column gap-2">
-                <Toast ref={toast} />
-                <InputMask
-                    id="value"
-                    name="value"
-                    value={formik.values.value}
-                    onChange={(e) => {
-                        formik.setFieldValue('value', e.target.value);
-                    }}
-                    mask="99-999999"
-                    placeholder="99-999999"
-                    className={classNames({ 'p-invalid': isFormFieldInvalid('value') })}
-                />
-                {getFormErrorMessage('value')}
-                <Button type="submit" label="Submit" />
-            </form>
-        </div>
-    )
-}
-        `,
-        typescript: `
-import React, { useRef } from "react";
-import { useFormik } from 'formik';
-import { InputMask } from "primereact/inputmask";
-import { Button } from 'primereact/button';
-import { Toast } from 'primereact/toast';
-import { classNames } from 'primereact/utils';
-
-export default function FormikDoc() {
-    const toast = useRef(null);
-
-    const show = () => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: formik.values.value });
-    };
-
-    const formik = useFormik({
-        initialValues: {
-            value: ''
-        },
-        validate: (data) => {
-            let errors = {};
-
-            if (!data.value) {
-                errors.value = 'Phone is required.';
-            }
-
-            return errors;
-        },
-        onSubmit: (data) => {
-            data && show(data);
-            formik.resetForm();
-        }
-    });
-
-    const isFormFieldInvalid = (name) => !!(formik.touched[name] && formik.errors[name]);
-
-    const getFormErrorMessage = (name) => {
-        return isFormFieldInvalid(name) ? <small className="p-error">{formik.errors[name]}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    return (
-        <div className="card flex justify-content-center">
-            <form onSubmit={formik.handleSubmit} className="flex flex-column gap-2">
-                <Toast ref={toast} />
-                <InputMask
-                    id="value"
-                    name="value"
-                    value={formik.values.value}
-                    onChange={(e) => {
-                        formik.setFieldValue('value', e.target.value);
-                    }}
-                    mask="99-999999"
-                    placeholder="99-999999"
-                    className={classNames({ 'p-invalid': isFormFieldInvalid('value') })}
-                />
-                {getFormErrorMessage('value')}
-                <Button type="submit" label="Submit" />
-            </form>
-        </div>
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props}>
-                <p>
-                    <a href="https://formik.org/">Formik</a> is a popular library for handling forms in React.
-                </p>
-            </DocSectionText>
-            <div className="card flex justify-content-center">
-                <form onSubmit={formik.handleSubmit} className="flex flex-column gap-2">
-                    <Toast ref={toast} />
-                    <InputMask
-                        id="value"
-                        name="value"
-                        value={formik.values.value}
-                        onChange={(e) => {
-                            formik.setFieldValue('value', e.target.value);
-                        }}
-                        mask="99-999999"
-                        placeholder="99-999999"
-                        className={classNames({ 'p-invalid': isFormFieldInvalid('value') })}
-                    />
-                    {getFormErrorMessage('value')}
-                    <Button type="submit" label="Submit" />
-                </form>
-            </div>
-            <DocSectionCode code={code} dependencies={{ formik: '^2.2.6' }} />
-        </>
-    );
-}
diff --git a/components/doc/inputmask/form/hookformdoc.js b/components/doc/inputmask/form/hookformdoc.js
deleted file mode 100644
index 19f969655d..0000000000
--- a/components/doc/inputmask/form/hookformdoc.js
+++ /dev/null
@@ -1,226 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { Button } from '@/components/lib/button/Button';
-import { InputMask } from '@/components/lib/inputmask/InputMask';
-import { Toast } from '@/components/lib/toast/Toast';
-import { classNames } from '@/components/lib/utils/Utils';
-import { useRef } from 'react';
-import { Controller, useForm } from 'react-hook-form';
-
-export function HookFormDoc(props) {
-    const toast = useRef(null);
-
-    const show = () => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: getValues('value') });
-    };
-
-    const defaultValues = {
-        value: false
-    };
-
-    const {
-        control,
-        formState: { errors },
-        getValues,
-        handleSubmit,
-        reset
-    } = useForm({ defaultValues });
-
-    const onSubmit = (data) => {
-        data.value && show();
-
-        reset();
-    };
-
-    const getFormErrorMessage = (name) => {
-        return errors[name] ? <small className="p-error">{errors[name].message}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    const code = {
-        basic: `
-<Toast ref={toast} />
-<Controller
-    name="value"
-    control={control}
-    rules={{ required: 'Phone is required.' }}
-    render={({ field, fieldState }) => (
-        <>
-            <label htmlFor={field.name} className={classNames({ 'p-error': errors.value })}></label>
-            <InputMask
-                id={field.name}
-                value={field.value}
-                className={classNames({ 'p-invalid': fieldState.error })}
-                onChange={(e) => field.onChange(e.target.value)}
-                mask="99-999999"
-                placeholder="99-999999"
-            />
-            {getFormErrorMessage(field.name)}
-        </>
-    )}
-/>
-<Button label="Submit" type="submit" icon="pi pi-check"/>      
-`,
-        javascript: `
-import React, { useRef } from 'react';
-import { Controller, useForm } from 'react-hook-form';
-import { Button } from 'primereact/button';
-import { classNames } from 'primereact/utils';
-import { Toast } from 'primereact/toast';
-import { InputMask } from "primereact/inputmask";
-
-export default function HookFormDoc() {
-    const toast = useRef(null);
-
-    const show = () => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: getValues('value') });
-    };
-
-    const defaultValues = {
-        value: false
-    };
-
-    const {
-        control,
-        formState: { errors },
-        handleSubmit,
-        getValues,
-        reset
-    } = useForm({ defaultValues });
-
-    const onSubmit = (data) => {
-        data.value && show();
-
-        reset();
-    };
-
-    const getFormErrorMessage = (name) => {
-        return errors[name] ? <small className="p-error">{errors[name].message}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    return (
-        <div className="card flex justify-content-center">
-            <form onSubmit={handleSubmit(onSubmit)} className="flex flex-column gap-2">
-                <Toast ref={toast} />
-                <Controller
-                    name="value"
-                    control={control}
-                    rules={{ required: 'Phone is required.' }}
-                    render={({ field, fieldState }) => (
-                        <>
-                            <label htmlFor={field.name} className={classNames({ 'p-error': errors.value })}></label>
-                            <InputMask
-                                id={field.name}
-                                value={field.value}
-                                className={classNames({ 'p-invalid': fieldState.error })}
-                                onChange={(e) => field.onChange(e.target.value)}
-                                mask="99-999999"
-                                placeholder="99-999999"
-                            />
-                            {getFormErrorMessage(field.name)}
-                        </>
-                    )}
-                />
-                <Button label="Submit" type="submit" icon="pi pi-check"/>
-            </form>
-        </div>
-    )
-}
-        `,
-        typescript: `
-import React, { useRef } from 'react';
-import { Controller, useForm } from 'react-hook-form';
-import { Button } from 'primereact/button';
-import { classNames } from 'primereact/utils';
-import { Toast } from 'primereact/toast';
-import { InputMask } from "primereact/inputmask";
-
-export default function HookFormDoc() {
-    const toast = useRef(null);
-
-    const show = () => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: getValues('value') });
-    };
-
-    const defaultValues = {
-        value: false
-    };
-
-    const {
-        control,
-        formState: { errors },
-        handleSubmit,
-        getValues,
-        reset
-    } = useForm({ defaultValues });
-
-    const onSubmit = (data) => {
-        data.value && show();
-
-        reset();
-    };
-
-    const getFormErrorMessage = (name) => {
-        return errors[name] ? <small className="p-error">{errors[name].message}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    return (
-        <div className="card flex justify-content-center">
-            <form onSubmit={handleSubmit(onSubmit)} className="flex flex-column gap-2">
-                <Toast ref={toast} />
-                <Controller
-                    name="value"
-                    control={control}
-                    rules={{ required: 'Phone is required.' }}
-                    render={({ field, fieldState }) => (
-                        <>
-                            <label htmlFor={field.name} className={classNames({ 'p-error': errors.value })}></label>
-                            <InputMask
-                                id={field.name}
-                                value={field.value}
-                                className={classNames({ 'p-invalid': fieldState.error })}
-                                onChange={(e) => field.onChange(e.target.value)}
-                                mask="99-999999"
-                                placeholder="99-999999"
-                            />
-                            {getFormErrorMessage(field.name)}
-                        </>
-                    )}
-                />
-                <Button label="Submit" type="submit" icon="pi pi-check"/>
-            </form>
-        </div>
-    )
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props}>
-                <p>
-                    <a href="https://react-hook-form.com/">React Hook Form</a> is another popular React library to handle forms.
-                </p>
-            </DocSectionText>
-            <div className="card flex justify-content-center">
-                <form onSubmit={handleSubmit(onSubmit)} className="flex flex-column gap-2">
-                    <Toast ref={toast} />
-                    <Controller
-                        name="value"
-                        control={control}
-                        rules={{ required: 'Phone is required.' }}
-                        render={({ field, fieldState }) => (
-                            <>
-                                <label htmlFor={field.name} className={classNames({ 'p-error': errors.value })} />
-                                <InputMask id={field.name} value={field.value} className={classNames({ 'p-invalid': fieldState.error })} onChange={(e) => field.onChange(e.target.value)} mask="99-999999" placeholder="99-999999" />
-                                {getFormErrorMessage(field.name)}
-                            </>
-                        )}
-                    />
-                    <Button label="Submit" type="submit" icon="pi pi-check" />
-                </form>
-            </div>
-
-            <DocSectionCode code={code} dependencies={{ 'react-hook-form': '^7.39.4' }} />
-        </>
-    );
-}
diff --git a/components/doc/inputmask/invaliddoc.js b/components/doc/inputmask/invaliddoc.js
index 8c1d8c7a22..caefc2516b 100644
--- a/components/doc/inputmask/invaliddoc.js
+++ b/components/doc/inputmask/invaliddoc.js
@@ -5,7 +5,7 @@ import { InputMask } from '@/components/lib/inputmask/InputMask';
 export function InvalidDoc(props) {
     const code = {
         basic: `
-<InputMask mask="99-999999" placeholder="99-999999" className="p-invalid"/>
+<InputMask invalid mask="99-999999" placeholder="99-999999" />
         `,
         javascript: `
 import React from 'react'; 
@@ -14,7 +14,7 @@ import { InputMask } from "primereact/inputmask";
 export default function InvalidDemo() {
     return (
         <div className="card flex justify-content-center">
-            <InputMask mask="99-999999" placeholder="99-999999" className="p-invalid" />
+            <InputMask invalid mask="99-999999" placeholder="99-999999" />
         </div>
     )
 }
@@ -26,7 +26,7 @@ import { InputMask } from "primereact/inputmask";
 export default function InvalidDemo() {
     return (
         <div className="card flex justify-content-center">
-            <InputMask mask="99-999999" placeholder="99-999999" className="p-invalid" />
+            <InputMask invalid mask="99-999999" placeholder="99-999999" />
         </div>
     )
 }
@@ -37,11 +37,11 @@ export default function InvalidDemo() {
         <>
             <DocSectionText {...props}>
                 <p>
-                    Invalid state style is added using the <i>p-invalid</i> class to indicate a failed validation.
+                    Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.
                 </p>
             </DocSectionText>
             <div className="card flex justify-content-center">
-                <InputMask mask="99-999999" placeholder="99-999999" className="p-invalid" />
+                <InputMask invalid mask="99-999999" placeholder="99-999999" />
             </div>
             <DocSectionCode code={code} />
         </>
diff --git a/components/doc/inputmask/validationdoc.js b/components/doc/inputmask/validationdoc.js
deleted file mode 100644
index 6205a83147..0000000000
--- a/components/doc/inputmask/validationdoc.js
+++ /dev/null
@@ -1,158 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { Button } from '@/components/lib/button/Button';
-import { InputMask } from '@/components/lib/inputmask/InputMask';
-import { classNames } from '@/components/lib/utils/Utils';
-import { useState } from 'react';
-import { Controller, useForm } from 'react-hook-form';
-
-export function ValidationDoc(props) {
-    const [formData, setFormData] = useState({});
-    const defaultValues = { productId: '' };
-    const form = useForm({ defaultValues });
-    const errors = form.formState.errors;
-
-    const onSubmit = (data) => {
-        setFormData(data);
-    };
-
-    const getFormErrorMessage = (name) => {
-        return errors[name] && <small className="p-error">{errors[name].message}</small>;
-    };
-
-    const code = {
-        basic: `
-<Controller name="productId"  control={form.control} rules={{ required: 'Product Id is required.'}}
-    render={({ field, fieldState }) => (
-        <>
-            <label htmlFor={field.name} className={classNames({ 'p-error': errors.name })}>Product Id*</label>
-            <InputMask id={field.name} {...field} className={classNames({ 'p-invalid': fieldState.error })} mask="99-999" placeholder="99-999" />
-            {getFormErrorMessage(field.name)}
-        </>
-    )}
-/>
-        `,
-        javascript: `
-import React, { useState } from 'react';
-import { Controller, useForm } from 'react-hook-form';
-import { Button } from 'primereact/button';
-import { classNames } from 'primereact/utils';
-import { InputMask } from "primereact/inputmask";
-
-export default function ValidationDemo() {
-    const [formData, setFormData] = useState({});
-    const defaultValues = {productId: ''};
-    const form = useForm({ defaultValues });
-    const errors = form.formState.errors;
-
-    const onSubmit = (data) => {
-        setFormData(data);
-    };
-
-    const getFormErrorMessage = (name) => {
-        return errors[name] && <small className="p-error">{errors[name].message}</small>
-    };
-
-    return (
-        <form onSubmit={form.handleSubmit(onSubmit)} className="p-fluid">
-            <div className="field">
-                <Controller
-                    name="productId"
-                    control={form.control}
-                    rules={{ required: 'Product Id is required.' }}
-                    render={({ field, fieldState }) => (
-                        <>
-                            <label htmlFor={field.name} className={classNames({ 'p-error': errors.productId })}>
-                                Product Id*
-                            </label>
-                            <InputMask id={field.name} {...field} className={classNames({ 'p-invalid': fieldState.error })} mask="99-999" placeholder="99-999" />
-                            {getFormErrorMessage(field.name)}
-                        </>
-                    )}
-                />
-            </div>
-            <Button label="Submit" type="submit" icon="pi pi-check" />
-        </form>
-    )
-}
-        `,
-        typescript: `
-import React, { useState } from 'react';
-import { Controller, useForm } from 'react-hook-form';
-import { Button } from 'primereact/button';
-import { classNames } from 'primereact/utils';
-import { InputMask } from "primereact/inputmask";
-
-export default function InvalidDemo() {
-    const [formData, setFormData] = useState<any>({});
-    const defaultValues = {productId: ''};
-    const form = useForm({ defaultValues });
-    const errors = form.formState.errors;
-
-    const onSubmit = (data: any) => {
-        setFormData(data);
-    };
-
-    const getFormErrorMessage = (name: string) => {
-        return errors[name] && <small className="p-error">{errors[name].message}</small>
-    };
-
-    return (
-        <form onSubmit={form.handleSubmit(onSubmit)} className="p-fluid">
-            <div className="field">
-                <Controller
-                    name="productId"
-                    control={form.control}
-                    rules={{ required: 'Product Id is required.' }}
-                    render={({ field, fieldState }) => (
-                        <>
-                            <label htmlFor={field.name} className={classNames({ 'p-error': errors.productId })}>
-                                Product Id*
-                            </label>
-                            <InputMask id={field.name} {...field} className={classNames({ 'p-invalid': fieldState.error })} mask="99-999" placeholder="99-999" />
-                            {getFormErrorMessage(field.name)}
-                        </>
-                    )}
-                />
-            </div>
-            <Button label="Submit" type="submit" icon="pi pi-check" />
-        </form>
-    )
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props}>
-                <p>
-                    <a href="https://react-hook-form.com/">React Hook Form</a> is another popular React library to handle forms.
-                </p>
-            </DocSectionText>
-            <div className="card flex justify-content-center">
-                <div className="flex flex-column gap-2">
-                    <form onSubmit={form.handleSubmit(onSubmit)} className="p-fluid">
-                        <div className="field">
-                            <Controller
-                                name="productId"
-                                control={form.control}
-                                rules={{ required: 'Product Id is required.' }}
-                                render={({ field, fieldState }) => (
-                                    <>
-                                        <label htmlFor={field.name} className={classNames({ 'p-error': errors.productId })}>
-                                            Product Id*
-                                        </label>
-                                        <InputMask id={field.name} {...field} className={classNames({ 'p-invalid': fieldState.error })} mask="99-999" placeholder="99-999" />
-                                        {getFormErrorMessage(field.name)}
-                                    </>
-                                )}
-                            />
-                        </div>
-                        <Button label="Submit" type="submit" icon="pi pi-check" />
-                    </form>
-                </div>
-            </div>
-            <DocSectionCode code={code} dependencies={{ 'react-hook-form': '^7.39.4' }} />
-        </>
-    );
-}
diff --git a/components/doc/inputnumber/filleddoc.js b/components/doc/inputnumber/filleddoc.js
new file mode 100644
index 0000000000..26372e29c3
--- /dev/null
+++ b/components/doc/inputnumber/filleddoc.js
@@ -0,0 +1,56 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { InputNumber } from '@/components/lib/inputnumber/InputNumber';
+import { useState } from 'react';
+
+export function FilledDoc(props) {
+    const [value, setValue] = useState(null);
+
+    const code = {
+        basic: `
+<InputNumber variant="filled" value={value} onValueChange={(e) => setValue(e.value)} mode="decimal" minFractionDigits={2} />
+`,
+        javascript: `
+import React, { useState } from "react";
+import { InputNumber } from 'primereact/inputnumber';
+
+export default function FilledDemo() {
+    const [value, setValue] = useState(151351);
+
+    return (
+        <div className="card flex justify-content-center">
+            <InputNumber variant="filled" value={value} onValueChange={(e) => setValue(e.value)} mode="decimal" minFractionDigits={2} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { InputNumber, InputNumberValueChangeEvent } from 'primereact/inputnumber';
+
+export default function FilledDemo() {
+    const [value, setValue] = useState<number>(151351);
+
+    return (
+        <div className="card flex justify-content-center">
+            <InputNumber variant="filled" value={value} onValueChange={(e: InputNumberValueChangeEvent) => setValue(e.value)} mode="decimal" minFractionDigits={2} />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <InputNumber variant="filled" value={value} onValueChange={(e) => setValue(e.value)} minFractionDigits={2} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/inputnumber/floatlabeldoc.js b/components/doc/inputnumber/floatlabeldoc.js
index 254b49cbbc..7157103acd 100644
--- a/components/doc/inputnumber/floatlabeldoc.js
+++ b/components/doc/inputnumber/floatlabeldoc.js
@@ -1,6 +1,8 @@
 import { DocSectionCode } from '@/components/doc/common/docsectioncode';
 import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { FloatLabel } from '@/components/lib/floatlabel/FloatLabel';
 import { InputNumber } from '@/components/lib/inputnumber/InputNumber';
+import Link from 'next/link';
 import { useState } from 'react';
 
 export function FloatLabelDoc(props) {
@@ -8,24 +10,25 @@ export function FloatLabelDoc(props) {
 
     const code = {
         basic: `
-<span className="p-float-label">
+<FloatLabel>
     <InputNumber id="number-input" value={value} onValueChange={(e) => setValue(e.value)} />
     <label htmlFor="number-input">Number</label>
-</span>
+</FloatLabel>
 `,
         javascript: `
 import React, { useState } from "react";
 import { InputNumber } from 'primereact/inputnumber';
+import { FloatLabel } from 'primereact/floatlabel';
 
 export default function FloatLabelDemo() {
     const [value, setValue] = useState(151351);
 
     return (
         <div className="card flex justify-content-center">
-            <span className="p-float-label">
+            <FloatLabel>
                 <InputNumber id="number-input" value={value} onValueChange={(e) => setValue(e.value)} />
                 <label htmlFor="number-input">Number</label>
-            </span>
+            </FloatLabel>
         </div>
     )
 }
@@ -33,16 +36,17 @@ export default function FloatLabelDemo() {
         typescript: `
 import React, { useState } from "react";
 import { InputNumber, InputNumberValueChangeEvent } from 'primereact/inputnumber';
+import { FloatLabel } from 'primereact/floatlabel';
 
 export default function FloatLabelDemo() {
     const [value, setValue] = useState<number>(151351);
 
     return (
         <div className="card flex justify-content-center">
-            <span className="p-float-label">
+            <FloatLabel>
                 <InputNumber id="number-input" value={value} onValueChange={(e: InputNumberValueChangeEvent) => setValue(e.value)} />
                 <label htmlFor="number-input">Number</label>
-            </span>
+            </FloatLabel>
         </div>
     )
 }
@@ -52,13 +56,15 @@ export default function FloatLabelDemo() {
     return (
         <>
             <DocSectionText {...props}>
-                <p>A floating label appears on top of the input field when focused.</p>
+                <p>
+                    A floating label appears on top of the input field when focused. Visit <Link href="/floatlabel">FloatLabel</Link> documentation for more information.
+                </p>
             </DocSectionText>
             <div className="card flex justify-content-center">
-                <span className="p-float-label">
+                <FloatLabel>
                     <InputNumber id="number-input" value={value} onValueChange={(e) => setValue(e.value)} />
                     <label htmlFor="number-input">Number</label>
-                </span>
+                </FloatLabel>
             </div>
             <DocSectionCode code={code} />
         </>
diff --git a/components/doc/inputnumber/form/formikdoc.js b/components/doc/inputnumber/form/formikdoc.js
deleted file mode 100644
index d9dd801e39..0000000000
--- a/components/doc/inputnumber/form/formikdoc.js
+++ /dev/null
@@ -1,256 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { Button } from '@/components/lib/button/Button';
-import { InputNumber } from '@/components/lib/inputnumber/InputNumber';
-import { Toast } from '@/components/lib/toast/Toast';
-import { classNames } from '@/components/lib/utils/Utils';
-import { useFormik } from 'formik';
-import { useRef } from 'react';
-
-export function FormikDoc(props) {
-    const toast = useRef(null);
-
-    const show = () => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: formik.values.year });
-    };
-
-    const formik = useFormik({
-        initialValues: {
-            year: null
-        },
-        validate: (data) => {
-            let errors = {};
-
-            if (!data.year) {
-                errors.year = 'Year is required.';
-            }
-
-            if (data.year < 1960) {
-                errors.year = 'Enter a valid year.';
-            }
-
-            if (data.year > 2050) {
-                errors.year = 'Enter a valid year.';
-            }
-
-            return errors;
-        },
-        onSubmit: (data) => {
-            data && show(data);
-            formik.resetForm();
-        }
-    });
-
-    const isFormFieldInvalid = (name) => !!(formik.touched[name] && formik.errors[name]);
-
-    const getFormErrorMessage = (name) => {
-        return isFormFieldInvalid(name) ? <small className="p-error">{formik.errors[name]}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    const code = {
-        basic: `
-<Toast ref={toast} />
-<InputNumber
-    inputId="in_year"
-    name="year"
-    value={formik.values.year}
-    onValueChange={(e) => {
-        formik.setFieldValue('year', e.value);
-    }}
-    useGrouping={false}
-    inputClassName={classNames({ 'p-invalid': isFormFieldInvalid('year') })}
-    pt={{
-        input: {
-            root: { autoComplete: 'off' }
-        }
-    }}
-/>
-{getFormErrorMessage('year')}
-<Button label="Submit" type="submit" icon="pi pi-check" />
-        `,
-        javascript: `
-import React, { useRef } from "react";
-import { useFormik } from 'formik';
-import { InputNumber } from 'primereact/inputnumber';
-import { Button } from 'primereact/button';
-import { classNames } from 'primereact/utils';
-import { Toast } from 'primereact/toast';
-
-export default function FormikDoc() {
-    const toast = useRef(null);
-
-    const show = () => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: formik.values.year });
-    };
-
-    const formik = useFormik({
-        initialValues: {
-            year: null
-        },
-        validate: (data) => {
-            let errors = {};
-
-            if (!data.year) {
-                errors.year = 'Year is required.';
-            }
-
-            if (data.year < 1960) {
-                errors.year = \`Enter a valid year.\`;
-            }
-
-            if (data.year > 2050) {
-                errors.year = \`Enter a valid year.\`;
-            }
-
-            return errors;
-        },
-        onSubmit: (data) => {
-            data && show(data);
-            formik.resetForm();
-        }
-    });
-
-    const isFormFieldInvalid = (name) => !!(formik.touched[name] && formik.errors[name]);
-
-    const getFormErrorMessage = (name) => {
-        return isFormFieldInvalid(name) ? <small className="p-error">{formik.errors[name]}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    return (
-        <div className="card flex justify-content-center">
-            <form onSubmit={formik.handleSubmit} className="flex flex-column gap-2">
-                <label htmlFor="year">Enter a year between 1960-2050.</label>
-                <Toast ref={toast} />
-                <InputNumber
-                    inputId="in_year"
-                    name="year"
-                    value={formik.values.year}
-                    onValueChange={(e) => {
-                        formik.setFieldValue('year', e.value);
-                    }}
-                    useGrouping={false}
-                    inputClassName={classNames({ 'p-invalid': isFormFieldInvalid('year') })}
-                    pt={{
-                        input: {
-                            root: { autoComplete: 'off' }
-                        }
-                    }}
-                />
-                {getFormErrorMessage('year')}
-                <Button label="Submit" type="submit" icon="pi pi-check" />
-            </form>
-        </div>
-    )
-}
-        `,
-        typescript: `
-import React, { useRef } from "react";
-import { useFormik } from 'formik';
-import { InputNumber } from 'primereact/inputnumber';
-import { Button } from 'primereact/button';
-import { classNames } from 'primereact/utils';
-import { Toast } from 'primereact/toast';
-
-export default function FormikDoc() {
-    const toast = useRef(null);
-
-    const show = () => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: formik.values.year });
-    };
-
-    const formik = useFormik({
-        initialValues: {
-            year: null
-        },
-        validate: (data) => {
-            let errors = {};
-
-            if (!data.year) {
-                errors.year = 'Year is required.';
-            }
-
-            if (data.year < 1960) {
-                errors.year = \`Enter a valid year.\`;
-            }
-
-            if (data.year > 2050) {
-                errors.year = \`Enter a valid year.\`;
-            }
-
-            return errors;
-        },
-        onSubmit: (data) => {
-            data && show(data);
-            formik.resetForm();
-        }
-    });
-
-    const isFormFieldInvalid = (name) => !!(formik.touched[name] && formik.errors[name]);
-
-    const getFormErrorMessage = (name) => {
-        return isFormFieldInvalid(name) ? <small className="p-error">{formik.errors[name]}</small> : <small className="p-error">&nbsp;</small>;
-    };
-    
-    return (
-        <div className="card flex justify-content-center">
-            <form onSubmit={formik.handleSubmit} className="flex flex-column gap-2">
-                <label htmlFor="year">Enter a year between 1960-2050.</label>
-                <Toast ref={toast} />
-                <InputNumber
-                    inputId="in_year"
-                    name="year"
-                    value={formik.values.year}
-                    onValueChange={(e) => {
-                        formik.setFieldValue('year', e.value);
-                    }}
-                    useGrouping={false}
-                    inputClassName={classNames({ 'p-invalid': isFormFieldInvalid('year') })}
-                    pt={{
-                        input: {
-                            root: { autoComplete: 'off' }
-                        }
-                    }}
-                />
-                {getFormErrorMessage('year')}
-                <Button label="Submit" type="submit" icon="pi pi-check" />
-            </form>
-        </div>
-    )
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props}>
-                <p>
-                    <a href="https://formik.org/">Formik</a> is a popular library for handling forms in React.
-                </p>
-            </DocSectionText>
-            <div className="card flex justify-content-center">
-                <form onSubmit={formik.handleSubmit} className="flex flex-column gap-2">
-                    <label htmlFor="year">Enter a year between 1960-2050.</label>
-                    <Toast ref={toast} />
-                    <InputNumber
-                        inputId="in_year"
-                        name="year"
-                        value={formik.values.year}
-                        onValueChange={(e) => {
-                            formik.setFieldValue('year', e.value);
-                        }}
-                        useGrouping={false}
-                        inputClassName={classNames({ 'p-invalid': isFormFieldInvalid('year') })}
-                        pt={{
-                            input: {
-                                root: { autoComplete: 'off' }
-                            }
-                        }}
-                    />
-                    {getFormErrorMessage('year')}
-                    <Button label="Submit" type="submit" icon="pi pi-check" />
-                </form>
-            </div>
-            <DocSectionCode code={code} dependencies={{ formik: '^2.2.6' }} />
-        </>
-    );
-}
diff --git a/components/doc/inputnumber/form/hookformdoc.js b/components/doc/inputnumber/form/hookformdoc.js
deleted file mode 100644
index 9e379e03fd..0000000000
--- a/components/doc/inputnumber/form/hookformdoc.js
+++ /dev/null
@@ -1,186 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { Button } from '@/components/lib/button/Button';
-import { InputNumber } from '@/components/lib/inputnumber/InputNumber';
-import { Toast } from '@/components/lib/toast/Toast';
-import { classNames } from '@/components/lib/utils/Utils';
-import { useRef } from 'react';
-import { Controller, useForm } from 'react-hook-form';
-
-export function HookFormDoc(props) {
-    const toast = useRef(null);
-    const defaultValues = { year: null };
-    const form = useForm({ defaultValues });
-    const errors = form.formState.errors;
-
-    const show = () => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: form.getValues('year') });
-    };
-
-    const onSubmit = (data) => {
-        data.year && show();
-        form.reset();
-    };
-
-    const getFormErrorMessage = (name) => {
-        return errors[name] ? <small className="p-error">{errors[name].message}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    const code = {
-        basic: `
-<Toast ref={toast} />
-<Controller
-    name="year"
-    control={form.control}
-    rules={{
-        required: 'Enter a valid year.',
-        validate: (value) => (value >= 1960 && value <= 2050) || 'Enter a valid year.'
-    }}
-    render={({ field, fieldState }) => (
-        <>
-            <label htmlFor={field.name}>Enter a year between 1960-2050.</label>
-            <InputNumber id={field.name} inputRef={field.ref} value={field.value} onBlur={field.onBlur} onValueChange={(e) => field.onChange(e)} useGrouping={false} inputClassName={classNames({ 'p-invalid': fieldState.error })} />
-            {getFormErrorMessage(field.name)}
-        </>
-    )}
-/>
-<Button label="Submit" type="submit" icon="pi pi-check" />
-        `,
-        javascript: `
-import React, { useRef } from 'react';
-import { Controller, useForm } from 'react-hook-form';
-import { Button } from 'primereact/button';
-import { classNames } from 'primereact/utils';
-import { Toast } from "primereact/toast";
-import { InputNumber } from "primereact/inputnumber";
-
-export default function HookFormDoc() {
-    const toast = useRef(null);
-    const defaultValues = { year: null };
-    const form = useForm({ defaultValues });
-    const errors = form.formState.errors;
-
-    const show = () => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: form.getValues('year') });
-    };
-
-    const onSubmit = (data) => {
-        data.year && show();
-        form.reset();
-    };
-
-    const getFormErrorMessage = (name) => {
-        return errors[name] ? <small className="p-error">{errors[name].message}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    return (
-        <div className="card flex justify-content-center">
-            <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-column gap-2">
-                <Toast ref={toast} />
-                <Controller
-                    name="year"
-                    control={form.control}
-                    rules={{
-                        required: 'Enter a valid year.',
-                        validate: (value) => (value >= 1960 && value <= 2050) || 'Enter a valid year.'
-                    }}
-                    render={({ field, fieldState }) => (
-                        <>
-                            <label htmlFor={field.name}>Enter a year between 1960-2050.</label>
-                            <InputNumber id={field.name} inputRef={field.ref} value={field.value} onBlur={field.onBlur} onValueChange={(e) => field.onChange(e)} useGrouping={false} inputClassName={classNames({ 'p-invalid': fieldState.error })} />
-                            {getFormErrorMessage(field.name)}
-                        </>
-                    )}
-                />
-                <Button label="Submit" type="submit" icon="pi pi-check" />
-            </form>
-        </div>
-    )
-}
-        `,
-        typescript: `
-import React, { useRef } from 'react';
-import { Controller, useForm } from 'react-hook-form';
-import { Button } from 'primereact/button';
-import { classNames } from 'primereact/utils';
-import { Toast } from "primereact/toast";
-import { InputNumber } from "primereact/inputnumber";
-
-export default function HookFormDoc() {
-    const toast = useRef(null);
-    const defaultValues = { year: null };
-    const form = useForm({ defaultValues });
-    const errors = form.formState.errors;
-
-    const show = () => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: form.getValues('year') });
-    };
-
-    const onSubmit = (data) => {
-        data.year && show();
-        form.reset();
-    };
-
-    const getFormErrorMessage = (name) => {
-        return errors[name] ? <small className="p-error">{errors[name].message}</small> : <small className="p-error">&nbsp;</small>;
-    };
-    
-    return (
-        <div className="card flex justify-content-center">
-            <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-column gap-2">
-                <Toast ref={toast} />
-                <Controller
-                    name="year"
-                    control={form.control}
-                    rules={{
-                        required: 'Enter a valid year.',
-                        validate: (value) => (value >= 1960 && value <= 2050) || 'Enter a valid year.'
-                    }}
-                    render={({ field, fieldState }) => (
-                        <>
-                            <label htmlFor={field.name}>Enter a year between 1960-2050.</label>
-                            <InputNumber id={field.name} inputRef={field.ref} value={field.value} onBlur={field.onBlur} onValueChange={(e) => field.onChange(e)} useGrouping={false} inputClassName={classNames({ 'p-invalid': fieldState.error })} />
-                            {getFormErrorMessage(field.name)}
-                        </>
-                    )}
-                />
-                <Button label="Submit" type="submit" icon="pi pi-check" />
-            </form>
-        </div>
-    )
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props}>
-                <p>
-                    <a href="https://react-hook-form.com/">React Hook Form</a> is another popular React library to handle forms.
-                </p>
-            </DocSectionText>
-            <div className="card flex justify-content-center">
-                <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-column gap-2">
-                    <Toast ref={toast} />
-                    <Controller
-                        name="year"
-                        control={form.control}
-                        rules={{
-                            required: 'Enter a valid year.',
-                            validate: (value) => (value >= 1960 && value <= 2050) || 'Enter a valid year.'
-                        }}
-                        render={({ field, fieldState }) => (
-                            <>
-                                <label htmlFor={field.name}>Enter a year between 1960-2050.</label>
-                                <InputNumber id={field.name} inputRef={field.ref} value={field.value} onBlur={field.onBlur} onValueChange={(e) => field.onChange(e)} useGrouping={false} inputClassName={classNames({ 'p-invalid': fieldState.error })} />
-                                {getFormErrorMessage(field.name)}
-                            </>
-                        )}
-                    />
-                    <Button label="Submit" type="submit" icon="pi pi-check" />
-                </form>
-            </div>
-            <DocSectionCode code={code} dependencies={{ 'react-hook-form': '^7.39.4' }} />
-        </>
-    );
-}
diff --git a/components/doc/inputnumber/invaliddoc.js b/components/doc/inputnumber/invaliddoc.js
index 1a1b3af921..9f168a79e6 100644
--- a/components/doc/inputnumber/invaliddoc.js
+++ b/components/doc/inputnumber/invaliddoc.js
@@ -8,7 +8,7 @@ export function InvalidDoc(props) {
 
     const code = {
         basic: `
-<InputNumber className="p-invalid" value={value} onValueChange={(e) => setValue(e.value)} mode="decimal" minFractionDigits={2} />
+<InputNumber invalid value={value} onValueChange={(e) => setValue(e.value)} mode="decimal" minFractionDigits={2} />
 `,
         javascript: `
 import React, { useState } from "react";
@@ -19,7 +19,7 @@ export default function InvalidDemo() {
 
     return (
         <div className="card flex justify-content-center">
-            <InputNumber className="p-invalid" value={value} onValueChange={(e) => setValue(e.value)} mode="decimal" minFractionDigits={2} />
+            <InputNumber invalid value={value} onValueChange={(e) => setValue(e.value)} mode="decimal" minFractionDigits={2} />
         </div>
     )
 }
@@ -33,7 +33,7 @@ export default function InvalidDemo() {
 
     return (
         <div className="card flex justify-content-center">
-            <InputNumber className="p-invalid" value={value} onValueChange={(e: InputNumberValueChangeEvent) => setValue(e.value)} mode="decimal" minFractionDigits={2} />
+            <InputNumber invalid value={value} onValueChange={(e: InputNumberValueChangeEvent) => setValue(e.value)} mode="decimal" minFractionDigits={2} />
         </div>
     )
 }
@@ -44,11 +44,11 @@ export default function InvalidDemo() {
         <>
             <DocSectionText {...props}>
                 <p>
-                    Invalid state style is added using the <i>p-invalid</i> class to indicate a failed validation.
+                    Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.
                 </p>
             </DocSectionText>
             <div className="card flex justify-content-center">
-                <InputNumber className="p-invalid" value={value} onValueChange={(e) => setValue(e.value)} minFractionDigits={2} />
+                <InputNumber invalid value={value} onValueChange={(e) => setValue(e.value)} minFractionDigits={2} />
             </div>
             <DocSectionCode code={code} />
         </>
diff --git a/components/doc/inputswitch/form/formikdoc.js b/components/doc/inputswitch/form/formikdoc.js
deleted file mode 100644
index 830a13f136..0000000000
--- a/components/doc/inputswitch/form/formikdoc.js
+++ /dev/null
@@ -1,208 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { Button } from '@/components/lib/button/Button';
-import { InputSwitch } from '@/components/lib/inputswitch/InputSwitch';
-import { Toast } from '@/components/lib/toast/Toast';
-import { classNames } from '@/components/lib/utils/Utils';
-import { useFormik } from 'formik';
-import { useRef } from 'react';
-
-export function FormikDoc(props) {
-    const toast = useRef(null);
-
-    const show = () => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: 'The form is successfully submitted.' });
-    };
-
-    const formik = useFormik({
-        initialValues: {
-            value: false
-        },
-        validate: (data) => {
-            let errors = {};
-
-            if (!data.value) {
-                errors.value = 'Accept is required.';
-            }
-
-            return errors;
-        },
-        onSubmit: (data) => {
-            data && show(data);
-            formik.resetForm();
-        }
-    });
-
-    const isFormFieldInvalid = (name) => !!(formik.touched[name] && formik.errors[name]);
-
-    const getFormErrorMessage = (name) => {
-        return isFormFieldInvalid(name) ? <small className="p-error">{formik.errors[name]}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    const code = {
-        basic: `
-<Toast ref={toast} />
-<InputSwitch
-    id="value"
-    name="value"
-    checked={formik.values.value}
-    onChange={(e) => {
-        formik.setFieldValue('value', e.value);
-    }}
-    className={classNames({ 'p-invalid': isFormFieldInvalid('value') })}
-/>
-{getFormErrorMessage('value')}
-<Button type="submit" label="Submit" />
-`,
-        javascript: `
-import React, { useRef } from "react";
-import { useFormik } from 'formik';
-import { Button } from 'primereact/button';
-import { Toast } from 'primereact/toast';
-import { InputSwitch } from "primereact/inputswitch";
-import { classNames } from 'primereact/utils';
-
-export default function FormikDoc() {
-    const toast = useRef(null);
-
-    const show = () => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: 'The form is successfully submitted.' });
-    };
-
-    const formik = useFormik({
-        initialValues: {
-            value: false
-        },
-        validate: (data) => {
-            let errors = {};
-
-            if (!data.value) {
-                errors.value = 'Accept is required.';
-            }
-
-            return errors;
-        },
-        onSubmit: (data) => {
-            data && show(data);
-            formik.resetForm();
-        }
-    });
-
-    const isFormFieldInvalid = (name) => !!(formik.touched[name] && formik.errors[name]);
-
-    const getFormErrorMessage = (name) => {
-        return isFormFieldInvalid(name) ? <small className="p-error">{formik.errors[name]}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    return (
-        <div className="card flex justify-content-center">
-            <form onSubmit={formik.handleSubmit} className="flex flex-column gap-2">
-                <div>I've read and accept the terms & conditions.</div>
-                <Toast ref={toast} />
-                <InputSwitch
-                    id="value"
-                    name="value"
-                    checked={formik.values.value}
-                    onChange={(e) => {
-                        formik.setFieldValue('value', e.value);
-                    }}
-                    className={classNames({ 'p-invalid': isFormFieldInvalid('value') })}
-                />
-                {getFormErrorMessage('value')}
-                <Button type="submit" label="Submit" />
-            </form>
-        </div>
-    )
-}
-        `,
-        typescript: `
-import React, { useRef } from "react";
-import { useFormik } from 'formik';
-import { Button } from 'primereact/button';
-import { Toast } from 'primereact/toast';
-import { InputSwitch } from "primereact/inputswitch";
-import { classNames } from 'primereact/utils';
-
-export default function FormikDoc() {
-    const toast = useRef(null);
-
-    const show = () => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: 'The form is successfully submitted.' });
-    };
-
-    const formik = useFormik({
-        initialValues: {
-            value: false
-        },
-        validate: (data) => {
-            let errors = {};
-
-            if (!data.value) {
-                errors.value = 'Accept is required.';
-            }
-
-            return errors;
-        },
-        onSubmit: (data) => {
-            data && show(data);
-            formik.resetForm();
-        }
-    });
-
-    const isFormFieldInvalid = (name) => !!(formik.touched[name] && formik.errors[name]);
-
-    const getFormErrorMessage = (name) => {
-        return isFormFieldInvalid(name) ? <small className="p-error">{formik.errors[name]}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    return (
-        <div className="card flex justify-content-center">
-            <form onSubmit={formik.handleSubmit} className="flex flex-column gap-2">
-                <div>I've read and accept the terms & conditions.</div>
-                <Toast ref={toast} />
-                <InputSwitch
-                    id="value"
-                    name="value"
-                    checked={formik.values.value}
-                    onChange={(e) => {
-                        formik.setFieldValue('value', e.value);
-                    }}
-                    className={classNames({ 'p-invalid': isFormFieldInvalid('value') })}
-                />
-                {getFormErrorMessage('value')}
-                <Button type="submit" label="Submit" />
-            </form>
-        </div>
-    )
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props}>
-                <p>
-                    <a href="https://formik.org/">Formik</a> is a popular library for handling forms in React.
-                </p>
-            </DocSectionText>
-            <div className="card flex justify-content-center">
-                <form onSubmit={formik.handleSubmit} className="flex flex-column gap-2">
-                    <div>I've read and accept the terms & conditions.</div>
-                    <Toast ref={toast} />
-                    <InputSwitch
-                        id="value"
-                        name="value"
-                        checked={formik.values.value}
-                        onChange={(e) => {
-                            formik.setFieldValue('value', e.value);
-                        }}
-                        className={classNames({ 'p-invalid': isFormFieldInvalid('value') })}
-                    />
-                    {getFormErrorMessage('value')}
-                    <Button type="submit" label="Submit" />
-                </form>
-            </div>
-            <DocSectionCode code={code} dependencies={{ formik: '^2.2.6' }} />
-        </>
-    );
-}
diff --git a/components/doc/inputswitch/form/hookformdoc.js b/components/doc/inputswitch/form/hookformdoc.js
deleted file mode 100644
index 722cda04aa..0000000000
--- a/components/doc/inputswitch/form/hookformdoc.js
+++ /dev/null
@@ -1,204 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { Button } from '@/components/lib/button/Button';
-import { InputSwitch } from '@/components/lib/inputswitch/InputSwitch';
-import { Toast } from '@/components/lib/toast/Toast';
-import { classNames } from '@/components/lib/utils/Utils';
-import { useRef } from 'react';
-import { Controller, useForm } from 'react-hook-form';
-
-export function HookFormDoc(props) {
-    const toast = useRef(null);
-
-    const show = () => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: 'The form is successfully submitted.' });
-    };
-
-    const defaultValues = {
-        checked: false
-    };
-
-    const {
-        control,
-        formState: { errors },
-        handleSubmit,
-        reset
-    } = useForm({ defaultValues });
-
-    const onSubmit = (data) => {
-        data.checked && show();
-
-        reset();
-    };
-
-    const getFormErrorMessage = (name) => {
-        return errors[name] ? <small className="p-error">{errors[name].message}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    const code = {
-        basic: `
-<Toast ref={toast} />
-<Controller
-    name="checked"
-    control={control}
-    rules={{ required: 'Accept is required.' }}
-    render={({ field, fieldState }) => (
-        <>
-            <label htmlFor={field.name} className={classNames({ 'p-error': errors.checked })}></label>
-            <InputSwitch inputId={field.name} checked={field.value} inputRef={field.ref} className={classNames({ 'p-invalid': fieldState.error })} onChange={(e) => field.onChange(e.value)} />
-            {getFormErrorMessage(field.name)}
-        </>
-    )}
-/>
-        `,
-        javascript: `
-import React, { useRef } from 'react';
-import { Controller, useForm } from 'react-hook-form';
-import { Button } from 'primereact/button';
-import { classNames } from 'primereact/utils';
-import { Toast } from 'primereact/toast';
-import { InputSwitch } from "primereact/inputswitch";
-
-export default function HookFormDoc() {
-    const toast = useRef(null);
-
-    const show = () => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: 'The form is successfully submitted.' });
-    };
-
-    const defaultValues = {
-        checked: false
-    };
-
-    const {
-        control,
-        formState: { errors },
-        handleSubmit,
-        reset
-    } = useForm({ defaultValues });
-
-    const onSubmit = (data) => {
-        data.checked && show();
-
-        reset();
-    };
-
-    const getFormErrorMessage = (name) => {
-        return errors[name] ? <small className="p-error">{errors[name].message}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    return (
-        <div className="card flex justify-content-center">
-            <form onSubmit={handleSubmit(onSubmit)} className="flex flex-column gap-2">
-                I've read and accept the terms & conditions.
-                <Toast ref={toast} />
-                <Controller
-                    name="checked"
-                    control={control}
-                    rules={{ required: 'Accept is required.' }}
-                    render={({ field, fieldState }) => (
-                        <>
-                            <label htmlFor={field.name} className={classNames({ 'p-error': errors.checked })}></label>
-                            <InputSwitch inputId={field.name} checked={field.value} inputRef={field.ref} className={classNames({ 'p-invalid': fieldState.error })} onChange={(e) => field.onChange(e.value)} />
-                            {getFormErrorMessage(field.name)}
-                        </>
-                    )}
-                />
-                <Button label="Submit" type="submit" icon="pi pi-check" />
-            </form>
-        </div>
-    )
-}
-        `,
-        typescript: `
-import React, { useRef } from 'react';
-import { Controller, useForm } from 'react-hook-form';
-import { Button } from 'primereact/button';
-import { classNames } from 'primereact/utils';
-import { Toast } from 'primereact/toast';
-import { InputSwitch } from "primereact/inputswitch";
-
-export default function HookFormDoc() {
-    const toast = useRef(null);
-
-    const show = () => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: 'The form is successfully submitted.' });
-    };
-
-    const defaultValues = {
-        checked: false
-    };
-
-    const {
-        control,
-        formState: { errors },
-        handleSubmit,
-        reset
-    } = useForm({ defaultValues });
-
-    const onSubmit = (data) => {
-        data.checked && show();
-
-        reset();
-    };
-
-    const getFormErrorMessage = (name) => {
-        return errors[name] ? <small className="p-error">{errors[name].message}</small> : <small className="p-error">&nbsp;</small>;
-    };
-    
-    return (
-        <div className="card flex justify-content-center">
-            <form onSubmit={handleSubmit(onSubmit)} className="flex flex-column gap-2">
-                I've read and accept the terms & conditions.
-                <Toast ref={toast} />
-                <Controller
-                    name="checked"
-                    control={control}
-                    rules={{ required: 'Accept is required.' }}
-                    render={({ field, fieldState }) => (
-                        <>
-                            <label htmlFor={field.name} className={classNames({ 'p-error': errors.checked })}></label>
-                            <InputSwitch inputId={field.name} checked={field.value} inputRef={field.ref} className={classNames({ 'p-invalid': fieldState.error })} onChange={(e) => field.onChange(e.value)} />
-                            {getFormErrorMessage(field.name)}
-                        </>
-                    )}
-                />
-                <Button label="Submit" type="submit" icon="pi pi-check" />
-            </form>
-        </div>
-    )
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props}>
-                <p>
-                    <a href="https://react-hook-form.com/">React Hook Form</a> is another popular React library to handle forms.
-                </p>
-            </DocSectionText>
-            <div className="card flex justify-content-center">
-                <form onSubmit={handleSubmit(onSubmit)} className="flex flex-column gap-2">
-                    I've read and accept the terms & conditions.
-                    <Toast ref={toast} />
-                    <Controller
-                        name="checked"
-                        control={control}
-                        rules={{ required: 'Accept is required.' }}
-                        render={({ field, fieldState }) => (
-                            <>
-                                <label htmlFor={field.name} className={classNames({ 'p-error': errors.checked })} />
-                                <InputSwitch inputId={field.name} checked={field.value} inputRef={field.ref} className={classNames({ 'p-invalid': fieldState.error })} onChange={(e) => field.onChange(e.value)} />
-                                {getFormErrorMessage(field.name)}
-                            </>
-                        )}
-                    />
-                    <Button label="Submit" type="submit" icon="pi pi-check" />
-                </form>
-            </div>
-
-            <DocSectionCode code={code} dependencies={{ 'react-hook-form': '^7.39.4' }} />
-        </>
-    );
-}
diff --git a/components/doc/inputtext/filleddoc.js b/components/doc/inputtext/filleddoc.js
new file mode 100644
index 0000000000..62bb400b32
--- /dev/null
+++ b/components/doc/inputtext/filleddoc.js
@@ -0,0 +1,56 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { InputText } from '@/components/lib/inputtext/InputText';
+import { useState } from 'react';
+
+export function FilledDoc(props) {
+    const [value, setValue] = useState('');
+
+    const code = {
+        basic: `
+<InputText variant="filled" value={value} onChange={(e) => setValue(e.target.value)} />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { InputText } from "primereact/inputtext";
+
+export default function FilledDemo() {
+    const [value, setValue] = useState('');
+
+    return (
+        <div className="card flex justify-content-center">
+            <InputText variant="filled" value={value} onChange={(e) => setValue(e.target.value)} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { InputText } from "primereact/inputtext";
+
+export default function FilledDemo() {
+    const [value, setValue] = useState<string>('');
+
+    return (
+        <div className="card flex justify-content-center">
+            <InputText variant="filled" value={value} onChange={(e: React.ChangeEvent<HTMLInputElement>) => setValue(e.target.value)} />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <InputText variant="filled" value={value} onChange={(e) => setValue(e.target.value)} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/inputtext/floatlabeldoc.js b/components/doc/inputtext/floatlabeldoc.js
index 6b7c5dfa4c..a4125050d2 100644
--- a/components/doc/inputtext/floatlabeldoc.js
+++ b/components/doc/inputtext/floatlabeldoc.js
@@ -1,6 +1,8 @@
 import { DocSectionCode } from '@/components/doc/common/docsectioncode';
 import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { FloatLabel } from '@/components/lib/floatlabel/FloatLabel';
 import { InputText } from '@/components/lib/inputtext/InputText';
+import Link from 'next/link';
 import { useState } from 'react';
 
 export function FloatLabelDoc(props) {
@@ -8,24 +10,25 @@ export function FloatLabelDoc(props) {
 
     const code = {
         basic: `
-<span className="p-float-label">
+<FloatLabel>
     <InputText id="username" value={value} onChange={(e) => setValue(e.target.value)} />
     <label htmlFor="username">Username</label>
-</span>
+</FloatLabel>
         `,
         javascript: `
 import React, { useState } from "react";
 import { InputText } from "primereact/inputtext";
+import { FloatLabel } from "primereact/floatlabel";
 
 export default function FloatLabelDemo() {
     const [value, setValue] = useState('');
 
     return (
         <div className="card flex justify-content-center">
-            <span className="p-float-label">
+            <FloatLabel>
                 <InputText id="username" value={value} onChange={(e) => setValue(e.target.value)} />
                 <label htmlFor="username">Username</label>
-            </span>
+            </FloatLabel>
         </div>
     )
 }
@@ -33,16 +36,17 @@ export default function FloatLabelDemo() {
         typescript: `
 import React, { useState } from "react";
 import { InputText } from "primereact/inputtext";
+import { FloatLabel } from "primereact/floatlabel";
 
 export default function FloatLabelDemo() {
     const [value, setValue] = useState<string>('');
 
     return (
         <div className="card flex justify-content-center">
-            <span className="p-float-label">
+            <FloatLabel>
                 <InputText id="username" value={value} onChange={(e: React.ChangeEvent<HTMLInputElement>) => setValue(e.target.value)} />
                 <label htmlFor="username">Username</label>
-            </span>
+            </FloatLabel>
         </div>
     )
 }
@@ -52,13 +56,15 @@ export default function FloatLabelDemo() {
     return (
         <>
             <DocSectionText {...props}>
-                <p>A floating label appears on top of the input field when focused.</p>
+                <p>
+                    A floating label appears on top of the input field when focused. Visit <Link href="/floatlabel">FloatLabel</Link> documentation for more information.
+                </p>
             </DocSectionText>
             <div className="card flex justify-content-center">
-                <span className="p-float-label">
+                <FloatLabel>
                     <InputText id="username" value={value} onChange={(e) => setValue(e.target.value)} />
                     <label htmlFor="username">Username</label>
-                </span>
+                </FloatLabel>
             </div>
             <DocSectionCode code={code} />
         </>
diff --git a/components/doc/inputtext/form/formikdoc.js b/components/doc/inputtext/form/formikdoc.js
deleted file mode 100644
index 12a3679051..0000000000
--- a/components/doc/inputtext/form/formikdoc.js
+++ /dev/null
@@ -1,212 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { Button } from '@/components/lib/button/Button';
-import { InputText } from '@/components/lib/inputtext/InputText';
-import { Toast } from '@/components/lib/toast/Toast';
-import { classNames } from '@/components/lib/utils/Utils';
-import { useFormik } from 'formik';
-import { useRef } from 'react';
-
-export function FormikDoc(props) {
-    const toast = useRef(null);
-
-    const show = () => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: formik.values.value });
-    };
-
-    const formik = useFormik({
-        initialValues: {
-            value: ''
-        },
-        validate: (data) => {
-            let errors = {};
-
-            if (!data.value) {
-                errors.value = 'Name - Surname is required.';
-            }
-
-            return errors;
-        },
-        onSubmit: (data) => {
-            data && show(data);
-            formik.resetForm();
-        }
-    });
-
-    const isFormFieldInvalid = (name) => !!(formik.touched[name] && formik.errors[name]);
-
-    const getFormErrorMessage = (name) => {
-        return isFormFieldInvalid(name) ? <small className="p-error">{formik.errors[name]}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    const code = {
-        basic: `
-<Toast ref={toast} />
-<InputText
-    id="value"
-    name="value"
-    value={formik.values.value}
-    onChange={(e) => {
-        formik.setFieldValue('value', e.target.value);
-    }}
-    className={classNames({ 'p-invalid': isFormFieldInvalid('value') })}
-/>
-        `,
-        javascript: `
-import React, { useRef } from "react";
-import { useFormik } from 'formik';
-import { InputText } from "primereact/inputtext";
-import { Button } from 'primereact/button';
-import { Toast } from 'primereact/toast';
-import { classNames } from 'primereact/utils';
-
-export default function FormikDoc() {
-    const toast = useRef(null);
-
-    const show = () => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: formik.values.value });
-    };
-
-    const formik = useFormik({
-        initialValues: {
-            value: ''
-        },
-        validate: (data) => {
-            let errors = {};
-
-            if (!data.value) {
-                errors.value = 'Name - Surname is required.';
-            }
-
-            return errors;
-        },
-        onSubmit: (data) => {
-            data && show(data);
-            formik.resetForm();
-        }
-    });
-
-    const isFormFieldInvalid = (name) => !!(formik.touched[name] && formik.errors[name]);
-
-    const getFormErrorMessage = (name) => {
-        return isFormFieldInvalid(name) ? <small className="p-error">{formik.errors[name]}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    return (
-        <div className="card flex justify-content-center">
-            <form onSubmit={formik.handleSubmit} className="flex flex-column gap-2">
-                <span className="p-float-label">
-                    <Toast ref={toast} />
-                    <InputText
-                        id="value"
-                        name="value"
-                        value={formik.values.value}
-                        onChange={(e) => {
-                            formik.setFieldValue('value', e.target.value);
-                        }}
-                        className={classNames({ 'p-invalid': isFormFieldInvalid('value') })}
-                    />
-                    <label htmlFor="input_value">Name - Surname</label>
-                </span>
-                {getFormErrorMessage('value')}
-                <Button type="submit" label="Submit" />
-            </form>
-        </div>
-    )
-}
-        `,
-        typescript: `
-import React, { useRef } from "react";
-import { useFormik } from 'formik';
-import { InputText } from "primereact/inputtext";
-import { Button } from 'primereact/button';
-import { Toast } from 'primereact/toast';
-import { classNames } from 'primereact/utils';
-
-export default function FormikDoc() {
-    const toast = useRef(null);
-
-    const show = () => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: formik.values.value });
-    };
-
-    const formik = useFormik({
-        initialValues: {
-            value: ''
-        },
-        validate: (data) => {
-            let errors = {};
-
-            if (!data.value) {
-                errors.value = 'Name - Surname is required.';
-            }
-
-            return errors;
-        },
-        onSubmit: (data) => {
-            data && show(data);
-            formik.resetForm();
-        }
-    });
-
-    const isFormFieldInvalid = (name) => !!(formik.touched[name] && formik.errors[name]);
-
-    const getFormErrorMessage = (name) => {
-        return isFormFieldInvalid(name) ? <small className="p-error">{formik.errors[name]}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    return (
-        <div className="card flex justify-content-center">
-            <form onSubmit={formik.handleSubmit} className="flex flex-column gap-2">
-                <span className="p-float-label">
-                    <Toast ref={toast} />
-                    <InputText
-                        id="value"
-                        name="value"
-                        value={formik.values.value}
-                        onChange={(e) => {
-                            formik.setFieldValue('value', e.target.value);
-                        }}
-                        className={classNames({ 'p-invalid': isFormFieldInvalid('value') })}
-                    />
-                    <label htmlFor="input_value">Name - Surname</label>
-                </span>
-                {getFormErrorMessage('value')}
-                <Button type="submit" label="Submit" />
-            </form>
-        </div>
-    )
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props}>
-                <p>
-                    <a href="https://formik.org/">Formik</a> is a popular library for handling forms in React.
-                </p>
-            </DocSectionText>
-            <div className="card flex justify-content-center">
-                <form onSubmit={formik.handleSubmit} className="flex flex-column gap-2">
-                    <span className="p-float-label">
-                        <Toast ref={toast} />
-                        <InputText
-                            id="value"
-                            name="value"
-                            value={formik.values.value}
-                            onChange={(e) => {
-                                formik.setFieldValue('value', e.target.value);
-                            }}
-                            className={classNames({ 'p-invalid': isFormFieldInvalid('value') })}
-                        />
-                        <label htmlFor="input_value">Name - Surname</label>
-                    </span>
-                    {getFormErrorMessage('value')}
-                    <Button type="submit" label="Submit" />
-                </form>
-            </div>
-            <DocSectionCode code={code} dependencies={{ formik: '^2.2.6' }} />
-        </>
-    );
-}
diff --git a/components/doc/inputtext/form/hookformdoc.js b/components/doc/inputtext/form/hookformdoc.js
deleted file mode 100644
index 70f7d62725..0000000000
--- a/components/doc/inputtext/form/hookformdoc.js
+++ /dev/null
@@ -1,216 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { Button } from '@/components/lib/button/Button';
-import { InputText } from '@/components/lib/inputtext/InputText';
-import { Toast } from '@/components/lib/toast/Toast';
-import { classNames } from '@/components/lib/utils/Utils';
-import { useRef } from 'react';
-import { Controller, useForm } from 'react-hook-form';
-
-export function HookFormDoc(props) {
-    const toast = useRef(null);
-
-    const show = () => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: getValues('value') });
-    };
-
-    const defaultValues = {
-        value: ''
-    };
-
-    const {
-        control,
-        formState: { errors },
-        handleSubmit,
-        getValues,
-        reset
-    } = useForm({ defaultValues });
-
-    const onSubmit = (data) => {
-        data.value && show();
-
-        reset();
-    };
-
-    const getFormErrorMessage = (name) => {
-        return errors[name] ? <small className="p-error">{errors[name].message}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    const code = {
-        basic: `
-<Toast ref={toast} />
-<Controller
-    name="value"
-    control={control}
-    rules={{ required: 'Name - Surname is required.' }}
-    render={({ field, fieldState }) => (
-        <>
-            <label htmlFor={field.name} className={classNames({ 'p-error': errors.value })}></label>
-            <span className="p-float-label">
-                <InputText id={field.name} value={field.value} className={classNames({ 'p-invalid': fieldState.error })} onChange={(e) => field.onChange(e.target.value)} />
-                <label htmlFor={field.name}>Name - Surname</label>
-            </span>
-            {getFormErrorMessage(field.name)}
-        </>
-    )}
-/>     
-`,
-        javascript: `
-import React, { useRef } from 'react';
-import { Controller, useForm } from 'react-hook-form';
-import { Button } from 'primereact/button';
-import { classNames } from 'primereact/utils';
-import { Toast } from 'primereact/toast';
-import { InputText } from "primereact/inputtext";
-
-export default function HookFormDoc() {
-    const toast = useRef(null);
-
-    const show = () => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: getValues('value') });
-    };
-
-    const defaultValues = {
-        value: ''
-    };
-
-    const {
-        control,
-        formState: { errors },
-        handleSubmit,
-        getValues,
-        reset
-    } = useForm({ defaultValues });
-
-    const onSubmit = (data) => {
-        data.value && show();
-
-        reset();
-    };
-
-    const getFormErrorMessage = (name) => {
-        return errors[name] ? <small className="p-error">{errors[name].message}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    return (
-        <div className="card flex justify-content-center">
-            <form onSubmit={handleSubmit(onSubmit)} className="flex flex-column gap-2">
-                <Toast ref={toast} />
-                <Controller
-                    name="value"
-                    control={control}
-                    rules={{ required: 'Name - Surname is required.' }}
-                    render={({ field, fieldState }) => (
-                        <>
-                            <label htmlFor={field.name} className={classNames({ 'p-error': errors.value })}></label>
-                            <span className="p-float-label">
-                                <InputText id={field.name} value={field.value} className={classNames({ 'p-invalid': fieldState.error })} onChange={(e) => field.onChange(e.target.value)} />
-                                <label htmlFor={field.name}>Name - Surname</label>
-                            </span>
-                            {getFormErrorMessage(field.name)}
-                        </>
-                    )}
-                />
-                <Button label="Submit" type="submit" icon="pi pi-check" />
-            </form>
-        </div>
-    )
-}
-        `,
-        typescript: `
-import React, { useRef } from 'react';
-import { Controller, useForm } from 'react-hook-form';
-import { Button } from 'primereact/button';
-import { classNames } from 'primereact/utils';
-import { Toast } from 'primereact/toast';
-import { InputText } from "primereact/inputtext";
-
-export default function HookFormDoc() {
-    const toast = useRef(null);
-
-    const show = () => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: getValues('value') });
-    };
-
-    const defaultValues = {
-        value: ''
-    };
-
-    const {
-        control,
-        formState: { errors },
-        handleSubmit,
-        getValues,
-        reset
-    } = useForm({ defaultValues });
-
-    const onSubmit = (data) => {
-        data.value && show();
-
-        reset();
-    };
-
-    const getFormErrorMessage = (name) => {
-        return errors[name] ? <small className="p-error">{errors[name].message}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    return (
-        <div className="card flex justify-content-center">
-            <form onSubmit={handleSubmit(onSubmit)} className="flex flex-column gap-2">
-                <Toast ref={toast} />
-                <Controller
-                    name="value"
-                    control={control}
-                    rules={{ required: 'Name - Surname is required.' }}
-                    render={({ field, fieldState }) => (
-                        <>
-                            <label htmlFor={field.name} className={classNames({ 'p-error': errors.value })}></label>
-                            <span className="p-float-label">
-                                <InputText id={field.name} value={field.value} className={classNames({ 'p-invalid': fieldState.error })} onChange={(e) => field.onChange(e.target.value)} />
-                                <label htmlFor={field.name}>Name - Surname</label>
-                            </span>
-                            {getFormErrorMessage(field.name)}
-                        </>
-                    )}
-                />
-                <Button label="Submit" type="submit" icon="pi pi-check" />
-            </form>
-        </div>
-    )
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props}>
-                <p>
-                    <a href="https://react-hook-form.com/">React Hook Form</a> is another popular React library to handle forms.
-                </p>
-            </DocSectionText>
-            <div className="card flex justify-content-center">
-                <form onSubmit={handleSubmit(onSubmit)} className="flex flex-column gap-2">
-                    <Toast ref={toast} />
-                    <Controller
-                        name="value"
-                        control={control}
-                        rules={{ required: 'Name - Surname is required.' }}
-                        render={({ field, fieldState }) => (
-                            <>
-                                <label htmlFor={field.name} className={classNames({ 'p-error': errors.value })} />
-                                <span className="p-float-label">
-                                    <InputText id={field.name} value={field.value} className={classNames({ 'p-invalid': fieldState.error })} onChange={(e) => field.onChange(e.target.value)} />
-                                    <label htmlFor={field.name}>Name - Surname</label>
-                                </span>
-                                {getFormErrorMessage(field.name)}
-                            </>
-                        )}
-                    />
-                    <Button label="Submit" type="submit" icon="pi pi-check" />
-                </form>
-            </div>
-
-            <DocSectionCode code={code} dependencies={{ 'react-hook-form': '^7.39.4' }} />
-        </>
-    );
-}
diff --git a/components/doc/inputtext/invaliddoc.js b/components/doc/inputtext/invaliddoc.js
index f04ebb97d1..f85a9d4f05 100644
--- a/components/doc/inputtext/invaliddoc.js
+++ b/components/doc/inputtext/invaliddoc.js
@@ -5,7 +5,7 @@ import { InputText } from '@/components/lib/inputtext/InputText';
 export function InvalidDoc(props) {
     const code = {
         basic: `
-<InputText className="p-invalid" />
+<InputText invalid />
         `,
         javascript: `
 import React from 'react'; 
@@ -14,7 +14,7 @@ import { InputText } from "primereact/inputtext";
 export default function InvalidDemo() {
     return (
         <div className="card flex justify-content-center">
-            <InputText className="p-invalid" />
+            <InputText invalid />
         </div>
     )
 }
@@ -26,7 +26,7 @@ import { InputText } from "primereact/inputtext";
 export default function InvalidDemo() {
     return (
         <div className="card flex justify-content-center">
-            <InputText className="p-invalid" />
+            <InputText invalid />
         </div>
     )
 }
@@ -37,11 +37,11 @@ export default function InvalidDemo() {
         <>
             <DocSectionText {...props}>
                 <p>
-                    Invalid state style is added using the <i>p-invalid</i> class to indicate a failed validation.
+                    Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.
                 </p>
             </DocSectionText>
             <div className="card flex justify-content-center">
-                <InputText className="p-invalid" />
+                <InputText invalid />
             </div>
             <DocSectionCode code={code} />
         </>
diff --git a/components/doc/inputtextarea/filleddoc.js b/components/doc/inputtextarea/filleddoc.js
new file mode 100644
index 0000000000..b22c2657a1
--- /dev/null
+++ b/components/doc/inputtextarea/filleddoc.js
@@ -0,0 +1,56 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { InputTextarea } from '@/components/lib/inputtextarea/InputTextarea';
+import { useState } from 'react';
+
+export function FilledDoc(props) {
+    const [value, setValue] = useState('');
+
+    const code = {
+        basic: `
+<InputTextarea variant="filled" value={value} onChange={(e) => setValue(e.target.value)} rows={5} cols={30} />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { InputTextarea } from "primereact/inputtextarea";
+
+export default function FilledDemo() {
+    const [value, setValue] = useState('');
+
+    return (
+        <div className="card flex justify-content-center">
+            <InputTextarea variant="filled" value={value} onChange={(e) => setValue(e.target.value)} rows={5} cols={30} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { InputTextarea } from "primereact/inputtextarea";
+
+export default function FilledDemo() {
+    const [value, setValue] = useState<string>('');
+
+    return (
+        <div className="card flex justify-content-center">
+            <InputTextarea variant="filled" value={value} onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => setValue(e.target.value)} rows={5} cols={30} />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <InputTextarea variant="filled" value={value} onChange={(e) => setValue(e.target.value)} rows={5} cols={30} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/inputtextarea/floatlabeldoc.js b/components/doc/inputtextarea/floatlabeldoc.js
index 78ba082084..af6c74e240 100644
--- a/components/doc/inputtextarea/floatlabeldoc.js
+++ b/components/doc/inputtextarea/floatlabeldoc.js
@@ -1,6 +1,8 @@
 import { DocSectionCode } from '@/components/doc/common/docsectioncode';
 import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { FloatLabel } from '@/components/lib/floatlabel/FloatLabel';
 import { InputTextarea } from '@/components/lib/inputtextarea/InputTextarea';
+import Link from 'next/link';
 import { useState } from 'react';
 
 export function FloatLabelDoc(props) {
@@ -8,24 +10,25 @@ export function FloatLabelDoc(props) {
 
     const code = {
         basic: `
-<span className="p-float-label">
+<FloatLabel>
     <InputTextarea id="username" value={value} onChange={(e) => setValue(e.target.value)} rows={5} cols={30} />
     <label htmlFor="username">Username</label>
-</span>
+</FloatLabel>
         `,
         javascript: `
 import React, { useState } from "react";
 import { InputTextarea } from "primereact/inputtextarea";
+import { FloatLabel } from "primereact/floatlabel";
 
 export default function FloatLabelDemo() {
     const [value, setValue] = useState('');
 
     return (
         <div className="card flex justify-content-center">
-            <span className="p-float-label">
+            <FloatLabel>
                 <InputTextarea id="description" value={value} onChange={(e) => setValue(e.target.value)} rows={5} cols={30} />
                 <label htmlFor="description">Description</label>
-            </span>
+            </FloatLabel>
         </div>
     )
 }
@@ -33,16 +36,17 @@ export default function FloatLabelDemo() {
         typescript: `
 import React, { useState } from "react";
 import { InputTextarea } from "primereact/inputtextarea";
+import { FloatLabel } from "primereact/floatlabel";
 
 export default function FloatLabelDemo() {
     const [value, setValue] = useState<string>('');
 
     return (
         <div className="card flex justify-content-center">
-            <span className="p-float-label">
+            <FloatLabel>
                 <InputTextarea id="description" value={value} onChange={(e) => setValue(e.target.value)} rows={5} cols={30} />
                 <label htmlFor="description">Description</label>
-            </span>
+            </FloatLabel>
         </div>
     )
 }
@@ -52,13 +56,15 @@ export default function FloatLabelDemo() {
     return (
         <>
             <DocSectionText {...props}>
-                <p>A floating label appears on top of the input field when focused.</p>
+                <p>
+                    A floating label appears on top of the input field when focused. Visit <Link href="/floatlabel">FloatLabel</Link> documentation for more information.
+                </p>
             </DocSectionText>
             <div className="card flex justify-content-center">
-                <span className="p-float-label">
+                <FloatLabel>
                     <InputTextarea id="description" value={value} onChange={(e) => setValue(e.target.value)} rows={5} cols={30} />
                     <label htmlFor="description">Description</label>
-                </span>
+                </FloatLabel>
             </div>
             <DocSectionCode code={code} />
         </>
diff --git a/components/doc/inputtextarea/form/formikdoc.js b/components/doc/inputtextarea/form/formikdoc.js
deleted file mode 100644
index 7ed8af435e..0000000000
--- a/components/doc/inputtextarea/form/formikdoc.js
+++ /dev/null
@@ -1,216 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { Button } from '@/components/lib/button/Button';
-import { InputTextarea } from '@/components/lib/inputtextarea/InputTextarea';
-import { Toast } from '@/components/lib/toast/Toast';
-import { classNames } from '@/components/lib/utils/Utils';
-import { useFormik } from 'formik';
-import { useRef } from 'react';
-
-export function FormikDoc(props) {
-    const toast = useRef(null);
-
-    const show = () => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: formik.values.description });
-    };
-
-    const formik = useFormik({
-        initialValues: {
-            description: ''
-        },
-        validate: (data) => {
-            let errors = {};
-
-            if (!data.description) {
-                errors.description = 'Description is required.';
-            }
-
-            return errors;
-        },
-        onSubmit: (data) => {
-            data && show();
-            formik.resetForm();
-        }
-    });
-
-    const isFormFieldInvalid = (name) => !!(formik.touched[name] && formik.errors[name]);
-
-    const getFormErrorMessage = (name) => {
-        return isFormFieldInvalid(name) ? <small className="p-error">{formik.errors[name]}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    const code = {
-        basic: `
-Toast ref={toast} />
-<InputTextarea
-    inputid="description"
-    name="description"
-    rows={4}
-    cols={30}
-    className={classNames({ 'p-invalid': isFormFieldInvalid('description') })}
-    value={formik.values.description}
-    onChange={(e) => {
-        formik.setFieldValue('description', e.target.value);
-    }}
-/>
-{getFormErrorMessage('description')}
-<Button label="Submit" type="submit" icon="pi pi-check" />
-        `,
-        javascript: `
-import React, { useRef } from "react";
-import { useFormik } from 'formik';
-import { InputTextarea } from 'primereact/inputtextarea';
-import { Button } from 'primereact/button';
-import { classNames } from 'primereact/utils';
-import { Toast } from 'primereact/toast';
-
-export default function FormikDoc() {
-    const toast = useRef(null);
-
-    const show = () => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: formik.values.description  });
-    };
-
-    const formik = useFormik({
-        initialValues: {
-            description: ''
-        },
-        validate: (data) => {
-            let errors = {};
-
-            if (!data.description) {
-                errors.description = 'Description is required.';
-            }
-
-            return errors;
-        },
-        onSubmit: (data) => {
-            data && show();
-            formik.resetForm();
-        }
-    });
-
-    const isFormFieldInvalid = (name) => !!(formik.touched[name] && formik.errors[name]);
-
-    const getFormErrorMessage = (name) => {
-        return isFormFieldInvalid(name) ? <small className="p-error">{formik.errors[name]}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    return (
-        <div className="card flex justify-content-center">
-            <form onSubmit={formik.handleSubmit} className="flex flex-column gap-2">
-                <label htmlFor="description">Description</label>
-                <Toast ref={toast} />
-                <InputTextarea
-                    inputid="description"
-                    name="description"
-                    rows={4}
-                    cols={30}
-                    className={classNames({ 'p-invalid': isFormFieldInvalid('description') })}
-                    value={formik.values.description}
-                    onChange={(e) => {
-                        formik.setFieldValue('description', e.target.value);
-                    }}
-                />
-                {getFormErrorMessage('description')}
-                <Button label="Submit" type="submit" icon="pi pi-check" />
-            </form>
-        </div>
-    )
-}
-        `,
-        typescript: `
-import React, { useRef } from "react";
-import { useFormik } from 'formik';
-import { InputTextarea } from 'primereact/inputtextarea';
-import { Button } from 'primereact/button';
-import { classNames } from 'primereact/utils';
-import { Toast } from 'primereact/toast';
-
-export default function FormikDoc() {
-    const toast = useRef(null);
-
-    const show = () => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: formik.values.description  });
-    };
-
-    const formik = useFormik({
-        initialValues: {
-            description: ''
-        },
-        validate: (data) => {
-            let errors = {};
-
-            if (!data.description) {
-                errors.description = 'Description is required.';
-            }
-
-            return errors;
-        },
-        onSubmit: (data) => {
-            data && show();
-            formik.resetForm();
-        }
-    });
-
-    const isFormFieldInvalid = (name) => !!(formik.touched[name] && formik.errors[name]);
-
-    const getFormErrorMessage = (name) => {
-        return isFormFieldInvalid(name) ? <small className="p-error">{formik.errors[name]}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    return (
-        <div className="card flex justify-content-center">
-            <form onSubmit={formik.handleSubmit} className="flex flex-column gap-2">
-                <label htmlFor="description">Description</label>
-                <Toast ref={toast} />
-                <InputTextarea
-                    inputid="description"
-                    name="description"
-                    rows={4}
-                    cols={30}
-                    className={classNames({ 'p-invalid': isFormFieldInvalid('description') })}
-                    value={formik.values.description}
-                    onChange={(e) => {
-                        formik.setFieldValue('description', e.target.value);
-                    }}
-                />
-                {getFormErrorMessage('description')}
-                <Button label="Submit" type="submit" icon="pi pi-check" />
-            </form>
-        </div>
-    )
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props}>
-                <p>
-                    <a href="https://formik.org/">Formik</a> is a popular library for handling forms in React.
-                </p>
-            </DocSectionText>
-            <div className="card flex justify-content-center">
-                <form onSubmit={formik.handleSubmit} className="flex flex-column gap-2">
-                    <label htmlFor="description">Description</label>
-                    <Toast ref={toast} />
-                    <InputTextarea
-                        inputid="description"
-                        name="description"
-                        rows={4}
-                        cols={30}
-                        className={classNames({ 'p-invalid': isFormFieldInvalid('description') })}
-                        value={formik.values.description}
-                        onChange={(e) => {
-                            formik.setFieldValue('description', e.target.value);
-                        }}
-                    />
-                    {getFormErrorMessage('description')}
-                    <Button label="Submit" type="submit" icon="pi pi-check" />
-                </form>
-            </div>
-            <DocSectionCode code={code} dependencies={{ formik: '^2.2.6' }} />
-        </>
-    );
-}
diff --git a/components/doc/inputtextarea/form/hookformdoc.js b/components/doc/inputtextarea/form/hookformdoc.js
deleted file mode 100644
index 01b3775803..0000000000
--- a/components/doc/inputtextarea/form/hookformdoc.js
+++ /dev/null
@@ -1,180 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { Button } from '@/components/lib/button/Button';
-import { InputTextarea } from '@/components/lib/inputtextarea/InputTextarea';
-import { Toast } from '@/components/lib/toast/Toast';
-import { classNames } from '@/components/lib/utils/Utils';
-import { useRef } from 'react';
-import { Controller, useForm } from 'react-hook-form';
-
-export function HookFormDoc(props) {
-    const toast = useRef(null);
-
-    const show = () => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: form.getValues('description') });
-    };
-
-    const defaultValues = { description: '' };
-    const form = useForm({ defaultValues });
-    const errors = form.formState.errors;
-
-    const onSubmit = (data) => {
-        data.description && show();
-
-        form.reset();
-    };
-
-    const getFormErrorMessage = (name) => {
-        return errors[name] ? <small className="p-error">{errors[name].message}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    const code = {
-        basic: `
-<Toast ref={toast} />
-<Controller
-    name="description"
-    control={form.control}
-    rules={{ required: 'Description is required.' }}
-    render={({ field, fieldState }) => (
-        <>
-            <label htmlFor={field.name}>Description</label>
-            <InputTextarea id={field.name} {...field} rows={4} cols={30} className={classNames({ 'p-invalid': fieldState.error })} />
-            {getFormErrorMessage(field.name)}
-        </>
-    )}
-/>
-<Button label="Submit" type="submit" icon="pi pi-check" />
-        `,
-        javascript: `
-import React, { useRef } from 'react';
-import { Controller, useForm } from 'react-hook-form';
-import { Button } from 'primereact/button';
-import { Toast } from 'primereact/toast';
-import { classNames } from 'primereact/utils';
-import { InputTextarea } from "primereact/inputtextarea";
-
-export default function HookFormDoc() {
-    const toast = useRef(null);
-
-    const show = () => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: form.getValues('description') });
-    };
-
-    const defaultValues = { description: '' };
-    const form = useForm({ defaultValues });
-    const errors = form.formState.errors;
-
-    const onSubmit = (data) => {
-        data.description && show();
-
-        form.reset();
-    };
-
-    const getFormErrorMessage = (name) => {
-        return errors[name] ? <small className="p-error">{errors[name].message}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    return (
-        <div className="card flex justify-content-center">
-            <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-column gap-2">
-                <Toast ref={toast} />
-                <Controller
-                    name="description"
-                    control={form.control}
-                    rules={{ required: 'Description is required.' }}
-                    render={({ field, fieldState }) => (
-                        <>
-                            <label htmlFor={field.name}>Description</label>
-                            <InputTextarea id={field.name} {...field} rows={4} cols={30} className={classNames({ 'p-invalid': fieldState.error })} />
-                            {getFormErrorMessage(field.name)}
-                        </>
-                    )}
-                />
-                <Button label="Submit" type="submit" icon="pi pi-check" />
-            </form>
-        </div>
-    )
-}
-        `,
-        typescript: `
-import React, { useRef } from 'react';
-import { Controller, useForm } from 'react-hook-form';
-import { Button } from 'primereact/button';
-import { Toast } from 'primereact/toast';
-import { classNames } from 'primereact/utils';
-import { InputTextarea } from "primereact/inputtextarea";
-
-export default function HookFormDoc() {
-    const toast = useRef(null);
-
-    const show = () => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: form.getValues('description') });
-    };
-
-    const defaultValues = { description: '' };
-    const form = useForm({ defaultValues });
-    const errors = form.formState.errors;
-
-    const onSubmit = (data) => {
-        data.description && show();
-
-        form.reset();
-    };
-
-    const getFormErrorMessage = (name) => {
-        return errors[name] ? <small className="p-error">{errors[name].message}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    return (
-        <div className="card flex justify-content-center">
-            <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-column gap-2">
-                <Toast ref={toast} />
-                <Controller
-                    name="description"
-                    control={form.control}
-                    rules={{ required: 'Description is required.' }}
-                    render={({ field, fieldState }) => (
-                        <>
-                            <label htmlFor={field.name}>Description</label>
-                            <InputTextarea id={field.name} {...field} rows={4} cols={30} className={classNames({ 'p-invalid': fieldState.error })} />
-                            {getFormErrorMessage(field.name)}
-                        </>
-                    )}
-                />
-                <Button label="Submit" type="submit" icon="pi pi-check" />
-            </form>
-        </div>
-    )
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props}>
-                <p>
-                    <a href="https://react-hook-form.com/">React Hook Form</a> is another popular React library to handle forms.
-                </p>
-            </DocSectionText>
-            <div className="card flex justify-content-center">
-                <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-column gap-2">
-                    <Toast ref={toast} />
-                    <Controller
-                        name="description"
-                        control={form.control}
-                        rules={{ required: 'Description is required.' }}
-                        render={({ field, fieldState }) => (
-                            <>
-                                <label htmlFor={field.name}>Description</label>
-                                <InputTextarea id={field.name} {...field} rows={4} cols={30} className={classNames({ 'p-invalid': fieldState.error })} />
-                                {getFormErrorMessage(field.name)}
-                            </>
-                        )}
-                    />
-                    <Button label="Submit" type="submit" icon="pi pi-check" />
-                </form>
-            </div>
-            <DocSectionCode code={code} dependencies={{ 'react-hook-form': '^7.39.4' }} />
-        </>
-    );
-}
diff --git a/components/doc/inputtextarea/invaliddoc.js b/components/doc/inputtextarea/invaliddoc.js
index 6a0c18828c..5782f7dea0 100644
--- a/components/doc/inputtextarea/invaliddoc.js
+++ b/components/doc/inputtextarea/invaliddoc.js
@@ -5,7 +5,7 @@ import { InputTextarea } from '@/components/lib/inputtextarea/InputTextarea';
 export function InvalidDoc(props) {
     const code = {
         basic: `
-<InputTextarea rows={5} cols={30} className="p-invalid" />
+<InputTextarea invalid rows={5} cols={30} />
         `,
         javascript: `
 import React from 'react'; 
@@ -14,7 +14,7 @@ import { InputTextarea } from "primereact/inputtextarea";
 export default function InvalidDemo() {
     return (
         <div className="card flex justify-content-center">
-            <InputTextarea rows={5} cols={30} className="p-invalid" />
+            <InputTextarea invalid rows={5} cols={30} />
         </div>
     )
 }
@@ -26,7 +26,7 @@ import { InputTextarea } from "primereact/inputtextarea";
 export default function InvalidDemo() {
     return (
         <div className="card flex justify-content-center">
-            <InputTextarea rows={5} cols={30} className="p-invalid" />
+            <InputTextarea invalid rows={5} cols={30} />
         </div>
     )
 }
@@ -37,11 +37,11 @@ export default function InvalidDemo() {
         <>
             <DocSectionText {...props}>
                 <p>
-                    Invalid state style is added using the <i>p-invalid</i> class to indicate a failed validation.
+                    Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.
                 </p>
             </DocSectionText>
             <div className="card flex justify-content-center">
-                <InputTextarea rows={5} cols={30} className="p-invalid" />
+                <InputTextarea invalid rows={5} cols={30} />
             </div>
             <DocSectionCode code={code} />
         </>
diff --git a/components/doc/knob/form/formikdoc.js b/components/doc/knob/form/formikdoc.js
deleted file mode 100644
index ebbad90e2c..0000000000
--- a/components/doc/knob/form/formikdoc.js
+++ /dev/null
@@ -1,197 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { Button } from '@/components/lib/button/Button';
-import { Knob } from '@/components/lib/knob/Knob';
-import { Toast } from '@/components/lib/toast/Toast';
-import { useFormik } from 'formik';
-import { useRef } from 'react';
-
-export function FormikDoc(props) {
-    const toast = useRef(null);
-
-    const show = () => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: formik.values.item });
-    };
-
-    const formik = useFormik({
-        initialValues: {
-            item: '0'
-        },
-        validate: (data) => {
-            let errors = {};
-
-            if (data.item === '0') {
-                errors.item = 'The value must be greater than zero.';
-            }
-
-            return errors;
-        },
-        onSubmit: (data) => {
-            data && show();
-            formik.resetForm();
-        }
-    });
-
-    const isFormFieldInvalid = (name) => !!(formik.touched[name] && formik.errors[name]);
-
-    const getFormErrorMessage = (name) => {
-        return isFormFieldInvalid(name) ? <small className="p-error">{formik.errors[name]}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    const code = {
-        basic: `
-<Toast ref={toast} />
-<Knob id="item" name="item" value={formik.values.item} onChange={(e) => { formik.setFieldValue('item', e.value) }} />
-<Button type="submit" label="Submit" className="mt-2" />
-        `,
-        javascript: `
-import React, { useRef } from "react";
-import { useFormik } from 'formik';
-import { Knob } from 'primereact/knob';
-import { Button } from 'primereact/button';
-import { Toast } from 'primereact/toast';
-
-
-export default function FormikDoc() {
-    const toast = useRef(null);
-
-    const show = () => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: formik.values.item });
-    };
-
-    const formik = useFormik({
-        initialValues: {
-            item: '0'
-        },
-        validate: (data) => {
-            let errors = {};
-
-            if (data.item === '0') {
-                errors.item = 'The value must be greater than zero.';
-            }
-
-            return errors;
-        },
-        onSubmit: (data) => {
-            data && show();
-            formik.resetForm();
-        }
-    });
-
-    const isFormFieldInvalid = (name) => !!(formik.touched[name] && formik.errors[name]);
-
-    const getFormErrorMessage = (name) => {
-        return isFormFieldInvalid(name) ? <small className="p-error">{formik.errors[name]}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    return (
-        <div className="card flex justify-content-center">
-            <form onSubmit={formik.handleSubmit} className="flex flex-column align-items-center">
-                <Toast ref={toast} />
-
-                <Knob
-                    id="item"
-                    name="item"
-                    value={formik.values.item}
-                    onChange={(e) => {
-                        formik.setFieldValue('item', e.value);
-                    }}
-                />
-
-                {getFormErrorMessage('item')}
-                <Button type="submit" label="Submit" className="mt-2" />
-            </form>
-        </div>
-    )
-}
-        `,
-        typescript: `
-import React, { useRef } from "react";
-import { useFormik } from 'formik';
-import { Knob } from 'primereact/knob';
-import { Button } from 'primereact/button';
-import { Toast } from 'primereact/toast';
-
-export default function FormikDoc() {
-    const toast = useRef(null);
-
-    const show = () => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: formik.values.item });
-    };
-
-    const formik = useFormik({
-        initialValues: {
-            item: '0'
-        },
-        validate: (data) => {
-            let errors = {};
-
-            if (data.item === '0') {
-                errors.item = 'The value must be greater than zero.';
-            }
-
-            return errors;
-        },
-        onSubmit: (data) => {
-            data && show();
-            formik.resetForm();
-        }
-    });
-
-    const isFormFieldInvalid = (name) => !!(formik.touched[name] && formik.errors[name]);
-
-    const getFormErrorMessage = (name) => {
-        return isFormFieldInvalid(name) ? <small className="p-error">{formik.errors[name]}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    return (
-        <div className="card flex justify-content-center">
-            <form onSubmit={formik.handleSubmit} className="flex flex-column align-items-center">
-                <Toast ref={toast} />
-
-                <Knob
-                    id="item"
-                    name="item"
-                    value={formik.values.item}
-                    onChange={(e) => {
-                        formik.setFieldValue('item', e.value);
-                    }}
-                />
-
-                {getFormErrorMessage('item')}
-                <Button type="submit" label="Submit" className="mt-2" />
-            </form>
-        </div>
-    )
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props}>
-                <p>
-                    <a href="https://formik.org/">Formik</a> is a popular library for handling forms in React.
-                </p>
-            </DocSectionText>
-            <div className="card flex justify-content-center">
-                <form onSubmit={formik.handleSubmit} className="flex flex-column align-items-center">
-                    <Toast ref={toast} />
-
-                    <Knob
-                        id="item"
-                        name="item"
-                        value={formik.values.item}
-                        onChange={(e) => {
-                            formik.setFieldValue('item', e.value);
-                        }}
-                    />
-
-                    {getFormErrorMessage('item')}
-                    <Button type="submit" label="Submit" className="mt-2" />
-                </form>
-            </div>
-            <DocSectionCode code={code} dependencies={{ formik: '^2.2.6' }} />
-        </>
-    );
-}
diff --git a/components/doc/knob/form/hookformdoc.js b/components/doc/knob/form/hookformdoc.js
deleted file mode 100644
index 4f9252ba51..0000000000
--- a/components/doc/knob/form/hookformdoc.js
+++ /dev/null
@@ -1,188 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { Button } from '@/components/lib/button/Button';
-import { Knob } from '@/components/lib/knob/Knob';
-import { Toast } from '@/components/lib/toast/Toast';
-import { useRef } from 'react';
-import { Controller, useForm } from 'react-hook-form';
-
-export function HookFormDoc(props) {
-    const toast = useRef(null);
-
-    const show = () => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: getValues('value') });
-    };
-
-    const defaultValues = {
-        value: ''
-    };
-
-    const {
-        control,
-        formState: { errors },
-        handleSubmit,
-        getValues,
-        reset
-    } = useForm({ defaultValues });
-
-    const onSubmit = (data) => {
-        data.value && show();
-
-        reset();
-    };
-
-    const getFormErrorMessage = (name) => {
-        return errors[name] ? <small className="p-error">{errors[name].message}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    const code = {
-        basic: `
-<Toast ref={toast} />
-<Controller
-    name="value"
-    control={control}
-    rules={{ required: 'The value must be greater than zero.' }}
-    render={({ field }) => <Knob id={field.name} name="value" value={field.value || '0'} onChange={(e) => field.onChange(e.value)} />}
-/>
-<Button type="submit" label="Submit" className="mt-2" />
-        `,
-        javascript: `
-import React, { useRef } from "react";
-import { useForm, Controller } from 'react-hook-form';
-import { Knob } from 'primereact/knob';
-import { Button } from 'primereact/button';
-import { Toast } from 'primereact/toast';
-
-export default function HookFormDoc() {
-    const toast = useRef(null);
-
-    const show = () => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: getValues('value') });
-    };
-
-    const defaultValues = {
-        value: ''
-    };
-
-    const {
-        control,
-        formState: { errors },
-        handleSubmit,
-        getValues,
-        reset
-    } = useForm({ defaultValues });
-
-    const onSubmit = (data) => {
-        data.value && show();
-
-        reset();
-    };
-
-    const getFormErrorMessage = (name) => {
-        return errors[name] ? <small className="p-error">{errors[name].message}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    return (
-        <div className="card flex justify-content-center">
-            <form onSubmit={handleSubmit(onSubmit)}>
-                <Toast ref={toast} />
-                <div className="flex flex-column align-items-center">
-                    <Controller
-                        name="value"
-                        control={control}
-                        rules={{ required: 'The value must be greater than zero.' }}
-                        render={({ field }) => <Knob id={field.name} name="value" value={field.value || '0'} onChange={(e) => field.onChange(e.value)} />}
-                    />
-
-                    {getFormErrorMessage('value')}
-                    <Button type="submit" label="Submit" className="mt-2" />
-                </div>
-            </form>
-        </div>
-    )
-}
-        `,
-        typescript: `
-import React, { useRef } from "react";
-import { useForm, Controller } from 'react-hook-form';
-import { Knob } from 'primereact/knob';
-import { Button } from 'primereact/button';
-import { Toast } from 'primereact/toast';
-
-export default function HookFormDoc() {
-    const toast = useRef(null);
-
-    const show = () => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: getValues('value') });
-    };
-
-    const defaultValues = {
-        value: ''
-    };
-
-    const {
-        control,
-        formState: { errors },
-        handleSubmit,
-        getValues,
-        reset
-    } = useForm({ defaultValues });
-
-    const onSubmit = (data) => {
-        data.value && show();
-
-        reset();
-    };
-
-    const getFormErrorMessage = (name) => {
-        return errors[name] ? <small className="p-error">{errors[name].message}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    return (
-        <div className="card flex justify-content-center">
-            <form onSubmit={handleSubmit(onSubmit)}>
-                <Toast ref={toast} />
-                <div className="flex flex-column align-items-center">
-                    <Controller
-                        name="value"
-                        control={control}
-                        rules={{ required: 'The value must be greater than zero.' }}
-                        render={({ field }) => <Knob id={field.name} name="value" value={field.value || '0'} onChange={(e) => field.onChange(e.value)} />}
-                    />
-
-                    {getFormErrorMessage('value')}
-                    <Button type="submit" label="Submit" className="mt-2" />
-                </div>
-            </form>
-        </div>
-    )
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props}>
-                {/* TO DO: Add demo content. */}
-                <p />
-            </DocSectionText>
-            <div className="card flex justify-content-center">
-                <form onSubmit={handleSubmit(onSubmit)}>
-                    <Toast ref={toast} />
-                    <div className="flex flex-column align-items-center">
-                        <Controller
-                            name="value"
-                            control={control}
-                            rules={{ required: 'The value must be greater than zero.' }}
-                            render={({ field }) => <Knob id={field.name} name="value" value={field.value || '0'} onChange={(e) => field.onChange(e.value)} />}
-                        />
-
-                        {getFormErrorMessage('value')}
-                        <Button type="submit" label="Submit" className="mt-2" />
-                    </div>
-                </form>
-            </div>
-            <DocSectionCode code={code} dependencies={{ 'react-hook-form': '^7.39.4' }} />
-        </>
-    );
-}
diff --git a/components/doc/listbox/form/formikdoc.js b/components/doc/listbox/form/formikdoc.js
deleted file mode 100644
index 88e89a5a64..0000000000
--- a/components/doc/listbox/form/formikdoc.js
+++ /dev/null
@@ -1,238 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { Button } from '@/components/lib/button/Button';
-import { ListBox } from '@/components/lib/listbox/ListBox';
-import { Toast } from '@/components/lib/toast/Toast';
-import { useFormik } from 'formik';
-import { useRef } from 'react';
-
-export function FormikDoc(props) {
-    const toast = useRef(null);
-    const cities = [
-        { name: 'New York', code: 'NY' },
-        { name: 'Rome', code: 'RM' },
-        { name: 'London', code: 'LDN' },
-        { name: 'Istanbul', code: 'IST' },
-        { name: 'Paris', code: 'PRS' }
-    ];
-
-    const show = () => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: formik.values.item.name });
-    };
-
-    const formik = useFormik({
-        initialValues: {
-            item: ''
-        },
-        validate: (data) => {
-            let errors = {};
-
-            if (!data.item) {
-                errors.item = 'City is required.';
-            }
-
-            return errors;
-        },
-        onSubmit: (data) => {
-            data.item && show(data);
-            formik.resetForm();
-        }
-    });
-
-    const isFormFieldInvalid = (name) => !!(formik.touched[name] && formik.errors[name]);
-
-    const getFormErrorMessage = (name) => {
-        return isFormFieldInvalid(name) ? <small className="p-error">{formik.errors[name]}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    const code = {
-        basic: `
-<Toast ref={toast} />
-<ListBox
-    id="item"
-    name="item"
-    value={formik.values.item}
-    options={cities}
-    optionLabel="name"
-    placeholder="Select a City"
-    onChange={(e) => {
-        formik.setFieldValue('item', e.value);
-    }}
-    style={{ width: '15rem' }}
-/>
-        `,
-        javascript: `
-import React, { useRef } from "react";
-import { useFormik } from 'formik';
-import { ListBox } from 'primereact/listbox';
-import { Button } from 'primereact/button';
-import { Toast } from 'primereact/toast';
-
-export default function FormikDoc() {
-    const toast = useRef(null);
-    const cities = [
-        { name: 'New York', code: 'NY' },
-        { name: 'Rome', code: 'RM' },
-        { name: 'London', code: 'LDN' },
-        { name: 'Istanbul', code: 'IST' },
-        { name: 'Paris', code: 'PRS' }
-    ];
-
-    const show = () => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: formik.values.item.name });
-    };
-
-    const formik = useFormik({
-        initialValues: {
-            item: ''
-        },
-        validate: (data) => {
-            let errors = {};
-
-            if (!data.item) {
-                errors.item = 'City is required.';
-            }
-
-            return errors;
-        },
-        onSubmit: (data) => {
-            data.item && show(data);
-            formik.resetForm();
-        }
-    });
-
-    const isFormFieldInvalid = (name) => !!(formik.touched[name] && formik.errors[name]);
-
-    const getFormErrorMessage = (name) => {
-        return isFormFieldInvalid(name) ? <small className="p-error">{formik.errors[name]}</small> : <small className="p-error">&nbsp;</small>;
-    };
-    
-    return (
-        <div className="card flex flex-column align-items-center justify-content-center">
-            <form onSubmit={formik.handleSubmit} className="flex flex-column align-items-center gap-2">
-                <Toast ref={toast} />
-                <ListBox
-                    id="item"
-                    name="item"
-                    value={formik.values.item}
-                    options={cities}
-                    optionLabel="name"
-                    placeholder="Select a City"
-                    onChange={(e) => {
-                        formik.setFieldValue('item', e.value);
-                    }}
-                    style={{ width: '15rem' }}
-                />
-                {getFormErrorMessage('item')}
-                <Button type="submit" label="Submit" className="mt-2" />
-            </form>
-        </div>
-    )
-}
-        `,
-        typescript: `
-import React, { useRef } from "react";
-import { useFormik } from 'formik';
-import { ListBox, ListBoxChangeEvent } from 'primereact/listbox';
-import { Button } from 'primereact/button';
-import { Toast } from 'primereact/toast';
-
-interface City {
-    name: string;
-    code: string;
-}
-
-export default function FormikDoc() {
-    const toast = useRef(null);
-    const cities: City[] = [
-        { name: 'New York', code: 'NY' },
-        { name: 'Rome', code: 'RM' },
-        { name: 'London', code: 'LDN' },
-        { name: 'Istanbul', code: 'IST' },
-        { name: 'Paris', code: 'PRS' }
-    ];
-
-    const show = () => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: formik.values.item.name });
-    };
-
-    const formik = useFormik({
-        initialValues: {
-            item: ''
-        },
-        validate: (data) => {
-            let errors = {};
-
-            if (!data.item) {
-                errors.item = 'City is required.';
-            }
-
-            return errors;
-        },
-        onSubmit: (data) => {
-            data.item && show(data);
-            formik.resetForm();
-        }
-    });
-
-    const isFormFieldInvalid = (name) => !!(formik.touched[name] && formik.errors[name]);
-
-    const getFormErrorMessage = (name) => {
-        return isFormFieldInvalid(name) ? <small className="p-error">{formik.errors[name]}</small> : <small className="p-error">&nbsp;</small>;
-    };
-    
-    return (
-        <div className="card flex flex-column align-items-center justify-content-center">
-            <form onSubmit={formik.handleSubmit} className="flex flex-column align-items-center gap-2">
-                <Toast ref={toast} />
-                <ListBox
-                    id="item"
-                    name="item"
-                    value={formik.values.item}
-                    options={cities}
-                    optionLabel="name"
-                    placeholder="Select a City"
-                    onChange={(e: ListBoxChangeEvent) => {
-                        formik.setFieldValue('item', e.value);
-                    }}
-                    style={{ width: '15rem' }}
-                />
-                {getFormErrorMessage('item')}
-                <Button type="submit" label="Submit" className="mt-2" />
-            </form>
-        </div>
-    )
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props}>
-                <p>
-                    <a href="https://formik.org/">Formik</a> is a popular library for handling forms in React.
-                </p>
-            </DocSectionText>
-            <div className="card flex flex-column align-items-center justify-content-center">
-                <form onSubmit={formik.handleSubmit} className="flex flex-column align-items-center gap-2">
-                    <Toast ref={toast} />
-                    <ListBox
-                        id="item"
-                        name="item"
-                        value={formik.values.item}
-                        options={cities}
-                        optionLabel="name"
-                        placeholder="Select a City"
-                        onChange={(e) => {
-                            formik.setFieldValue('item', e.value);
-                        }}
-                        style={{ width: '15rem' }}
-                    />
-                    {getFormErrorMessage('item')}
-                    <Button type="submit" label="Submit" className="mt-2" />
-                </form>
-            </div>
-            <DocSectionCode code={code} dependencies={{ formik: '^2.2.6' }} />
-        </>
-    );
-}
diff --git a/components/doc/listbox/form/hookformdoc.js b/components/doc/listbox/form/hookformdoc.js
deleted file mode 100644
index 70945f9fef..0000000000
--- a/components/doc/listbox/form/hookformdoc.js
+++ /dev/null
@@ -1,204 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { Button } from '@/components/lib/button/Button';
-import { ListBox } from '@/components/lib/listbox/ListBox';
-import { Toast } from '@/components/lib/toast/Toast';
-import { useRef } from 'react';
-import { Controller, useForm } from 'react-hook-form';
-
-export function HookFormDoc(props) {
-    const toast = useRef(null);
-    const cities = [
-        { name: 'New York', code: 'NY' },
-        { name: 'Rome', code: 'RM' },
-        { name: 'London', code: 'LDN' },
-        { name: 'Istanbul', code: 'IST' },
-        { name: 'Paris', code: 'PRS' }
-    ];
-
-    const show = () => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: getValues('value.name') });
-    };
-
-    const defaultValues = {
-        value: ''
-    };
-
-    const {
-        control,
-        formState: { errors },
-        handleSubmit,
-        getValues,
-        reset
-    } = useForm({ defaultValues });
-
-    const onSubmit = (data) => {
-        data.value && show();
-
-        reset();
-    };
-
-    const getFormErrorMessage = (name) => {
-        return errors[name] ? <small className="p-error">{errors[name].message}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    const code = {
-        basic: `
-<Toast ref={toast} />
-<Controller
-    name="value"
-    control={control}
-    rules={{ required: 'Value is required.' }}
-    render={({ field }) => <ListBox value={field.value} optionLabel="name" placeholder="Select a City" name="value" options={cities} control={control} onChange={(e) => field.onChange(e.value)} style={{ width: '15rem' }} />}
-/>
-        `,
-        javascript: `
-import React, { useRef } from "react";
-import { useForm, Controller } from 'react-hook-form';
-import { ListBox } from 'primereact/listbox';
-import { Button } from 'primereact/button';
-import { Toast } from 'primereact/toast';
-
-export default function HookFormDoc() {
-    const toast = useRef(null);
-    const cities = [
-        { name: 'New York', code: 'NY' },
-        { name: 'Rome', code: 'RM' },
-        { name: 'London', code: 'LDN' },
-        { name: 'Istanbul', code: 'IST' },
-        { name: 'Paris', code: 'PRS' }
-    ];
-
-    const show = () => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: getValues('value.name') });
-    };
-
-    const defaultValues = {
-        value: ''
-    };
-
-    const {
-        control,
-        formState: { errors },
-        handleSubmit,
-        getValues,
-        reset
-    } = useForm({ defaultValues });
-
-    const onSubmit = (data) => {
-        data.value && show();
-
-        reset();
-    };
-
-    const getFormErrorMessage = (name) => {
-        return errors[name] ? <small className="p-error">{errors[name].message}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    return (
-        <div className="card flex justify-content-center">
-            <form onSubmit={handleSubmit(onSubmit)} className="flex flex-column align-items-center gap-2">
-                <Toast ref={toast} />
-                <Controller
-                    name="value"
-                    control={control}
-                    rules={{ required: 'Value is required.' }}
-                    render={({ field }) => <ListBox value={field.value} optionLabel="name" placeholder="Select a City" name="value" options={cities} control={control} onChange={(e) => field.onChange(e.value)} style={{ width: '15rem' }}/>}
-                />
-                {getFormErrorMessage('value')}
-                <Button type="submit" label="Submit" className="mt-2" />
-            </form>
-        </div>
-    )
-}
-        `,
-        typescript: `
-import React, { useRef } from "react";
-import { useForm, Controller } from 'react-hook-form';
-import { ListBox } from 'primereact/listbox';
-import { Button } from 'primereact/button';
-import { Toast } from 'primereact/toast';
-
-interface City {
-    name: string;
-    code: string;
-}
-
-export default function HookFormDoc() {
-    const toast = useRef(null);
-    const cities: City[] = [
-        { name: 'New York', code: 'NY' },
-        { name: 'Rome', code: 'RM' },
-        { name: 'London', code: 'LDN' },
-        { name: 'Istanbul', code: 'IST' },
-        { name: 'Paris', code: 'PRS' }
-    ];
-
-    const show = () => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: getValues('value.name') });
-    };
-
-    const defaultValues = {
-        value: ''
-    };
-
-    const {
-        control,
-        formState: { errors },
-        handleSubmit,
-        getValues,
-        reset
-    } = useForm({ defaultValues });
-
-    const onSubmit = (data) => {
-        data.value && show();
-
-        reset();
-    };
-
-    const getFormErrorMessage = (name) => {
-        return errors[name] ? <small className="p-error">{errors[name].message}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    return (
-        <div className="card flex justify-content-center">
-            <form onSubmit={handleSubmit(onSubmit)} className="flex flex-column align-items-center gap-2">
-                <Toast ref={toast} />
-                <Controller
-                    name="value"
-                    control={control}
-                    rules={{ required: 'Value is required.' }}
-                    render={({ field }) => <ListBox value={field.value} optionLabel="name" placeholder="Select a City" name="value" options={cities} control={control} onChange={(e) => field.onChange(e.value)} style={{ width: '15rem' }}/>}
-                />
-                {getFormErrorMessage('value')}
-                <Button type="submit" label="Submit" className="mt-2" />
-            </form>
-        </div>
-    )
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props}>
-                {/* TO DO: Add demo content. */}
-                <p />
-            </DocSectionText>
-            <div className="card flex justify-content-center">
-                <form onSubmit={handleSubmit(onSubmit)} className="flex flex-column align-items-center gap-2">
-                    <Toast ref={toast} />
-                    <Controller
-                        name="value"
-                        control={control}
-                        rules={{ required: 'Value is required.' }}
-                        render={({ field }) => <ListBox value={field.value} optionLabel="name" placeholder="Select a City" name="value" options={cities} control={control} onChange={(e) => field.onChange(e.value)} style={{ width: '15rem' }} />}
-                    />
-                    {getFormErrorMessage('value')}
-                    <Button type="submit" label="Submit" className="mt-2" />
-                </form>
-            </div>
-            <DocSectionCode code={code} dependencies={{ 'react-hook-form': '^7.39.4' }} />
-        </>
-    );
-}
diff --git a/components/doc/listbox/invaliddoc.js b/components/doc/listbox/invaliddoc.js
index 03426ea082..e077306e8d 100644
--- a/components/doc/listbox/invaliddoc.js
+++ b/components/doc/listbox/invaliddoc.js
@@ -15,8 +15,8 @@ export function InvalidDoc(props) {
 
     const code = {
         basic: `
-<ListBox value={selectedCity} onChange={(e) => setSelectedCity(e.value)} options={cities} optionLabel="name" 
-    className="w-full md:w-14rem p-invalid" />
+<ListBox invalid value={selectedCity} onChange={(e) => setSelectedCity(e.value)} options={cities} optionLabel="name" 
+    className="w-full md:w-14rem" />
         `,
         javascript: `
 import React, { useState } from "react";
@@ -34,8 +34,8 @@ export default function InvalidDemo() {
 
     return (
         <div className="card flex justify-content-center">  
-            <ListBox value={selectedCity} onChange={(e) => setSelectedCity(e.value)} options={cities} optionLabel="name" 
-                className="w-full md:w-14rem p-invalid" />
+            <ListBox invalid value={selectedCity} onChange={(e) => setSelectedCity(e.value)} options={cities} optionLabel="name" 
+                className="w-full md:w-14rem" />
         </div>
     )
 }
@@ -61,8 +61,8 @@ export default function InvalidDemo() {
 
     return (
         <div className="card flex justify-content-center">  
-            <ListBox value={selectedCity} onChange={(e: ListBoxChangeEvent) => setSelectedCity(e.value)} 
-                options={cities} optionLabel="name"  className="w-full md:w-14rem p-invalid" />
+            <ListBox invalid value={selectedCity} onChange={(e: ListBoxChangeEvent) => setSelectedCity(e.value)} 
+                options={cities} optionLabel="name"  className="w-full md:w-14rem" />
         </div>
     )
 }
@@ -73,11 +73,11 @@ export default function InvalidDemo() {
         <>
             <DocSectionText {...props}>
                 <p>
-                    Invalid state style is added using the <i>p-invalid</i> class to indicate a failed validation.
+                    Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.
                 </p>
             </DocSectionText>
             <div className="card flex justify-content-center">
-                <ListBox value={selectedCity} onChange={(e) => setSelectedCity(e.value)} options={cities} optionLabel="name" className="w-full md:w-14rem p-invalid" />
+                <ListBox invalid value={selectedCity} onChange={(e) => setSelectedCity(e.value)} options={cities} optionLabel="name" className="w-full md:w-14rem" />
             </div>
             <DocSectionCode code={code} />
         </>
diff --git a/components/doc/mention/form/formikdoc.js b/components/doc/mention/form/formikdoc.js
deleted file mode 100644
index d7f4c8775a..0000000000
--- a/components/doc/mention/form/formikdoc.js
+++ /dev/null
@@ -1,385 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { Button } from '@/components/lib/button/Button';
-import { Mention } from '@/components/lib/mention/Mention';
-import { Toast } from '@/components/lib/toast/Toast';
-import { classNames } from '@/components/lib/utils/Utils';
-import { useFormik } from 'formik';
-import { useEffect, useRef, useState } from 'react';
-import { CustomerService } from '../../../../service/CustomerService';
-
-export function FormikDoc(props) {
-    const toast = useRef(null);
-    const [customers, setCustomers] = useState([]);
-    const [suggestions, setSuggestions] = useState([]);
-
-    useEffect(() => {
-        CustomerService.getCustomersSmall().then((data) => {
-            data.forEach((d) => (d.nickname = `${d.name.replace(/\s+/g, '').toLowerCase()}_${d.id}`));
-            setCustomers(data);
-        });
-    }, []);
-
-    const onSearch = (event) => {
-        //in a real application, make a request to a remote url with the query and return suggestions, for demo we filter at client side
-        setTimeout(() => {
-            const query = event.query;
-            let suggestions;
-
-            if (!query.trim().length) {
-                suggestions = [...customers];
-            } else {
-                suggestions = customers.filter((customer) => {
-                    return customer.nickname.toLowerCase().startsWith(query.toLowerCase());
-                });
-            }
-
-            setSuggestions(suggestions);
-        }, 250);
-    };
-
-    const itemTemplate = (suggestion) => {
-        const src = 'https://primefaces.org/cdn/primereact/images/avatar/' + suggestion.representative.image;
-
-        return (
-            <div className="flex align-items-center">
-                <img alt={suggestion.name} src={src} width="32" style={{ verticalAlign: 'middle' }} />
-                <span className="flex flex-column ml-2">
-                    {suggestion.name}
-                    <small style={{ fontSize: '.75rem', color: 'var(--text-color-secondary)' }}>@{suggestion.nickname}</small>
-                </span>
-            </div>
-        );
-    };
-
-    const show = () => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: formik.values.item });
-    };
-
-    const formik = useFormik({
-        initialValues: {
-            item: ''
-        },
-        validate: (data) => {
-            const hasMentionedCustomersNickname = customers.some((customer) => {
-                return data.item && data.item.includes('@' + customer.nickname);
-            });
-
-            let errors = {};
-
-            if (!data.item || !hasMentionedCustomersNickname) {
-                errors.item = 'Mention is required.';
-            }
-
-            return errors;
-        },
-        onSubmit: (data) => {
-            data && show();
-            formik.resetForm();
-        }
-    });
-
-    const isFormFieldInvalid = (name) => !!(formik.touched[name] && formik.errors[name]);
-
-    const getFormErrorMessage = (name) => {
-        return isFormFieldInvalid(name) ? <small className="p-error">{formik.errors[name]}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    const code = {
-        basic: `
-<Toast ref={toast} />
-<Mention
-    id="item"
-    name="item"
-    field="nickname"
-    onSearch={onSearch}
-    placeholder="Please enter @ to mention people"
-    rows={5}
-    cols={40}
-    suggestions={suggestions}
-    itemTemplate={itemTemplate}
-    className={classNames({ 'p-invalid': isFormFieldInvalid('item') })}
-    value={formik.values.item}
-    onChange={(e) => {
-        formik.setFieldValue('item', e.target.value);
-    }}
-/>
-{getFormErrorMessage('item')}
-<Button label="Submit" type="submit" icon="pi pi-check mt-2" />
-        `,
-        javascript: `
-import React, { useRef, useState, useEffect } from "react";
-import { useFormik } from 'formik';
-import { Button } from 'primereact/button';
-import { CustomerService } from './service/CustomerService';
-import { Toast } from 'primereact/toast';
-import { classNames } from 'primereact/utils';
-import { Mention } from "primereact/mention";
-
-export default function FormikDoc() {
-    const toast = useRef(null);
-    const [customers, setCustomers] = useState([]);
-    const [suggestions, setSuggestions] = useState([]);
-
-    useEffect(() => {
-        CustomerService.getCustomersSmall().then((data) => {
-            data.forEach((d) => (d['nickname'] = \`$\{d.name.replace(/\s+/g, '').toLowerCase()}_\${d.id}\`));
-            setCustomers(data);
-        });
-    }, []);
-
-    const onSearch = (event) => {
-        //in a real application, make a request to a remote url with the query and return suggestions, for demo we filter at client side
-        setTimeout(() => {
-            const query = event.query;
-            let suggestions;
-
-            if (!query.trim().length) {
-                suggestions = [...customers];
-            } else {
-                suggestions = customers.filter((customer) => {
-                    return customer.nickname.toLowerCase().startsWith(query.toLowerCase());
-                });
-            }
-
-            setSuggestions(suggestions);
-        }, 250);
-    };
-
-    const itemTemplate = (suggestion) => {
-        const src = 'https://primefaces.org/cdn/primereact/images/avatar/' + suggestion.representative.image;
-
-        return (
-            <div className="flex align-items-center">
-                <img alt={suggestion.name} src={src} width="32" style={{ verticalAlign: 'middle' }} />
-                <span className="flex flex-column ml-2">
-                    {suggestion.name}
-                    <small style={{ fontSize: '.75rem', color: 'var(--text-color-secondary)' }}>@{suggestion.nickname}</small>
-                </span>
-            </div>
-        );
-    };
-
-    const show = () => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: formik.values.item });
-    };
-
-    const formik = useFormik({
-        initialValues: {
-            item: ''
-        },
-        validate: (data) => {
-            const hasMentionedCustomersNickname = customers.some((customer) => {
-                return data.item && data.item.includes('@' + customer.nickname);
-            });
-
-            let errors = {};
-
-            if (!data.item || !hasMentionedCustomersNickname) {
-                errors.item = 'Mention is required.';
-            }
-
-            return errors;
-        },
-        onSubmit: (data) => {
-            data && show();
-            formik.resetForm();
-        }
-    });
-
-    const isFormFieldInvalid = (name) => !!(formik.touched[name] && formik.errors[name]);
-
-    const getFormErrorMessage = (name) => {
-        return isFormFieldInvalid(name) ? <small className="p-error">{formik.errors[name]}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    return (
-        <div className="card flex justify-content-center">
-            <form onSubmit={formik.handleSubmit} className="flex flex-column">
-                <Toast ref={toast} />
-                <div className="field">
-                    <div className="flex flex-column">
-                        <Mention
-                            id="item"
-                            name="item"
-                            field="nickname"
-                            onSearch={onSearch}
-                            placeholder="Please enter @ to mention people"
-                            rows={5}
-                            cols={40}
-                            suggestions={suggestions}
-                            itemTemplate={itemTemplate}
-                            className={classNames({ 'p-invalid': isFormFieldInvalid('item') })}
-                            value={formik.values.item}
-                            onChange={(e) => {
-                                formik.setFieldValue('item', e.target.value);
-                            }}
-                        />
-
-                        {getFormErrorMessage('item')}
-                    </div>
-                </div>
-                <Button label="Submit" type="submit" icon="pi pi-check mt-2" />
-            </form>
-        </div>
-    )
-}
-        `,
-        typescript: `
-import React, { useRef, useState, useEffect } from "react";
-import { useFormik } from 'formik';
-import { Button } from 'primereact/button';
-import { CustomerService } from './service/CustomerService';
-import { Toast } from 'primereact/toast';
-import { classNames } from 'primereact/utils';
-import { Mention } from "primereact/mention";
-
-export default function FormikDoc() {
-    const toast = useRef<Toast | null>(null);
-    const [customers, setCustomers] = useState<any[] | []>([]);
-    const [suggestions, setSuggestions] = useState<any[] | []>([]);
-
-    useEffect(() => {
-        CustomerService.getCustomersSmall().then((data) => {
-            data.forEach((d) => (d['nickname'] = \`$\{d.name.replace(/\s+/g, '').toLowerCase()}_\${d.id}\`));
-            setCustomers(data);
-        });
-    }, []);
-
-    const onSearch = (event) => {
-        //in a real application, make a request to a remote url with the query and return suggestions, for demo we filter at client side
-        setTimeout(() => {
-            const query = event.query;
-            let suggestions;
-
-            if (!query.trim().length) {
-                suggestions = [...customers];
-            } else {
-                suggestions = customers.filter((customer) => {
-                    return customer.nickname.toLowerCase().startsWith(query.toLowerCase());
-                });
-            }
-            
-            setSuggestions(suggestions);
-        }, 250);
-    };
-
-    const itemTemplate = (suggestion) => {
-        const src = 'https://primefaces.org/cdn/primereact/images/avatar/' + suggestion.representative.image;
-
-        return (
-            <div className="flex align-items-center">
-                <img alt={suggestion.name} src={src} width="32" style={{ verticalAlign: 'middle' }} />
-                <span className="flex flex-column ml-2">
-                    {suggestion.name}
-                    <small style={{ fontSize: '.75rem', color: 'var(--text-color-secondary)' }}>@{suggestion.nickname}</small>
-                </span>
-            </div>
-        );
-    };
-
-    const show = () => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: formik.values.item });
-    };
-
-    const formik = useFormik({
-        initialValues: {
-            item: ''
-        },
-        validate: (data) => {
-            const hasMentionedCustomersNickname = customers.some((customer) => {
-                return data.item && data.item.includes('@' + customer.nickname);
-            });
-
-            let errors = {};
-
-            if (!data.item || !hasMentionedCustomersNickname) {
-                errors.item = 'Mention is required.';
-            }
-
-            return errors;
-        },
-        onSubmit: (data) => {
-            data && show();
-            formik.resetForm();
-        }
-    });
-
-    const isFormFieldInvalid = (name) => !!(formik.touched[name] && formik.errors[name]);
-
-    const getFormErrorMessage = (name) => {
-        return isFormFieldInvalid(name) ? <small className="p-error">{formik.errors[name]}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    return (
-        <div className="card flex justify-content-center">
-            <form onSubmit={formik.handleSubmit} className="flex flex-column">
-                <Toast ref={toast} />
-                <div className="field">
-                    <div className="flex flex-column">
-                        <Mention
-                            id="item"
-                            name="item"
-                            field="nickname"
-                            onSearch={onSearch}
-                            placeholder="Please enter @ to mention people"
-                            rows={5}
-                            cols={40}
-                            suggestions={suggestions}
-                            itemTemplate={itemTemplate}
-                            className={classNames({ 'p-invalid': isFormFieldInvalid('item') })}
-                            value={formik.values.item}
-                            onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => {
-                                formik.setFieldValue('item', e.target.value);
-                            }}
-                        />
-
-                        {getFormErrorMessage('item')}
-                    </div>
-                </div>
-                <Button label="Submit" type="submit" icon="pi pi-check mt-2" />
-            </form>
-        </div>
-    )
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props}>
-                {/* TO DO: Add demo content. */}
-                <p />
-            </DocSectionText>
-            <div className="card flex justify-content-center">
-                <form onSubmit={formik.handleSubmit} className="flex flex-column">
-                    <Toast ref={toast} />
-                    <div className="field">
-                        <div className="flex flex-column">
-                            <Mention
-                                id="item"
-                                name="item"
-                                field="nickname"
-                                onSearch={onSearch}
-                                placeholder="Please enter @ to mention people"
-                                rows={5}
-                                cols={40}
-                                suggestions={suggestions}
-                                itemTemplate={itemTemplate}
-                                className={classNames({ 'p-invalid': isFormFieldInvalid('item') })}
-                                value={formik.values.item}
-                                onChange={(e) => {
-                                    formik.setFieldValue('item', e.target.value);
-                                }}
-                            />
-
-                            {getFormErrorMessage('item')}
-                        </div>
-                    </div>
-                    <Button label="Submit" type="submit" icon="pi pi-check mt-2" />
-                </form>
-            </div>
-            <DocSectionCode code={code} service={['CustomerService']} dependencies={{ formik: '^2.2.6' }} />
-        </>
-    );
-}
diff --git a/components/doc/mention/form/hookformdoc.js b/components/doc/mention/form/hookformdoc.js
deleted file mode 100644
index bcb0a6f06c..0000000000
--- a/components/doc/mention/form/hookformdoc.js
+++ /dev/null
@@ -1,343 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { Button } from '@/components/lib/button/Button';
-import { Mention } from '@/components/lib/mention/Mention';
-import { Toast } from '@/components/lib/toast/Toast';
-import { classNames } from '@/components/lib/utils/Utils';
-import { useEffect, useRef, useState } from 'react';
-import { Controller, useForm } from 'react-hook-form';
-import { CustomerService } from '../../../../service/CustomerService';
-
-export function HookFormDoc(props) {
-    const [customers, setCustomers] = useState([]);
-    const [suggestions, setSuggestions] = useState([]);
-    const toast = useRef(null);
-
-    const show = () => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: form.getValues('value') });
-    };
-
-    const defaultValues = { value: '' };
-    const form = useForm({ defaultValues });
-    const errors = form.formState.errors;
-
-    const onSubmit = (data) => {
-        data.value && show();
-
-        form.reset();
-    };
-
-    const getFormErrorMessage = (name) => {
-        return errors[name] ? <small className="p-error">{errors[name].message}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    useEffect(() => {
-        CustomerService.getCustomersSmall().then((data) => {
-            data.forEach((d) => (d.nickname = `${d.name.replace(/\s+/g, '').toLowerCase()}_${d.id}`));
-            setCustomers(data);
-        });
-    }, []);
-
-    const onSearch = (event) => {
-        //in a real application, make a request to a remote url with the query and return suggestions, for demo we filter at client side
-        setTimeout(() => {
-            const query = event.query;
-            let suggestions;
-
-            if (!query.trim().length) {
-                suggestions = [...customers];
-            } else {
-                suggestions = customers.filter((customer) => {
-                    return customer.nickname.toLowerCase().startsWith(query.toLowerCase());
-                });
-            }
-
-            setSuggestions(suggestions);
-        }, 250);
-    };
-
-    const itemTemplate = (suggestion) => {
-        const src = 'https://primefaces.org/cdn/primereact/images/avatar/' + suggestion.representative.image;
-
-        return (
-            <div className="flex align-items-center">
-                <img alt={suggestion.name} src={src} width="32" />
-                <span className="flex flex-column ml-2">
-                    {suggestion.name}
-                    <small style={{ fontSize: '.75rem', color: 'var(--text-color-secondary)' }}>@{suggestion.nickname}</small>
-                </span>
-            </div>
-        );
-    };
-
-    const code = {
-        basic: `
-<Controller name="value" control={form.control}
-    rules={{ required: 'Value is required.' }} render={({ field, fieldState }) => (
-        <Mention
-            id={field.name}
-            field="nickname"
-            {...field}
-            rows={5}
-            cols={40}
-            className={classNames({ 'p-invalid': fieldState.error })}
-            suggestions={suggestions}
-            onSearch={onSearch}
-            placeholder="Please enter @ to mention people"
-            itemTemplate={itemTemplate}
-        />)}
-/>
-        `,
-        javascript: `
-import React, { useRef, useState, useEffect } from 'react';
-import { Controller, useForm } from 'react-hook-form';
-import { Button } from 'primereact/button';
-import { CustomerService } from './service/CustomerService';
-import { Toast } from 'primereact/toast';
-import { classNames } from 'primereact/utils';
-import { Mention } from "primereact/mention";
-
-export default function HookFormDoc() {
-    const [customers, setCustomers] = useState([]);
-    const [suggestions, setSuggestions] = useState([]);
-    const toast = useRef(null);
-
-    const show = () => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: form.getValues('value') });
-    };
-
-    const defaultValues = { value: '' };
-    const form = useForm({ defaultValues });
-    const errors = form.formState.errors;
-
-    const onSubmit = (data) => {
-        data.value && show();
-
-        form.reset();
-    };
-
-    const getFormErrorMessage = (name) => {
-        return errors[name] ? <small className="p-error">{errors[name].message}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    useEffect(() => {
-        CustomerService.getCustomersSmall().then((data) => {
-            data.forEach((d) => (d['nickname'] = \`$\{d.name.replace(/\s+/g, '').toLowerCase()}_\${d.id}\`));
-            setCustomers(data);
-        });
-    }, []);
-
-    const onSearch = (event) => {
-        //in a real application, make a request to a remote url with the query and return suggestions, for demo we filter at client side
-        setTimeout(() => {
-            const query = event.query;
-            let suggestions;
-
-            if (!query.trim().length) {
-                suggestions = [...customers];
-            } else {
-                suggestions = customers.filter((customer) => {
-                    return customer.nickname.toLowerCase().startsWith(query.toLowerCase());
-                });
-            }
-
-            setSuggestions(suggestions);
-        }, 250);
-    };
-
-    const itemTemplate = (suggestion) => {
-        const src = 'https://primefaces.org/cdn/primereact/images/avatar/' + suggestion.representative.image;
-
-        return (
-            <div className="flex align-items-center">
-                <img alt={suggestion.name} src={src} width="32" />
-                <span className="flex flex-column ml-2">
-                    {suggestion.name}
-                    <small style={{ fontSize: '.75rem', color: 'var(--text-color-secondary)' }}>@{suggestion.nickname}</small>
-                </span>
-            </div>
-        );
-    };
-
-    return (
-        <div className="card flex justify-content-center">
-            <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-column">
-                <div className="field">
-                    <Toast ref={toast} />
-                    <Controller
-                        name="value"
-                        control={form.control}
-                        rules={{ required: 'Value is required.' }}
-                        render={({ field, fieldState }) => (
-                            <div className="flex flex-column">
-                                <Mention
-                                    id={field.name}
-                                    field="nickname"
-                                    {...field}
-                                    rows={5}
-                                    cols={40}
-                                    className={classNames({ 'p-invalid': fieldState.error })}
-                                    suggestions={suggestions}
-                                    onSearch={onSearch}
-                                    placeholder="Please enter @ to mention people"
-                                    itemTemplate={itemTemplate}
-                                />
-                                {getFormErrorMessage(field.name)}
-                            </div>
-                        )}
-                    />
-                </div>
-                <Button label="Submit" type="submit" icon="pi pi-check" />
-            </form>
-        </div>
-    )
-}
-        `,
-        typescript: `
-import React, { useRef, useState, useEffect } from 'react';
-import { Controller, useForm } from 'react-hook-form';
-import { Button } from 'primereact/button';
-import { CustomerService } from './service/CustomerService';
-import { Toast } from 'primereact/toast';
-import { classNames } from 'primereact/utils';
-import { Mention } from "primereact/mention";
-
-export default function HookFormDoc() {
-    const toast = useRef<Toast | null>(null);
-    const [customers, setCustomers] = useState<any[] | []>([]);
-    const [suggestions, setSuggestions] = useState<any[] | []>([]);
-
-    const show = () => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: form.getValues('value') });
-    };
-
-    const defaultValues = { value: '' };
-    const form = useForm({ defaultValues });
-    const errors = form.formState.errors;
-
-    const onSubmit = (data) => {
-        data.value && show();
-
-        form.reset();
-    };
-
-    const getFormErrorMessage = (name) => {
-        return errors[name] ? <small className="p-error">{errors[name].message}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    useEffect(() => {
-        CustomerService.getCustomersSmall().then((data) => {
-            data.forEach((d) => (d['nickname'] = \`$\{d.name.replace(/\s+/g, '').toLowerCase()}_\${d.id}\`));
-            setCustomers(data);
-        });
-    }, []);
-
-    const onSearch = (event) => {
-        //in a real application, make a request to a remote url with the query and return suggestions, for demo we filter at client side
-        setTimeout(() => {
-            const query = event.query;
-            let suggestions;
-
-            if (!query.trim().length) {
-                suggestions = [...customers];
-            } else {
-                suggestions = customers.filter((customer) => {
-                    return customer.nickname.toLowerCase().startsWith(query.toLowerCase());
-                });
-            }
-
-            setSuggestions(suggestions);
-        }, 250);
-    };
-
-    const itemTemplate = (suggestion) => {
-        const src = 'https://primefaces.org/cdn/primereact/images/avatar/' + suggestion.representative.image;
-
-        return (
-            <div className="flex align-items-center">
-                <img alt={suggestion.name} src={src} width="32" />
-                <span className="flex flex-column ml-2">
-                    {suggestion.name}
-                    <small style={{ fontSize: '.75rem', color: 'var(--text-color-secondary)' }}>@{suggestion.nickname}</small>
-                </span>
-            </div>
-        );
-    };
-
-    return (
-        <div className="card flex justify-content-center">
-            <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-column">
-                <div className="field">
-                    <Toast ref={toast} />
-                    <Controller
-                        name="value"
-                        control={form.control}
-                        rules={{ required: 'Value is required.' }}
-                        render={({ field, fieldState }) => (
-                            <div className="flex flex-column">
-                                <Mention
-                                    id={field.name}
-                                    field="nickname"
-                                    {...field}
-                                    rows={5}
-                                    cols={40}
-                                    className={classNames({ 'p-invalid': fieldState.error })}
-                                    suggestions={suggestions}
-                                    onSearch={onSearch}
-                                    placeholder="Please enter @ to mention people"
-                                    itemTemplate={itemTemplate}
-                                />
-                                {getFormErrorMessage(field.name)}
-                            </div>
-                        )}
-                    />
-                </div>
-                <Button label="Submit" type="submit" icon="pi pi-check" />
-            </form>
-        </div>
-    )
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props}>
-                <p>
-                    <a href="https://react-hook-form.com/">React Hook Form</a> is another popular React library to handle forms.
-                </p>
-            </DocSectionText>
-            <div className="card flex justify-content-center">
-                <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-column">
-                    <div className="field">
-                        <Toast ref={toast} />
-                        <Controller
-                            name="value"
-                            control={form.control}
-                            rules={{ required: 'Value is required.' }}
-                            render={({ field, fieldState }) => (
-                                <div className="flex flex-column">
-                                    <Mention
-                                        id={field.name}
-                                        field="nickname"
-                                        {...field}
-                                        rows={5}
-                                        cols={40}
-                                        className={classNames({ 'p-invalid': fieldState.error })}
-                                        suggestions={suggestions}
-                                        onSearch={onSearch}
-                                        placeholder="Please enter @ to mention people"
-                                        itemTemplate={itemTemplate}
-                                    />
-                                    {getFormErrorMessage(field.name)}
-                                </div>
-                            )}
-                        />
-                    </div>
-                    <Button label="Submit" type="submit" icon="pi pi-check" />
-                </form>
-            </div>
-            <DocSectionCode code={code} service={['CustomerService']} dependencies={{ 'react-hook-form': '^7.39.4' }} />
-        </>
-    );
-}
diff --git a/components/doc/multiselect/filleddoc.js b/components/doc/multiselect/filleddoc.js
new file mode 100644
index 0000000000..aee3f1d4b5
--- /dev/null
+++ b/components/doc/multiselect/filleddoc.js
@@ -0,0 +1,85 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { MultiSelect } from '@/components/lib/multiselect/MultiSelect';
+import { useState } from 'react';
+
+export function FilledDoc(props) {
+    const [selectedCities, setSelectedCities] = useState(null);
+    const cities = [
+        { name: 'New York', code: 'NY' },
+        { name: 'Rome', code: 'RM' },
+        { name: 'London', code: 'LDN' },
+        { name: 'Istanbul', code: 'IST' },
+        { name: 'Paris', code: 'PRS' }
+    ];
+
+    const code = {
+        basic: `
+<MultiSelect value={selectedCities} onChange={(e) => setSelectedCities(e.value)} options={cities} optionLabel="name" 
+    placeholder="Select Cities" maxSelectedLabels={3} className="w-full md:w-20rem" />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { MultiSelect } from 'primereact/multiselect';
+
+export default function FilledDemo() {
+    const [selectedCities, setSelectedCities] = useState(null);
+    const cities = [
+        { name: 'New York', code: 'NY' },
+        { name: 'Rome', code: 'RM' },
+        { name: 'London', code: 'LDN' },
+        { name: 'Istanbul', code: 'IST' },
+        { name: 'Paris', code: 'PRS' }
+    ];
+
+    return (
+        <div className="card flex justify-content-center">
+            <MultiSelect value={selectedCities} onChange={(e) => setSelectedCities(e.value)} options={cities} optionLabel="name" 
+                placeholder="Select Cities" maxSelectedLabels={3} className="w-full md:w-20rem" />
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { MultiSelect, MultiSelectChangeEvent } from 'primereact/multiselect';
+
+interface City {
+    name: string;
+    code: string;
+}
+
+export default function FilledDemo() {
+    const [selectedCities, setSelectedCities] = useState<City | null>(null);
+    const cities: City[] = [
+        { name: 'New York', code: 'NY' },
+        { name: 'Rome', code: 'RM' },
+        { name: 'London', code: 'LDN' },
+        { name: 'Istanbul', code: 'IST' },
+        { name: 'Paris', code: 'PRS' }
+    ];
+
+    return (
+        <div className="card flex justify-content-center">
+            <MultiSelect value={selectedCities} onChange={(e: MultiSelectChangeEvent) => setSelectedCities(e.value)} options={cities} optionLabel="name" 
+                placeholder="Select Cities" maxSelectedLabels={3} className="w-full md:w-20rem" />
+        </div>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <MultiSelect value={selectedCities} onChange={(e) => setSelectedCities(e.value)} showClear={true} options={cities} optionLabel="name" placeholder="Select Cities" maxSelectedLabels={3} className="w-full md:w-20rem" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/multiselect/floatlabeldoc.js b/components/doc/multiselect/floatlabeldoc.js
index 86dea1f58f..23a3e5059b 100644
--- a/components/doc/multiselect/floatlabeldoc.js
+++ b/components/doc/multiselect/floatlabeldoc.js
@@ -1,6 +1,8 @@
 import { DocSectionCode } from '@/components/doc/common/docsectioncode';
 import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { FloatLabel } from '@/components/lib/floatlabel/FloatLabel';
 import { MultiSelect } from '@/components/lib/multiselect/MultiSelect';
+import Link from 'next/link';
 import { useState } from 'react';
 
 export function FloatLabelDoc(props) {
@@ -15,14 +17,15 @@ export function FloatLabelDoc(props) {
 
     const code = {
         basic: `
-<span className="p-float-label w-full md:w-20rem">
+<FloatLabel>
     <MultiSelect value={selectedCities} onChange={(e) => setSelectedCities(e.value)} options={cities} optionLabel="name" maxSelectedLabels={3} className="w-full" />
-    <label htmlFor="ms-cities">Select Cities</label>
-</span>
+    <label htmlFor="ms-cities">MultiSelect</label>
+</FloatLabel>
         `,
         javascript: `
 import React, { useState } from "react";
 import { MultiSelect } from 'primereact/multiselect';
+import { FloatLabel } from 'primereact/floatlabel';
 
 export default function FloatLabelDemo() {
     const [selectedCities, setSelectedCities] = useState(null);
@@ -36,10 +39,10 @@ export default function FloatLabelDemo() {
 
     return (
         <div className="card flex justify-content-center">
-            <span className="p-float-label w-full md:w-20rem">
+            <FloatLabel className="w-full md:w-20rem">
                 <MultiSelect value={selectedCities} onChange={(e) => setSelectedCities(e.value)} options={cities} optionLabel="name" maxSelectedLabels={3} className="w-full" />
-                <label htmlFor="ms-cities">Select Cities</label>
-            </span>
+                <label htmlFor="ms-cities">MultiSelect</label>
+            </FloatLabel>
         </div>
     );
 }
@@ -47,6 +50,7 @@ export default function FloatLabelDemo() {
         typescript: `
 import React, { useState } from "react";
 import { MultiSelect, MultiSelectChangeEvent } from 'primereact/multiselect';
+import { FloatLabel } from 'primereact/floatlabel';
 
 interface City {
     name: string;
@@ -65,10 +69,10 @@ export default function FloatLabelDemo() {
 
     return (
         <div className="card flex justify-content-center">
-            <span className="p-float-label w-full md:w-20rem">
+            <FloatLabel className="w-full md:w-20rem">
                 <MultiSelect value={selectedCities} onChange={(e) => setSelectedCities(e.value)} options={cities} optionLabel="name" maxSelectedLabels={3} className="w-full" />
-                <label htmlFor="ms-cities">Select Cities</label>
-            </span>
+                <label htmlFor="ms-cities">MultiSelect</label>
+            </FloatLabel>
         </div>
     );
 }
@@ -78,13 +82,15 @@ export default function FloatLabelDemo() {
     return (
         <>
             <DocSectionText {...props}>
-                <p>A floating label appears on top of the input field when focused.</p>
+                <p>
+                    A floating label appears on top of the input field when focused. Visit <Link href="/floatlabel">FloatLabel</Link> documentation for more information.
+                </p>
             </DocSectionText>
             <div className="card flex justify-content-center">
-                <span className="p-float-label w-full md:w-20rem">
+                <FloatLabel className="w-full md:w-20rem">
                     <MultiSelect value={selectedCities} onChange={(e) => setSelectedCities(e.value)} options={cities} optionLabel="name" maxSelectedLabels={3} className="w-full" />
-                    <label htmlFor="ms-cities">Select Cities</label>
-                </span>
+                    <label htmlFor="ms-cities">MultiSelect</label>
+                </FloatLabel>
             </div>
             <DocSectionCode code={code} />
         </>
diff --git a/components/doc/multiselect/form/formikdoc.js b/components/doc/multiselect/form/formikdoc.js
deleted file mode 100644
index a9ce0a31d4..0000000000
--- a/components/doc/multiselect/form/formikdoc.js
+++ /dev/null
@@ -1,239 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { Button } from '@/components/lib/button/Button';
-import { MultiSelect } from '@/components/lib/multiselect/MultiSelect';
-import { Toast } from '@/components/lib/toast/Toast';
-import { useFormik } from 'formik';
-import { useRef } from 'react';
-
-export function FormikDoc(props) {
-    const toast = useRef(null);
-    const cities = [
-        { name: 'New York', code: 'NY' },
-        { name: 'Rome', code: 'RM' },
-        { name: 'London', code: 'LDN' },
-        { name: 'Istanbul', code: 'IST' },
-        { name: 'Paris', code: 'PRS' }
-    ];
-
-    const show = () => {
-        const itemArray = formik.values.item.map((item, i) => item.name + (i < formik.values.item.length - 1 ? ', ' : ''));
-
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: itemArray });
-    };
-
-    const formik = useFormik({
-        initialValues: {
-            item: null
-        },
-        validate: (data) => {
-            let errors = {};
-
-            if (!data.item) {
-                errors.item = 'City is required.';
-            }
-
-            return errors;
-        },
-        onSubmit: (data) => {
-            data && show();
-            formik.resetForm();
-        }
-    });
-
-    const isFormFieldInvalid = (name) => !!(formik.touched[name] && formik.errors[name]);
-
-    const getFormErrorMessage = (name) => {
-        return isFormFieldInvalid(name) ? <small className="p-error">{formik.errors[name]}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    const code = {
-        basic: `
-<Toast ref={toast} />
-<MultiSelect id="item" name="item" options={cities} value={formik.values.item} onChange={(e) => { formik.setFieldValue('item', e.value) }} optionLabel="name" placeholder="Select Cities" maxSelectedLabels={3} />
-<Button type="submit" label="Submit" className="mt-2" />
-        `,
-        javascript: `
-import React, { useRef } from "react";
-import { useFormik } from 'formik';
-import { MultiSelect } from 'primereact/multiselect';
-import { Button } from 'primereact/button';
-import { Toast } from 'primereact/toast';
-
-export default function FormikDoc() {
-    const toast = useRef(null);
-     const cities = [
-        { name: 'New York', code: 'NY' },
-        { name: 'Rome', code: 'RM' },
-        { name: 'London', code: 'LDN' },
-        { name: 'Istanbul', code: 'IST' },
-        { name: 'Paris', code: 'PRS' }
-    ];
-        
-    const show = () => {
-        const itemArray = formik.values.item.map((item, i) => item.name + (i < formik.values.item.length - 1 ? ', ' : ''));
-
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: itemArray });
-    };
-
-    const formik = useFormik({
-        initialValues: {
-            item: null
-        },
-        validate: (data) => {
-            let errors = {};
-
-            if (!data.item) {
-                errors.item = 'City is required.';
-            }
-
-            return errors;
-        },
-        onSubmit: (data) => {
-            data && show();
-
-            formik.resetForm();
-        }
-    });
-
-    const isFormFieldInvalid = (name) => !!(formik.touched[name] && formik.errors[name]);
-
-    const getFormErrorMessage = (name) => {
-        return isFormFieldInvalid(name) ? <small className="p-error">{formik.errors[name]}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    return (
-        <div className="card flex justify-content-center">
-            <form onSubmit={formik.handleSubmit} className="flex flex-column align-items-center gap-2">
-                <Toast ref={toast} />
-                <MultiSelect
-                    id="item"
-                    name="item"
-                    options={cities}
-                    value={formik.values.item}
-                    onChange={(e) => {
-                        formik.setFieldValue('item', e.value);
-                    }}
-                    optionLabel="name"
-                    placeholder="Select Cities"
-                    maxSelectedLabels={3}
-                    className="w-full md:w-20rem"
-                />
-                {getFormErrorMessage('item')}
-                <Button type="submit" label="Submit" className="mt-2" />
-            </form>
-        </div>
-    )
-}
-        `,
-        typescript: `
-import React, { useRef } from "react";
-import { useFormik } from 'formik';
-import { MultiSelect, MultiSelectChangeEvent } from 'primereact/multiselect';
-import { Button } from 'primereact/button';
-import { Toast } from 'primereact/toast';
-
-interface City {
-    name: string;
-    code: string;
-}
-
-export default function FormikDoc() {
-    const toast = useRef<Toast | null>(null);
-     const cities: City[] = [
-        { name: 'New York', code: 'NY' },
-        { name: 'Rome', code: 'RM' },
-        { name: 'London', code: 'LDN' },
-        { name: 'Istanbul', code: 'IST' },
-        { name: 'Paris', code: 'PRS' }
-    ];
-
-    const show = () => {
-        const itemArray = formik.values.item.map((item, i) => item.name + (i < formik.values.item.length - 1 ? ', ' : ''));
-
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: itemArray });
-    };
-
-    const formik = useFormik({
-        initialValues: {
-            item: null
-        },
-        validate: (data) => {
-            let errors = {};
-
-            if (!data.item) {
-                errors.item = 'City is required.';
-            }
-
-            return errors;
-        },
-        onSubmit: (data) => {
-            data && show();
-
-            formik.resetForm();
-        }
-    });
-
-    const isFormFieldInvalid = (name) => !!(formik.touched[name] && formik.errors[name]);
-
-    const getFormErrorMessage = (name) => {
-        return isFormFieldInvalid(name) ? <small className="p-error">{formik.errors[name]}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    return (
-        <div className="card flex justify-content-center">
-            <form onSubmit={formik.handleSubmit} className="flex flex-column align-items-center gap-2">
-                <Toast ref={toast} />
-                <MultiSelect
-                    id="item"
-                    name="item"
-                    options={cities}
-                    value={formik.values.item}
-                    onChange={(e: MultiSelectChangeEvent) => {
-                        formik.setFieldValue('item', e.value);
-                    }}
-                    optionLabel="name"
-                    placeholder="Select Cities"
-                    maxSelectedLabels={3}
-                    className="w-full md:w-20rem"
-                />
-                {getFormErrorMessage('item')}
-                <Button type="submit" label="Submit" className="mt-2" />
-            </form>
-        </div>
-    )
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props}>
-                <p>
-                    <a href="https://formik.org/">Formik</a> is a popular library for handling forms in React.
-                </p>
-            </DocSectionText>
-            <div className="card flex justify-content-center">
-                <form onSubmit={formik.handleSubmit} className="flex flex-column align-items-center gap-2">
-                    <Toast ref={toast} />
-                    <MultiSelect
-                        id="item"
-                        name="item"
-                        options={cities}
-                        value={formik.values.item}
-                        onChange={(e) => {
-                            formik.setFieldValue('item', e.value);
-                        }}
-                        optionLabel="name"
-                        placeholder="Select Cities"
-                        maxSelectedLabels={3}
-                        className="w-full md:w-20rem"
-                    />
-                    {getFormErrorMessage('item')}
-                    <Button type="submit" label="Submit" className="mt-2" />
-                </form>
-            </div>
-            <DocSectionCode code={code} dependencies={{ formik: '^2.2.6' }} />
-        </>
-    );
-}
diff --git a/components/doc/multiselect/form/hookformdoc.js b/components/doc/multiselect/form/hookformdoc.js
deleted file mode 100644
index fe0b5083f1..0000000000
--- a/components/doc/multiselect/form/hookformdoc.js
+++ /dev/null
@@ -1,219 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { Button } from '@/components/lib/button/Button';
-import { MultiSelect } from '@/components/lib/multiselect/MultiSelect';
-import { Toast } from '@/components/lib/toast/Toast';
-import { useRef } from 'react';
-import { Controller, useForm } from 'react-hook-form';
-
-export function HookFormDoc(props) {
-    const toast = useRef(null);
-    const cities = [
-        { name: 'New York', code: 'NY' },
-        { name: 'Rome', code: 'RM' },
-        { name: 'London', code: 'LDN' },
-        { name: 'Istanbul', code: 'IST' },
-        { name: 'Paris', code: 'PRS' }
-    ];
-
-    const show = () => {
-        const values = getValues('value');
-        const detail = values.map((value, i) => value.name + (i < values.length - 1 ? ', ' : ''));
-
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail });
-    };
-
-    const defaultValues = {
-        value: null
-    };
-
-    const {
-        control,
-        formState: { errors },
-        handleSubmit,
-        getValues,
-        reset
-    } = useForm({ defaultValues });
-
-    const onSubmit = (data) => {
-        data.value && show();
-
-        reset();
-    };
-
-    const getFormErrorMessage = (name) => {
-        return errors[name] ? <small className="p-error">{errors[name].message}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    const code = {
-        basic: `
-<Toast ref={toast} />
-<Controller
-    name="value"
-    control={control}
-    rules={{ required: 'Value is required.' }}
-    render={({ field }) => <MultiSelect id={field.name} name="value" value={field.value} options={cities} onChange={(e) => field.onChange(e.value)} optionLabel="name" placeholder="Select Cities" maxSelectedLabels={3} />}
-/>
-<Button type="submit" label="Submit" className="mt-2" />
-        `,
-        javascript: `
-import React, { useRef } from "react";
-import { useForm, Controller } from 'react-hook-form';
-import { MultiSelect } from 'primereact/multiselect';
-import { Button } from 'primereact/button';
-import { Toast } from 'primereact/toast';
-
-export default function HookFormDoc() {
-    const toast = useRef(null);
-    const cities = [
-        { name: 'New York', code: 'NY' },
-        { name: 'Rome', code: 'RM' },
-        { name: 'London', code: 'LDN' },
-        { name: 'Istanbul', code: 'IST' },
-        { name: 'Paris', code: 'PRS' }
-    ];
-
-    const show = () => {
-        const values = getValues('value');
-        const detail = values.map((value, i) => value.name + (i < values.length - 1 ? ', ' : ''));
-
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail });
-    };
-
-    const defaultValues = {
-        value: null
-    };
-
-    const {
-        control,
-        formState: { errors },
-        handleSubmit,
-        getValues,
-        reset
-    } = useForm({ defaultValues });
-
-    const onSubmit = (data) => {
-        data.value && show();
-
-        reset();
-    };
-
-    const getFormErrorMessage = (name) => {
-        return errors[name] ? <small className="p-error">{errors[name].message}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    return (
-        <div className="card flex justify-content-center">
-            <form onSubmit={handleSubmit(onSubmit)} className="flex flex-column align-items-center gap-2">
-                <Toast ref={toast} />
-                <Controller
-                    name="value"
-                    control={control}
-                    rules={{ required: 'Value is required.' }}
-                    render={({ field }) => <MultiSelect id={field.name} name="value" value={field.value} options={cities} onChange={(e) => field.onChange(e.value)} optionLabel="name" placeholder="Select Cities" maxSelectedLabels={3} className="w-full md:w-20rem" />}
-                />
-
-                {getFormErrorMessage('value')}
-                <Button type="submit" label="Submit" className="mt-2" />
-            </form>
-        </div>
-    )
-}
-        `,
-        typescript: `
-import React, { useRef } from "react";
-import { useForm, Controller } from 'react-hook-form';
-import { MultiSelect, MultiSelectChangeEvent } from 'primereact/multiselect';
-import { Button } from 'primereact/button';
-import { Toast } from 'primereact/toast';
-
-interface City {
-    name: string;
-    code: string;
-}
-
-export default function HookFormDoc() {
-    const toast = useRef<Toast | null>(null);
-    const cities: City[] = [
-        { name: 'New York', code: 'NY' },
-        { name: 'Rome', code: 'RM' },
-        { name: 'London', code: 'LDN' },
-        { name: 'Istanbul', code: 'IST' },
-        { name: 'Paris', code: 'PRS' }
-    ];
-
-    const show = () => {
-        const values = getValues('value');
-        const detail = values.map((value, i) => value.name + (i < values.length - 1 ? ', ' : ''));
-
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail });
-    };
-
-    const defaultValues = {
-        value: null
-    };
-
-    const {
-        control,
-        formState: { errors },
-        handleSubmit,
-        getValues,
-        reset
-    } = useForm({ defaultValues });
-
-    const onSubmit = (data) => {
-        data.value && show();
-
-        reset();
-    };
-
-    const getFormErrorMessage = (name) => {
-        return errors[name] ? <small className="p-error">{errors[name].message}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    return (
-        <div className="card flex justify-content-center">
-            <form onSubmit={handleSubmit(onSubmit)} className="flex flex-column align-items-center gap-2">
-                <Toast ref={toast} />
-                <Controller
-                    name="value"
-                    control={control}
-                    rules={{ required: 'Value is required.' }}
-                    render={({ field }) => <MultiSelect id={field.name} name="value" value={field.value} options={cities} onChange={(e: MultiSelectChangeEvent) => field.onChange(e.value)} optionLabel="name" placeholder="Select Cities" maxSelectedLabels={3} className="w-full md:w-20rem" />}
-                />
-
-                {getFormErrorMessage('value')}
-                <Button type="submit" label="Submit" className="mt-2" />
-            </form>
-        </div>
-    )
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props}>
-                {/* TO DO: Add demo content. */}
-                <p />
-            </DocSectionText>
-            <div className="card flex justify-content-center">
-                <form onSubmit={handleSubmit(onSubmit)} className="flex flex-column align-items-center gap-2">
-                    <Toast ref={toast} />
-                    <Controller
-                        name="value"
-                        control={control}
-                        rules={{ required: 'Value is required.' }}
-                        render={({ field }) => (
-                            <MultiSelect id={field.name} name="value" value={field.value} options={cities} onChange={(e) => field.onChange(e.value)} optionLabel="name" placeholder="Select Cities" maxSelectedLabels={3} className="w-full md:w-20rem" />
-                        )}
-                    />
-
-                    {getFormErrorMessage('value')}
-                    <Button type="submit" label="Submit" className="mt-2" />
-                </form>
-            </div>
-            <DocSectionCode code={code} dependencies={{ 'react-hook-form': '^7.39.4' }} />
-        </>
-    );
-}
diff --git a/components/doc/multiselect/invaliddoc.js b/components/doc/multiselect/invaliddoc.js
index 0461b50294..6b0c514ca9 100644
--- a/components/doc/multiselect/invaliddoc.js
+++ b/components/doc/multiselect/invaliddoc.js
@@ -15,8 +15,8 @@ export function InvalidDoc(props) {
 
     const code = {
         basic: `
-<MultiSelect value={selectedCities} onChange={(e) => setSelectedCities(e.value)} options={cities} optionLabel="name" 
-    placeholder="Select Cities" maxSelectedLabels={3} className="p-invalid w-full md:w-20rem" />
+<MultiSelect invalid value={selectedCities} onChange={(e) => setSelectedCities(e.value)} options={cities} optionLabel="name" 
+    placeholder="Select Cities" maxSelectedLabels={3} className="w-full md:w-20rem" />
         `,
         javascript: `
 import React, { useState } from "react";
@@ -34,8 +34,8 @@ export default function InvalidDemo() {
 
     return (
         <div className="card flex justify-content-center">
-            <MultiSelect value={selectedCities} onChange={(e) => setSelectedCities(e.value)} options={cities} optionLabel="name" 
-                placeholder="Select Cities" maxSelectedLabels={3} className="p-invalid w-full md:w-20rem" />
+            <MultiSelect invalid value={selectedCities} onChange={(e) => setSelectedCities(e.value)} options={cities} optionLabel="name" 
+                placeholder="Select Cities" maxSelectedLabels={3} className="w-full md:w-20rem" />
         </div>
     );
 }
@@ -61,8 +61,8 @@ export default function InvalidDemo() {
 
     return (
         <div className="card flex justify-content-center">
-            <MultiSelect value={selectedCities} onChange={(e: MultiSelectChangeEvent) => setSelectedCities(e.value)} options={cities} optionLabel="name" 
-                placeholder="Select Cities" maxSelectedLabels={3} className="p-invalid w-full md:w-20rem" />
+            <MultiSelect invalid value={selectedCities} onChange={(e: MultiSelectChangeEvent) => setSelectedCities(e.value)} options={cities} optionLabel="name" 
+                placeholder="Select Cities" maxSelectedLabels={3} className="w-full md:w-20rem" />
         </div>
     );
 }
@@ -73,11 +73,11 @@ export default function InvalidDemo() {
         <>
             <DocSectionText {...props}>
                 <p>
-                    Invalid state style is added using the <i>p-invalid</i> class to indicate a failed validation.
+                    Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.
                 </p>
             </DocSectionText>
             <div className="card flex justify-content-center">
-                <MultiSelect value={selectedCities} onChange={(e) => setSelectedCities(e.value)} options={cities} optionLabel="name" placeholder="Select Cities" maxSelectedLabels={3} className="p-invalid w-full md:w-20rem" />
+                <MultiSelect invalid value={selectedCities} onChange={(e) => setSelectedCities(e.value)} options={cities} optionLabel="name" placeholder="Select Cities" maxSelectedLabels={3} className="w-full md:w-20rem" />
             </div>
             <DocSectionCode code={code} />
         </>
diff --git a/components/doc/multistatecheckbox/form/formikdoc.js b/components/doc/multistatecheckbox/form/formikdoc.js
deleted file mode 100644
index c8c0fcbacc..0000000000
--- a/components/doc/multistatecheckbox/form/formikdoc.js
+++ /dev/null
@@ -1,235 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { Button } from '@/components/lib/button/Button';
-import { MultiStateCheckbox } from '@/components/lib/multistatecheckbox/MultiStateCheckbox';
-import { Toast } from '@/components/lib/toast/Toast';
-import { classNames } from '@/components/lib/utils/Utils';
-import { useFormik } from 'formik';
-import { useRef } from 'react';
-
-export function FormikDoc(props) {
-    const toast = useRef(null);
-
-    const show = () => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: formik.values.item });
-    };
-
-    const options = [
-        { value: 'public', icon: 'pi pi-globe' },
-        { value: 'protected', icon: 'pi pi-lock-open' },
-        { value: 'private', icon: 'pi pi-lock' }
-    ];
-
-    const formik = useFormik({
-        initialValues: {
-            item: ''
-        },
-        validate: (data) => {
-            let errors = {};
-
-            if (!data.item) {
-                errors.item = 'Level is required.';
-            }
-
-            return errors;
-        },
-        onSubmit: (data) => {
-            data && show();
-            formik.resetForm();
-        }
-    });
-
-    const isFormFieldInvalid = (name) => !!(formik.touched[name] && formik.errors[name]);
-
-    const getFormErrorMessage = (name) => {
-        return isFormFieldInvalid(name) ? <small className="p-error">{formik.errors[name]}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    const code = {
-        basic: `
-<label htmlFor="item" className={classNames('mr-2', { 'p-error': formik.errors.item })}>Level</label>
-<MultiStateCheckbox id="item" name="item" value={formik.values.item} onChange={(e) => { formik.setFieldValue('item', e.value) }} options={options} optionValue="value" className={classNames({ 'p-invalid': formik.errors.item })} />
-{getFormErrorMessage('item')}
-<Button label="Submit" type="submit" icon="pi pi-check" />
-        `,
-        javascript: `
-import React, { useRef } from "react";
-import { useFormik } from 'formik';
-import { MultiStateCheckbox } from 'primereact/multistatecheckbox';
-import { Button } from 'primereact/button';
-import { Toast } from 'primereact/toast';
-import { classNames } from 'primereact/utils';
-
-export default function FormikDoc() {
-    const toast = useRef(null);
-
-    const show = () => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: formik.values.item });
-    };
-
-    const options = [
-        { value: 'public', icon: 'pi pi-globe' },
-        { value: 'protected', icon: 'pi pi-lock-open' },
-        { value: 'private', icon: 'pi pi-lock' }
-    ];
-
-    const formik = useFormik({
-        initialValues: {
-            item: ''
-        },
-        validate: (data) => {
-            let errors = {};
-
-            if (!data.item) {
-                errors.item = 'Level is required.';
-            }
-
-            return errors;
-        },
-        onSubmit: (data) => {
-            data && show();
-            formik.resetForm();
-        }
-    });
-
-    const isFormFieldInvalid = (name) => !!(formik.touched[name] && formik.errors[name]);
-
-    const getFormErrorMessage = (name) => {
-        return isFormFieldInvalid(name) ? <small className="p-error">{formik.errors[name]}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    return (
-        <div className="card flex justify-content-center">
-            <form onSubmit={formik.handleSubmit} className="flex flex-column align-items-center gap-2">
-                <Toast ref={toast} />
-                <label htmlFor="item" className={classNames('mr-2', { 'p-error': formik.errors.item })}>
-                    Level
-                </label>
-                <MultiStateCheckbox
-                    id="item"
-                    name="item"
-                    value={formik.values.item}
-                    onChange={(e) => {
-                        formik.setFieldValue('item', e.value);
-                    }}
-                    options={options}
-                    optionValue="value"
-                    className={classNames({ 'p-invalid': formik.errors.item })}
-                />
-                {getFormErrorMessage('item')}
-                <Button label="Submit" type="submit" icon="pi pi-check" />
-            </form>
-        </div>
-    )
-}
-        `,
-        typescript: `
-import React, { useRef } from "react";
-import { useFormik } from 'formik';
-import { MultiStateCheckbox } from 'primereact/multistatecheckbox';
-import { Button } from 'primereact/button';
-import { Toast } from 'primereact/toast';
-import { classNames } from 'primereact/utils';
-
-interface Item {
-    value: string;
-    icon: string;
-}
-
-export default function FormikDoc() {
-    const toast = useRef<Toast | null>(null);
-
-    const show = () => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: formik.values.item });
-    };
-
-    const options: Item[] = [
-        { value: 'public', icon: 'pi pi-globe' },
-        { value: 'protected', icon: 'pi pi-lock-open' },
-        { value: 'private', icon: 'pi pi-lock' }
-    ];
-
-    const formik = useFormik({
-        initialValues: {
-            item: ''
-        },
-        validate: (data) => {
-            let errors = {};
-
-            if (!data.item) {
-                errors.item = 'Level is required.';
-            }
-
-            return errors;
-        },
-        onSubmit: (data) => {
-            data && show();
-            formik.resetForm();
-        }
-    });
-
-    const isFormFieldInvalid = (name) => !!(formik.touched[name] && formik.errors[name]);
-
-    const getFormErrorMessage = (name) => {
-        return isFormFieldInvalid(name) ? <small className="p-error">{formik.errors[name]}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    return (
-        <div className="card flex justify-content-center">
-            <form onSubmit={formik.handleSubmit} className="flex flex-column align-items-center gap-2">
-                <Toast ref={toast} />
-                <label htmlFor="item" className={classNames('mr-2', { 'p-error': formik.errors.item })}>
-                    Level
-                </label>
-                <MultiStateCheckbox
-                    id="item"
-                    name="item"
-                    value={formik.values.item}
-                    onChange={(e: MultiStateCheckboxChangeEvent) => {
-                        formik.setFieldValue('item', e.value);
-                    }}
-                    options={options}
-                    optionValue="value"
-                    className={classNames({ 'p-invalid': formik.errors.item })}
-                />
-                {getFormErrorMessage('item')}
-                <Button label="Submit" type="submit" icon="pi pi-check" />
-            </form>
-        </div>
-    )
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props}>
-                <p>
-                    <a href="https://formik.org/">Formik</a> is a popular library for handling forms in React.
-                </p>
-            </DocSectionText>
-            <div className="card flex justify-content-center">
-                <form onSubmit={formik.handleSubmit} className="flex flex-column align-items-center gap-2">
-                    <Toast ref={toast} />
-                    <label htmlFor="item" className={classNames('mr-2', { 'p-error': formik.errors.item })}>
-                        Level
-                    </label>
-                    <MultiStateCheckbox
-                        id="item"
-                        name="item"
-                        value={formik.values.item}
-                        onChange={(e) => {
-                            formik.setFieldValue('item', e.value);
-                        }}
-                        options={options}
-                        optionValue="value"
-                        className={classNames({ 'p-invalid': formik.errors.item })}
-                    />
-                    {getFormErrorMessage('item')}
-                    <Button label="Submit" type="submit" icon="pi pi-check" />
-                </form>
-            </div>
-            <DocSectionCode code={code} dependencies={{ formik: '^2.2.6' }} />
-        </>
-    );
-}
diff --git a/components/doc/multistatecheckbox/form/hookformdoc.js b/components/doc/multistatecheckbox/form/hookformdoc.js
deleted file mode 100644
index 058cdb6a52..0000000000
--- a/components/doc/multistatecheckbox/form/hookformdoc.js
+++ /dev/null
@@ -1,198 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { Button } from '@/components/lib/button/Button';
-import { MultiStateCheckbox } from '@/components/lib/multistatecheckbox/MultiStateCheckbox';
-import { Toast } from '@/components/lib/toast/Toast';
-import { classNames } from '@/components/lib/utils/Utils';
-import { useRef } from 'react';
-import { Controller, useForm } from 'react-hook-form';
-
-export function HookFormDoc(props) {
-    const toast = useRef(null);
-    const defaultValues = { value: '' };
-    const form = useForm({ defaultValues });
-    const errors = form.formState.errors;
-
-    const show = () => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: form.getValues('value') });
-    };
-
-    const options = [
-        { value: 'public', icon: 'pi pi-globe' },
-        { value: 'protected', icon: 'pi pi-lock-open' },
-        { value: 'private', icon: 'pi pi-lock' }
-    ];
-
-    const onSubmit = (data) => {
-        data.value && show();
-        form.reset();
-    };
-
-    const getFormErrorMessage = (name) => {
-        return errors[name] ? <small className="p-error">{errors[name].message}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    const code = {
-        basic: `
-<Controller name="value"  control={form.control} rules={{ required: 'Level is required.'}}
-    render={({ field, fieldState }) => (
-        <>
-            <label htmlFor={field.name} className={classNames({ 'p-error': errors.name })}>Level*</label>
-            <MultiStateCheckbox id={field.name} value={field.value} onChange={field.onChange} ref={field.ref} options={options} optionValue="value" className={classNames({ 'p-invalid': fieldState.error })} />
-            {getFormErrorMessage(field.name)}
-        </>
-    )}
-/>
-        `,
-        javascript: `
-import React, { useRef } from 'react';
-import { Controller, useForm } from 'react-hook-form';
-import { Button } from 'primereact/button';
-import { Toast } from 'primereact/toast';
-import { classNames } from 'primereact/utils';
-import { MultiStateCheckbox } from "primereact/multistatecheckbox";
-
-export default function HookFormDoc() {
-    const toast = useRef(null);
-    const defaultValues = {value: ''};
-    const form = useForm({ defaultValues });
-    const errors = form.formState.errors;
-    
-    const show = () => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: form.getValues('value') });
-    };
-
-    const options = [
-        { value: 'public', icon: 'pi pi-globe' },
-        { value: 'protected', icon: 'pi pi-lock-open' },
-        { value: 'private', icon: 'pi pi-lock' }
-    ];
-
-    const onSubmit = (data) => {
-        data.value && show();
-        form.reset();
-    };
-
-    const getFormErrorMessage = (name) => {
-        return errors[name] ? <small className="p-error">{errors[name].message}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    return (
-        <div className="card flex justify-content-center">
-            <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-column align-items-center gap-2">
-                <Toast ref={toast} />
-                <Controller
-                    name="value"
-                    control={form.control}
-                    rules={{ required: 'Level is required.' }}
-                    render={({ field, fieldState }) => (
-                        <div className="flex flex-column align-items-center gap-2">
-                            <label htmlFor={field.name} className={classNames('mr-2', { 'p-error': errors.value })}>
-                                Level
-                            </label>
-                            <MultiStateCheckbox id={field.name} value={field.value} ref={field.ref} onChange={field.onChange} options={options} optionValue="value" className={classNames({ 'p-invalid': fieldState.error })} />
-                            {getFormErrorMessage(field.name)}
-                        </div>
-                    )}
-                />
-                <Button label="Submit" type="submit" icon="pi pi-check" />
-            </form>
-        </div>
-    )
-}
-        `,
-        typescript: `
-import React, { useRef } from 'react';
-import { Controller, useForm } from 'react-hook-form';
-import { Button } from 'primereact/button';
-import { Toast } from 'primereact/toast';
-import { classNames } from 'primereact/utils';
-import { MultiStateCheckbox } from "primereact/multistatecheckbox";
-
-interface Item {
-    value: string;
-    icon: string;
-}
-
-export default function HookFormDoc() {
-    const toast = useRef<Toast | null>(null);
-    const defaultValues = {value: ''};
-    const form = useForm({ defaultValues });
-    const errors = form.formState.errors;
-    
-    const show = () => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: form.getValues('value') });
-    };
-
-    const options: Item[] = [
-        { value: 'public', icon: 'pi pi-globe' },
-        { value: 'protected', icon: 'pi pi-lock-open' },
-        { value: 'private', icon: 'pi pi-lock' }
-    ];
-
-    const onSubmit = (data: any) => {
-        data.value && show();
-        form.reset();
-    };
-
-    const getFormErrorMessage = (name) => {
-        return errors[name] ? <small className="p-error">{errors[name].message}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    return (
-        <div className="card flex justify-content-center">
-            <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-column align-items-center gap-2">
-                <Toast ref={toast} />
-                <Controller
-                    name="value"
-                    control={form.control}
-                    rules={{ required: 'Level is required.' }}
-                    render={({ field, fieldState }) => (
-                        <div className="flex flex-column align-items-center gap-2">
-                            <label htmlFor={field.name} className={classNames('mr-2', { 'p-error': errors.value })}>
-                                Level
-                            </label>
-                            <MultiStateCheckbox id={field.name} value={field.value} ref={field.ref} onChange={field.onChange} options={options} optionValue="value" className={classNames({ 'p-invalid': fieldState.error })} />
-                            {getFormErrorMessage(field.name)}
-                        </div>
-                    )}
-                />
-                <Button label="Submit" type="submit" icon="pi pi-check" />
-            </form>
-        </div>
-    )
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props}>
-                <p>
-                    <a href="https://react-hook-form.com/">React Hook Form</a> is another popular React library to handle forms.
-                </p>
-            </DocSectionText>
-            <div className="card flex justify-content-center">
-                <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-column align-items-center gap-2">
-                    <Toast ref={toast} />
-                    <Controller
-                        name="value"
-                        control={form.control}
-                        rules={{ required: 'Level is required.' }}
-                        render={({ field, fieldState }) => (
-                            <div className="flex flex-column align-items-center gap-2">
-                                <label htmlFor={field.name} className={classNames('mr-2', { 'p-error': errors.value })}>
-                                    Level
-                                </label>
-                                <MultiStateCheckbox id={field.name} value={field.value} ref={field.ref} onChange={field.onChange} options={options} optionValue="value" className={classNames({ 'p-invalid': fieldState.error })} />
-                                {getFormErrorMessage(field.name)}
-                            </div>
-                        )}
-                    />
-                    <Button label="Submit" type="submit" icon="pi pi-check" />
-                </form>
-            </div>
-            <DocSectionCode code={code} dependencies={{ 'react-hook-form': '^7.39.4' }} />
-        </>
-    );
-}
diff --git a/components/doc/password/filleddoc.js b/components/doc/password/filleddoc.js
new file mode 100644
index 0000000000..6cf7270e72
--- /dev/null
+++ b/components/doc/password/filleddoc.js
@@ -0,0 +1,56 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Password } from '@/components/lib/password/Password';
+import { useState } from 'react';
+
+export function FilledDoc(props) {
+    const [value, setValue] = useState('');
+
+    const code = {
+        basic: `
+<Password variant="filled" value={value} onChange={(e) => setValue(e.target.value)} feedback={false} tabIndex={1} />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { Password } from 'primereact/password';
+
+export default function FilledDemo() {
+    const [value, setValue] = useState('');
+
+    return (
+        <div className="card flex justify-content-center">
+            <Password variant="filled" value={value} onChange={(e) => setValue(e.target.value)} feedback={false} tabIndex={1} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { Password } from 'primereact/password';
+
+export default function FilledDemo() {
+    const [value, setValue] = useState<string>('');
+
+    return (
+        <div className="card flex justify-content-center">
+            <Password variant="filled" value={value} onChange={(e: React.ChangeEvent<HTMLInputElement>) => setValue(e.target.value)} feedback={false} tabIndex={1} />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Password variant="filled" value={value} onChange={(e) => setValue(e.target.value)} feedback={false} tabIndex={1} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/password/floatlabeldoc.js b/components/doc/password/floatlabeldoc.js
index ffb3cc34cd..f0382da018 100644
--- a/components/doc/password/floatlabeldoc.js
+++ b/components/doc/password/floatlabeldoc.js
@@ -1,6 +1,8 @@
 import { DocSectionCode } from '@/components/doc/common/docsectioncode';
 import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { FloatLabel } from '@/components/lib/floatlabel/FloatLabel';
 import { Password } from '@/components/lib/password/Password';
+import Link from 'next/link';
 import { useState } from 'react';
 
 export function FloatLabelDoc(props) {
@@ -8,24 +10,25 @@ export function FloatLabelDoc(props) {
 
     const code = {
         basic: `
-<span className="p-float-label">
+<FloatLabel>
     <Password inputId="password" value={value} onChange={(e) => setValue(e.target.value)} />
     <label htmlFor="password">Password</label>
-</span>
+</FloatLabel>
         `,
         javascript: `
 import React, { useState } from "react";
 import { Password } from 'primereact/password';
+import { FloatLabel } from 'primereact/floatlabel';
 
 export default function FloatLabelDemo() {
     const [value, setValue] = useState('');
 
     return (
         <div className="card flex justify-content-center">
-            <span className="p-float-label">
+            <FloatLabel>
                 <Password inputId="password" value={value} onChange={(e) => setValue(e.target.value)} />
                 <label htmlFor="password">Password</label>
-            </span>
+            </FloatLabel>
         </div>
     )
 }
@@ -33,16 +36,17 @@ export default function FloatLabelDemo() {
         typescript: `
 import React, { useState } from "react";
 import { Password } from 'primereact/password';
+import { FloatLabel } from 'primereact/floatlabel';
 
 export default function FloatLabelDemo() {
     const [value, setValue] = useState<string>('');
 
     return (
         <div className="card flex justify-content-center">
-            <span className="p-float-label">
+            <FloatLabel>
                 <Password inputId="password" value={value} onChange={(e: React.ChangeEvent<HTMLInputElement>) => setValue(e.target.value)} />
                 <label htmlFor="password">Password</label>
-            </span>
+            </FloatLabel>
         </div>
     )
 }
@@ -52,13 +56,15 @@ export default function FloatLabelDemo() {
     return (
         <>
             <DocSectionText {...props}>
-                <p>A floating label appears on top of the input field when focused.</p>
+                <p>
+                    A floating label appears on top of the input field when focused. Visit <Link href="/floatlabel">FloatLabel</Link> documentation for more information.
+                </p>
             </DocSectionText>
             <div className="card flex justify-content-center">
-                <span className="p-float-label">
+                <FloatLabel>
                     <Password inputId="password" value={value} onChange={(e) => setValue(e.target.value)} />
                     <label htmlFor="password">Password</label>
-                </span>
+                </FloatLabel>
             </div>
             <DocSectionCode code={code} />
         </>
diff --git a/components/doc/password/form/formikdoc.js b/components/doc/password/form/formikdoc.js
deleted file mode 100644
index ec96128b95..0000000000
--- a/components/doc/password/form/formikdoc.js
+++ /dev/null
@@ -1,221 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { Button } from '@/components/lib/button/Button';
-import { Password } from '@/components/lib/password/Password';
-import { Toast } from '@/components/lib/toast/Toast';
-import { classNames } from '@/components/lib/utils/Utils';
-import { useFormik } from 'formik';
-import { useRef } from 'react';
-
-export function FormikDoc(props) {
-    const toast = useRef(null);
-
-    const show = () => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: formik.values.value });
-    };
-
-    const formik = useFormik({
-        initialValues: {
-            value: ''
-        },
-        validate: (data) => {
-            let errors = {};
-
-            if (!data.value) {
-                errors.value = 'Password is required.';
-            }
-
-            return errors;
-        },
-        onSubmit: (data) => {
-            data && show();
-            formik.resetForm();
-        }
-    });
-
-    const isFormFieldInvalid = (name) => !!(formik.touched[name] && formik.errors[name]);
-
-    const getFormErrorMessage = (name) => {
-        return isFormFieldInvalid(name) ? <small className="p-error">{formik.errors[name]}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    const code = {
-        basic: `
-<Toast ref={toast} />
-<Password
-    inputId="in_value"
-    name="value"
-    rows={5}
-    cols={30}
-    className={classNames({ 'p-invalid': isFormFieldInvalid('value') })}
-    value={formik.values.value}
-    feedback={false}
-    onChange={(e) => {
-        formik.setFieldValue('value', e.target.value);
-    }}
-/>
-{getFormErrorMessage('value')}
-<Button label="Submit" type="submit" icon="pi pi-check" />
-`,
-        javascript: `
-import React, { useRef } from "react";
-import { useFormik } from 'formik';
-import { Password } from 'primereact/password';
-import { Button } from 'primereact/button';
-import { classNames } from 'primereact/utils';
-import { Toast } from 'primereact/toast';
-
-export default function FormikDoc() {
-    const toast = useRef(null);
-
-    const show = () => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: formik.values.value });
-    };
-
-    const formik = useFormik({
-        initialValues: {
-            value: ''
-        },
-        validate: (data) => {
-            let errors = {};
-
-            if (!data.value) {
-                errors.value = 'Password is required.';
-            }
-
-            return errors;
-        },
-        onSubmit: (data) => {
-            data && show();
-            formik.resetForm();
-        }
-    });
-
-    const isFormFieldInvalid = (name) => !!(formik.touched[name] && formik.errors[name]);
-
-    const getFormErrorMessage = (name) => {
-        return isFormFieldInvalid(name) ? <small className="p-error">{formik.errors[name]}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    return (
-        <div className="card flex justify-content-center">
-            <form onSubmit={formik.handleSubmit} className="flex flex-column gap-2">
-            <label htmlFor="value">Password</label>
-                <Toast ref={toast} />
-                <Password
-                    inputId="in_value"
-                    name="value"
-                    rows={5}
-                    cols={30}
-                    className={classNames({ 'p-invalid': isFormFieldInvalid('value') })}
-                    value={formik.values.value}
-                    feedback={false}
-                    onChange={(e) => {
-                        formik.setFieldValue('value', e.target.value);
-                    }}
-                />
-                {getFormErrorMessage('value')}
-                <Button label="Submit" type="submit" icon="pi pi-check" />
-            </form>
-        </div>
-    )
-}
-        `,
-        typescript: `
-import React, { useRef } from "react";
-import { useFormik } from 'formik';
-import { Password } from 'primereact/password';
-import { Button } from 'primereact/button';
-import { classNames } from 'primereact/utils';
-import { Toast } from 'primereact/toast';
-
-
-export default function FormikDoc() {
-    const toast = useRef(null);
-
-    const show = () => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: formik.values.value });
-    };
-
-    const formik = useFormik({
-        initialValues: {
-            value: ''
-        },
-        validate: (data) => {
-            let errors = {};
-
-            if (!data.value) {
-                errors.value = 'Password is required.';
-            }
-
-            return errors;
-        },
-        onSubmit: (data) => {
-            data && show();
-            formik.resetForm();
-        }
-    });
-
-    const isFormFieldInvalid = (name) => !!(formik.touched[name] && formik.errors[name]);
-
-    const getFormErrorMessage = (name) => {
-        return isFormFieldInvalid(name) ? <small className="p-error">{formik.errors[name]}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    return (
-        <div className="card flex justify-content-center">
-            <form onSubmit={formik.handleSubmit} className="flex flex-column gap-2">
-            <label htmlFor="value">Password</label>
-                <Toast ref={toast} />
-                <Password
-                    inputId="in_value"
-                    name="value"
-                    rows={5}
-                    cols={30}
-                    className={classNames({ 'p-invalid': isFormFieldInvalid('value') })}
-                    value={formik.values.value}
-                    feedback={false}
-                    onChange={(e) => {
-                        formik.setFieldValue('value', e.target.value);
-                    }}
-                />
-                {getFormErrorMessage('value')}
-                <Button label="Submit" type="submit" icon="pi pi-check" />
-            </form>
-        </div>
-    )
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props}>
-                <p>
-                    <a href="https://formik.org/">Formik</a> is a popular library for handling forms in React.
-                </p>
-            </DocSectionText>
-            <div className="card flex justify-content-center">
-                <form onSubmit={formik.handleSubmit} className="flex flex-column gap-2">
-                    <label htmlFor="value">Password</label>
-                    <Toast ref={toast} />
-                    <Password
-                        inputId="in_value"
-                        name="value"
-                        rows={5}
-                        cols={30}
-                        className={classNames({ 'p-invalid': isFormFieldInvalid('value') })}
-                        value={formik.values.value}
-                        feedback={false}
-                        onChange={(e) => {
-                            formik.setFieldValue('value', e.target.value);
-                        }}
-                    />
-                    {getFormErrorMessage('value')}
-                    <Button label="Submit" type="submit" icon="pi pi-check" />
-                </form>
-            </div>
-            <DocSectionCode code={code} dependencies={{ formik: '^2.2.6' }} />
-        </>
-    );
-}
diff --git a/components/doc/password/form/hookformdoc.js b/components/doc/password/form/hookformdoc.js
deleted file mode 100644
index f7e736f3d0..0000000000
--- a/components/doc/password/form/hookformdoc.js
+++ /dev/null
@@ -1,188 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { Button } from '@/components/lib/button/Button';
-import { Password } from '@/components/lib/password/Password';
-import { Toast } from '@/components/lib/toast/Toast';
-import { classNames } from '@/components/lib/utils/Utils';
-import { useRef } from 'react';
-import { Controller, useForm } from 'react-hook-form';
-
-export function HookFormDoc(props) {
-    const toast = useRef(null);
-
-    const show = () => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: form.getValues('value') });
-    };
-
-    const defaultValues = { value: '' };
-    const form = useForm({ defaultValues });
-    const errors = form.formState.errors;
-
-    const onSubmit = (data) => {
-        data.value && show();
-
-        form.reset();
-    };
-
-    const getFormErrorMessage = (name) => {
-        return errors[name] ? <small className="p-error">{errors[name].message}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    const code = {
-        basic: `
-<Toast ref={toast} />
-<Controller
-    name="value"
-    control={form.control}
-    rules={{ required: 'Password is required.' }}
-    render={({ field, fieldState }) => (
-        <>
-            <label htmlFor={field.name} className={classNames({ 'p-error': errors.value })}>
-                Password
-            </label>
-            <Password id={field.name} {...field} inputRef={field.ref} className={classNames({ 'p-invalid': fieldState.error })} feedback={false} />
-            {getFormErrorMessage(field.name)}
-        </>
-    )}
-/>
-<Button label="Submit" type="submit" icon="pi pi-check" />
-        `,
-        javascript: `
-import React, { useRef } from 'react';
-import { Controller, useForm } from 'react-hook-form';
-import { Button } from 'primereact/button';
-import { Toast } from 'primereact/toast';
-import { classNames } from 'primereact/utils';
-import { Password } from "primereact/password";
-
-export default function HookFormDoc() {
-    const toast = useRef(null);
-
-    const show = () => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: form.getValues('value') });
-    };
-
-    const defaultValues = { value: '' };
-    const form = useForm({ defaultValues });
-    const errors = form.formState.errors;
-
-    const onSubmit = (data) => {
-        data.value && show();
-
-        form.reset();
-    };
-
-    const getFormErrorMessage = (name) => {
-        return errors[name] ? <small className="p-error">{errors[name].message}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    return (
-        <div className="card flex justify-content-center">
-            <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-column gap-2">
-                <Toast ref={toast} />
-                <Controller
-                    name="value"
-                    control={form.control}
-                    rules={{ required: 'Password is required.' }}
-                    render={({ field, fieldState }) => (
-                        <>
-                            <label htmlFor={field.name} className={classNames({ 'p-error': errors.value })}>
-                                Password
-                            </label>
-                            <Password id={field.name} {...field} inputRef={field.ref} className={classNames({ 'p-invalid': fieldState.error })} feedback={false} />
-                            {getFormErrorMessage(field.name)}
-                        </>
-                    )}
-                />
-                <Button label="Submit" type="submit" icon="pi pi-check" />
-            </form>
-        </div>
-    )
-}
-        `,
-        typescript: `
-import React, { useRef } from 'react';
-import { Controller, useForm } from 'react-hook-form';
-import { Button } from 'primereact/button';
-import { Toast } from 'primereact/toast';
-import { classNames } from 'primereact/utils';
-import { Password } from "primereact/password";
-
-export default function HookFormDoc() {
-    const toast = useRef(null);
-
-    const show = () => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: form.getValues('value') });
-    };
-
-    const defaultValues = { value: '' };
-    const form = useForm({ defaultValues });
-    const errors = form.formState.errors;
-
-    const onSubmit = (data) => {
-        data.value && show();
-
-        form.reset();
-    };
-
-    const getFormErrorMessage = (name) => {
-        return errors[name] ? <small className="p-error">{errors[name].message}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    return (
-        <div className="card flex justify-content-center">
-            <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-column gap-2">
-                <Toast ref={toast} />
-                <Controller
-                    name="value"
-                    control={form.control}
-                    rules={{ required: 'Password is required.' }}
-                    render={({ field, fieldState }) => (
-                        <>
-                            <label htmlFor={field.name} className={classNames({ 'p-error': errors.value })}>
-                                Password
-                            </label>
-                            <Password id={field.name} {...field} inputRef={field.ref} className={classNames({ 'p-invalid': fieldState.error })} feedback={false} />
-                            {getFormErrorMessage(field.name)}
-                        </>
-                    )}
-                />
-                <Button label="Submit" type="submit" icon="pi pi-check" />
-            </form>
-        </div>
-    )
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props}>
-                <p>
-                    <a href="https://react-hook-form.com/">React Hook Form</a> is another popular React library to handle forms.
-                </p>
-            </DocSectionText>
-            <div className="card flex justify-content-center">
-                <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-column gap-2">
-                    <Toast ref={toast} />
-                    <Controller
-                        name="value"
-                        control={form.control}
-                        rules={{ required: 'Password is required.' }}
-                        render={({ field, fieldState }) => (
-                            <>
-                                <label htmlFor={field.name} className={classNames({ 'p-error': errors.value })}>
-                                    Password
-                                </label>
-                                <Password id={field.name} {...field} inputRef={field.ref} className={classNames({ 'p-invalid': fieldState.error })} feedback={false} />
-                                {getFormErrorMessage(field.name)}
-                            </>
-                        )}
-                    />
-                    <Button label="Submit" type="submit" icon="pi pi-check" />
-                </form>
-            </div>
-            <DocSectionCode code={code} dependencies={{ 'react-hook-form': '^7.39.4' }} />
-        </>
-    );
-}
diff --git a/components/doc/password/invaliddoc.js b/components/doc/password/invaliddoc.js
index 2834972aef..316a42a42f 100644
--- a/components/doc/password/invaliddoc.js
+++ b/components/doc/password/invaliddoc.js
@@ -5,7 +5,7 @@ import { Password } from '@/components/lib/password/Password';
 export function InvalidDoc(props) {
     const code = {
         basic: `
-<Password className="p-invalid" />
+<Password invalid />
         `,
         javascript: `
 import React from "react";
@@ -14,7 +14,7 @@ import { Password } from 'primereact/password';
 export default function InvalidDemo() {
     return (
         <div className="card flex justify-content-center">
-            <Password className="p-invalid" />
+            <Password invalid />
         </div>
     )
 }
@@ -26,7 +26,7 @@ import { Password } from 'primereact/password';
 export default function InvalidDemo() {
     return (
         <div className="card flex justify-content-center">
-            <Password className="p-invalid" />
+            <Password invalid />
         </div>
     )
 }
@@ -37,11 +37,11 @@ export default function InvalidDemo() {
         <>
             <DocSectionText {...props}>
                 <p>
-                    Invalid state style is added using the <i>p-invalid</i> class to indicate a failed validation.
+                    Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.
                 </p>
             </DocSectionText>
             <div className="card flex justify-content-center">
-                <Password className="p-invalid" />
+                <Password invalid />
             </div>
             <DocSectionCode code={code} />
         </>
diff --git a/components/doc/radiobutton/filleddoc.js b/components/doc/radiobutton/filleddoc.js
new file mode 100644
index 0000000000..8d5e8fbc01
--- /dev/null
+++ b/components/doc/radiobutton/filleddoc.js
@@ -0,0 +1,49 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { RadioButton } from '@/components/lib/radiobutton/RadioButton';
+
+export function FilledDoc(props) {
+    const code = {
+        basic: `
+<RadioButton variant="filled" />
+        `,
+        javascript: `
+import React from 'react'; 
+import { RadioButton } from "primereact/radiobutton";
+
+export default function FilledDemo() {
+    return (
+        <div className="card flex justify-content-center align-items-center">
+            <RadioButton variant="filled" />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react'; 
+import { RadioButton } from "primereact/radiobutton";
+
+export default function FilledDemo() {
+    return (
+        <div className="card flex justify-content-center align-items-center">
+            <RadioButton variant="filled" />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center align-items-center">
+                <RadioButton variant="filled" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/radiobutton/form/formikdoc.js b/components/doc/radiobutton/form/formikdoc.js
deleted file mode 100644
index 037a63233a..0000000000
--- a/components/doc/radiobutton/form/formikdoc.js
+++ /dev/null
@@ -1,321 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { Button } from '@/components/lib/button/Button';
-import { RadioButton } from '@/components/lib/radiobutton/RadioButton';
-import { Toast } from '@/components/lib/toast/Toast';
-import { useFormik } from 'formik';
-import { useRef } from 'react';
-
-export function FormikDoc(props) {
-    const toast = useRef(null);
-
-    const radioBtns = [
-        {
-            id: 'cheese',
-            name: 'cheese',
-            value: 'Cheese',
-            inputId: 'f1'
-        },
-        {
-            id: 'mushroom',
-            name: 'mushroom',
-            value: 'Mushroom',
-            inputId: 'f2'
-        },
-        {
-            id: 'pepper',
-            name: 'pepper',
-            value: 'Pepper',
-            inputId: 'f3'
-        },
-        {
-            id: 'onion',
-            name: 'onion',
-            value: 'Onion',
-            inputId: 'f4'
-        }
-    ];
-
-    const show = () => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: formik.values.item });
-    };
-
-    const formik = useFormik({
-        initialValues: {
-            item: ''
-        },
-        validate: (data) => {
-            let errors = {};
-
-            if (!data.item) {
-                errors.item = 'Value is required.';
-            }
-
-            return errors;
-        },
-        onSubmit: (data) => {
-            data.item && show();
-            formik.resetForm();
-        }
-    });
-
-    const isFormFieldInvalid = (name) => !!(formik.touched[name] && formik.errors[name]);
-
-    const getFormErrorMessage = (name) => {
-        return isFormFieldInvalid(name) ? <small className="p-error">{formik.errors[name]}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    const code = {
-        basic: `
-<Toast ref={toast} />
-{radioBtns.map((btn, i) => {
-    return (
-        <div key={i} className="flex align-items-center mr-3">
-        <RadioButton
-            {...btn}
-                checked={formik.values.item === btn.value}
-                onChange={(e) => {
-                    formik.setFieldValue('item', e.value);
-                }}
-                />
-            <label htmlFor={btn.inputId} className="ml-1">
-            {btn.value}
-                </label>
-            </div>
-        );
-})}
-</div>
-{getFormErrorMessage('item')}
-<Button type="submit" label="Submit" />
-`,
-        javascript: `
-import React, { useRef } from "react";
-import { useFormik } from 'formik';
-import { Button } from 'primereact/button';
-import { Toast } from 'primereact/toast';
-import { RadioButton } from "primereact/radiobutton";
-
-export default function FormikDoc() {
-    const toast = useRef(null);
-
-    const radioBtns = [
-        {
-            id: 'cheese',
-            name: 'cheese',
-            value: 'Cheese',
-            inputId: 'f1'
-        },
-        {
-            id: 'mushroom',
-            name: 'mushroom',
-            value: 'Mushroom',
-            inputId: 'f2'
-        },
-        {
-            id: 'pepper',
-            name: 'pepper',
-            value: 'Pepper',
-            inputId: 'f3'
-        },
-        {
-            id: 'onion',
-            name: 'onion',
-            value: 'Onion',
-            inputId: 'f4'
-        }
-    ];
-
-    const show = () => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: formik.values.item });
-    };
-
-    const formik = useFormik({
-        initialValues: {
-            item: ''
-        },
-        validate: (data) => {
-            let errors = {};
-
-            if (!data.item) {
-                errors.item = 'Value is required.';
-            }
-
-            return errors;
-        },
-        onSubmit: (data) => {
-            data.item && show();
-            formik.resetForm();
-        }
-    });
-
-    const isFormFieldInvalid = (name) => !!(formik.touched[name] && formik.errors[name]);
-
-    const getFormErrorMessage = (name) => {
-        return isFormFieldInvalid(name) ? <small className="p-error">{formik.errors[name]}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    return (
-        <div className="card flex justify-content-center">
-            <form onSubmit={formik.handleSubmit} className="flex flex-column gap-2">
-                <div>Please choose your ingredient.</div>
-                <div className="flex">
-                    <Toast ref={toast} />
-                    {radioBtns.map((btn, i) => {
-                        return (
-                            <div key={i} className="flex align-items-center mr-3">
-                                <RadioButton
-                                    {...btn}
-                                    checked={formik.values.item === btn.value}
-                                    onChange={(e) => {
-                                        formik.setFieldValue('item', e.value);
-                                    }}
-                                />
-                                <label htmlFor={btn.inputId} className="ml-1">
-                                    {btn.value}
-                                </label>
-                            </div>
-                        );
-                    })}
-                </div>
-                {getFormErrorMessage('item')}
-                <Button type="submit" label="Submit" />
-            </form>
-        </div>
-    )
-}
-        `,
-        typescript: `
-import React, { useRef } from "react";
-import { useFormik } from 'formik';
-import { Button } from 'primereact/button';
-import { Toast } from 'primereact/toast';
-import { RadioButton } from "primereact/radiobutton";
-
-export default function FormikDoc() {
-    const toast = useRef(null);
-
-    const radioBtns = [
-        {
-            id: 'cheese',
-            name: 'cheese',
-            value: 'Cheese',
-            inputId: 'f1'
-        },
-        {
-            id: 'mushroom',
-            name: 'mushroom',
-            value: 'Mushroom',
-            inputId: 'f2'
-        },
-        {
-            id: 'pepper',
-            name: 'pepper',
-            value: 'Pepper',
-            inputId: 'f3'
-        },
-        {
-            id: 'onion',
-            name: 'onion',
-            value: 'Onion',
-            inputId: 'f4'
-        }
-    ];
-
-    const show = () => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: formik.values.item });
-    };
-
-    const formik = useFormik({
-        initialValues: {
-            item: ''
-        },
-        validate: (data) => {
-            let errors = {};
-
-            if (!data.item) {
-                errors.item = 'Value is required.';
-            }
-
-            return errors;
-        },
-        onSubmit: (data) => {
-            data.item && show();
-            formik.resetForm();
-        }
-    });
-
-    const isFormFieldInvalid = (name) => !!(formik.touched[name] && formik.errors[name]);
-
-    const getFormErrorMessage = (name) => {
-        return isFormFieldInvalid(name) ? <small className="p-error">{formik.errors[name]}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    return (
-        <div className="card flex justify-content-center">
-            <form onSubmit={formik.handleSubmit} className="flex flex-column gap-2">
-                <div>Please choose your ingredient.</div>
-                <div className="flex">
-                    <Toast ref={toast} />
-                    {radioBtns.map((btn, i) => {
-                        return (
-                            <div key={i} className="flex align-items-center mr-3">
-                                <RadioButton
-                                    {...btn}
-                                    checked={formik.values.item === btn.value}
-                                    onChange={(e) => {
-                                        formik.setFieldValue('item', e.value);
-                                    }}
-                                />
-                                <label htmlFor={btn.inputId} className="ml-1">
-                                    {btn.value}
-                                </label>
-                            </div>
-                        );
-                    })}
-                </div>
-                {getFormErrorMessage('item')}
-                <Button type="submit" label="Submit" />
-            </form>
-        </div>
-    )
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props}>
-                <p>
-                    <a href="https://formik.org/">Formik</a> is a popular library for handling forms in React.
-                </p>
-            </DocSectionText>
-            <div className="card flex justify-content-center">
-                <form onSubmit={formik.handleSubmit} className="flex flex-column gap-2">
-                    <div>Please choose your ingredient.</div>
-                    <div className="flex">
-                        <Toast ref={toast} />
-                        {radioBtns.map((btn, i) => {
-                            return (
-                                <div key={i} className="flex align-items-center mr-3">
-                                    <RadioButton
-                                        {...btn}
-                                        checked={formik.values.item === btn.value}
-                                        onChange={(e) => {
-                                            formik.setFieldValue('item', e.value);
-                                        }}
-                                    />
-                                    <label htmlFor={btn.inputId} className="ml-1">
-                                        {btn.value}
-                                    </label>
-                                </div>
-                            );
-                        })}
-                    </div>
-                    {getFormErrorMessage('item')}
-                    <Button type="submit" label="Submit" />
-                </form>
-            </div>
-            <DocSectionCode code={code} dependencies={{ formik: '^2.2.6' }} />
-        </>
-    );
-}
diff --git a/components/doc/radiobutton/form/hookformdoc.js b/components/doc/radiobutton/form/hookformdoc.js
deleted file mode 100644
index 623a10e8af..0000000000
--- a/components/doc/radiobutton/form/hookformdoc.js
+++ /dev/null
@@ -1,302 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { Button } from '@/components/lib/button/Button';
-import { RadioButton } from '@/components/lib/radiobutton/RadioButton';
-import { Toast } from '@/components/lib/toast/Toast';
-import { useRef } from 'react';
-import { Controller, useForm } from 'react-hook-form';
-
-export function HookFormDoc(props) {
-    const toast = useRef(null);
-
-    const show = () => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: getValues('value') });
-    };
-
-    const defaultValues = {
-        value: ''
-    };
-
-    const {
-        control,
-        formState: { errors },
-        handleSubmit,
-        getValues,
-        reset
-    } = useForm({ defaultValues });
-
-    const onSubmit = (data) => {
-        data.value && show();
-
-        reset();
-    };
-
-    const getFormErrorMessage = (name) => {
-        return errors[name] ? <small className="p-error">{errors[name].message}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    const code = {
-        basic: `
-<Toast ref={toast} />
-    <Controller
-        name="value"
-        control={control}
-        rules={{ required: 'Value is required.' }}
-        render={({ field }) => (
-            <>
-                <div>Please choose your ingredient.</div>
-                <div className="flex justify-content-center">
-                    <div className="flex align-items-center">
-                        <RadioButton inputId="f5" {...field} inputRef={field.ref} value="Cheese" checked={field.value === 'Cheese'} />
-                        <label htmlFor="f5" className="ml-1 mr-3">
-                            Cheese
-                        </label>
-
-                        <RadioButton inputId="f6" {...field} value="Mushroom" checked={field.value === 'Mushroom'} />
-                        <label htmlFor="f6" className="ml-1 mr-3">
-                            Mushroom
-                        </label>
-
-                        <RadioButton inputId="f7" {...field} value="Pepper" checked={field.value === 'Pepper'} />
-                        <label htmlFor="f7" className="ml-1 mr-3">
-                            Pepper
-                        </label>
-
-                        <RadioButton inputId="f8" {...field} value="Onion" checked={field.value === 'Onion'} />
-                        <label htmlFor="f8" className="ml-1 mr-3">
-                            Onion
-                        </label>
-                    </div>
-                </div>
-                {getFormErrorMessage(field.name)}
-                <Button label="Submit" type="submit" icon="pi pi-check" />
-            </>
-        )}
-    />
-        `,
-        javascript: `
-import React, { useRef } from 'react';
-import { Controller, useForm } from 'react-hook-form';
-import { Button } from 'primereact/button';
-import { Toast } from 'primereact/toast';
-import { RadioButton } from "primereact/radiobutton";
-
-export default function HookFormDoc() {
-    const toast = useRef(null);
-
-    const show = () => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: getValues('value') });
-    };
-
-    const defaultValues = {
-        value: ''
-    };
-
-    const {
-        control,
-        formState: { errors },
-        handleSubmit,
-        getValues,
-        reset
-    } = useForm({ defaultValues });
-
-    const onSubmit = (data) => {
-        data.value && show();
-
-        reset();
-    };
-
-    const getFormErrorMessage = (name) => {
-        return errors[name] ? <small className="p-error">{errors[name].message}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    return (
-        <div className="card flex justify-content-center ">
-            <div className="flex">
-                <form onSubmit={handleSubmit(onSubmit)}>
-                    <div className="flex flex-column gap-2">
-                        <Toast ref={toast} />
-                        <Controller
-                            name="value"
-                            control={control}
-                            rules={{ required: 'Value is required.' }}
-                            render={({ field }) => (
-                                <>
-                                    <div>Please choose your ingredient.</div>
-                                    <div className="flex justify-content-center">
-                                        <div className="flex align-items-center">
-                                            <RadioButton inputId="f5" {...field} inputRef={field.ref} value="Cheese" checked={field.value === 'Cheese'} />
-                                            <label htmlFor="f5" className="ml-1 mr-3">
-                                                Cheese
-                                            </label>
-
-                                            <RadioButton inputId="f6" {...field} value="Mushroom" checked={field.value === 'Mushroom'} />
-                                            <label htmlFor="f6" className="ml-1 mr-3">
-                                                Mushroom
-                                            </label>
-
-                                            <RadioButton inputId="f7" {...field} value="Pepper" checked={field.value === 'Pepper'} />
-                                            <label htmlFor="f7" className="ml-1 mr-3">
-                                                Pepper
-                                            </label>
-
-                                            <RadioButton inputId="f8" {...field} value="Onion" checked={field.value === 'Onion'} />
-                                            <label htmlFor="f8" className="ml-1 mr-3">
-                                                Onion
-                                            </label>
-                                        </div>
-                                    </div>
-                                    {getFormErrorMessage(field.name)}
-                                    <Button label="Submit" type="submit" icon="pi pi-check" />
-                                </>
-                            )}
-                        />
-                    </div>
-                </form>
-            </div>
-        </div>
-    )
-}
-        `,
-        typescript: `
-import React, { useRef } from 'react';
-import { Controller, useForm } from 'react-hook-form';
-import { Button } from 'primereact/button';
-import { Toast } from 'primereact/toast';
-import { RadioButton } from "primereact/radiobutton";
-
-export default function HookFormDoc() {
-    const toast = useRef(null);
-
-    const show = () => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: getValues('value') });
-    };
-
-    const defaultValues = {
-        value: ''
-    };
-
-    const {
-        control,
-        formState: { errors },
-        handleSubmit,
-        getValues,
-        reset
-    } = useForm({ defaultValues });
-
-    const onSubmit = (data) => {
-        data.value && show();
-
-        reset();
-    };
-
-    const getFormErrorMessage = (name) => {
-        return errors[name] ? <small className="p-error">{errors[name].message}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    return (
-        <div className="card flex justify-content-center ">
-            <div className="flex">
-                <form onSubmit={handleSubmit(onSubmit)}>
-                    <div className="flex flex-column gap-2">
-                        <Toast ref={toast} />
-                        <Controller
-                            name="value"
-                            control={control}
-                            rules={{ required: 'Value is required.' }}
-                            render={({ field }) => (
-                                <>
-                                    <div>Please choose your ingredient.</div>
-                                    <div className="flex justify-content-center">
-                                        <div className="flex align-items-center">
-                                            <RadioButton inputId="f5" {...field} inputRef={field.ref} value="Cheese" checked={field.value === 'Cheese'} />
-                                            <label htmlFor="f5" className="ml-1 mr-3">
-                                                Cheese
-                                            </label>
-
-                                            <RadioButton inputId="f6" {...field} value="Mushroom" checked={field.value === 'Mushroom'} />
-                                            <label htmlFor="f6" className="ml-1 mr-3">
-                                                Mushroom
-                                            </label>
-
-                                            <RadioButton inputId="f7" {...field} value="Pepper" checked={field.value === 'Pepper'} />
-                                            <label htmlFor="f7" className="ml-1 mr-3">
-                                                Pepper
-                                            </label>
-
-                                            <RadioButton inputId="f8" {...field} value="Onion" checked={field.value === 'Onion'} />
-                                            <label htmlFor="f8" className="ml-1 mr-3">
-                                                Onion
-                                            </label>
-                                        </div>
-                                    </div>
-                                    {getFormErrorMessage(field.name)}
-                                    <Button label="Submit" type="submit" icon="pi pi-check" />
-                                </>
-                            )}
-                        />
-                    </div>
-                </form>
-            </div>
-        </div>
-    )
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props}>
-                <p>
-                    <a href="https://react-hook-form.com/">React Hook Form</a> is another popular React library to handle forms.
-                </p>
-            </DocSectionText>
-            <div className="card flex justify-content-center ">
-                <div className="flex">
-                    <form onSubmit={handleSubmit(onSubmit)}>
-                        <div className="flex flex-column gap-2">
-                            <Toast ref={toast} />
-                            <Controller
-                                name="value"
-                                control={control}
-                                rules={{ required: 'Value is required.' }}
-                                render={({ field }) => (
-                                    <>
-                                        <div>Please choose your ingredient.</div>
-                                        <div className="flex justify-content-center">
-                                            <div className="flex align-items-center">
-                                                <RadioButton inputId="f5" {...field} inputRef={field.ref} value="Cheese" checked={field.value === 'Cheese'} />
-                                                <label htmlFor="f5" className="ml-1 mr-3">
-                                                    Cheese
-                                                </label>
-
-                                                <RadioButton inputId="f6" {...field} value="Mushroom" checked={field.value === 'Mushroom'} />
-                                                <label htmlFor="f6" className="ml-1 mr-3">
-                                                    Mushroom
-                                                </label>
-
-                                                <RadioButton inputId="f7" {...field} value="Pepper" checked={field.value === 'Pepper'} />
-                                                <label htmlFor="f7" className="ml-1 mr-3">
-                                                    Pepper
-                                                </label>
-
-                                                <RadioButton inputId="f8" {...field} value="Onion" checked={field.value === 'Onion'} />
-                                                <label htmlFor="f8" className="ml-1 mr-3">
-                                                    Onion
-                                                </label>
-                                            </div>
-                                        </div>
-                                        {getFormErrorMessage(field.name)}
-                                        <Button label="Submit" type="submit" icon="pi pi-check" />
-                                    </>
-                                )}
-                            />
-                        </div>
-                    </form>
-                </div>
-            </div>
-
-            <DocSectionCode code={code} dependencies={{ 'react-hook-form': '^7.39.4' }} />
-        </>
-    );
-}
diff --git a/components/doc/radiobutton/invaliddoc.js b/components/doc/radiobutton/invaliddoc.js
index b942f386f9..d24f4397f6 100644
--- a/components/doc/radiobutton/invaliddoc.js
+++ b/components/doc/radiobutton/invaliddoc.js
@@ -5,7 +5,7 @@ import { RadioButton } from '@/components/lib/radiobutton/RadioButton';
 export function InvalidDoc(props) {
     const code = {
         basic: `
-<RadioButton className="p-invalid" />
+<RadioButton invalid/>
         `,
         javascript: `
 import React from 'react'; 
@@ -14,7 +14,7 @@ import { RadioButton } from "primereact/radiobutton";
 export default function InvalidDemo() {
     return (
         <div className="card flex justify-content-center align-items-center">
-            <RadioButton className="p-invalid" />
+            <RadioButton invalid/>
         </div>
     )
 }
@@ -26,7 +26,7 @@ import { RadioButton } from "primereact/radiobutton";
 export default function InvalidDemo() {
     return (
         <div className="card flex justify-content-center align-items-center">
-            <RadioButton className="p-invalid" />
+            <RadioButton invalid/>
         </div>
     )
 }
@@ -37,11 +37,11 @@ export default function InvalidDemo() {
         <>
             <DocSectionText {...props}>
                 <p>
-                    Invalid state style is added using the <i>p-invalid</i> class to indicate a failed validation.
+                    Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.
                 </p>
             </DocSectionText>
             <div className="card flex justify-content-center align-items-center">
-                <RadioButton className="p-invalid" />
+                <RadioButton invalid />
             </div>
             <DocSectionCode code={code} />
         </>
diff --git a/components/doc/radiobutton/validationdoc.js b/components/doc/radiobutton/validationdoc.js
deleted file mode 100644
index 51e6434d69..0000000000
--- a/components/doc/radiobutton/validationdoc.js
+++ /dev/null
@@ -1,256 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { Button } from '@/components/lib/button/Button';
-import { RadioButton } from '@/components/lib/radiobutton/RadioButton';
-import { classNames } from '@/components/lib/utils/Utils';
-import { useState } from 'react';
-import { Controller, useForm } from 'react-hook-form';
-
-export function ValidationDoc(props) {
-    const [formData, setFormData] = useState({});
-    const defaultValues = { ingredient: '' };
-    const form = useForm({ defaultValues });
-    const errors = form.formState.errors;
-
-    const onSubmit = (data) => {
-        setFormData(data);
-    };
-
-    const getFormErrorMessage = (name) => {
-        return errors[name] && <small className="p-error ml-2">{errors[name].message}</small>;
-    };
-
-    const code = {
-        basic: `
-<Controller
-    name="ingredient"
-    control={form.control}
-    rules={{ required: 'Ingredient is required.' }}
-    render={({ field, fieldState }) => (
-        <>
-            <div className="card flex justify-content-center">
-                <div className="flex flex-wrap gap-3">
-                    <div className="flex align-items-center">
-                        <RadioButton inputId="f1" {...field} name={field.name} inputRef={field.ref} value="Cheese" checked={field.value === 'Cheese'} className={classNames({ 'p-invalid': fieldState.error })} />
-                        <label htmlFor="f1" className={classNames('ml-2', { 'p-error': errors.ingredient })}>
-                            Cheese
-                        </label>
-                    </div>
-                    <div className="flex align-items-center">
-                        <RadioButton inputId="f2" {...field} name={field.name} value="Mushroom" checked={field.value === 'Mushroom'} className={classNames({ 'p-invalid': fieldState.error })} />
-                        <label htmlFor="f2" className={classNames('ml-2', { 'p-error': errors.ingredient })}>
-                            Mushroom
-                        </label>
-                    </div>
-                    <div className="flex align-items-center">
-                        <RadioButton inputId="f3" {...field} name={field.name} value="Pepper" checked={field.value === 'Pepper'} className={classNames({ 'p-invalid': fieldState.error })} />
-                        <label htmlFor="f3" className={classNames('ml-2', { 'p-error': errors.ingredient })}>
-                            Pepper
-                        </label>
-                    </div>
-                    <div className="flex align-items-center">
-                        <RadioButton inputId="f4" {...field} name={field.name} value="Onion" checked={field.value === 'Onion'} className={classNames({ 'p-invalid': fieldState.error })} />
-                        <label htmlFor="f4" className={classNames('ml-2', { 'p-error': errors.ingredient })}>
-                            Onion
-                        </label>
-                    </div>
-                </div>
-            </div>
-        </>
-    )}
-/>
-        `,
-        javascript: `
-import React, { useState } from 'react';
-import { Controller, useForm } from 'react-hook-form';
-import { Button } from 'primereact/button';
-import { classNames } from 'primereact/utils';
-import { RadioButton } from "primereact/radiobutton";
-
-export default function ValidationDemo() {
-    const [formData, setFormData] = useState({});
-    const defaultValues = {ingredient: ''};
-    const form = useForm({ defaultValues });
-    const errors = form.formState.errors;
-
-    const onSubmit = (data) => {
-        setFormData(data);
-    };
-
-    const getFormErrorMessage = (name) => {
-        return errors[name] && <small className="p-error ml-2">{errors[name].message}</small>
-    };
-
-    return (
-        <form onSubmit={form.handleSubmit(onSubmit)}>
-        <Controller
-            name="ingredient"
-            control={form.control}
-            rules={{ required: 'Ingredient is required.' }}
-            render={({ field, fieldState }) => (
-                <>
-                    <div className="card flex justify-content-center">
-                        <div className="flex flex-wrap gap-3">
-                            <div className="flex align-items-center">
-                                <RadioButton inputId="f1" {...field} name={field.name} inputRef={field.ref} value="Cheese" checked={field.value === 'Cheese'} className={classNames({ 'p-invalid': fieldState.error })} />
-                                <label htmlFor="f1" className={classNames('ml-2', { 'p-error': errors.ingredient })}>
-                                    Cheese
-                                </label>
-                            </div>
-                            <div className="flex align-items-center">
-                                <RadioButton inputId="f2" {...field} name={field.name} value="Mushroom" checked={field.value === 'Mushroom'} className={classNames({ 'p-invalid': fieldState.error })} />
-                                <label htmlFor="f2" className={classNames('ml-2', { 'p-error': errors.ingredient })}>
-                                    Mushroom
-                                </label>
-                            </div>
-                            <div className="flex align-items-center">
-                                <RadioButton inputId="f3" {...field} name={field.name} value="Pepper" checked={field.value === 'Pepper'} className={classNames({ 'p-invalid': fieldState.error })} />
-                                <label htmlFor="f3" className={classNames('ml-2', { 'p-error': errors.ingredient })}>
-                                    Pepper
-                                </label>
-                            </div>
-                            <div className="flex align-items-center">
-                                <RadioButton inputId="f4" {...field} name={field.name} value="Onion" checked={field.value === 'Onion'} className={classNames({ 'p-invalid': fieldState.error })} />
-                                <label htmlFor="f4" className={classNames('ml-2', { 'p-error': errors.ingredient })}>
-                                    Onion
-                                </label>
-                            </div>
-                        </div>
-                        <div className="flex align-items-center ml-8">
-                            {getFormErrorMessage(field.name)}
-                            <Button label="Submit" type="submit" icon="pi pi-check" />
-                        </div>
-                    </div>
-                </>
-            )}
-        />
-        </form>
-    )
-}
-        `,
-        typescript: `
-import React, { useState } from 'react';
-import { Controller, useForm } from 'react-hook-form';
-import { Button } from 'primereact/button';
-import { classNames } from 'primereact/utils';
-import { RadioButton } from "primereact/radiobutton";
-
-export default function InvalidDemo() {
-    const [formData, setFormData] = useState<any>({});
-    const defaultValues = {ingredient: ''};
-    const form = useForm({ defaultValues });
-    const errors = form.formState.errors;
-
-    const onSubmit = (data: any) => {
-        setFormData(data);
-    };
-
-    const getFormErrorMessage = (name: string) => {
-        return errors[name] && <small className="p-error">{errors[name].message}</small>
-    };
-
-    return (
-        <form onSubmit={form.handleSubmit(onSubmit)}>
-        <Controller
-            name="ingredient"
-            control={form.control}
-            rules={{ required: 'Ingredient is required.' }}
-            render={({ field, fieldState }) => (
-                <>
-                    <div className="card flex justify-content-center">
-                        <div className="flex flex-wrap gap-3">
-                            <div className="flex align-items-center">
-                                <RadioButton inputId="f1" {...field} name={field.name} inputRef={field.ref} value="Cheese" checked={field.value === 'Cheese'} className={classNames({ 'p-invalid': fieldState.error })} />
-                                <label htmlFor="f1" className={classNames('ml-2', { 'p-error': errors.ingredient })}>
-                                    Cheese
-                                </label>
-                            </div>
-                            <div className="flex align-items-center">
-                                <RadioButton inputId="f2" {...field} name={field.name} value="Mushroom" checked={field.value === 'Mushroom'} className={classNames({ 'p-invalid': fieldState.error })} />
-                                <label htmlFor="f2" className={classNames('ml-2', { 'p-error': errors.ingredient })}>
-                                    Mushroom
-                                </label>
-                            </div>
-                            <div className="flex align-items-center">
-                                <RadioButton inputId="f3" {...field} name={field.name} value="Pepper" checked={field.value === 'Pepper'} className={classNames({ 'p-invalid': fieldState.error })} />
-                                <label htmlFor="f3" className={classNames('ml-2', { 'p-error': errors.ingredient })}>
-                                    Pepper
-                                </label>
-                            </div>
-                            <div className="flex align-items-center">
-                                <RadioButton inputId="f4" {...field} name={field.name} value="Onion" checked={field.value === 'Onion'} className={classNames({ 'p-invalid': fieldState.error })} />
-                                <label htmlFor="f4" className={classNames('ml-2', { 'p-error': errors.ingredient })}>
-                                    Onion
-                                </label>
-                            </div>
-                        </div>
-                        <div className="flex align-items-center ml-8">
-                            {getFormErrorMessage(field.name)}
-                            <Button label="Submit" type="submit" icon="pi pi-check" />
-                        </div>
-                    </div>
-                </>
-            )}
-        />
-        </form>
-    )
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props}>
-                <p>
-                    <a href="https://react-hook-form.com/">React Hook Form</a> is another popular React library to handle forms.
-                </p>
-            </DocSectionText>
-
-            <form onSubmit={form.handleSubmit(onSubmit)}>
-                <Controller
-                    name="ingredient"
-                    control={form.control}
-                    rules={{ required: 'Ingredient is required.' }}
-                    render={({ field, fieldState }) => (
-                        <>
-                            <div className="card flex justify-content-center">
-                                <div className="flex flex-wrap gap-3">
-                                    <div className="flex align-items-center">
-                                        <RadioButton inputId="f1" {...field} name={field.name} inputRef={field.ref} value="Cheese" checked={field.value === 'Cheese'} className={classNames({ 'p-invalid': fieldState.error })} />
-                                        <label htmlFor="f1" className={classNames('ml-2', { 'p-error': errors.ingredient })}>
-                                            Cheese
-                                        </label>
-                                    </div>
-                                    <div className="flex align-items-center">
-                                        <RadioButton inputId="f2" {...field} name={field.name} value="Mushroom" checked={field.value === 'Mushroom'} className={classNames({ 'p-invalid': fieldState.error })} />
-                                        <label htmlFor="f2" className={classNames('ml-2', { 'p-error': errors.ingredient })}>
-                                            Mushroom
-                                        </label>
-                                    </div>
-                                    <div className="flex align-items-center">
-                                        <RadioButton inputId="f3" {...field} name={field.name} value="Pepper" checked={field.value === 'Pepper'} className={classNames({ 'p-invalid': fieldState.error })} />
-                                        <label htmlFor="f3" className={classNames('ml-2', { 'p-error': errors.ingredient })}>
-                                            Pepper
-                                        </label>
-                                    </div>
-                                    <div className="flex align-items-center">
-                                        <RadioButton inputId="f4" {...field} name={field.name} value="Onion" checked={field.value === 'Onion'} className={classNames({ 'p-invalid': fieldState.error })} />
-                                        <label htmlFor="f4" className={classNames('ml-2', { 'p-error': errors.ingredient })}>
-                                            Onion
-                                        </label>
-                                    </div>
-                                </div>
-                                <div className="flex align-items-center ml-8">
-                                    {getFormErrorMessage(field.name)}
-                                    <Button label="Submit" type="submit" icon="pi pi-check" />
-                                </div>
-                            </div>
-                        </>
-                    )}
-                />
-            </form>
-
-            <DocSectionCode code={code} dependencies={{ 'react-hook-form': '^7.39.4' }} />
-        </>
-    );
-}
diff --git a/components/doc/selectbutton/form/formikdoc.js b/components/doc/selectbutton/form/formikdoc.js
deleted file mode 100644
index 422b7fb62a..0000000000
--- a/components/doc/selectbutton/form/formikdoc.js
+++ /dev/null
@@ -1,223 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { Button } from '@/components/lib/button/Button';
-import { SelectButton } from '@/components/lib/selectbutton/SelectButton';
-import { Toast } from '@/components/lib/toast/Toast';
-import { classNames } from '@/components/lib/utils/Utils';
-import { useFormik } from 'formik';
-import { useRef } from 'react';
-
-export function FormikDoc(props) {
-    const toast = useRef(null);
-    const options = ['Off', 'On'];
-
-    const show = () => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: formik.values.item });
-    };
-
-    const formik = useFormik({
-        initialValues: {
-            item: null
-        },
-        validate: (data) => {
-            let errors = {};
-
-            if (!data.item) {
-                errors.item = 'Engine State is required.';
-            }
-
-            return errors;
-        },
-        onSubmit: (data) => {
-            data && show();
-            formik.resetForm();
-        }
-    });
-
-    const isFormFieldInvalid = (name) => !!(formik.touched[name] && formik.errors[name]);
-
-    const getFormErrorMessage = (name) => {
-        return isFormFieldInvalid(name) ? <small className="p-error">{formik.errors[name]}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    const code = {
-        basic: `
-<label htmlFor="item" className={classNames('flex justify-content-center', { 'p-error': formik.errors.item })}>
-    Engine State
-</label>
-<SelectButton
-    id="item"
-    name="item"
-    value={formik.values.item}
-    options={options}
-    onChange={(e) => {
-        formik.setFieldValue('item', e.value);
-    }}
-    className={classNames('flex justify-content-center', { 'p-invalid': formik.errors.item })}
-/>
-<Button label="Submit" type="submit" icon="pi pi-check" />
-        `,
-        javascript: `
-import React, { useRef } from "react";
-import { useFormik } from 'formik';
-import { SelectButton } from 'primereact/selectbutton';
-import { Button } from 'primereact/button';
-import { Toast } from 'primereact/toast';
-import { classNames } from 'primereact/utils';
-
-
-export default function FormikDoc() {
-    const toast = useRef(null);
-    const options = ['Off', 'On'];
-
-    const show = () => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: formik.values.item });
-    };
-
-    const formik = useFormik({
-        initialValues: {
-            item: null
-        },
-        validate: (data) => {
-            let errors = {};
-
-            if (!data.item) {
-                errors.item = 'Engine State is required.';
-            }
-
-            return errors;
-        },
-        onSubmit: (data) => {
-            data && show();
-            formik.resetForm();
-        }
-    });
-
-    const isFormFieldInvalid = (name) => !!(formik.touched[name] && formik.errors[name]);
-
-    const getFormErrorMessage = (name) => {
-        return isFormFieldInvalid(name) ? <small className="p-error">{formik.errors[name]}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    return (
-        <div className="card flex justify-content-center">
-            <form onSubmit={formik.handleSubmit} className="flex flex-column align-items-center gap-2">
-                <Toast ref={toast} />
-                <label htmlFor="item" className={classNames('flex justify-content-center', { 'p-error': formik.errors.item })}>
-                    Engine State
-                </label>
-                <SelectButton
-                    id="item"
-                    name="item"
-                    value={formik.values.item}
-                    options={options}
-                    onChange={(e) => {
-                        formik.setFieldValue('item', e.value);
-                    }}
-                    className={classNames('flex justify-content-center', { 'p-invalid': formik.errors.item })}
-                />
-                {getFormErrorMessage('item')}
-                <Button label="Submit" type="submit" icon="pi pi-check" />
-            </form>
-        </div>
-    )
-}
-        `,
-        typescript: `
-import React, { useRef } from "react";
-import { useFormik } from 'formik';
-import { SelectButton } from 'primereact/selectbutton';
-import { Button } from 'primereact/button';
-import { Toast } from 'primereact/toast';
-import { classNames } from 'primereact/utils';
-
-export default function FormikDoc() {
-    const toast = useRef(null);
-    const options = ['Off', 'On'];
-
-    const show = () => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: formik.values.item });
-    };
-
-    const formik = useFormik({
-        initialValues: {
-            item: null
-        },
-        validate: (data) => {
-            let errors = {};
-
-            if (!data.item) {
-                errors.item = 'Engine State is required.';
-            }
-
-            return errors;
-        },
-        onSubmit: (data) => {
-            data && show();
-            formik.resetForm();
-        }
-    });
-
-    const isFormFieldInvalid = (name) => !!(formik.touched[name] && formik.errors[name]);
-
-    const getFormErrorMessage = (name) => {
-        return isFormFieldInvalid(name) ? <small className="p-error">{formik.errors[name]}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    return (
-        <div className="card flex justify-content-center">
-            <form onSubmit={formik.handleSubmit} className="flex flex-column align-items-center gap-2">
-                <Toast ref={toast} />
-                <label htmlFor="item" className={classNames('flex justify-content-center', { 'p-error': formik.errors.item })}>
-                    Engine State
-                </label>
-                <SelectButton
-                    id="item"
-                    name="item"
-                    value={formik.values.item}
-                    options={options}
-                    onChange={(e) => {
-                        formik.setFieldValue('item', e.value);
-                    }}
-                    className={classNames('flex justify-content-center', { 'p-invalid': formik.errors.item })}
-                />
-                {getFormErrorMessage('item')}
-                <Button label="Submit" type="submit" icon="pi pi-check" />
-            </form>
-        </div>
-    )
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props}>
-                <p>
-                    <a href="https://formik.org/">Formik</a> is a popular library for handling forms in React.
-                </p>
-            </DocSectionText>
-            <div className="card flex justify-content-center">
-                <form onSubmit={formik.handleSubmit} className="flex flex-column align-items-center gap-2">
-                    <Toast ref={toast} />
-                    <label htmlFor="item" className={classNames('flex justify-content-center', { 'p-error': formik.errors.item })}>
-                        Engine State
-                    </label>
-                    <SelectButton
-                        id="item"
-                        name="item"
-                        value={formik.values.item}
-                        options={options}
-                        onChange={(e) => {
-                            formik.setFieldValue('item', e.value);
-                        }}
-                        className={classNames('flex justify-content-center', { 'p-invalid': formik.errors.item })}
-                    />
-                    {getFormErrorMessage('item')}
-                    <Button label="Submit" type="submit" icon="pi pi-check" />
-                </form>
-            </div>
-            <DocSectionCode code={code} dependencies={{ formik: '^2.2.6' }} />
-        </>
-    );
-}
diff --git a/components/doc/selectbutton/form/hookformdoc.js b/components/doc/selectbutton/form/hookformdoc.js
deleted file mode 100644
index 19b9edb48c..0000000000
--- a/components/doc/selectbutton/form/hookformdoc.js
+++ /dev/null
@@ -1,187 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { Button } from '@/components/lib/button/Button';
-import { SelectButton } from '@/components/lib/selectbutton/SelectButton';
-import { Toast } from '@/components/lib/toast/Toast';
-import { classNames } from '@/components/lib/utils/Utils';
-import { useRef } from 'react';
-import { Controller, useForm } from 'react-hook-form';
-
-export function HookFormDoc(props) {
-    const options = ['Off', 'On'];
-    const defaultValues = { value: '' };
-    const form = useForm({ defaultValues });
-    const errors = form.formState.errors;
-    const toast = useRef(null);
-
-    const show = () => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: form.getValues('value') });
-    };
-
-    const onSubmit = (data) => {
-        data.value && show();
-
-        form.reset();
-    };
-
-    const getFormErrorMessage = (name) => {
-        return errors[name] ? <small className="p-error">{errors[name].message}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    const code = {
-        basic: `
-<Controller
-    name="value"
-    control={form.control}
-    rules={{ required: 'Engine State is required.' }}
-    render={({ field, fieldState }) => (
-        <>
-            <label htmlFor={field.name} className={classNames('flex justify-content-center', { 'p-error': errors.value })}>
-                Engine State
-            </label>
-            <SelectButton id={field.name} options={options} {...field} className={classNames('flex justify-content-center', { 'p-invalid': fieldState.error })} />
-            {getFormErrorMessage(field.name)}
-        </>
-    )}
-/>
-<Button label="Submit" type="submit" icon="pi pi-check" />
-        `,
-        javascript: `
-import React, { useRef } from 'react';
-import { Controller, useForm } from 'react-hook-form';
-import { Button } from 'primereact/button';
-import { classNames } from 'primereact/utils';
-import { SelectButton } from "primereact/selectbutton";
-import { Toast } from 'primereact/toast';
-
-export default function HookFormDoc() {
-    const options = ['Off', 'On'];
-    const defaultValues = { value: '' };
-    const form = useForm({ defaultValues });
-    const errors = form.formState.errors;
-    const toast = useRef(null);
-
-    const show = () => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: form.getValues('value') });
-    };
-
-    const onSubmit = (data) => {
-        data.value && show();
-
-        form.reset();
-    };
-
-    const getFormErrorMessage = (name) => {
-        return errors[name] ? <small className="p-error">{errors[name].message}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    return (
-        <div className="card flex justify-content-center">
-            <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-column align-items-center gap-2">
-                <Toast ref={toast} />
-                <Controller
-                    name="value"
-                    control={form.control}
-                    rules={{ required: 'Engine State is required.' }}
-                    render={({ field, fieldState }) => (
-                        <>
-                            <label htmlFor={field.name} className={classNames('flex justify-content-center', { 'p-error': errors.value })}>
-                                Engine State
-                            </label>
-                            <SelectButton id={field.name} options={options} {...field} className={classNames('flex justify-content-center', { 'p-invalid': fieldState.error })} />
-                            {getFormErrorMessage(field.name)}
-                        </>
-                    )}
-                />
-                <Button label="Submit" type="submit" icon="pi pi-check" />
-            </form>
-        </div>
-    )
-}
-        `,
-        typescript: `
-import React, { useRef } from 'react';
-import { Controller, useForm } from 'react-hook-form';
-import { Button } from 'primereact/button';
-import { classNames } from 'primereact/utils';
-import { SelectButton } from "primereact/selectbutton";
-import { Toast } from 'primereact/toast';
-
-export default function HookFormDoc() {
-    const options = ['Off', 'On'];
-    const defaultValues = { value: '' };
-    const form = useForm({ defaultValues });
-    const errors = form.formState.errors;
-    const toast = useRef(null);
-
-    const show = () => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: form.getValues('value') });
-    };
-
-    const onSubmit = (data) => {
-        data.value && show();
-
-        form.reset();
-    };
-
-    const getFormErrorMessage = (name) => {
-        return errors[name] ? <small className="p-error">{errors[name].message}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    return (
-        <div className="card flex justify-content-center">
-            <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-column align-items-center gap-2">
-                <Toast ref={toast} />
-                <Controller
-                    name="value"
-                    control={form.control}
-                    rules={{ required: 'Engine State is required.' }}
-                    render={({ field, fieldState }) => (
-                        <>
-                            <label htmlFor={field.name} className={classNames('flex justify-content-center', { 'p-error': errors.value })}>
-                                Engine State
-                            </label>
-                            <SelectButton id={field.name} options={options} {...field} className={classNames('flex justify-content-center', { 'p-invalid': fieldState.error })} />
-                            {getFormErrorMessage(field.name)}
-                        </>
-                    )}
-                />
-                <Button label="Submit" type="submit" icon="pi pi-check" />
-            </form>
-        </div>
-    )
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props}>
-                <p>
-                    <a href="https://react-hook-form.com/">React Hook Form</a> is another popular React library to handle forms.
-                </p>
-            </DocSectionText>
-            <div className="card flex justify-content-center">
-                <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-column align-items-center gap-2">
-                    <Toast ref={toast} />
-                    <Controller
-                        name="value"
-                        control={form.control}
-                        rules={{ required: 'Engine State is required.' }}
-                        render={({ field, fieldState }) => (
-                            <>
-                                <label htmlFor={field.name} className={classNames('flex justify-content-center', { 'p-error': errors.value })}>
-                                    Engine State
-                                </label>
-                                <SelectButton id={field.name} options={options} {...field} className={classNames('flex justify-content-center', { 'p-invalid': fieldState.error })} />
-                                {getFormErrorMessage(field.name)}
-                            </>
-                        )}
-                    />
-                    <Button label="Submit" type="submit" icon="pi pi-check" />
-                </form>
-            </div>
-            <DocSectionCode code={code} dependencies={{ 'react-hook-form': '^7.39.4' }} />
-        </>
-    );
-}
diff --git a/components/doc/selectbutton/invaliddoc.js b/components/doc/selectbutton/invaliddoc.js
index 0d37568889..2ae5a01c88 100644
--- a/components/doc/selectbutton/invaliddoc.js
+++ b/components/doc/selectbutton/invaliddoc.js
@@ -9,7 +9,7 @@ export function InvalidDoc(props) {
 
     const code = {
         basic: `
-<SelectButton value={value} onChange={(e) => setValue(e.value)} options={options} className="p-invalid" />
+<SelectButton invalid value={value} onChange={(e) => setValue(e.value)} options={options} />
         `,
         javascript: `
 import React, { useState } from "react";
@@ -21,7 +21,7 @@ export default function InvalidDemo() {
 
     return (
         <div className="card flex justify-content-center">
-            <SelectButton value={value} onChange={(e) => setValue(e.value)} options={options} className="p-invalid" />
+            <SelectButton invalid value={value} onChange={(e) => setValue(e.value)} options={options} />
         </div>
     );
 }
@@ -36,7 +36,7 @@ export default function InvalidDemo() {
 
     return (
         <div className="card flex justify-content-center">
-            <SelectButton value={value} onChange={(e: SelectButtonChangeEvent) => setValue(e.value)} options={options} className="p-invalid" />
+            <SelectButton invalid value={value} onChange={(e: SelectButtonChangeEvent) => setValue(e.value)} options={options} />
         </div>
     );
 }
@@ -47,11 +47,11 @@ export default function InvalidDemo() {
         <>
             <DocSectionText {...props}>
                 <p>
-                    Invalid state style is added using the <i>p-invalid</i> class to indicate a failed validation.
+                    Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.
                 </p>
             </DocSectionText>
             <div className="card flex justify-content-center">
-                <SelectButton value={value} onChange={(e) => setValue(e.value)} options={options} className="p-invalid" />
+                <SelectButton invalid value={value} onChange={(e) => setValue(e.value)} options={options} />
             </div>
             <DocSectionCode code={code} />
         </>
diff --git a/components/doc/slider/filterdoc.js b/components/doc/slider/filterdoc.js
new file mode 100644
index 0000000000..5897a8ba27
--- /dev/null
+++ b/components/doc/slider/filterdoc.js
@@ -0,0 +1,126 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { SelectButton } from '@/components/lib/selectbutton/SelectButton';
+import { Slider } from '@/components/lib/slider/Slider';
+import { useState } from 'react';
+
+export function FilterDoc(props) {
+    const [filter, setFilter] = useState(0);
+    const [filterValues, setFilterValues] = useState([100, 100, 0]);
+
+    const filterOptions = [
+        { label: 'Contrast', value: 0 },
+        { label: 'Brightness', value: 1 },
+        { label: 'Sepia', value: 2 }
+    ];
+
+    const filterStyle = () => {
+        return {
+            filter: `contrast(${filterValues[0]}%) brightness(${filterValues[1]}%) sepia(${filterValues[2]}%)`
+        };
+    };
+
+    const code = {
+        basic: `
+<img alt="user header" class="w-full md:w-20rem border-round mb-4" src="https://primefaces.org/cdn/primevue/images/card-vue.jpg" style={filterStyle()} />
+<SelectButton value={filter} onChange={(e) => setFilter(e.value)} options={filterOptions} className="mb-3" />
+<Slider
+    value={filterValues[filter]}
+    onChange={(e) => {
+        const newFilterValues = [...filterValues];
+        newFilterValues[filter] = e.value;
+        setFilterValues(newFilterValues);
+    }}
+    className="w-14rem"
+    min={0}
+    max={200}
+/>
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { Slider } from "primereact/slider";
+import { SelectButton } from "primereact/selectbutton";
+
+export default function FilterDemo() {
+    const [value, setValue] = useState(null);
+
+    return (
+        <div className="card flex justify-content-center">
+            <div class="flex flex-column align-items-center">
+                <img alt="user header" class="w-full md:w-20rem border-round mb-4" src="https://primefaces.org/cdn/primevue/images/card-vue.jpg" style={filterStyle()} />
+                <SelectButton value={filter} onChange={(e) => setFilter(e.value)} options={filterOptions} className="mb-3" />
+                <Slider
+                    value={filterValues[filter]}
+                    onChange={(e) => {
+                        const newFilterValues = [...filterValues];
+                        newFilterValues[filter] = e.value;
+                        setFilterValues(newFilterValues);
+                    }}
+                    className="w-14rem"
+                    min={0}
+                    max={200}
+                />
+            </div>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { Slider, SliderChangeEvent } from "primereact/slider";
+import { SelectButton } from "primereact/selectbutton";
+
+export default function FilterDemo() {
+    const [value, setValue] = useState<number>(null);
+
+    return (
+        <div className="card flex justify-content-center">
+            <div class="flex flex-column align-items-center">
+                <img alt="user header" class="w-full md:w-20rem border-round mb-4" src="https://primefaces.org/cdn/primevue/images/card-vue.jpg" style={filterStyle()} />
+                <SelectButton value={filter} onChange={(e) => setFilter(e.value)} options={filterOptions} className="mb-3" />
+                <Slider
+                    value={filterValues[filter]}
+                    onChange={(e) => {
+                        const newFilterValues = [...filterValues];
+                        newFilterValues[filter] = e.value;
+                        setFilterValues(newFilterValues);
+                    }}
+                    className="w-14rem"
+                    min={0}
+                    max={200}
+                />
+            </div>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Slider is used as a controlled input with <i>value</i> and <i>onChange</i> properties.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <div class="flex flex-column align-items-center">
+                    <img alt="user header" class="w-full md:w-20rem border-round mb-4" src="https://primefaces.org/cdn/primevue/images/card-vue.jpg" style={filterStyle()} />
+                    <SelectButton value={filter} onChange={(e) => setFilter(e.value)} options={filterOptions} className="mb-3" />
+                    <Slider
+                        value={filterValues[filter]}
+                        onChange={(e) => {
+                            const newFilterValues = [...filterValues];
+                            newFilterValues[filter] = e.value;
+                            setFilterValues(newFilterValues);
+                        }}
+                        className="w-14rem"
+                        min={0}
+                        max={200}
+                    />
+                </div>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/splitbutton/iconsdoc.js b/components/doc/splitbutton/iconsdoc.js
new file mode 100644
index 0000000000..bbbd57b5b7
--- /dev/null
+++ b/components/doc/splitbutton/iconsdoc.js
@@ -0,0 +1,172 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { SplitButton } from '@/components/lib/splitbutton/SplitButton';
+import { Toast } from '@/components/lib/toast/Toast';
+import { useRouter } from 'next/router';
+import { useRef } from 'react';
+
+export function IconsDoc(props) {
+    const router = useRouter();
+    const toast = useRef(null);
+    const items = [
+        {
+            label: 'Update',
+            icon: 'pi pi-refresh',
+            command: () => {
+                toast.current.show({ severity: 'success', summary: 'Updated', detail: 'Data Updated' });
+            }
+        },
+        {
+            label: 'Delete',
+            icon: 'pi pi-times',
+            command: () => {
+                toast.current.show({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted' });
+            }
+        },
+        {
+            label: 'React Website',
+            icon: 'pi pi-external-link',
+            command: () => {
+                window.location.href = 'https://reactjs.org/';
+            }
+        },
+        {
+            label: 'Upload',
+            icon: 'pi pi-upload',
+            command: () => {
+                router.push('/fileupload');
+            }
+        }
+    ];
+
+    const save = () => {
+        toast.current.show({ severity: 'success', summary: 'Success', detail: 'Data Saved' });
+    };
+
+    const code = {
+        basic: `
+<Toast ref={toast}></Toast>
+<SplitButton label="Save" icon="pi pi-check" dropdownIcon="pi pi-cog" onClick={save} model={items} />
+        `,
+        javascript: `
+import React, { useRef } from 'react';
+//import { useRouter } from 'next/router';
+import { SplitButton } from 'primereact/splitbutton';
+import { Toast } from 'primereact/toast';
+
+export default function IconsDemo() {
+    //const router = useRouter();
+    const toast = useRef(null);
+    const items = [
+        {
+            label: 'Update',
+            icon: 'pi pi-refresh',
+            command: () => {
+                toast.current.show({ severity: 'success', summary: 'Updated', detail: 'Data Updated' });
+            }
+        },
+        {
+            label: 'Delete',
+            icon: 'pi pi-times',
+            command: () => {
+                toast.current.show({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted' });
+            }
+        },
+        {
+            label: 'React Website',
+            icon: 'pi pi-external-link',
+            command: () => {
+                window.location.href = 'https://reactjs.org/';
+            }
+        },
+        {
+            label: 'Upload',
+            icon: 'pi pi-upload',
+            command: () => {
+                //router.push('/fileupload');
+            }
+        }
+    ];
+
+    const save = () => {
+        toast.current.show({ severity: 'success', summary: 'Success', detail: 'Data Saved' });
+    };
+
+    return (
+        <div className="card flex justify-content-center">
+            <Toast ref={toast}></Toast>
+            <SplitButton label="Save" icon="pi pi-check" dropdownIcon="pi pi-cog" onClick={save} model={items} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useRef } from 'react';
+//import { useRouter } from 'next/router';
+import { SplitButton } from 'primereact/splitbutton';
+import { MenuItem } from 'primereact/menuitem';
+import { Toast } from 'primereact/toast';
+
+export default function IconsDemo() {
+    //const router = useRouter();
+    const toast = useRef<Toast>(null);
+    const items: MenuItem[] = [
+        {
+            label: 'Update',
+            icon: 'pi pi-refresh',
+            command: () => {
+                toast.current.show({ severity: 'success', summary: 'Updated', detail: 'Data Updated' });
+            }
+        },
+        {
+            label: 'Delete',
+            icon: 'pi pi-times',
+            command: () => {
+                toast.current.show({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted' });
+            }
+        },
+        {
+            label: 'React Website',
+            icon: 'pi pi-external-link',
+            command: () => {
+                window.location.href = 'https://reactjs.org/';
+            }
+        },
+        {
+            label: 'Upload',
+            icon: 'pi pi-upload',
+            command: () => {
+                //router.push('/fileupload');
+            }
+        }
+    ];
+
+    const save = () => {
+        toast.current.show({ severity: 'success', summary: 'Success', detail: 'Data Saved' });
+    };
+
+    return (
+        <div className="card flex justify-content-center">
+            <Toast ref={toast}></Toast>
+            <SplitButton label="Save" icon="pi pi-check" dropdownIcon="pi pi-cog" onClick={save} model={items} />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    SplitButton has a default action button and a collection of additional options defined by the <i>model</i> property based on MenuModel API.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Toast ref={toast} />
+                <SplitButton label="Save" icon="pi pi-check" dropdownIcon="pi pi-cog" onClick={save} model={items} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/steps/lineardoc.js b/components/doc/steps/lineardoc.js
new file mode 100644
index 0000000000..b6a174c276
--- /dev/null
+++ b/components/doc/steps/lineardoc.js
@@ -0,0 +1,86 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Steps } from '@/components/lib/steps/Steps';
+
+export function LinearDoc(props) {
+    const items = [
+        {
+            label: 'Personal Info'
+        },
+        {
+            label: 'Reservation'
+        },
+        {
+            label: 'Review'
+        }
+    ];
+
+    const code = {
+        basic: `
+<Steps readOnly model={items} />
+`,
+        javascript: `
+import React from 'react'; 
+import { Steps } from 'primereact/steps';
+
+export default function LinearDemo() {
+    const items = [
+        {
+            label: 'Personal Info'
+        },
+        {
+            label: 'Reservation'
+        },
+        {
+            label: 'Review'
+        }
+    ];
+
+    return (
+        <div className="card">
+            <Steps readOnly model={items} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react'; 
+import { Steps } from 'primereact/steps';
+import { MenuItem } from 'primereact/menuitem';
+
+export default function LinearDemo() {
+    const items: MenuItem[] = [
+        {
+            label: 'Personal Info'
+        },
+        {
+            label: 'Reservation'
+        },
+        {
+            label: 'Review'
+        }
+    ];
+
+    return (
+        <div className="card">
+            <Steps readOnly model={items} />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Steps is linear by default to enforce completion of a previus step to proceed, set <i>readOnly</i> as false for non-linear mode.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <Steps readOnly model={items} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/togglebutton/disableddoc.js b/components/doc/togglebutton/disableddoc.js
new file mode 100644
index 0000000000..89b9421540
--- /dev/null
+++ b/components/doc/togglebutton/disableddoc.js
@@ -0,0 +1,56 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { ToggleButton } from '@/components/lib/togglebutton/ToggleButton';
+import { useState } from 'react';
+
+export function DisabledDoc(props) {
+    const [checked, setChecked] = useState(false);
+
+    const code = {
+        basic: `
+<ToggleButton disabled checked={checked} onChange={(e) => setChecked(e.value)} />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { ToggleButton } from 'primereact/togglebutton';
+
+export default function DisabledDemo() {
+    const [checked, setChecked] = useState(false);
+
+    return (
+        <div className="card flex justify-content-center">
+            <ToggleButton disabled checked={checked} onChange={(e) => setChecked(e.value)} className="w-8rem" />
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { ToggleButton, ToggleButtonChangeEvent } from 'primereact/togglebutton';
+
+export default function DisabledDemo() {
+    const [checked, setChecked] = useState<boolean>(false);
+
+    return (
+        <div className="card flex justify-content-center">
+            <ToggleButton disabled checked={checked} onChange={(e: ToggleButtonChangeEvent) => setChecked(e.value)} className="w-8rem" />
+        </div>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    When <i>disabled</i> is present, the element cannot be edited and focused.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <ToggleButton disabled checked={checked} onChange={(e) => setChecked(e.value)} className="w-8rem" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/togglebutton/form/formikdoc.js b/components/doc/togglebutton/form/formikdoc.js
deleted file mode 100644
index 9001712db0..0000000000
--- a/components/doc/togglebutton/form/formikdoc.js
+++ /dev/null
@@ -1,204 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { Button } from '@/components/lib/button/Button';
-import { Toast } from '@/components/lib/toast/Toast';
-import { ToggleButton } from '@/components/lib/togglebutton/ToggleButton';
-import { classNames } from '@/components/lib/utils/Utils';
-import { useFormik } from 'formik';
-import { useRef } from 'react';
-
-export function FormikDoc(props) {
-    const toast = useRef(null);
-
-    const show = () => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: formik.values.item.toString() });
-    };
-
-    const formik = useFormik({
-        initialValues: {
-            item: false
-        },
-        validate: (data) => {
-            let errors = {};
-
-            if (!data.item) {
-                errors.item = 'Checked is required.';
-            }
-
-            return errors;
-        },
-        onSubmit: (data) => {
-            data.item && show();
-            formik.resetForm();
-        }
-    });
-
-    const isFormFieldInvalid = (name) => !!(formik.touched[name] && formik.errors[name]);
-
-    const getFormErrorMessage = (name) => {
-        return isFormFieldInvalid(name) ? <small className="p-error">{formik.errors[name]}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    const code = {
-        basic: `
-<ToggleButton id="item"
-    name="item"
-    checked={formik.values.item}
-    onChange={(e) => {
-        formik.setFieldValue('item', e.value);
-    }}
-    className={classNames('w-6rem', { 'p-invalid': formik.errors.item })}
-/>
-{getFormErrorMessage('item')}
-<Button label="Submit" type="submit" icon="pi pi-check" />
-        `,
-        javascript: `
-import React, { useRef } from "react";
-import { useFormik } from 'formik';
-import { ToggleButton } from 'primereact/togglebutton';
-import { Button } from 'primereact/button';
-import { Toast } from 'primereact/toast';
-import { classNames } from 'primereact/utils';
-
-
-export default function FormikDoc() {
-    const toast = useRef(null);
-
-    const show = () => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: formik.values.item.toString() });
-    };
-
-    const formik = useFormik({
-        initialValues: {
-            item: false
-        },
-        validate: (data) => {
-            let errors = {};
-
-            if (!data.item) {
-                errors.item = 'Checked is required.';
-            }
-
-            return errors;
-        },
-        onSubmit: (data) => {
-            data.item && show();
-            formik.resetForm();
-        }
-    });
-
-    const isFormFieldInvalid = (name) => !!(formik.touched[name] && formik.errors[name]);
-
-    const getFormErrorMessage = (name) => {
-        return isFormFieldInvalid(name) ? <small className="p-error">{formik.errors[name]}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    return (
-        <div className="card flex justify-content-center">
-            <form onSubmit={formik.handleSubmit} className="flex flex-column align-items-center gap-2">
-                <Toast ref={toast} />
-                <ToggleButton
-                    id="item"
-                    name="item"
-                    checked={formik.values.item}
-                    onChange={(e) => {
-                        formik.setFieldValue('item', e.value);
-                    }}
-                    className={classNames('w-6rem', { 'p-invalid': formik.errors.item })}
-                />
-                {getFormErrorMessage('item')}
-                <Button label="Submit" type="submit" icon="pi pi-check" className="p-button-outlined" />
-            </form>
-        </div>
-    )
-}
-        `,
-        typescript: `
-import React, { useRef } from "react";
-import { useFormik } from 'formik';
-import { ToggleButton } from 'primereact/togglebutton';
-import { Button } from 'primereact/button';
-import { Toast } from 'primereact/toast';
-import { classNames } from 'primereact/utils';
-
-export default function FormikDoc() {
-    const toast = useRef<Toast | null>(null);
-
-    const show = () => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: formik.values.item.toString() });
-    };
-
-    const formik = useFormik({
-        initialValues: {
-            item: false
-        },
-        validate: (data) => {
-            let errors = {};
-
-            if (!data.item) {
-                errors.item = 'Checked is required.';
-            }
-
-            return errors;
-        },
-        onSubmit: (data) => {
-            data.item && show();
-            formik.resetForm();
-        }
-    });
-
-    const isFormFieldInvalid = (name) => !!(formik.touched[name] && formik.errors[name]);
-
-    const getFormErrorMessage = (name) => {
-        return isFormFieldInvalid(name) ? <small className="p-error">{formik.errors[name]}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    return (
-        <div className="card flex justify-content-center">
-            <form onSubmit={formik.handleSubmit} className="flex flex-column align-items-center gap-2">
-                <Toast ref={toast} />
-                <ToggleButton
-                    id="item"
-                    name="item"
-                    checked={formik.values.item}
-                    onChange={(e) => {
-                        formik.setFieldValue('item', e.value);
-                    }}
-                    className={classNames('w-6rem', { 'p-invalid': formik.errors.item })}
-                />
-                {getFormErrorMessage('item')}
-                <Button label="Submit" type="submit" icon="pi pi-check" className="p-button-outlined" />
-            </form>
-        </div>
-    )
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props}>
-                <p>
-                    <a href="https://formik.org/">Formik</a> is a popular library for handling forms in React.
-                </p>
-            </DocSectionText>
-            <div className="card flex justify-content-center">
-                <form onSubmit={formik.handleSubmit} className="flex flex-column align-items-center gap-2">
-                    <Toast ref={toast} />
-                    <ToggleButton
-                        id="item"
-                        name="item"
-                        checked={formik.values.item}
-                        onChange={(e) => {
-                            formik.setFieldValue('item', e.value);
-                        }}
-                        className={classNames('w-6rem', { 'p-invalid': formik.errors.item })}
-                    />
-                    {getFormErrorMessage('item')}
-                    <Button label="Submit" type="submit" icon="pi pi-check" className="p-button-outlined" />
-                </form>
-            </div>
-            <DocSectionCode code={code} dependencies={{ formik: '^2.2.6' }} />
-        </>
-    );
-}
diff --git a/components/doc/togglebutton/form/hookformdoc.js b/components/doc/togglebutton/form/hookformdoc.js
deleted file mode 100644
index 9b2f7dc49b..0000000000
--- a/components/doc/togglebutton/form/hookformdoc.js
+++ /dev/null
@@ -1,168 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { Button } from '@/components/lib/button/Button';
-import { Toast } from '@/components/lib/toast/Toast';
-import { ToggleButton } from '@/components/lib/togglebutton/ToggleButton';
-import { classNames } from '@/components/lib/utils/Utils';
-import { useRef } from 'react';
-import { Controller, useForm } from 'react-hook-form';
-
-export function HookFormDoc(props) {
-    const toast = useRef(null);
-    const defaultValues = { value: false };
-    const form = useForm({ defaultValues });
-    const errors = form.formState.errors;
-
-    const show = () => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: form.getValues('value').toString() });
-    };
-
-    const onSubmit = (data) => {
-        data.value && show();
-        form.reset();
-    };
-
-    const getFormErrorMessage = (name) => {
-        return errors[name] ? <small className="p-error">{errors[name].message}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    const code = {
-        basic: `
-<Controller
-    name="value"
-    control={form.control}
-    rules={{ required: 'Value is required.' }}
-    render={({ field, fieldState }) => (
-        <div className="flex flex-column align-items-center gap-2">
-            <ToggleButton id={field.name} checked={field.value} onChange={field.onChange} className={classNames('w-6rem', { 'p-invalid': fieldState.error })} />
-            {getFormErrorMessage(field.name)}
-        </div>
-    )}
-/>
-        `,
-        javascript: `
-import React, { useRef } from 'react';
-import { Controller, useForm } from 'react-hook-form';
-import { Button } from 'primereact/button';
-import { Toast } from 'primereact/toast';
-import { classNames } from 'primereact/utils';
-import { ToggleButton } from "primereact/togglebutton";
-
-export default function HookFormDoc() {
-    const toast = useRef(null);
-    const defaultValues = { value: false };
-    const form = useForm({ defaultValues });
-    const errors = form.formState.errors;
-
-    const show = () => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: form.getValues('value').toString() });
-    };
-
-    const onSubmit = (data) => {
-        data.value && show();
-        form.reset();
-    };
-
-    const getFormErrorMessage = (name) => {
-        return errors[name] ? <small className="p-error">{errors[name].message}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    return (
-        <div className="card flex justify-content-center">
-            <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-column align-items-center gap-2">
-                <Toast ref={toast} />
-                <Controller
-                    name="value"
-                    control={form.control}
-                    rules={{ required: 'Value is required.' }}
-                    render={({ field, fieldState }) => (
-                        <div className="flex flex-column align-items-center gap-2">
-                            <ToggleButton id={field.name} checked={field.value} onChange={field.onChange} className={classNames('w-6rem', { 'p-invalid': fieldState.error })} />
-                            {getFormErrorMessage(field.name)}
-                        </div>
-                    )}
-                />
-                <Button label="Submit" type="submit" icon="pi pi-check" className="p-button-outlined" />
-            </form>
-        </div>
-    )
-}
-        `,
-        typescript: `
-import React, { useRef } from 'react';
-import { Controller, useForm } from 'react-hook-form';
-import { Button } from 'primereact/button';
-import { Toast } from 'primereact/toast';
-import { classNames } from 'primereact/utils';
-import { ToggleButton } from "primereact/togglebutton";
-
-export default function HookFormDoc() {
-    const toast = useRef<Toast | null>(null);
-    const defaultValues = { value: false };
-    const form = useForm({ defaultValues });
-    const errors = form.formState.errors;
-
-    const show = () => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: form.getValues('value').toString() });
-    };
-
-    const onSubmit = (data) => {
-        data.value && show();
-        form.reset();
-    };
-
-    const getFormErrorMessage = (name) => {
-        return errors[name] ? <small className="p-error">{errors[name].message}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    return (
-        <div className="card flex justify-content-center">
-            <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-column align-items-center gap-2">
-                <Toast ref={toast} />
-                <Controller
-                    name="value"
-                    control={form.control}
-                    rules={{ required: 'Value is required.' }}
-                    render={({ field, fieldState }) => (
-                        <div className="flex flex-column align-items-center gap-2">
-                            <ToggleButton id={field.name} checked={field.value} onChange={field.onChange} className={classNames('w-6rem', { 'p-invalid': fieldState.error })} />
-                            {getFormErrorMessage(field.name)}
-                        </div>
-                    )}
-                />
-                <Button label="Submit" type="submit" icon="pi pi-check" className="p-button-outlined" />
-            </form>
-        </div>
-    )
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props}>
-                <p>
-                    <a href="https://react-hook-form.com/">React Hook Form</a> is another popular React library to handle forms.
-                </p>
-            </DocSectionText>
-            <div className="card flex justify-content-center">
-                <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-column align-items-center gap-2">
-                    <Toast ref={toast} />
-                    <Controller
-                        name="value"
-                        control={form.control}
-                        rules={{ required: 'Value is required.' }}
-                        render={({ field, fieldState }) => (
-                            <div className="flex flex-column align-items-center gap-2">
-                                <ToggleButton id={field.name} checked={field.value} onChange={field.onChange} className={classNames('w-6rem', { 'p-invalid': fieldState.error })} />
-                                {getFormErrorMessage(field.name)}
-                            </div>
-                        )}
-                    />
-                    <Button label="Submit" type="submit" icon="pi pi-check" className="p-button-outlined" />
-                </form>
-            </div>
-            <DocSectionCode code={code} dependencies={{ 'react-hook-form': '^7.39.4' }} />
-        </>
-    );
-}
diff --git a/components/doc/togglebutton/invaliddoc.js b/components/doc/togglebutton/invaliddoc.js
new file mode 100644
index 0000000000..2f94e51fb8
--- /dev/null
+++ b/components/doc/togglebutton/invaliddoc.js
@@ -0,0 +1,56 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { ToggleButton } from '@/components/lib/togglebutton/ToggleButton';
+import { useState } from 'react';
+
+export function InvalidDoc(props) {
+    const [checked, setChecked] = useState(false);
+
+    const code = {
+        basic: `
+<ToggleButton invalid onIcon="pi pi-check" offIcon="pi pi-times" checked={checked} onChange={(e) => setChecked(e.value)} />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { ToggleButton } from 'primereact/togglebutton';
+
+export default function InvalidDemo() {
+    const [checked, setChecked] = useState(false);
+
+    return (
+        <div className="card flex justify-content-center">
+            <ToggleButton invalid onIcon="pi pi-check" offIcon="pi pi-times" checked={checked} onChange={(e) => setChecked(e.value)} className="w-8rem" />
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { ToggleButton, ToggleButtonChangeEvent } from 'primereact/togglebutton';
+
+export default function InvalidDemo() {
+    const [checked, setChecked] = useState<boolean>(false);
+
+    return (
+        <div className="card flex justify-content-center">
+            <ToggleButton invalid onIcon="pi pi-check" offIcon="pi pi-times" checked={checked} onChange={(e: ToggleButtonChangeEvent) => setChecked(e.value)} className="w-8rem" />
+        </div>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <ToggleButton invalid onIcon="pi pi-check" offIcon="pi pi-times" checked={checked} onChange={(e) => setChecked(e.value)} className="w-8rem" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/treeselect/filleddoc.js b/components/doc/treeselect/filleddoc.js
new file mode 100644
index 0000000000..1fb1c3ab5b
--- /dev/null
+++ b/components/doc/treeselect/filleddoc.js
@@ -0,0 +1,107 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { TreeSelect } from '@/components/lib/treeselect/TreeSelect';
+import { useEffect, useState } from 'react';
+import { NodeService } from '../../../service/NodeService';
+
+export function FilledDoc(props) {
+    const [nodes, setNodes] = useState(null);
+    const [selectedNodeKey, setSelectedNodeKey] = useState(null);
+
+    useEffect(() => {
+        NodeService.getTreeNodes().then((data) => setNodes(data));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const code = {
+        basic: `
+<TreeSelect variant="filled" value={selectedNodeKey} onChange={(e) => setSelectedNodeKey(e.value)} options={nodes} 
+    className="md:w-20rem w-full" placeholder="Select Item"></TreeSelect>
+        `,
+        javascript: `
+import React, { useState, useEffect } from "react";
+import { TreeSelect } from 'primereact/treeselect';
+import { NodeService } from './service/NodeService';
+
+export default function FilledDemo() {
+    const [nodes, setNodes] = useState(null);
+    const [selectedNodeKey, setSelectedNodeKey] = useState(null);
+    
+    useEffect(() => {
+        NodeService.getTreeNodes().then((data) => setNodes(data));
+    }, []);
+
+    return (
+        <div className="card flex justify-content-center">
+            <TreeSelect variant="filled" value={selectedNodeKey} onChange={(e) => setSelectedNodeKey(e.value)} options={nodes} 
+                className="md:w-20rem w-full" placeholder="Select Item"></TreeSelect>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from "react";
+import { TreeSelect, TreeSelectChangeEvent } from 'primereact/treeselect';
+import { TreeNode } from 'primereact/treenode';
+import { NodeService } from './service/NodeService';
+
+export default function FilledDemo() {
+    const [nodes, setNodes] = useState<TreeNode[] | null>(null);
+    const [selectedNodeKey, setSelectedNodeKey] = useState<string>(null);
+    
+    useEffect(() => {
+        NodeService.getTreeNodes().then((data) => setNodes(data));
+    }, []);
+
+    return (
+        <div className="card flex justify-content-center">
+            <TreeSelect variant="filled" value={selectedNodeKey} options={nodes} onChange={(e : TreeSelectChangeEvent) => setSelectedNodeKey(e.value)} 
+                className="md:w-20rem w-full" placeholder="Select Item"></TreeSelect>
+        </div>
+    );
+}
+        `,
+        data: `
+/* NodeService */
+{
+    key: '0',
+    label: 'Documents',
+    data: 'Documents Folder',
+    icon: 'pi pi-fw pi-inbox',
+    children: [
+        {
+            key: '0-0',
+            label: 'Work',
+            data: 'Work Folder',
+            icon: 'pi pi-fw pi-cog',
+            children: [
+                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
+                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
+            ]
+        },
+        {
+            key: '0-1',
+            label: 'Home',
+            data: 'Home Folder',
+            icon: 'pi pi-fw pi-home',
+            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
+        }
+    ]
+},
+...
+`
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <TreeSelect variant="filled" value={selectedNodeKey} onChange={(e) => setSelectedNodeKey(e.value)} options={nodes} className="md:w-20rem w-full" placeholder="Select Item" />
+            </div>
+            <DocSectionCode code={code} service={['NodeService']} />
+        </>
+    );
+}
diff --git a/components/doc/treeselect/floatlabeldoc.js b/components/doc/treeselect/floatlabeldoc.js
index 701b96d910..432ffdfe60 100644
--- a/components/doc/treeselect/floatlabeldoc.js
+++ b/components/doc/treeselect/floatlabeldoc.js
@@ -1,6 +1,8 @@
 import { DocSectionCode } from '@/components/doc/common/docsectioncode';
 import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { FloatLabel } from '@/components/lib/floatlabel/FloatLabel';
 import { TreeSelect } from '@/components/lib/treeselect/TreeSelect';
+import Link from 'next/link';
 import { useEffect, useState } from 'react';
 import { NodeService } from '../../../service/NodeService';
 
@@ -14,15 +16,16 @@ export function FloatLabelDoc(props) {
 
     const code = {
         basic: `
-<span className="p-float-label w-full md:w-20rem">
+<FloatLabel className="w-full md:w-20rem">
     <TreeSelect inputId="treeselect" value={selectedNodeKey} onChange={(e) => setSelectedNodeKey(e.value)} options={nodes} 
         className="w-full"></TreeSelect>
     <label htmlFor="treeselect">TreeSelect</label>
-</span>
+</FloatLabel>
         `,
         javascript: `
 import React, { useState, useEffect } from "react";
 import { TreeSelect } from 'primereact/treeselect';
+import { FloatLabel } from 'primereact/floatlabel';
 import { NodeService } from './service/NodeService';
 
 export default function FloatLabelDemo() {
@@ -35,11 +38,11 @@ export default function FloatLabelDemo() {
 
     return (
         <div className="card flex justify-content-center">
-            <span className="p-float-label w-full md:w-20rem">
+            <FloatLabel className="w-full md:w-20rem">
                 <TreeSelect inputId="treeselect" value={selectedNodeKey} onChange={(e) => setSelectedNodeKey(e.value)} options={nodes} 
                     className="w-full"></TreeSelect>
                 <label htmlFor="treeselect">TreeSelect</label>
-            </span>
+            </FloatLabel>
         </div>
     );
 }
@@ -47,6 +50,7 @@ export default function FloatLabelDemo() {
         typescript: `
 import React, { useState, useEffect } from "react";
 import { TreeSelect, TreeSelectChangeEvent } from 'primereact/treeselect';
+import { FloatLabel } from 'primereact/floatlabel';
 import { TreeNode } from 'primereact/treenode';
 import { NodeService } from './service/NodeService';
 
@@ -60,11 +64,11 @@ export default function FloatLabelDemo() {
 
     return (
         <div className="card flex justify-content-center">
-            <span className="p-float-label w-full md:w-20rem">
+            <FloatLabel className="w-full md:w-20rem">
                 <TreeSelect inputId="treeselect" value={selectedNodeKey} options={nodes} onChange={(e : TreeSelectChangeEvent) => setSelectedNodeKey(e.value)} 
                     className="w-full"></TreeSelect>
                 <label htmlFor="treeselect">TreeSelect</label>
-            </span>
+            </FloatLabel>
         </div>
     );
 }
@@ -103,13 +107,15 @@ export default function FloatLabelDemo() {
     return (
         <>
             <DocSectionText {...props}>
-                <p>A floating label appears on top of the input field when focused.</p>
+                <p>
+                    A floating label appears on top of the input field when focused. Visit <Link href="/floatlabel">FloatLabel</Link> documentation for more information.
+                </p>
             </DocSectionText>
             <div className="card flex justify-content-center">
-                <span className=" p-float-label w-full md:w-20rem">
+                <FloatLabel className="w-full md:w-20rem">
                     <TreeSelect inputId="treeselect" value={selectedNodeKey} onChange={(e) => setSelectedNodeKey(e.value)} options={nodes} className="w-full" />
                     <label htmlFor="treeselect">TreeSelect</label>
-                </span>
+                </FloatLabel>
             </div>
             <DocSectionCode code={code} service={['NodeService']} />
         </>
diff --git a/components/doc/treeselect/form/formikdoc.js b/components/doc/treeselect/form/formikdoc.js
deleted file mode 100644
index e773d193a4..0000000000
--- a/components/doc/treeselect/form/formikdoc.js
+++ /dev/null
@@ -1,230 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { Button } from '@/components/lib/button/Button';
-import { Toast } from '@/components/lib/toast/Toast';
-import { TreeSelect } from '@/components/lib/treeselect/TreeSelect';
-import { classNames } from '@/components/lib/utils/Utils';
-import { useFormik } from 'formik';
-import { useEffect, useRef, useState } from 'react';
-import { NodeService } from '../../../../service/NodeService';
-
-export function FormikDoc(props) {
-    const toast = useRef(null);
-    const [node, setNodes] = useState([]);
-
-    useEffect(() => {
-        NodeService.getTreeNodes().then((data) => setNodes(data));
-    }, []); // eslint-disable-line react-hooks/exhaustive-deps
-
-    const show = () => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: 'The form is successfully submitted.' });
-    };
-
-    const formik = useFormik({
-        initialValues: {
-            item: ''
-        },
-        validate: (data) => {
-            let errors = {};
-
-            if (!data.item) {
-                errors.item = 'Value is required.';
-            }
-
-            return errors;
-        },
-        onSubmit: (data) => {
-            data.item && show();
-            formik.resetForm();
-        }
-    });
-
-    const isFormFieldInvalid = (name) => !!(formik.touched[name] && formik.errors[name]);
-
-    const getFormErrorMessage = (name) => {
-        return isFormFieldInvalid(name) ? <small className="p-error">{formik.errors[name]}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    const code = {
-        basic: `
-<Toast ref={toast} />
-<TreeSelect
-    id="item"
-    name="item"
-    value={formik.values.item}
-    options={node}
-    placeholder="Select Item"
-    className={classNames('w-full md:w-20rem', { 'p-invalid': isFormFieldInvalid('item') })}
-    onChange={(e) => {
-        formik.setFieldValue('item', e.value);
-    }}
-/>
-{getFormErrorMessage('item')}
-<Button type="submit" label="Submit" />
-        `,
-        javascript: `
-import React, { useState, useEffect, useRef } from "react";
-import { useFormik } from 'formik';
-import { Button } from 'primereact/button';
-import { TreeSelect } from "primereact/treeselect";
-import { Toast } from 'primereact/toast';
-import { NodeService } from './service/NodeService';
-
-export default function FormikDoc() {
-    const toast = useRef(null);
-    const [node, setNodes] = useState([]);
-
-    useEffect(() => {
-        NodeService.getTreeNodes().then((data) => setNodes(data));
-    }, []); // eslint-disable-line react-hooks/exhaustive-deps
-
-    const show = () => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: 'The form is successfully submitted.'});
-    };
-
-    const formik = useFormik({
-        initialValues: {
-            item: ''
-        },
-        validate: (data) => {
-            let errors = {};
-
-            if (!data.item) {
-                errors.item = 'Value is required.';
-            }
-
-            return errors;
-        },
-        onSubmit: (data) => {
-            data.item && show();
-            formik.resetForm();
-        }
-    });
-
-    const isFormFieldInvalid = (name) => !!(formik.touched[name] && formik.errors[name]);
-
-    const getFormErrorMessage = (name) => {
-        return isFormFieldInvalid(name) ? <small className="p-error">{formik.errors[name]}</small> : <small className="p-error">&nbsp;</small>;
-    };
-    
-    return (
-        <div className="card flex justify-content-center">
-            <form onSubmit={formik.handleSubmit} className="flex flex-column align-items-center gap-2">
-                <Toast ref={toast} />
-                <TreeSelect
-                    id="item"
-                    name="item"
-                    value={formik.values.item}
-                    options={node}
-                    placeholder="Select Item"
-                    className={classNames('w-full md:w-20rem', { 'p-invalid': isFormFieldInvalid('item') })}
-                    onChange={(e) => {
-                        formik.setFieldValue('item', e.value);
-                    }}
-                />
-                {getFormErrorMessage('item')}
-                <Button type="submit" label="Submit" />
-            </form>
-        </div>
-    )
-}
-        `,
-        typescript: `
-import React, { useState, useEffect, useRef } from "react";
-import { useFormik } from 'formik';
-import { Button } from 'primereact/button';
-import { TreeSelect, TreeSelectChangeEvent } from "primereact/treeselect";
-import { TreeNode } from 'primereact/treenode';
-import { Toast } from 'primereact/toast';
-import { NodeService } from './service/NodeService';
-
-export default function FormikDoc() {
-    const toast = useRef(null);
-    const [node, setNodes] = useState<TreeNode[] | null>([]);
-
-    useEffect(() => {
-        NodeService.getTreeNodes().then((data) => setNodes(data));
-    }, []); // eslint-disable-line react-hooks/exhaustive-deps
-
-    const show = () => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: 'The form is successfully submitted.'});
-    };
-
-    const formik = useFormik({
-        initialValues: {
-            item: ''
-        },
-        validate: (data) => {
-            let errors = {};
-
-            if (!data.item) {
-                errors.item = 'Value is required.';
-            }
-
-            return errors;
-        },
-        onSubmit: (data) => {
-            data.item && show();
-            formik.resetForm();
-        }
-    });
-
-    const isFormFieldInvalid = (name) => !!(formik.touched[name] && formik.errors[name]);
-
-    const getFormErrorMessage = (name) => {
-        return isFormFieldInvalid(name) ? <small className="p-error">{formik.errors[name]}</small> : <small className="p-error">&nbsp;</small>;
-    };
-    
-    return (
-        <div className="card flex justify-content-center">
-            <form onSubmit={formik.handleSubmit} className="flex flex-column align-items-center gap-2">
-                <Toast ref={toast} />
-                <TreeSelect
-                    id="item"
-                    name="item"
-                    value={formik.values.item}
-                    options={node}
-                    placeholder="Select Item"
-                    className={classNames('w-full md:w-20rem', { 'p-invalid': isFormFieldInvalid('item') })}
-                    onChange={(e: TreeSelectChangeEvent) => {
-                        formik.setFieldValue('item', e.value);
-                    }}
-                />
-                {getFormErrorMessage('item')}
-                <Button type="submit" label="Submit" />
-            </form>
-        </div>
-    )
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props}>
-                <p>
-                    <a href="https://formik.org/">Formik</a> is a popular library for handling forms in React.
-                </p>
-            </DocSectionText>
-            <div className="card flex justify-content-center">
-                <form onSubmit={formik.handleSubmit} className="flex flex-column align-items-center gap-2">
-                    <Toast ref={toast} />
-                    <TreeSelect
-                        id="item"
-                        name="item"
-                        value={formik.values.item}
-                        options={node}
-                        placeholder="Select Item"
-                        className={classNames('w-full md:w-20rem', { 'p-invalid': isFormFieldInvalid('item') })}
-                        onChange={(e) => {
-                            formik.setFieldValue('item', e.value);
-                        }}
-                    />
-                    {getFormErrorMessage('item')}
-                    <Button type="submit" label="Submit" />
-                </form>
-            </div>
-            <DocSectionCode code={code} service={['NodeService']} dependencies={{ formik: '^2.2.6' }} />
-        </>
-    );
-}
diff --git a/components/doc/treeselect/form/hookformdoc.js b/components/doc/treeselect/form/hookformdoc.js
deleted file mode 100644
index a4f7f1ae00..0000000000
--- a/components/doc/treeselect/form/hookformdoc.js
+++ /dev/null
@@ -1,221 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { Button } from '@/components/lib/button/Button';
-import { Toast } from '@/components/lib/toast/Toast';
-import { TreeSelect } from '@/components/lib/treeselect/TreeSelect';
-import { classNames } from '@/components/lib/utils/Utils';
-import { useEffect, useRef, useState } from 'react';
-import { Controller, useForm } from 'react-hook-form';
-import { NodeService } from '../../../../service/NodeService';
-
-export function HookFormDoc(props) {
-    const [nodes, setNodes] = useState(null);
-    const defaultValues = { value: null };
-    const form = useForm({ defaultValues });
-    const errors = form.formState.errors;
-    const toast = useRef(null);
-
-    useEffect(() => {
-        NodeService.getTreeNodes().then((data) => setNodes(data));
-    }, []); // eslint-disable-line react-hooks/exhaustive-deps
-
-    const show = () => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: 'The form is successfully submitted.' });
-    };
-
-    const onSubmit = (data) => {
-        data.value && show();
-
-        form.reset();
-    };
-
-    const getFormErrorMessage = (name) => {
-        return errors[name] ? <small className="p-error">{errors[name].message}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    const code = {
-        basic: `
-<Toast ref={toast} />
-<Controller
-    name="value"
-    control={form.control}
-    rules={{ required: 'Value is required.' }}
-    render={({ field, fieldState }) => (
-        <>
-            <TreeSelect id={field.name} value={field.value} onChange={field.onChange} inputRef={field.ref} options={nodes} placeholder="Select Item" className={classNames('w-full md:w-20rem', { 'p-invalid': fieldState.error })} />
-            {getFormErrorMessage(field.name)}
-        </>
-    )}
-/>
-<Button label="Submit" type="submit" icon="pi pi-check" />
-        `,
-        javascript: `
-import React, { useEffect, useState, useRef } from 'react';
-import { Controller, useForm } from 'react-hook-form';
-import { Button } from 'primereact/button';
-import { classNames } from 'primereact/utils';
-import { TreeSelect } from "primereact/treeselect";
-import { Toast } from 'primereact/toast';
-import { NodeService } from './service/NodeService';
-
-export default function HookFormDoc() {
-    const [nodes, setNodes] = useState(null);
-    const defaultValues = { value: null };
-    const form = useForm({ defaultValues });
-    const errors = form.formState.errors;
-    const toast = useRef(null);
-
-    useEffect(() => {
-        NodeService.getTreeNodes().then((data) => setNodes(data));
-    }, []); // eslint-disable-line react-hooks/exhaustive-deps
-
-    const show = () => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: 'The form is successfully submitted.' });
-    };
-
-    const onSubmit = (data) => {
-        data.value && show();
-
-        form.reset();
-    };
-
-    const getFormErrorMessage = (name) => {
-        return errors[name] ? <small className="p-error">{errors[name].message}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    return (
-        <div className="card flex justify-content-center">
-            <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-column align-items-center gap-2">
-                <Toast ref={toast} />
-                <Controller
-                    name="value"
-                    control={form.control}
-                    rules={{ required: 'Value is required.' }}
-                    render={({ field, fieldState }) => (
-                        <>
-                            <TreeSelect id={field.name} value={field.value} onChange={field.onChange} inputRef={field.ref} options={nodes} placeholder="Select Item" className={classNames('w-full md:w-20rem', { 'p-invalid': fieldState.error })} />
-                            {getFormErrorMessage(field.name)}
-                        </>
-                    )}
-                />
-                <Button label="Submit" type="submit" icon="pi pi-check" />
-            </form>
-        </div>
-    )
-}
-        `,
-        typescript: `
-import React, { useEffect, useState, useRef } from 'react';
-import { Controller, useForm } from 'react-hook-form';
-import { Button } from 'primereact/button';
-import { classNames } from 'primereact/utils';
-import { TreeSelect } from "primereact/treeselect";
-import { TreeNode } from 'primereact/treenode';
-import { Toast } from 'primereact/toast';
-import { NodeService } from './service/NodeService';
-
-export default function HookFormDoc() {
-    const [node, setNodes] = useState<TreeNode[] | null>([]);
-    const defaultValues = { value: null };
-    const form = useForm({ defaultValues });
-    const errors = form.formState.errors;
-    const toast = useRef(null);
-
-    useEffect(() => {
-        NodeService.getTreeNodes().then((data) => setNodes(data));
-    }, []); // eslint-disable-line react-hooks/exhaustive-deps
-
-    const show = () => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: 'The form is successfully submitted.' });
-    };
-
-    const onSubmit = (data) => {
-        data.value && show();
-
-        form.reset();
-    };
-
-    const getFormErrorMessage = (name) => {
-        return errors[name] ? <small className="p-error">{errors[name].message}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    return (
-        <div className="card flex justify-content-center">
-            <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-column align-items-center gap-2">
-                <Toast ref={toast} />
-                <Controller
-                    name="value"
-                    control={form.control}
-                    rules={{ required: 'Value is required.' }}
-                    render={({ field, fieldState }) => (
-                        <>
-                            <TreeSelect id={field.name} value={field.value} onChange={field.onChange} inputRef={field.ref} options={nodes} placeholder="Select Item" className={classNames('w-full md:w-20rem', { 'p-invalid': fieldState.error })} />
-                            {getFormErrorMessage(field.name)}
-                        </>
-                    )}
-                />
-                <Button label="Submit" type="submit" icon="pi pi-check" />
-            </form>
-        </div>
-    )
-}
-        `,
-        data: `
-/* NodeService */
-{
-    key: '0',
-    label: 'Documents',
-    data: 'Documents Folder',
-    icon: 'pi pi-fw pi-inbox',
-    children: [
-        {
-            key: '0-0',
-            label: 'Work',
-            data: 'Work Folder',
-            icon: 'pi pi-fw pi-cog',
-            children: [
-                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
-                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
-            ]
-        },
-        {
-            key: '0-1',
-            label: 'Home',
-            data: 'Home Folder',
-            icon: 'pi pi-fw pi-home',
-            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
-        }
-    ]
-},
-...
-`
-    };
-
-    return (
-        <>
-            <DocSectionText {...props}>
-                <p>
-                    <a href="https://react-hook-form.com/">React Hook Form</a> is another popular React library to handle forms.
-                </p>
-            </DocSectionText>
-            <div className="card flex justify-content-center">
-                <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-column align-items-center gap-2">
-                    <Toast ref={toast} />
-                    <Controller
-                        name="value"
-                        control={form.control}
-                        rules={{ required: 'Value is required.' }}
-                        render={({ field, fieldState }) => (
-                            <>
-                                <TreeSelect id={field.name} value={field.value} onChange={field.onChange} inputRef={field.ref} options={nodes} placeholder="Select Item" className={classNames('w-full md:w-20rem', { 'p-invalid': fieldState.error })} />
-                                {getFormErrorMessage(field.name)}
-                            </>
-                        )}
-                    />
-                    <Button label="Submit" type="submit" icon="pi pi-check" />
-                </form>
-            </div>
-            <DocSectionCode code={code} service={['NodeService']} dependencies={{ 'react-hook-form': '^7.39.4' }} />
-        </>
-    );
-}
diff --git a/components/doc/treeselect/invaliddoc.js b/components/doc/treeselect/invaliddoc.js
index 1e08fdec52..6294b4ee6b 100644
--- a/components/doc/treeselect/invaliddoc.js
+++ b/components/doc/treeselect/invaliddoc.js
@@ -14,8 +14,8 @@ export function InvalidDoc(props) {
 
     const code = {
         basic: `
-<TreeSelect value={selectedNodeKey} onChange={(e) => setSelectedNodeKey(e.value)} options={nodes} 
-    className="md:w-20rem w-full p-invalid" placeholder="Select Item"></TreeSelect>
+<TreeSelect invalid value={selectedNodeKey} onChange={(e) => setSelectedNodeKey(e.value)} options={nodes} 
+    className="md:w-20rem w-full" placeholder="Select Item"></TreeSelect>
         `,
         javascript: `
 import React, { useState, useEffect } from "react";
@@ -32,8 +32,8 @@ export default function InvalidDemo() {
 
     return (
         <div className="card flex justify-content-center">
-            <TreeSelect value={selectedNodeKey} onChange={(e) => setSelectedNodeKey(e.value)} options={nodes} 
-                className="md:w-20rem w-full p-invalid" placeholder="Select Item"></TreeSelect>
+            <TreeSelect invalid value={selectedNodeKey} onChange={(e) => setSelectedNodeKey(e.value)} options={nodes} 
+                className="md:w-20rem w-full" placeholder="Select Item"></TreeSelect>
         </div>
     );
 }
@@ -54,8 +54,8 @@ export default function InvalidDemo() {
 
     return (
         <div className="card flex justify-content-center">
-            <TreeSelect value={selectedNodeKey} options={nodes} onChange={(e : TreeSelectChangeEvent) => setSelectedNodeKey(e.value)} 
-                className="md:w-20rem w-full p-invalid" placeholder="Select Item"></TreeSelect>
+            <TreeSelect invalid value={selectedNodeKey} options={nodes} onChange={(e : TreeSelectChangeEvent) => setSelectedNodeKey(e.value)} 
+                className="md:w-20rem w-full" placeholder="Select Item"></TreeSelect>
         </div>
     );
 }
@@ -95,11 +95,11 @@ export default function InvalidDemo() {
         <>
             <DocSectionText {...props}>
                 <p>
-                    Invalid state style is added using the <i>p-invalid</i> class to indicate a failed validation.
+                    Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.
                 </p>
             </DocSectionText>
             <div className="card flex justify-content-center">
-                <TreeSelect value={selectedNodeKey} onChange={(e) => setSelectedNodeKey(e.value)} options={nodes} className="md:w-20rem w-full p-invalid" placeholder="Select Item" />
+                <TreeSelect invalid value={selectedNodeKey} onChange={(e) => setSelectedNodeKey(e.value)} options={nodes} className="md:w-20rem w-full" placeholder="Select Item" />
             </div>
             <DocSectionCode code={code} service={['NodeService']} />
         </>
diff --git a/components/doc/tristatecheckbox/filleddoc.js b/components/doc/tristatecheckbox/filleddoc.js
new file mode 100644
index 0000000000..bf49280809
--- /dev/null
+++ b/components/doc/tristatecheckbox/filleddoc.js
@@ -0,0 +1,56 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { TriStateCheckbox } from '@/components/lib/tristatecheckbox/TriStateCheckbox';
+import { useState } from 'react';
+
+export function FilledDoc(props) {
+    const [value, setValue] = useState(null);
+
+    const code = {
+        basic: `
+<TriStateCheckbox variant="filled" value={value} onChange={(e) => setValue(e.value)} />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { TriStateCheckbox } from 'primereact/tristatecheckbox';
+
+export default function FilledDemo() {
+    const [value, setValue] = useState(null);
+
+    return (
+        <div className="card flex flex-column align-items-center gap-3">
+            <TriStateCheckbox variant="filled" value={value} onChange={(e) => setValue(e.value)} />
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { TriStateCheckbox, TriStateCheckboxChangeEvent } from 'primereact/tristatecheckbox';
+
+export default function FilledDemo() {
+    const [value, setValue] = useState<boolean | undefined | null>(null);
+
+    return (
+        <div className="card flex flex-column align-items-center gap-3">
+            <TriStateCheckbox variant="filled" value={value} onChange={(e : TriStateCheckboxChangeEvent) => setValue(e.value)} />
+        </div>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.
+                </p>
+            </DocSectionText>
+            <div className="card flex flex-column align-items-center gap-3">
+                <TriStateCheckbox variant="filled" value={value} onChange={(e) => setValue(e.value)} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/tristatecheckbox/form/formikdoc.js b/components/doc/tristatecheckbox/form/formikdoc.js
deleted file mode 100644
index d9619cc92d..0000000000
--- a/components/doc/tristatecheckbox/form/formikdoc.js
+++ /dev/null
@@ -1,209 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { Button } from '@/components/lib/button/Button';
-import { Toast } from '@/components/lib/toast/Toast';
-import { TriStateCheckbox } from '@/components/lib/tristatecheckbox/TriStateCheckbox';
-import { classNames } from '@/components/lib/utils/Utils';
-import { useFormik } from 'formik';
-import { useRef } from 'react';
-
-export function FormikDoc(props) {
-    const toast = useRef(null);
-
-    const show = () => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: formik.values.item.toString() });
-    };
-
-    const formik = useFormik({
-        initialValues: {
-            item: null
-        },
-        validate: (data) => {
-            let errors = {};
-
-            if (!data.item || data.item === 'null') {
-                errors.item = 'Value is required.';
-            }
-
-            return errors;
-        },
-        onSubmit: (data) => {
-            data.item && show();
-            formik.resetForm();
-        }
-    });
-
-    const isFormFieldInvalid = (name) => !!(formik.touched[name] && formik.errors[name]);
-
-    const getFormErrorMessage = (name) => {
-        return isFormFieldInvalid(name) ? <small className="p-error">{formik.errors[name]}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    const code = {
-        basic: `
-<Toast ref={toast} />
-<TriStateCheckbox
-    id="item"
-    name="item"
-    value={formik.values.item}
-    onChange={(e) => {
-        formik.setFieldValue('item', e.value);
-    }}
-    className={classNames({ 'p-invalid': formik.errors.item })}
-/>
-<div className="my-2">* I've read and accept the terms & conditions.</div>
-{getFormErrorMessage('item')}
-<Button type="submit" label="Submit" icon="pi pi-check" />
-`,
-        javascript: `
-import React, { useRef } from "react";
-import { useFormik } from 'formik';
-import { Button } from 'primereact/button';
-import { Toast } from 'primereact/toast';
-import { classNames } from 'primereact/utils';
-import { TriStateCheckbox } from "primereact/tristatecheckbox";
-
-export default function FormikDoc() {
-    const toast = useRef(null);
-
-    const show = () => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: formik.values.item.toString() });
-    };
-
-    const formik = useFormik({
-        initialValues: {
-            item: null
-        },
-        validate: (data) => {
-            let errors = {};
-
-            if (!data.item || data.item === 'null') {
-                errors.item = 'Value is required.';
-            }
-
-            return errors;
-        },
-        onSubmit: (data) => {
-            data.item && show();
-            formik.resetForm();
-        }
-    });
-
-    const isFormFieldInvalid = (name) => !!(formik.touched[name] && formik.errors[name]);
-
-    const getFormErrorMessage = (name) => {
-        return isFormFieldInvalid(name) ? <small className="p-error">{formik.errors[name]}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    return (
-        <div className="card flex justify-content-center">
-            <form onSubmit={formik.handleSubmit} className="flex flex-column align-items-center gap-2">
-                <Toast ref={toast} />
-                <TriStateCheckbox
-                    id="item"
-                    name="item"
-                    value={formik.values.item}
-                    onChange={(e) => {
-                        formik.setFieldValue('item', e.value);
-                    }}
-                    className={classNames({ 'p-invalid': formik.errors.item })}
-                />
-                <div>* I've read and accept the terms & conditions.</div>
-                {getFormErrorMessage('item')}
-                <Button type="submit" label="Submit" icon="pi pi-check" />
-            </form>
-        </div>
-    )
-}
-        `,
-        typescript: `
-import React, { useRef } from "react";
-import { useFormik } from 'formik';
-import { Button } from 'primereact/button';
-import { Toast } from 'primereact/toast';
-import { classNames } from 'primereact/utils';
-import { TriStateCheckbox } from "primereact/tristatecheckbox";
-
-export default function FormikDoc() {
-    const toast = useRef(null);
-
-    const show = () => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: formik.values.item.toString() });
-    };
-
-    const formik = useFormik({
-        initialValues: {
-            item: null
-        },
-        validate: (data) => {
-            let errors = {};
-
-            if (!data.item || data.item === 'null') {
-                errors.item = 'Value is required.';
-            }
-
-            return errors;
-        },
-        onSubmit: (data) => {
-            data.item && show();
-            formik.resetForm();
-        }
-    });
-
-    const isFormFieldInvalid = (name) => !!(formik.touched[name] && formik.errors[name]);
-
-    const getFormErrorMessage = (name) => {
-        return isFormFieldInvalid(name) ? <small className="p-error">{formik.errors[name]}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    return (
-        <div className="card flex justify-content-center">
-            <form onSubmit={formik.handleSubmit} className="flex flex-column align-items-center gap-2">
-                <Toast ref={toast} />
-                <TriStateCheckbox
-                    id="item"
-                    name="item"
-                    value={formik.values.item}
-                    onChange={(e) => {
-                        formik.setFieldValue('item', e.value);
-                    }}
-                    className={classNames({ 'p-invalid': formik.errors.item })}
-                />
-                <div>* I've read and accept the terms & conditions.</div>
-                {getFormErrorMessage('item')}
-                <Button type="submit" label="Submit" icon="pi pi-check" />
-            </form>
-        </div>
-    )
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props}>
-                <p>
-                    <a href="https://formik.org/">Formik</a> is a popular library for handling forms in React.
-                </p>
-            </DocSectionText>
-            <div className="card flex justify-content-center">
-                <form onSubmit={formik.handleSubmit} className="flex flex-column align-items-center gap-2">
-                    <Toast ref={toast} />
-                    <TriStateCheckbox
-                        id="item"
-                        name="item"
-                        value={formik.values.item}
-                        onChange={(e) => {
-                            formik.setFieldValue('item', e.value);
-                        }}
-                        className={classNames({ 'p-invalid': formik.errors.item })}
-                    />
-                    <div>* I've read and accept the terms & conditions.</div>
-                    {getFormErrorMessage('item')}
-                    <Button type="submit" label="Submit" icon="pi pi-check" />
-                </form>
-            </div>
-            <DocSectionCode code={code} dependencies={{ formik: '^2.2.6' }} />
-        </>
-    );
-}
diff --git a/components/doc/tristatecheckbox/form/hookformdoc.js b/components/doc/tristatecheckbox/form/hookformdoc.js
deleted file mode 100644
index a03fd068d9..0000000000
--- a/components/doc/tristatecheckbox/form/hookformdoc.js
+++ /dev/null
@@ -1,204 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { Button } from '@/components/lib/button/Button';
-import { Toast } from '@/components/lib/toast/Toast';
-import { TriStateCheckbox } from '@/components/lib/tristatecheckbox/TriStateCheckbox';
-import { classNames } from '@/components/lib/utils/Utils';
-import { useRef } from 'react';
-import { Controller, useForm } from 'react-hook-form';
-
-export function HookFormDoc(props) {
-    const toast = useRef(null);
-
-    const show = () => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: getValues('value').toString() });
-    };
-
-    const defaultValues = {
-        value: null
-    };
-
-    const {
-        control,
-        formState: { errors },
-        handleSubmit,
-        getValues,
-        reset
-    } = useForm({ defaultValues });
-
-    const onSubmit = (data) => {
-        data.value && show();
-
-        reset();
-    };
-
-    const getFormErrorMessage = (name) => {
-        return errors[name] ? <small className="p-error">{errors[name].message}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    const code = {
-        basic: `
-<Toast ref={toast} />
-<Controller
-    name="value"
-    control={control}
-    rules={{ required: 'Value is required.' }}
-    render={({ field, fieldState }) => (
-        <>
-            <TriStateCheckbox id={field.name} value={field.value} ref={field.ref} onChange={field.onChange} className={classNames({ 'p-invalid': fieldState.error })} />
-            <label>* I've read and accept the terms & conditions.</label>
-            {getFormErrorMessage(field.name)}
-        </>
-    )}
-/>
-<Button label="Submit" type="submit" icon="pi pi-check" />
-        `,
-        javascript: `
-import React, { useRef } from 'react';
-import { Controller, useForm } from 'react-hook-form';
-import { Button } from 'primereact/button';
-import { Toast } from 'primereact/toast';
-import { TriStateCheckbox } from "primereact/tristatecheckbox";
-import { classNames } from 'primereact/utils';
-
-export default function HookFormDoc() {
-    const toast = useRef(null);
-
-    const show = () => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: getValues('value').toString() });
-    };
-
-    const defaultValues = {
-        value: null
-    };
-
-    const {
-        control,
-        formState: { errors },
-        handleSubmit,
-        getValues,
-        reset
-    } = useForm({ defaultValues });
-
-    const onSubmit = (data) => {
-        data.value && show();
-
-        reset();
-    };
-
-    const getFormErrorMessage = (name) => {
-        return errors[name] ? <small className="p-error">{errors[name].message}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    return (
-        <div className="card flex justify-content-center">
-            <form onSubmit={handleSubmit(onSubmit)} className="flex flex-column align-items-center gap-2">
-                <Toast ref={toast} />
-                <Controller
-                    name="value"
-                    control={control}
-                    rules={{ required: 'Value is required.' }}
-                    render={({ field, fieldState }) => (
-                        <>
-                            <TriStateCheckbox id={field.name} value={field.value} ref={field.ref} onChange={field.onChange} className={classNames({ 'p-invalid': fieldState.error })} />
-                            <label>* I've read and accept the terms & conditions.</label>
-                            {getFormErrorMessage(field.name)}
-                        </>
-                    )}
-                />
-                <Button label="Submit" type="submit" icon="pi pi-check" />
-            </form>
-        </div>
-    )
-}
-        `,
-        typescript: `
-import React, { useRef } from 'react';
-import { Controller, useForm } from 'react-hook-form';
-import { Button } from 'primereact/button';
-import { Toast } from 'primereact/toast';
-import { TriStateCheckbox } from "primereact/tristatecheckbox";
-import { classNames } from 'primereact/utils';
-
-export default function HookFormDoc() {
-    const toast = useRef(null);
-
-    const show = () => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: getValues('value').toString() });
-    };
-
-    const defaultValues = {
-        value: null
-    };
-
-    const {
-        control,
-        formState: { errors },
-        handleSubmit,
-        getValues,
-        reset
-    } = useForm({ defaultValues });
-
-    const onSubmit = (data) => {
-        data.value && show();
-
-        reset();
-    };
-
-    const getFormErrorMessage = (name) => {
-        return errors[name] ? <small className="p-error">{errors[name].message}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    return (
-        <div className="card flex justify-content-center">
-            <form onSubmit={handleSubmit(onSubmit)} className="flex flex-column align-items-center gap-2">
-                <Toast ref={toast} />
-                <Controller
-                    name="value"
-                    control={control}
-                    rules={{ required: 'Value is required.' }}
-                    render={({ field, fieldState }) => (
-                        <>
-                            <TriStateCheckbox id={field.name} value={field.value} ref={field.ref} onChange={field.onChange} className={classNames({ 'p-invalid': fieldState.error })} />
-                            <label>* I've read and accept the terms & conditions.</label>
-                            {getFormErrorMessage(field.name)}
-                        </>
-                    )}
-                />
-                <Button label="Submit" type="submit" icon="pi pi-check" />
-            </form>
-        </div>
-    )
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props}>
-                <p>
-                    <a href="https://react-hook-form.com/">React Hook Form</a> is another popular React library to handle forms.
-                </p>
-            </DocSectionText>
-            <div className="card flex justify-content-center">
-                <form onSubmit={handleSubmit(onSubmit)} className="flex flex-column align-items-center gap-2">
-                    <Toast ref={toast} />
-                    <Controller
-                        name="value"
-                        control={control}
-                        rules={{ required: 'Value is required.' }}
-                        render={({ field, fieldState }) => (
-                            <>
-                                <TriStateCheckbox id={field.name} value={field.value} ref={field.ref} onChange={field.onChange} className={classNames({ 'p-invalid': fieldState.error })} />
-                                <label>* I've read and accept the terms & conditions.</label>
-                                {getFormErrorMessage(field.name)}
-                            </>
-                        )}
-                    />
-                    <Button label="Submit" type="submit" icon="pi pi-check" />
-                </form>
-            </div>
-            <DocSectionCode code={code} dependencies={{ 'react-hook-form': '^7.39.4' }} />
-        </>
-    );
-}
diff --git a/components/doc/tristatecheckbox/invaliddoc.js b/components/doc/tristatecheckbox/invaliddoc.js
index 5a37a34445..424d271523 100644
--- a/components/doc/tristatecheckbox/invaliddoc.js
+++ b/components/doc/tristatecheckbox/invaliddoc.js
@@ -8,7 +8,7 @@ export function InvalidDoc(props) {
 
     const code = {
         basic: `
-<TriStateCheckbox value={value} onChange={(e) => setValue(e.value)} className="p-invalid" />
+<TriStateCheckbox invalid value={value} onChange={(e) => setValue(e.value)} />
         `,
         javascript: `
 import React, { useState } from "react";
@@ -19,7 +19,7 @@ export default function InvalidDemo() {
 
     return (
         <div className="card flex flex-column align-items-center gap-3">
-            <TriStateCheckbox value={value} onChange={(e) => setValue(e.value)} className="p-invalid" />
+            <TriStateCheckbox invalid value={value} onChange={(e) => setValue(e.value)} />
             <label>{String(value)}</label>
         </div>
     );
@@ -34,7 +34,7 @@ export default function InvalidDemo() {
 
     return (
         <div className="card flex flex-column align-items-center gap-3">
-            <TriStateCheckbox value={value} onChange={(e : TriStateCheckboxChangeEvent) => setValue(e.value)} className="p-invalid" />
+            <TriStateCheckbox invalid value={value} onChange={(e : TriStateCheckboxChangeEvent) => setValue(e.value)} />
             <label>{String(value)}</label>
         </div>
     );
@@ -46,11 +46,11 @@ export default function InvalidDemo() {
         <>
             <DocSectionText {...props}>
                 <p>
-                    Invalid state style is added using the <i>p-invalid</i> class to indicate a failed validation.
+                    Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.
                 </p>
             </DocSectionText>
             <div className="card flex flex-column align-items-center gap-3">
-                <TriStateCheckbox value={value} onChange={(e) => setValue(e.value)} className="p-invalid" />
+                <TriStateCheckbox invalid value={value} onChange={(e) => setValue(e.value)} />
                 <label>{String(value)}</label>
             </div>
             <DocSectionCode code={code} />
diff --git a/components/lib/autocomplete/AutoComplete.js b/components/lib/autocomplete/AutoComplete.js
index dbb15b9708..6442e8fca3 100644
--- a/components/lib/autocomplete/AutoComplete.js
+++ b/components/lib/autocomplete/AutoComplete.js
@@ -546,7 +546,7 @@ export const AutoComplete = React.memo(
                     aria-controls={ariaControls}
                     aria-haspopup="listbox"
                     aria-expanded={overlayVisibleState}
-                    className={classNames(props.inputClassName, cx('input'))}
+                    className={classNames(props.inputClassName, cx('input', { context }))}
                     style={props.inputStyle}
                     autoComplete="off"
                     readOnly={props.readOnly}
@@ -666,7 +666,7 @@ export const AutoComplete = React.memo(
             const containerProps = mergeProps(
                 {
                     ref: multiContainerRef,
-                    className: cx('container'),
+                    className: cx('container', { context }),
                     onClick: allowMoreValues ? onMultiContainerClick : undefined,
                     onContextMenu: props.onContextMenu,
                     onMouseDown: props.onMouseDown,
diff --git a/components/lib/autocomplete/AutoCompleteBase.js b/components/lib/autocomplete/AutoCompleteBase.js
index 4235241dd4..e2aee24cbc 100644
--- a/components/lib/autocomplete/AutoCompleteBase.js
+++ b/components/lib/autocomplete/AutoCompleteBase.js
@@ -11,9 +11,10 @@ const classes = {
             'p-invalid': props.invalid,
             'p-inputwrapper-focus': focusedState
         }),
-    container: ({ props }) =>
+    container: ({ props, context }) =>
         classNames('p-autocomplete-multiple-container p-component p-inputtext', {
-            'p-disabled': props.disabled
+            'p-disabled': props.disabled,
+            'p-variant-filled': props.variant ? props.variant === 'filled' : context && context.inputStyle === 'filled'
         }),
     loadingIcon: 'p-autocomplete-loader',
     dropdownButton: 'p-autocomplete-dropdown',
@@ -21,13 +22,13 @@ const classes = {
     token: 'p-autocomplete-token p-highlight',
     tokenLabel: 'p-autocomplete-token-label',
     inputToken: 'p-autocomplete-input-token',
-    input: ({ props }) =>
+    input: ({ props, context }) =>
         classNames('p-autocomplete-input', {
-            'p-autocomplete-dd-input': props.dropdown
+            'p-autocomplete-dd-input': props.dropdown,
+            'p-variant-filled': props.variant ? props.variant === 'filled' : context && context.inputStyle === 'filled'
         }),
     panel: ({ context }) =>
         classNames('p-autocomplete-panel p-component', {
-            'p-input-filled': (context && context.inputStyle === 'filled') || PrimeReact.inputStyle === 'filled',
             'p-ripple-disabled': (context && context.ripple === false) || PrimeReact.ripple === false
         }),
     listWrapper: 'p-autocomplete-items-wrapper',
@@ -166,6 +167,7 @@ export const AutoCompleteBase = ComponentBase.extend({
         inputId: null,
         inputRef: null,
         inputStyle: null,
+        variant: null,
         invalid: false,
         itemTemplate: null,
         loadingIcon: null,
diff --git a/components/lib/autocomplete/autocomplete.d.ts b/components/lib/autocomplete/autocomplete.d.ts
index 8322f651e9..fad25a34c5 100755
--- a/components/lib/autocomplete/autocomplete.d.ts
+++ b/components/lib/autocomplete/autocomplete.d.ts
@@ -266,6 +266,11 @@ export interface AutoCompleteProps extends Omit<React.DetailedHTMLProps<React.In
      * @defaultValue false
      */
     disabled?: boolean | undefined;
+    /**
+     * Specifies the input variant of the component.
+     * @defaultValue outlined
+     */
+    variant?: 'outlined' | 'filled' | undefined;
     /**
      * Displays a button next to the input field when enabled.
      * @defaultValue false
diff --git a/components/lib/calendar/Calendar.js b/components/lib/calendar/Calendar.js
index 73e56920ea..85dbdce032 100644
--- a/components/lib/calendar/Calendar.js
+++ b/components/lib/calendar/Calendar.js
@@ -4036,7 +4036,7 @@ export const Calendar = React.memo(
                         name={props.name}
                         type="text"
                         role="combobox"
-                        className={props.inputClassName}
+                        className={(props.inputClassName, cx('input', { context }))}
                         style={props.inputStyle}
                         readOnly={props.readOnlyInput}
                         disabled={props.disabled}
diff --git a/components/lib/calendar/CalendarBase.js b/components/lib/calendar/CalendarBase.js
index 5ce0dd57e0..d06bd90367 100644
--- a/components/lib/calendar/CalendarBase.js
+++ b/components/lib/calendar/CalendarBase.js
@@ -186,6 +186,10 @@ const classes = {
             'p-inputwrapper-focus': focusedState,
             'p-focus': focusedState || panelVisible
         }),
+    input: ({ props, context }) =>
+        classNames('p-inputtext p-component', {
+            'p-variant-filled': props.variant ? props.variant === 'filled' : context && context.inputStyle === 'filled'
+        }),
     dropdownButton: 'p-datepicker-trigger',
     buttonbar: 'p-datepicker-buttonbar',
     todayButton: 'p-button-text',
@@ -262,6 +266,7 @@ export const CalendarBase = ComponentBase.extend({
         inputMode: 'none',
         inputRef: null,
         inputStyle: null,
+        variant: null,
         invalid: false,
         keepInvalid: false,
         locale: null,
diff --git a/components/lib/calendar/calendar.d.ts b/components/lib/calendar/calendar.d.ts
index 7084a2811b..278b7fd79d 100644
--- a/components/lib/calendar/calendar.d.ts
+++ b/components/lib/calendar/calendar.d.ts
@@ -575,6 +575,11 @@ interface CalendarBaseProps {
      * @defaultValue false
      */
     disabled?: boolean | undefined;
+    /**
+     * Specifies the input variant of the component.
+     * @defaultValue outlined
+     */
+    variant?: 'outlined' | 'filled' | undefined;
     /**
      * Array with dates to disable.
      */
diff --git a/components/lib/cascadeselect/CascadeSelect.js b/components/lib/cascadeselect/CascadeSelect.js
index 33d70e3ea7..8f6c81f75d 100644
--- a/components/lib/cascadeselect/CascadeSelect.js
+++ b/components/lib/cascadeselect/CascadeSelect.js
@@ -471,7 +471,7 @@ export const CascadeSelect = React.memo(
                 {
                     id: props.id,
                     ref: elementRef,
-                    className: cx('root', { focusedState, overlayVisibleState }),
+                    className: cx('root', { focusedState, overlayVisibleState, context }),
                     style: props.style,
                     onClick: (e) => onClick(e)
                 },
diff --git a/components/lib/cascadeselect/CascadeSelectBase.js b/components/lib/cascadeselect/CascadeSelectBase.js
index 4ca885aeb2..c5e1ad9c10 100644
--- a/components/lib/cascadeselect/CascadeSelectBase.js
+++ b/components/lib/cascadeselect/CascadeSelectBase.js
@@ -1,14 +1,14 @@
-import PrimeReact from '../api/Api';
 import { ComponentBase } from '../componentbase/ComponentBase';
 import { classNames } from '../utils/Utils';
 
 const classes = {
-    root: ({ props, focusedState, overlayVisibleState }) =>
+    root: ({ props, focusedState, overlayVisibleState, context }) =>
         classNames(
             'p-cascadeselect p-component p-inputwrapper',
             {
                 'p-disabled': props.disabled,
                 'p-invalid': props.invalid,
+                'p-variant-filled': props.variant ? props.variant === 'filled' : context && context.inputStyle === 'filled',
                 'p-focus': focusedState,
                 'p-inputwrapper-filled': props.value,
                 'p-inputwrapper-focus': focusedState || overlayVisibleState
@@ -20,11 +20,7 @@ const classes = {
             'p-placeholder': label === props.placeholder,
             'p-cascadeselect-label-empty': !props.value && label === 'p-emptylabel'
         }),
-    list: ({ context }) =>
-        classNames('p-cascadeselect-panel p-cascadeselect-items', {
-            'p-input-filled': (context && context.inputStyle === 'filled') || PrimeReact.inputStyle === 'filled',
-            'p-ripple-disabled': (context && context.ripple === false) || PrimeReact.ripple === false
-        }),
+    list: 'p-cascadeselect-panel p-cascadeselect-items',
     sublistWrapper: 'p-cascadeselect-sublist-wrapper',
     sublist: 'p-cascadeselect-panel p-cascadeselect-items p-cascadeselect-sublist',
     item: ({ option, isGroup, isSelected }) =>
@@ -146,6 +142,7 @@ export const CascadeSelectBase = ComponentBase.extend({
         inputId: null,
         inputRef: null,
         invalid: false,
+        variant: null,
         itemTemplate: null,
         name: null,
         onBeforeHide: null,
diff --git a/components/lib/cascadeselect/cascadeselect.d.ts b/components/lib/cascadeselect/cascadeselect.d.ts
index 87187f16e5..7dc3f9d7b0 100644
--- a/components/lib/cascadeselect/cascadeselect.d.ts
+++ b/components/lib/cascadeselect/cascadeselect.d.ts
@@ -237,6 +237,11 @@ export interface CascadeSelectProps extends Omit<React.DetailedHTMLProps<React.I
      * @defaultValue false
      */
     disabled?: boolean | undefined;
+    /**
+     * Specifies the input variant of the component.
+     * @defaultValue outlined
+     */
+    variant?: 'outlined' | 'filled' | undefined;
     /**
      * A property to uniquely identify an option.
      */
diff --git a/components/lib/checkbox/Checkbox.js b/components/lib/checkbox/Checkbox.js
index fa7b0e9193..be08e01422 100644
--- a/components/lib/checkbox/Checkbox.js
+++ b/components/lib/checkbox/Checkbox.js
@@ -102,7 +102,7 @@ export const Checkbox = React.memo(
         const rootProps = mergeProps(
             {
                 id: props.id,
-                className: classNames(props.className, cx('root', { checked })),
+                className: classNames(props.className, cx('root', { checked, context })),
                 style: props.style,
                 'data-p-highlight': checked,
                 'data-p-disabled': props.disabled,
diff --git a/components/lib/checkbox/CheckboxBase.js b/components/lib/checkbox/CheckboxBase.js
index 101f10158b..e477a8a21a 100644
--- a/components/lib/checkbox/CheckboxBase.js
+++ b/components/lib/checkbox/CheckboxBase.js
@@ -5,12 +5,12 @@ const classes = {
     box: 'p-checkbox-box',
     input: 'p-checkbox-input',
     icon: 'p-checkbox-icon',
-    root: ({ props, checked }) =>
+    root: ({ props, checked, context }) =>
         classNames('p-checkbox p-component', {
             'p-highlight': checked,
             'p-disabled': props.disabled,
             'p-invalid': props.invalid,
-            'p-variant-filled': props.variant === 'filled'
+            'p-variant-filled': props.variant ? props.variant === 'filled' : context && context.inputStyle === 'filled'
         })
 };
 
@@ -27,6 +27,7 @@ export const CheckboxBase = ComponentBase.extend({
         inputId: null,
         inputRef: null,
         invalid: false,
+        variant: null,
         name: null,
         onChange: null,
         onContextMenu: null,
diff --git a/components/lib/checkbox/checkbox.d.ts b/components/lib/checkbox/checkbox.d.ts
index 7e03bfd851..8f6ae37b39 100644
--- a/components/lib/checkbox/checkbox.d.ts
+++ b/components/lib/checkbox/checkbox.d.ts
@@ -145,6 +145,11 @@ export interface CheckboxProps extends Omit<React.DetailedHTMLProps<React.InputH
      * @defaultValue false
      */
     disabled?: boolean | undefined;
+    /**
+     * Specifies the input variant of the component.
+     * @defaultValue outlined
+     */
+    variant?: 'outlined' | 'filled' | undefined;
     /**
      * When present, it specifies that an input field must be filled out before submitting the form.
      * @defaultValue false
diff --git a/components/lib/chips/Chips.js b/components/lib/chips/Chips.js
index 58c1fa0b23..9b2f8eef26 100644
--- a/components/lib/chips/Chips.js
+++ b/components/lib/chips/Chips.js
@@ -416,7 +416,7 @@ export const Chips = React.memo(
             const containerProps = mergeProps(
                 {
                     ref: listRef,
-                    className: cx('container', { isFilled }),
+                    className: cx('container', { context }),
                     onClick: (e) => onWrapperClick(e),
                     onKeyDown: (e) => onContainerKeyDown(e),
                     tabIndex: -1,
diff --git a/components/lib/chips/ChipsBase.js b/components/lib/chips/ChipsBase.js
index 948ec98ade..a1783ed506 100644
--- a/components/lib/chips/ChipsBase.js
+++ b/components/lib/chips/ChipsBase.js
@@ -82,7 +82,10 @@ const classes = {
             'p-focus': focusedIndex === index
         }),
     inputToken: 'p-chips-input-token',
-    container: ({ isFilled }) => classNames('p-inputtext p-chips-multiple-container', { 'p-variant-filled': isFilled }),
+    container: ({ props, context }) =>
+        classNames('p-inputtext p-chips-multiple-container', {
+            'p-variant-filled': props.variant ? props.variant === 'filled' : context && context.inputStyle === 'filled'
+        }),
     root: ({ isFilled, focusedState, disabled, invalid }) =>
         classNames('p-chips p-component p-inputwrapper', {
             'p-inputwrapper-filled': isFilled,
@@ -106,6 +109,7 @@ export const ChipsBase = ComponentBase.extend({
         inputId: null,
         inputRef: null,
         invalid: false,
+        variant: null,
         itemTemplate: null,
         keyfilter: null,
         max: null,
diff --git a/components/lib/chips/chips.d.ts b/components/lib/chips/chips.d.ts
index ec70abb8ea..2fecafbef5 100755
--- a/components/lib/chips/chips.d.ts
+++ b/components/lib/chips/chips.d.ts
@@ -183,6 +183,11 @@ export interface ChipsProps extends Omit<React.DetailedHTMLProps<React.InputHTML
      * @defaultValue false
      */
     disabled?: boolean | undefined;
+    /**
+     * Specifies the input variant of the component.
+     * @defaultValue outlined
+     */
+    variant?: 'outlined' | 'filled' | undefined;
     /**
      * When present, it specifies that the element should be read-only.
      * @defaultValue false
diff --git a/components/lib/dropdown/Dropdown.js b/components/lib/dropdown/Dropdown.js
index fa63f9a3e7..03eba92d81 100644
--- a/components/lib/dropdown/Dropdown.js
+++ b/components/lib/dropdown/Dropdown.js
@@ -1182,7 +1182,7 @@ export const Dropdown = React.memo(
             {
                 id: props.id,
                 ref: elementRef,
-                className: classNames(props.className, cx('root', { focusedState, overlayVisibleState })),
+                className: classNames(props.className, cx('root', { context, focusedState, overlayVisibleState })),
                 style: props.style,
                 onClick: (e) => onClick(e),
                 onMouseDown: props.onMouseDown,
diff --git a/components/lib/dropdown/DropdownBase.js b/components/lib/dropdown/DropdownBase.js
index 27369dc56d..257e1f976a 100644
--- a/components/lib/dropdown/DropdownBase.js
+++ b/components/lib/dropdown/DropdownBase.js
@@ -3,11 +3,12 @@ import { ComponentBase } from '../componentbase/ComponentBase';
 import { ObjectUtils, classNames } from '../utils/Utils';
 
 const classes = {
-    root: ({ props, focusedState, overlayVisibleState }) =>
+    root: ({ props, focusedState, overlayVisibleState, context }) =>
         classNames('p-dropdown p-component p-inputwrapper', {
             'p-disabled': props.disabled,
             'p-invalid': props.invalid,
             'p-focus': focusedState,
+            'p-variant-filled': props.variant ? props.variant === 'filled' : context && context.inputStyle === 'filled',
             'p-dropdown-clearable': props.showClear && !props.disabled,
             'p-inputwrapper-filled': ObjectUtils.isNotEmpty(props.value),
             'p-inputwrapper-focus': focusedState || overlayVisibleState
@@ -32,7 +33,10 @@ const classes = {
     filterIcon: 'p-dropdown-filter-icon',
     filterClearIcon: 'p-dropdown-filter-clear-icon',
     filterContainer: ({ clearIcon }) => classNames('p-dropdown-filter-container', { 'p-dropdown-clearable-filter': !!clearIcon }),
-    filterInput: 'p-dropdown-filter p-inputtext p-component',
+    filterInput: ({ props, context }) =>
+        classNames('p-dropdown-filter p-inputtext p-component', {
+            'p-variant-filled': props.variant ? props.variant === 'filled' : context && context.inputStyle === 'filled'
+        }),
     list: ({ virtualScrollerOptions }) => (virtualScrollerOptions ? 'p-dropdown-items' : 'p-dropdown-items'),
     panel: ({ context }) =>
         classNames('p-dropdown-panel p-component', {
@@ -184,6 +188,7 @@ export const DropdownBase = ComponentBase.extend({
         inputId: null,
         inputRef: null,
         invalid: false,
+        variant: null,
         itemTemplate: null,
         loading: false,
         loadingIcon: null,
diff --git a/components/lib/dropdown/DropdownPanel.js b/components/lib/dropdown/DropdownPanel.js
index 178e85397c..fbf9b416a2 100644
--- a/components/lib/dropdown/DropdownPanel.js
+++ b/components/lib/dropdown/DropdownPanel.js
@@ -230,7 +230,7 @@ export const DropdownPanel = React.memo(
                         ref: filterInputRef,
                         type: 'text',
                         autoComplete: 'off',
-                        className: cx('filterInput'),
+                        className: cx('filterInput', { context }),
                         placeholder: props.filterPlaceholder,
                         onKeyDown: props.onFilterInputKeyDown,
                         onChange: (e) => onFilterInputChange(e),
diff --git a/components/lib/dropdown/dropdown.d.ts b/components/lib/dropdown/dropdown.d.ts
index 9283c03ff3..2381f21566 100644
--- a/components/lib/dropdown/dropdown.d.ts
+++ b/components/lib/dropdown/dropdown.d.ts
@@ -272,6 +272,11 @@ export interface DropdownProps extends Omit<React.DetailedHTMLProps<React.InputH
      * @defaultValue false
      */
     disabled?: boolean | undefined;
+    /**
+     * Specifies the input variant of the component.
+     * @defaultValue outlined
+     */
+    variant?: 'outlined' | 'filled' | undefined;
     /**
      * Icon of the dropdown.
      */
diff --git a/components/lib/inputmask/InputMask.js b/components/lib/inputmask/InputMask.js
index 2839861a56..26f26a8bd9 100644
--- a/components/lib/inputmask/InputMask.js
+++ b/components/lib/inputmask/InputMask.js
@@ -27,6 +27,8 @@ export const InputMask = React.memo(
             props
         };
 
+        const { cx } = InputMaskBase.setMetaData(metaData);
+
         const caret = (first, last) => {
             let range;
             let begin;
@@ -622,7 +624,7 @@ export const InputMask = React.memo(
         }, [isValueUpdated]);
 
         const otherProps = InputMaskBase.getOtherProps(props);
-        const className = classNames('p-inputmask', props.className);
+        const className = classNames(props.className, cx('root', { context }));
 
         return (
             <InputText
diff --git a/components/lib/inputmask/InputMaskBase.js b/components/lib/inputmask/InputMaskBase.js
index b71da058a6..a1ddd147c7 100644
--- a/components/lib/inputmask/InputMaskBase.js
+++ b/components/lib/inputmask/InputMaskBase.js
@@ -1,4 +1,14 @@
 import { ComponentBase } from '../componentbase/ComponentBase';
+import { classNames } from '../utils/Utils';
+
+const classes = {
+    root: ({ props, context }) =>
+        classNames('p-inputmask', {
+            'p-filled': props.filled,
+            'p-invalid': props.invalid,
+            'p-variant-filled': props.variant ? props.variant === 'filled' : context && context.inputStyle === 'filled'
+        })
+};
 
 export const InputMaskBase = ComponentBase.extend({
     defaultProps: {
@@ -10,6 +20,8 @@ export const InputMaskBase = ComponentBase.extend({
         id: null,
         mask: null,
         maxLength: null,
+        invalid: false,
+        variant: null,
         name: null,
         onBlur: null,
         onChange: null,
@@ -28,5 +40,8 @@ export const InputMaskBase = ComponentBase.extend({
         unmask: false,
         value: null,
         children: undefined
+    },
+    css: {
+        classes
     }
 });
diff --git a/components/lib/inputmask/inputmask.d.ts b/components/lib/inputmask/inputmask.d.ts
index 047461d6de..ae9133b100 100644
--- a/components/lib/inputmask/inputmask.d.ts
+++ b/components/lib/inputmask/inputmask.d.ts
@@ -9,9 +9,9 @@
  */
 import * as React from 'react';
 import { InputText, InputTextPassThroughOptions, InputTextProps } from '../inputtext';
+import { PassThroughOptions } from '../passthrough';
 import { TooltipOptions } from '../tooltip/tooltipoptions';
 import { FormEvent } from '../ts-helpers';
-import { PassThroughOptions } from '../passthrough';
 
 /**
  * Custom complete event
@@ -66,6 +66,16 @@ export interface InputMaskProps extends Omit<InputTextProps, 'onChange' | 'pt'>
      * @defaultValue false
      */
     disabled?: boolean | undefined;
+    /**
+     * When present, it specifies that the component should have invalid state style.
+     * @defaultValue false
+     */
+    invalid?: boolean | undefined;
+    /**
+     * Specifies the input variant of the component.
+     * @defaultValue outlined
+     */
+    variant?: 'outlined' | 'filled' | undefined;
     /**
      * When present, it specifies that an input field is read-only.
      * @defaultValue false
diff --git a/components/lib/inputnumber/InputNumber.js b/components/lib/inputnumber/InputNumber.js
index 60f595358a..53546e2872 100644
--- a/components/lib/inputnumber/InputNumber.js
+++ b/components/lib/inputnumber/InputNumber.js
@@ -1099,7 +1099,7 @@ export const InputNumber = React.memo(
         }, [props.disabled]);
 
         const createInputElement = () => {
-            const className = classNames('p-inputnumber-input', props.inputClassName);
+            const className = classNames(props.inputClassName, cx('input', { context }));
             const valueToRender = formattedValue(props.value);
 
             return (
diff --git a/components/lib/inputnumber/InputNumberBase.js b/components/lib/inputnumber/InputNumberBase.js
index b452ee20b5..27a2e4b3f5 100644
--- a/components/lib/inputnumber/InputNumberBase.js
+++ b/components/lib/inputnumber/InputNumberBase.js
@@ -11,6 +11,10 @@ const classes = {
             'p-inputnumber-buttons-vertical': vertical,
             'p-invalid': props.invalid
         }),
+    input: ({ props, context }) =>
+        classNames('p-inputnumber-input', {
+            'p-variant-filled': props.variant ? props.variant === 'filled' : context && context.inputStyle === 'filled'
+        }),
     buttonGroup: 'p-inputnumber-button-group',
     incrementButton: ({ props }) =>
         classNames('p-inputnumber-button p-inputnumber-button-up p-button p-button-icon-only p-component', {
@@ -153,6 +157,7 @@ export const InputNumberBase = ComponentBase.extend({
         inputRef: null,
         inputStyle: null,
         invalid: false,
+        variant: null,
         locale: undefined,
         localeMatcher: undefined,
         max: null,
diff --git a/components/lib/inputnumber/inputnumber.d.ts b/components/lib/inputnumber/inputnumber.d.ts
index 4d6bff60a4..0038e81c64 100644
--- a/components/lib/inputnumber/inputnumber.d.ts
+++ b/components/lib/inputnumber/inputnumber.d.ts
@@ -237,6 +237,11 @@ export interface InputNumberProps extends Omit<React.DetailedHTMLProps<React.HTM
      * When present, it specifies that the element should be disabled.
      */
     disabled?: boolean | undefined;
+    /**
+     * Specifies the input variant of the component.
+     * @defaultValue outlined
+     */
+    variant?: 'outlined' | 'filled' | undefined;
     /**
      * When present, it specifies that the element must be filled out before submitting the form.
      * @defaultValue false
diff --git a/components/lib/inputtext/InputText.js b/components/lib/inputtext/InputText.js
index 8066bf1844..7b812ee03f 100644
--- a/components/lib/inputtext/InputText.js
+++ b/components/lib/inputtext/InputText.js
@@ -71,7 +71,7 @@ export const InputText = React.memo(
 
         const rootProps = mergeProps(
             {
-                className: cx('root', { isFilled }),
+                className: cx('root', { context, isFilled }),
                 onBeforeInput: onBeforeInput,
                 onInput: onInput,
                 onKeyDown: onKeyDown,
diff --git a/components/lib/inputtext/InputTextBase.js b/components/lib/inputtext/InputTextBase.js
index d19e30358b..4de41a5caf 100644
--- a/components/lib/inputtext/InputTextBase.js
+++ b/components/lib/inputtext/InputTextBase.js
@@ -2,14 +2,16 @@ import { ComponentBase } from '../componentbase/ComponentBase';
 import { classNames } from '../utils/Utils';
 
 const classes = {
-    root: ({ props, isFilled }) =>
+    root: ({ props, isFilled, context }) =>
         classNames(
             'p-inputtext p-component',
             {
                 'p-disabled': props.disabled,
                 'p-filled': isFilled,
-                'p-invalid': props.invalid
+                'p-invalid': props.invalid,
+                'p-variant-filled': props.variant ? props.variant === 'filled' : context && context.inputStyle === 'filled'
             },
+
             props.className
         )
 };
@@ -21,6 +23,7 @@ export const InputTextBase = ComponentBase.extend({
         children: undefined,
         className: null,
         invalid: false,
+        variant: null,
         keyfilter: null,
         onBeforeInput: null,
         onInput: null,
diff --git a/components/lib/inputtext/inputtext.d.ts b/components/lib/inputtext/inputtext.d.ts
index 31cfe8468e..87df9595e3 100644
--- a/components/lib/inputtext/inputtext.d.ts
+++ b/components/lib/inputtext/inputtext.d.ts
@@ -80,6 +80,11 @@ export interface InputTextProps extends Omit<React.DetailedHTMLProps<React.Input
      * @defaultValue false
      */
     invalid?: boolean | undefined;
+    /**
+     * Specifies the input variant of the component.
+     * @defaultValue outlined
+     */
+    variant?: 'outlined' | 'filled' | undefined;
     /**
      * Content of the tooltip.
      */
diff --git a/components/lib/inputtextarea/InputTextarea.js b/components/lib/inputtextarea/InputTextarea.js
index 87e88edf12..eb8b514e98 100644
--- a/components/lib/inputtextarea/InputTextarea.js
+++ b/components/lib/inputtextarea/InputTextarea.js
@@ -127,7 +127,7 @@ export const InputTextarea = React.memo(
         const rootProps = mergeProps(
             {
                 ref: elementRef,
-                className: cx('root', { isFilled }),
+                className: cx('root', { context, isFilled }),
                 onFocus: onFocus,
                 onBlur: onBlur,
                 onKeyUp: onKeyUp,
diff --git a/components/lib/inputtextarea/InputTextareaBase.js b/components/lib/inputtextarea/InputTextareaBase.js
index a2326fee78..59f831c0c4 100644
--- a/components/lib/inputtextarea/InputTextareaBase.js
+++ b/components/lib/inputtextarea/InputTextareaBase.js
@@ -2,14 +2,15 @@ import { ComponentBase } from '../componentbase/ComponentBase';
 import { classNames } from '../utils/Utils';
 
 const classes = {
-    root: ({ props, isFilled }) =>
+    root: ({ props, context, isFilled }) =>
         classNames(
             'p-inputtextarea p-inputtext p-component',
             {
                 'p-disabled': props.disabled,
                 'p-filled': isFilled,
                 'p-inputtextarea-resizable': props.autoResize,
-                'p-invalid': props.invalid
+                'p-invalid': props.invalid,
+                'p-variant-filled': props.variant ? props.variant === 'filled' : context && context.inputStyle === 'filled'
             },
             props.className
         )
@@ -34,6 +35,7 @@ export const InputTextareaBase = ComponentBase.extend({
         __parentMetadata: null,
         autoResize: false,
         invalid: false,
+        variant: null,
         keyfilter: null,
         onBlur: null,
         onFocus: null,
diff --git a/components/lib/inputtextarea/inputtextarea.d.ts b/components/lib/inputtextarea/inputtextarea.d.ts
index d18413a854..3809d2b403 100644
--- a/components/lib/inputtextarea/inputtextarea.d.ts
+++ b/components/lib/inputtextarea/inputtextarea.d.ts
@@ -72,6 +72,11 @@ export interface InputTextareaProps extends Omit<React.DetailedHTMLProps<React.T
      * @defaultValue false
      */
     invalid?: boolean | undefined;
+    /**
+     * Specifies the input variant of the component.
+     * @defaultValue outlined
+     */
+    variant?: 'outlined' | 'filled' | undefined;
     /**
      * Format definition of the keys to block.
      */
diff --git a/components/lib/multiselect/MultiSelect.js b/components/lib/multiselect/MultiSelect.js
index 857c623597..b0290a6882 100644
--- a/components/lib/multiselect/MultiSelect.js
+++ b/components/lib/multiselect/MultiSelect.js
@@ -1043,7 +1043,7 @@ export const MultiSelect = React.memo(
                 ref: elementRef,
                 id: props.id,
                 style: { ...props.style, ...sx('root') },
-                className: classNames(props.className, cx('root', { focusedState, overlayVisibleState })),
+                className: classNames(props.className, cx('root', { focusedState, context, overlayVisibleState })),
                 ...otherProps,
                 onClick: onClick
             },
diff --git a/components/lib/multiselect/MultiSelectBase.js b/components/lib/multiselect/MultiSelectBase.js
index ae83183653..1b23b7afd0 100644
--- a/components/lib/multiselect/MultiSelectBase.js
+++ b/components/lib/multiselect/MultiSelectBase.js
@@ -3,11 +3,12 @@ import { ComponentBase } from '../componentbase/ComponentBase';
 import { ObjectUtils, classNames } from '../utils/Utils';
 
 const classes = {
-    root: ({ props, focusedState, overlayVisibleState }) =>
+    root: ({ props, context, focusedState, overlayVisibleState }) =>
         classNames('p-multiselect p-component p-inputwrapper', {
             'p-multiselect-chip': props.display === 'chip',
             'p-disabled': props.disabled,
             'p-invalid': props.invalid,
+            'p-variant-filled': props.variant ? props.variant === 'filled' : context && context.inputStyle === 'filled',
             'p-multiselect-clearable': props.showClear && !props.disabled,
             'p-focus': focusedState,
             'p-inputwrapper-filled': ObjectUtils.isNotEmpty(props.value),
@@ -233,6 +234,7 @@ export const MultiSelectBase = ComponentBase.extend({
         inputId: null,
         inputRef: null,
         invalid: false,
+        variant: null,
         itemCheckboxIcon: null,
         itemClassName: null,
         itemTemplate: null,
diff --git a/components/lib/multiselect/multiselect.d.ts b/components/lib/multiselect/multiselect.d.ts
index f8df62b51c..0f3426c099 100644
--- a/components/lib/multiselect/multiselect.d.ts
+++ b/components/lib/multiselect/multiselect.d.ts
@@ -625,6 +625,11 @@ export interface MultiSelectProps extends Omit<React.DetailedHTMLProps<React.Inp
      * @defaultValue false
      */
     invalid?: boolean | undefined;
+    /**
+     * Specifies the input variant of the component.
+     * @defaultValue outlined
+     */
+    variant?: 'outlined' | 'filled' | undefined;
     /**
      * Uses to pass attributes to DOM elements inside the component.
      * @type {MultiSelectPassThroughOptions}
diff --git a/components/lib/password/Password.js b/components/lib/password/Password.js
index 4001cbaae4..87f6156e90 100644
--- a/components/lib/password/Password.js
+++ b/components/lib/password/Password.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import PrimeReact, { PrimeReactContext, localeOption, ariaLabel } from '../api/Api';
+import PrimeReact, { PrimeReactContext, ariaLabel, localeOption } from '../api/Api';
 import { useHandleStyle } from '../componentbase/ComponentBase';
 import { CSSTransition } from '../csstransition/CSSTransition';
 import { ESC_KEY_HANDLING_PRIORITIES, useDisplayOrder, useGlobalOnEscapeKey, useMergeProps, useMountEffect, useOverlayListener, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks';
@@ -462,6 +462,7 @@ export const Password = React.memo(
                 onInput: onInput,
                 onKeyUp: onKeyup,
                 invalid: props.invalid,
+                variant: props.variant,
                 style: props.inputStyle,
                 tabIndex: props.tabIndex,
                 tooltip: props.tooltip,
diff --git a/components/lib/password/PasswordBase.js b/components/lib/password/PasswordBase.js
index 18734fd12d..16ef732bf2 100644
--- a/components/lib/password/PasswordBase.js
+++ b/components/lib/password/PasswordBase.js
@@ -99,6 +99,7 @@ export const PasswordBase = ComponentBase.extend({
         inputStyle: null,
         inputClassName: null,
         invalid: false,
+        variant: null,
         panelStyle: null,
         panelClassName: null,
         transitionOptions: null,
diff --git a/components/lib/password/password.d.ts b/components/lib/password/password.d.ts
index 29be6e21d6..6a03ca07ed 100644
--- a/components/lib/password/password.d.ts
+++ b/components/lib/password/password.d.ts
@@ -55,6 +55,11 @@ export interface PasswordPassThroughOptions {
      * @defaultValue false
      */
     invalid?: boolean | undefined;
+    /**
+     * Specifies the input variant of the component.
+     * @defaultValue outlined
+     */
+    variant?: 'outlined' | 'filled' | undefined;
     /**
      * Uses to pass attributes to the panel's DOM element.
      */
diff --git a/components/lib/radiobutton/RadioButton.js b/components/lib/radiobutton/RadioButton.js
index 19dff128ad..7ccc31974f 100644
--- a/components/lib/radiobutton/RadioButton.js
+++ b/components/lib/radiobutton/RadioButton.js
@@ -112,7 +112,7 @@ export const RadioButton = React.memo(
         const rootProps = mergeProps(
             {
                 id: props.id,
-                className: classNames(props.className, cx('root')),
+                className: classNames(props.className, cx('root', { context })),
                 style: props.style,
                 'data-p-checked': props.checked
             },
diff --git a/components/lib/radiobutton/RadioButtonBase.js b/components/lib/radiobutton/RadioButtonBase.js
index f1a50200bb..c6896607e1 100644
--- a/components/lib/radiobutton/RadioButtonBase.js
+++ b/components/lib/radiobutton/RadioButtonBase.js
@@ -2,11 +2,12 @@ import { ComponentBase } from '../componentbase/ComponentBase';
 import { classNames } from '../utils/Utils';
 
 const classes = {
-    root: ({ props }) =>
+    root: ({ props, context }) =>
         classNames('p-radiobutton p-component', {
             'p-highlight': props.checked,
             'p-disabled': props.disabled,
-            'p-invalid': props.invalid
+            'p-invalid': props.invalid,
+            'p-variant-filled': props.variant ? props.variant === 'filled' : context && context.inputStyle === 'filled'
         }),
     box: 'p-radiobutton-box',
     input: 'p-radiobutton-input',
@@ -24,6 +25,7 @@ export const RadioButtonBase = ComponentBase.extend({
         inputId: null,
         inputRef: null,
         invalid: false,
+        variant: null,
         name: null,
         onChange: null,
         onClick: null,
diff --git a/components/lib/radiobutton/radiobutton.d.ts b/components/lib/radiobutton/radiobutton.d.ts
index b2324eccb7..dae336d280 100644
--- a/components/lib/radiobutton/radiobutton.d.ts
+++ b/components/lib/radiobutton/radiobutton.d.ts
@@ -107,6 +107,11 @@ export interface RadioButtonProps extends Omit<React.DetailedHTMLProps<React.Inp
      * @defaultValue false
      */
     disabled?: boolean | undefined;
+    /**
+     * Specifies the input variant of the component.
+     * @defaultValue outlined
+     */
+    variant?: 'outlined' | 'filled' | undefined;
     /**
      * When present, it specifies that an input field is read-only.
      * @default false
diff --git a/components/lib/treeselect/TreeSelect.js b/components/lib/treeselect/TreeSelect.js
index 5c37ba39d0..f78ad7ff61 100644
--- a/components/lib/treeselect/TreeSelect.js
+++ b/components/lib/treeselect/TreeSelect.js
@@ -840,7 +840,7 @@ export const TreeSelect = React.memo(
         const rootProps = mergeProps(
             {
                 ref: elementRef,
-                className: cx('root', { focusedState, overlayVisibleState, isValueEmpty }),
+                className: cx('root', { context, focusedState, overlayVisibleState, isValueEmpty }),
                 style: props.style,
                 onClick: onClick
             },
diff --git a/components/lib/treeselect/TreeSelectBase.js b/components/lib/treeselect/TreeSelectBase.js
index 091c4c211a..3115beec28 100644
--- a/components/lib/treeselect/TreeSelectBase.js
+++ b/components/lib/treeselect/TreeSelectBase.js
@@ -3,7 +3,7 @@ import { ComponentBase } from '../componentbase/ComponentBase';
 import { classNames } from '../utils/Utils';
 
 const classes = {
-    root: ({ props, focusedState, overlayVisibleState, isValueEmpty }) =>
+    root: ({ props, focusedState, context, overlayVisibleState, isValueEmpty }) =>
         classNames(
             'p-treeselect p-component p-inputwrapper',
             {
@@ -12,6 +12,7 @@ const classes = {
                 'p-disabled': props.disabled,
                 'p-invalid': props.invalid,
                 'p-focus': focusedState,
+                'p-variant-filled': props.variant ? props.variant === 'filled' : context && context.inputStyle === 'filled',
                 'p-inputwrapper-filled': !isValueEmpty,
                 'p-inputwrapper-focus': focusedState || overlayVisibleState
             },
@@ -163,6 +164,7 @@ export const TreeSelectBase = ComponentBase.extend({
         inputId: null,
         inputRef: null,
         invalid: false,
+        variant: null,
         metaKeySelection: false,
         name: null,
         nodeTemplate: null,
diff --git a/components/lib/treeselect/treeselect.d.ts b/components/lib/treeselect/treeselect.d.ts
index 9d0c4384a7..b3fb79afbe 100644
--- a/components/lib/treeselect/treeselect.d.ts
+++ b/components/lib/treeselect/treeselect.d.ts
@@ -505,6 +505,11 @@ export interface TreeSelectProps extends Omit<React.DetailedHTMLProps<React.Inpu
      * Hint text for the input field.
      */
     placeholder?: string | undefined;
+    /**
+     * Specifies the input variant of the component.
+     * @defaultValue outlined
+     */
+    variant?: 'outlined' | 'filled' | undefined;
     /**
      * When present, it specifies that the component should have invalid state style.
      * @defaultValue false
diff --git a/components/lib/tristatecheckbox/TriStateCheckbox.js b/components/lib/tristatecheckbox/TriStateCheckbox.js
index 314a902a07..60bde805d0 100644
--- a/components/lib/tristatecheckbox/TriStateCheckbox.js
+++ b/components/lib/tristatecheckbox/TriStateCheckbox.js
@@ -136,7 +136,7 @@ export const TriStateCheckbox = React.memo(
 
         const rootProps = mergeProps(
             {
-                className: classNames(props.className, cx('root')),
+                className: classNames(props.className, cx('root', { context })),
                 style: props.style,
                 'data-p-disabled': props.disabled
             },
diff --git a/components/lib/tristatecheckbox/TriStateCheckboxBase.js b/components/lib/tristatecheckbox/TriStateCheckboxBase.js
index 8ea8aa2a8c..e1b1ed5f80 100644
--- a/components/lib/tristatecheckbox/TriStateCheckboxBase.js
+++ b/components/lib/tristatecheckbox/TriStateCheckboxBase.js
@@ -2,12 +2,12 @@ import { ComponentBase } from '../componentbase/ComponentBase';
 import { classNames } from '../utils/Utils';
 
 const classes = {
-    root: ({ props }) =>
+    root: ({ props, context }) =>
         classNames('p-tristatecheckbox p-checkbox p-component', {
             'p-highlight': props.value !== null,
             'p-disabled': props.disabled,
             'p-invalid': props.invalid,
-            'p-variant-filled': props.variant === 'filled'
+            'p-variant-filled': props.variant ? props.variant === 'filled' : context && context.inputStyle === 'filled'
         }),
     checkIcon: 'p-checkbox-icon p-c',
     box: 'p-checkbox-box',
@@ -23,6 +23,7 @@ export const TriStateCheckboxBase = ComponentBase.extend({
         disabled: false,
         id: null,
         invalid: false,
+        variant: null,
         onChange: null,
         readOnly: false,
         style: null,
diff --git a/components/lib/tristatecheckbox/tristatecheckbox.d.ts b/components/lib/tristatecheckbox/tristatecheckbox.d.ts
index 8734451ecf..a4d861f2ad 100644
--- a/components/lib/tristatecheckbox/tristatecheckbox.d.ts
+++ b/components/lib/tristatecheckbox/tristatecheckbox.d.ts
@@ -98,6 +98,11 @@ export interface TriStateCheckboxProps extends Omit<React.DetailedHTMLProps<Reac
      * @defaultValue false
      */
     disabled?: boolean | undefined;
+    /**
+     * Specifies the input variant of the component.
+     * @defaultValue outlined
+     */
+    variant?: 'outlined' | 'filled' | undefined;
     /**
      * When present, it specifies that the value cannot be changed.
      * @defaultValue false
diff --git a/package.json b/package.json
index a1bc3c145c..7b1db7fd2f 100644
--- a/package.json
+++ b/package.json
@@ -29,8 +29,6 @@
         "@docsearch/react": "3.5.2",
         "chart.js": "4.4.1",
         "file-saver": "2.0.5",
-        "final-form": "^4.20.10",
-        "formik": "^2.4.5",
         "fs-extra": "^11.2.0",
         "jspdf": "2.5.1",
         "jspdf-autotable": "3.8.1",
@@ -41,8 +39,6 @@
         "quill": "1.3.7",
         "react": "18.2.0",
         "react-dom": "18.2.0",
-        "react-final-form": "^6.5.9",
-        "react-hook-form": "^7.48.2",
         "react-transition-group": "^4.4.5",
         "xlsx": "https://cdn.sheetjs.com/xlsx-0.19.3/xlsx-0.19.3.tgz"
     },
diff --git a/pages/autocomplete/index.js b/pages/autocomplete/index.js
index 008bdb6404..6643beef47 100644
--- a/pages/autocomplete/index.js
+++ b/pages/autocomplete/index.js
@@ -2,10 +2,9 @@ import { AccessibilityDoc } from '@/components/doc/autocomplete/accessibilitydoc
 import { BasicDoc } from '@/components/doc/autocomplete/basicdoc';
 import { DisabledDoc } from '@/components/doc/autocomplete/disableddoc';
 import { DropdownDoc } from '@/components/doc/autocomplete/dropdowndoc';
+import { FilledDoc } from '@/components/doc/autocomplete/filleddoc';
 import { FloatLabelDoc } from '@/components/doc/autocomplete/floatlabeldoc';
 import { ForceSelectionDoc } from '@/components/doc/autocomplete/forceselectiondoc';
-import { FormikDoc } from '@/components/doc/autocomplete/form/formikdoc';
-import { HookFormDoc } from '@/components/doc/autocomplete/form/hookformdoc';
 import { GroupDoc } from '@/components/doc/autocomplete/groupdoc';
 import { ImportDoc } from '@/components/doc/autocomplete/importdoc';
 import { InvalidDoc } from '@/components/doc/autocomplete/invaliddoc';
@@ -72,6 +71,11 @@ const AutoCompleteDemo = () => {
             label: 'Float Label',
             component: FloatLabelDoc
         },
+        {
+            id: 'filled',
+            label: 'Filled',
+            component: FilledDoc
+        },
         {
             id: 'invalid',
             label: 'Invalid',
@@ -82,23 +86,6 @@ const AutoCompleteDemo = () => {
             label: 'Disabled',
             component: DisabledDoc
         },
-        {
-            id: 'form',
-            label: 'Form',
-            description: 'Compatibility with popular React form libraries.',
-            children: [
-                {
-                    id: 'formik',
-                    label: 'Formik',
-                    component: FormikDoc
-                },
-                {
-                    id: 'hookform',
-                    label: 'Hook Form',
-                    component: HookFormDoc
-                }
-            ]
-        },
         {
             id: 'accessibility',
             label: 'Accessibility',
diff --git a/pages/calendar/index.js b/pages/calendar/index.js
index 7848d2dca4..5e05036b8d 100644
--- a/pages/calendar/index.js
+++ b/pages/calendar/index.js
@@ -3,9 +3,8 @@ import { BasicDoc } from '@/components/doc/calendar/basicdoc';
 import { ButtonBarDoc } from '@/components/doc/calendar/buttonbardoc';
 import { DateTemplateDoc } from '@/components/doc/calendar/datetemplatedoc';
 import { DisabledDoc } from '@/components/doc/calendar/disableddoc';
+import { FilledDoc } from '@/components/doc/calendar/filleddoc';
 import { FloatLabelDoc } from '@/components/doc/calendar/floatlabeldoc';
-import { FormikDoc } from '@/components/doc/calendar/form/formikdoc';
-import { HookFormDoc } from '@/components/doc/calendar/form/hookfromdoc';
 import { FormatDoc } from '@/components/doc/calendar/formatdoc';
 import { IconDoc } from '@/components/doc/calendar/icondoc';
 import { ImportDoc } from '@/components/doc/calendar/importdoc';
@@ -109,6 +108,11 @@ const CalendarDemo = () => {
             label: 'Inline',
             component: InlineDoc
         },
+        {
+            id: 'filled',
+            label: 'Filled',
+            component: FilledDoc
+        },
         {
             id: 'floatlabel',
             label: 'Float Label',
@@ -124,24 +128,6 @@ const CalendarDemo = () => {
             label: 'Disabled',
             component: DisabledDoc
         },
-        {
-            id: 'form',
-            label: 'Form',
-            description: 'Compatibility with popular React form libraries.',
-            children: [
-                {
-                    id: 'formik',
-                    label: 'Formik',
-                    component: FormikDoc
-                },
-                {
-                    id: 'hookform',
-                    label: 'Hook Form',
-                    component: HookFormDoc
-                }
-            ]
-        },
-
         {
             id: 'accessibility',
             label: 'Accessibility',
diff --git a/pages/cascadeselect/index.js b/pages/cascadeselect/index.js
index 4243e98eb4..dcbe97e7ee 100644
--- a/pages/cascadeselect/index.js
+++ b/pages/cascadeselect/index.js
@@ -1,9 +1,8 @@
 import { AccessibilityDoc } from '@/components/doc/cascadeselect/accessibilitydoc';
 import { BasicDoc } from '@/components/doc/cascadeselect/basicdoc';
 import { DisabledDoc } from '@/components/doc/cascadeselect/disableddoc';
+import { FilledDoc } from '@/components/doc/cascadeselect/filleddoc';
 import { FloatLabelDoc } from '@/components/doc/cascadeselect/floatlabeldoc';
-import { FormikDoc } from '@/components/doc/cascadeselect/form/formikdoc';
-import { HookFormDoc } from '@/components/doc/cascadeselect/form/hookformdoc';
 import { ImportDoc } from '@/components/doc/cascadeselect/importdoc';
 import { InvalidDoc } from '@/components/doc/cascadeselect/invaliddoc';
 import { LoadingDoc } from '@/components/doc/cascadeselect/loadingdoc';
@@ -42,6 +41,11 @@ const CascadeSelectDemo = () => {
             label: 'Float Label',
             component: FloatLabelDoc
         },
+        {
+            id: 'filled',
+            label: 'Filled',
+            component: FilledDoc
+        },
         {
             id: 'invalid',
             label: 'Invalid',
@@ -52,24 +56,6 @@ const CascadeSelectDemo = () => {
             label: 'Disabled',
             component: DisabledDoc
         },
-        {
-            id: 'form',
-            label: 'Form',
-            description: 'Compatibility with popular React form libraries.',
-            children: [
-                {
-                    id: 'formik',
-                    label: 'Formik',
-                    component: FormikDoc
-                },
-                {
-                    id: 'hookform',
-                    label: 'Hook Form',
-                    component: HookFormDoc
-                }
-            ]
-        },
-
         {
             id: 'accessibility',
             label: 'Accessibility',
diff --git a/pages/checkbox/index.js b/pages/checkbox/index.js
index a7378282eb..8873c6c17c 100644
--- a/pages/checkbox/index.js
+++ b/pages/checkbox/index.js
@@ -2,8 +2,7 @@ import { AccessibilityDoc } from '@/components/doc/checkbox/accessibilitydoc';
 import { BasicDoc } from '@/components/doc/checkbox/basicdoc';
 import { DisabledDoc } from '@/components/doc/checkbox/disableddoc';
 import { DynamicDoc } from '@/components/doc/checkbox/dynamicdoc';
-import { FormikDoc } from '@/components/doc/checkbox/form/formikdoc';
-import { HookFormDoc } from '@/components/doc/checkbox/form/hookformdoc';
+import { FilledDoc } from '@/components/doc/checkbox/filleddoc';
 import { GroupDoc } from '@/components/doc/checkbox/groupdoc';
 import { ImportDoc } from '@/components/doc/checkbox/importdoc';
 import { InvalidDoc } from '@/components/doc/checkbox/invaliddoc';
@@ -41,29 +40,16 @@ const CheckboxDemo = () => {
             label: 'Invalid',
             component: InvalidDoc
         },
+        {
+            id: 'filled',
+            label: 'Filled',
+            component: FilledDoc
+        },
         {
             id: 'disabled',
             label: 'Disabled',
             component: DisabledDoc
         },
-        {
-            id: 'form',
-            label: 'Form',
-            description: 'Compatibility with popular React form libraries.',
-            children: [
-                {
-                    id: 'formik',
-                    label: 'Formik',
-                    component: FormikDoc
-                },
-                {
-                    id: 'hookform',
-                    label: 'Hook Form',
-                    component: HookFormDoc
-                }
-            ]
-        },
-
         {
             id: 'accessibility',
             label: 'Accessibility',
diff --git a/pages/chips/index.js b/pages/chips/index.js
index c8b722571b..9d88a5fb75 100644
--- a/pages/chips/index.js
+++ b/pages/chips/index.js
@@ -1,9 +1,8 @@
 import { AccessibilityDoc } from '@/components/doc/chips/accessibilitydoc';
 import { BasicDoc } from '@/components/doc/chips/basicdoc';
 import { DisabledDoc } from '@/components/doc/chips/disableddoc';
+import { FilledDoc } from '@/components/doc/chips/filleddoc';
 import { FloatLabelDoc } from '@/components/doc/chips/floatlabeldoc';
-import { FormikDoc } from '@/components/doc/chips/form/formikdoc';
-import { HookFormDoc } from '@/components/doc/chips/form/hookformdoc';
 import { ImportDoc } from '@/components/doc/chips/importdoc';
 import { InvalidDoc } from '@/components/doc/chips/invaliddoc';
 import { KeyFilterDoc } from '@/components/doc/chips/keyfilterdoc';
@@ -48,6 +47,11 @@ const ChipsDemo = () => {
             label: 'Float Label',
             component: FloatLabelDoc
         },
+        {
+            id: 'filled',
+            label: 'Filled',
+            component: FilledDoc
+        },
         {
             id: 'invalid',
             label: 'Invalid',
@@ -58,24 +62,6 @@ const ChipsDemo = () => {
             label: 'Disabled',
             component: DisabledDoc
         },
-        {
-            id: 'form',
-            label: 'Form',
-            description: 'Compatibility with popular React form libraries.',
-            children: [
-                {
-                    id: 'formik',
-                    label: 'Formik',
-                    component: FormikDoc
-                },
-                {
-                    id: 'hookform',
-                    label: 'Hook Form',
-                    component: HookFormDoc
-                }
-            ]
-        },
-
         {
             id: 'accessibility',
             label: 'Accessibility',
diff --git a/pages/colorpicker/index.js b/pages/colorpicker/index.js
index 400bf9d978..b73d529d44 100644
--- a/pages/colorpicker/index.js
+++ b/pages/colorpicker/index.js
@@ -1,8 +1,6 @@
 import { AccessibilityDoc } from '@/components/doc/colorpicker/accessibilitydoc';
 import { BasicDoc } from '@/components/doc/colorpicker/basicdoc';
 import { DisabledDoc } from '@/components/doc/colorpicker/disableddoc';
-import { FormikDoc } from '@/components/doc/colorpicker/form/formikdoc';
-import { HookFormDoc } from '@/components/doc/colorpicker/form/hookformdoc';
 import { FormatDoc } from '@/components/doc/colorpicker/formatdoc';
 import { ImportDoc } from '@/components/doc/colorpicker/importdoc';
 import { InlineDoc } from '@/components/doc/colorpicker/inlinedoc';
@@ -40,24 +38,6 @@ const ColorPickerDemo = () => {
             label: 'Disabled',
             component: DisabledDoc
         },
-        {
-            id: 'form',
-            label: 'Form',
-            description: 'Compatibility with popular React form libraries.',
-            children: [
-                {
-                    id: 'formik',
-                    label: 'Formik',
-                    component: FormikDoc
-                },
-                {
-                    id: 'hookform',
-                    label: 'Hook Form',
-                    component: HookFormDoc
-                }
-            ]
-        },
-
         {
             id: 'accessibility',
             label: 'Accessibility',
diff --git a/pages/dropdown/index.js b/pages/dropdown/index.js
index 5511956c08..873f7d16d5 100644
--- a/pages/dropdown/index.js
+++ b/pages/dropdown/index.js
@@ -6,10 +6,9 @@ import { CheckmarkDoc } from '@/components/doc/dropdown/checkmarkdoc';
 import { ClearIconDoc } from '@/components/doc/dropdown/clearicondoc';
 import { DisabledDoc } from '@/components/doc/dropdown/disableddoc';
 import { EditableDoc } from '@/components/doc/dropdown/editabledoc';
+import { FilledDoc } from '@/components/doc/dropdown/filleddoc';
 import { FilterDoc } from '@/components/doc/dropdown/filterdoc';
 import { FloatLabelDoc } from '@/components/doc/dropdown/floatlabeldoc';
-import { FormikDoc } from '@/components/doc/dropdown/form/formikdoc';
-import { HookFormDoc } from '@/components/doc/dropdown/form/hookformdoc';
 import { GroupDoc } from '@/components/doc/dropdown/groupdoc';
 import { ImportDoc } from '@/components/doc/dropdown/importdoc';
 import { InvalidDoc } from '@/components/doc/dropdown/invaliddoc';
@@ -84,6 +83,11 @@ const DropdownDemo = () => {
             label: 'Float Label',
             component: FloatLabelDoc
         },
+        {
+            id: 'filled',
+            label: 'Filled',
+            component: FilledDoc
+        },
         {
             id: 'invalid',
             label: 'Invalid',
@@ -94,24 +98,6 @@ const DropdownDemo = () => {
             label: 'Disabled',
             component: DisabledDoc
         },
-        {
-            id: 'form',
-            label: 'Form',
-            description: 'Compatibility with popular React form libraries.',
-            children: [
-                {
-                    id: 'formik',
-                    label: 'Formik',
-                    component: FormikDoc
-                },
-                {
-                    id: 'hookform',
-                    label: 'Hook Form',
-                    component: HookFormDoc
-                }
-            ]
-        },
-
         {
             id: 'accessibility',
             label: 'Accessibility',
diff --git a/pages/editor/index.js b/pages/editor/index.js
index 5f6f93bff0..056ef3c529 100644
--- a/pages/editor/index.js
+++ b/pages/editor/index.js
@@ -2,8 +2,6 @@ import DocApiTable from '@/components/doc/common/docapitable';
 import { DocComponent } from '@/components/doc/common/doccomponent';
 import { AccessibilityDoc } from '@/components/doc/editor/accessibilitydoc';
 import { BasicDoc } from '@/components/doc/editor/basicdoc';
-import { FormikDoc } from '@/components/doc/editor/form/formikdoc';
-import { HookFormDoc } from '@/components/doc/editor/form/hookformdoc';
 import { ImportDoc } from '@/components/doc/editor/importdoc';
 import { PTDoc } from '@/components/doc/editor/pt/ptdoc';
 import { Wireframe } from '@/components/doc/editor/pt/wireframe';
@@ -40,24 +38,6 @@ const EditorDemo = () => {
             label: 'Template',
             component: TemplateDoc
         },
-        {
-            id: 'form',
-            label: 'Form',
-            description: 'Compatibility with popular React form libraries.',
-            children: [
-                {
-                    id: 'formik',
-                    label: 'Formik',
-                    component: FormikDoc
-                },
-                {
-                    id: 'hookform',
-                    label: 'Hook Form',
-                    component: HookFormDoc
-                }
-            ]
-        },
-
         {
             id: 'accessibility',
             label: 'Accessibility',
diff --git a/pages/inputmask/index.js b/pages/inputmask/index.js
index 241ab09a5e..eb73652392 100644
--- a/pages/inputmask/index.js
+++ b/pages/inputmask/index.js
@@ -3,9 +3,8 @@ import { DocComponent } from '@/components/doc/common/doccomponent';
 import { AccessibilityDoc } from '@/components/doc/inputmask/accessibilitydoc';
 import { BasicDoc } from '@/components/doc/inputmask/basicdoc';
 import { DisabledDoc } from '@/components/doc/inputmask/disableddoc';
+import { FilledDoc } from '@/components/doc/inputmask/filleddoc';
 import { FloatLabelDoc } from '@/components/doc/inputmask/floatlabeldoc';
-import { FormikDoc } from '@/components/doc/inputmask/form/formikdoc';
-import { HookFormDoc } from '@/components/doc/inputmask/form/hookformdoc';
 import { ImportDoc } from '@/components/doc/inputmask/importdoc';
 import { InvalidDoc } from '@/components/doc/inputmask/invaliddoc';
 import { MaskDoc } from '@/components/doc/inputmask/maskdoc';
@@ -49,6 +48,11 @@ const InputMaskDemo = () => {
             label: 'Float Label',
             component: FloatLabelDoc
         },
+        {
+            id: 'filled',
+            label: 'Filled',
+            component: FilledDoc
+        },
         {
             id: 'invalid',
             label: 'Invalid',
@@ -59,24 +63,6 @@ const InputMaskDemo = () => {
             label: 'Disabled',
             component: DisabledDoc
         },
-        {
-            id: 'form',
-            label: 'Form',
-            description: 'Compatibility with popular React form libraries.',
-            children: [
-                {
-                    id: 'formik',
-                    label: 'Formik',
-                    component: FormikDoc
-                },
-                {
-                    id: 'hookform',
-                    label: 'Hook Form',
-                    component: HookFormDoc
-                }
-            ]
-        },
-
         {
             id: 'accessibility',
             label: 'Accessibility',
diff --git a/pages/inputnumber/index.js b/pages/inputnumber/index.js
index 0a7bf952c4..6e2d45e932 100644
--- a/pages/inputnumber/index.js
+++ b/pages/inputnumber/index.js
@@ -4,9 +4,8 @@ import { AccessibilityDoc } from '@/components/doc/inputnumber/accessibilitydoc'
 import { ButtonsDoc } from '@/components/doc/inputnumber/buttonsdoc';
 import { CurrencyDoc } from '@/components/doc/inputnumber/currencydoc';
 import { DisabledDoc } from '@/components/doc/inputnumber/disableddoc';
+import { FilledDoc } from '@/components/doc/inputnumber/filleddoc';
 import { FloatLabelDoc } from '@/components/doc/inputnumber/floatlabeldoc';
-import { FormikDoc } from '@/components/doc/inputnumber/form/formikdoc';
-import { HookFormDoc } from '@/components/doc/inputnumber/form/hookformdoc';
 import { ImportDoc } from '@/components/doc/inputnumber/importdoc';
 import { InvalidDoc } from '@/components/doc/inputnumber/invaliddoc';
 import { LocaleDoc } from '@/components/doc/inputnumber/localedoc';
@@ -60,6 +59,11 @@ const InputNumberDemo = () => {
             label: 'Float Label',
             component: FloatLabelDoc
         },
+        {
+            id: 'filled',
+            label: 'Filled',
+            component: FilledDoc
+        },
         {
             id: 'invalid',
             label: 'Invalid',
@@ -70,24 +74,6 @@ const InputNumberDemo = () => {
             label: 'Disabled',
             component: DisabledDoc
         },
-        {
-            id: 'form',
-            label: 'Form',
-            description: 'Compatibility with popular React form libraries.',
-            children: [
-                {
-                    id: 'formik',
-                    label: 'Formik',
-                    component: FormikDoc
-                },
-                {
-                    id: 'hookform',
-                    label: 'Hook Form',
-                    component: HookFormDoc
-                }
-            ]
-        },
-
         {
             id: 'accessibility',
             label: 'Accessibility',
diff --git a/pages/inputswitch/index.js b/pages/inputswitch/index.js
index b389326232..431d1bd1eb 100644
--- a/pages/inputswitch/index.js
+++ b/pages/inputswitch/index.js
@@ -3,8 +3,6 @@ import { DocComponent } from '@/components/doc/common/doccomponent';
 import { AccessibilityDoc } from '@/components/doc/inputswitch/accessibilitydoc';
 import { BasicDoc } from '@/components/doc/inputswitch/basicdoc';
 import { DisabledDoc } from '@/components/doc/inputswitch/disableddoc';
-import { FormikDoc } from '@/components/doc/inputswitch/form/formikdoc';
-import { HookFormDoc } from '@/components/doc/inputswitch/form/hookformdoc';
 import { ImportDoc } from '@/components/doc/inputswitch/importdoc';
 import { InvalidDoc } from '@/components/doc/inputswitch/invaliddoc';
 import { PreselectionDoc } from '@/components/doc/inputswitch/preselectiondoc';
@@ -40,24 +38,6 @@ const InputSwitchDemo = () => {
             label: 'Disabled',
             component: DisabledDoc
         },
-        {
-            id: 'form',
-            label: 'Form',
-            description: 'Compatibility with popular React form libraries.',
-            children: [
-                {
-                    id: 'formik',
-                    label: 'Formik',
-                    component: FormikDoc
-                },
-                {
-                    id: 'hookform',
-                    label: 'Hook Form',
-                    component: HookFormDoc
-                }
-            ]
-        },
-
         {
             id: 'accessibility',
             label: 'Accessibility',
diff --git a/pages/inputtext/index.js b/pages/inputtext/index.js
index 3db6315769..ed20ed267c 100644
--- a/pages/inputtext/index.js
+++ b/pages/inputtext/index.js
@@ -3,9 +3,8 @@ import { DocComponent } from '@/components/doc/common/doccomponent';
 import { AccessibilityDoc } from '@/components/doc/inputtext/accessibilitydoc';
 import { BasicDoc } from '@/components/doc/inputtext/basicdoc';
 import { DisabledDoc } from '@/components/doc/inputtext/disableddoc';
+import { FilledDoc } from '@/components/doc/inputtext/filleddoc';
 import { FloatLabelDoc } from '@/components/doc/inputtext/floatlabeldoc';
-import { FormikDoc } from '@/components/doc/inputtext/form/formikdoc';
-import { HookFormDoc } from '@/components/doc/inputtext/form/hookformdoc';
 import { HelpTextDoc } from '@/components/doc/inputtext/helptextdoc';
 import { ImportDoc } from '@/components/doc/inputtext/importdoc';
 import { InvalidDoc } from '@/components/doc/inputtext/invaliddoc';
@@ -48,6 +47,11 @@ const InputTextDemo = () => {
             label: 'Float Label',
             component: FloatLabelDoc
         },
+        {
+            id: 'filled',
+            label: 'Filled',
+            component: FilledDoc
+        },
         {
             id: 'invalid',
             label: 'Invalid',
@@ -58,24 +62,6 @@ const InputTextDemo = () => {
             label: 'Disabled',
             component: DisabledDoc
         },
-        {
-            id: 'form',
-            label: 'Form',
-            description: 'Compatibility with popular React form libraries.',
-            children: [
-                {
-                    id: 'formik',
-                    label: 'Formik',
-                    component: FormikDoc
-                },
-                {
-                    id: 'hookform',
-                    label: 'Hook Form',
-                    component: HookFormDoc
-                }
-            ]
-        },
-
         {
             id: 'accessibility',
             label: 'Accessibility',
diff --git a/pages/inputtextarea/index.js b/pages/inputtextarea/index.js
index ac9efc2834..5ca02af3cb 100644
--- a/pages/inputtextarea/index.js
+++ b/pages/inputtextarea/index.js
@@ -4,9 +4,8 @@ import { AccessibilityDoc } from '@/components/doc/inputtextarea/accessibilitydo
 import { AutoResizeDoc } from '@/components/doc/inputtextarea/autoresizedoc';
 import { BasicDoc } from '@/components/doc/inputtextarea/basicdoc';
 import { DisabledDoc } from '@/components/doc/inputtextarea/disableddoc';
+import { FilledDoc } from '@/components/doc/inputtextarea/filleddoc';
 import { FloatLabelDoc } from '@/components/doc/inputtextarea/floatlabeldoc';
-import { FormikDoc } from '@/components/doc/inputtextarea/form/formikdoc';
-import { HookFormDoc } from '@/components/doc/inputtextarea/form/hookformdoc';
 import { ImportDoc } from '@/components/doc/inputtextarea/importdoc';
 import { InvalidDoc } from '@/components/doc/inputtextarea/invaliddoc';
 import { KeyFilterDoc } from '@/components/doc/inputtextarea/keyfilterdoc';
@@ -42,6 +41,11 @@ const InputTextareaDemo = () => {
             label: 'Float Label',
             component: FloatLabelDoc
         },
+        {
+            id: 'filled',
+            label: 'Filled',
+            component: FilledDoc
+        },
         {
             id: 'invalid',
             label: 'Invalid',
@@ -52,24 +56,6 @@ const InputTextareaDemo = () => {
             label: 'Disabled',
             component: DisabledDoc
         },
-        {
-            id: 'form',
-            label: 'Form',
-            description: 'Compatibility with popular React form libraries.',
-            children: [
-                {
-                    id: 'formik',
-                    label: 'Formik',
-                    component: FormikDoc
-                },
-                {
-                    id: 'hookform',
-                    label: 'Hook Form',
-                    component: HookFormDoc
-                }
-            ]
-        },
-
         {
             id: 'accessibility',
             label: 'Accessibility',
diff --git a/pages/knob/index.js b/pages/knob/index.js
index f4f9ce03d9..6fb7845822 100644
--- a/pages/knob/index.js
+++ b/pages/knob/index.js
@@ -4,8 +4,6 @@ import { AccessibilityDoc } from '@/components/doc/knob/accessibilitydoc';
 import { BasicDoc } from '@/components/doc/knob/basicdoc';
 import { ColorDoc } from '@/components/doc/knob/colordoc';
 import { DisabledDoc } from '@/components/doc/knob/disableddoc';
-import { FormikDoc } from '@/components/doc/knob/form/formikdoc';
-import { HookFormDoc } from '@/components/doc/knob/form/hookformdoc';
 import { ImportDoc } from '@/components/doc/knob/importdoc';
 import { MinMaxDoc } from '@/components/doc/knob/minmaxdoc';
 import { PTDoc } from '@/components/doc/knob/pt/ptdoc';
@@ -76,24 +74,6 @@ const KnobDemo = () => {
             label: 'Disabled',
             component: DisabledDoc
         },
-        {
-            id: 'form',
-            label: 'Form',
-            description: 'Compatibility with popular React form libraries.',
-            children: [
-                {
-                    id: 'formik',
-                    label: 'Formik',
-                    component: FormikDoc
-                },
-                {
-                    id: 'hookform',
-                    label: 'Hook Form',
-                    component: HookFormDoc
-                }
-            ]
-        },
-
         {
             id: 'accessibility',
             label: 'Accessibility',
diff --git a/pages/listbox/index.js b/pages/listbox/index.js
index ca1e183ce4..49ad9e8fa9 100644
--- a/pages/listbox/index.js
+++ b/pages/listbox/index.js
@@ -4,8 +4,6 @@ import { AccessibilityDoc } from '@/components/doc/listbox/accessibilitydoc';
 import { BasicDoc } from '@/components/doc/listbox/basicdoc';
 import { DisabledDoc } from '@/components/doc/listbox/disableddoc';
 import { FilterDoc } from '@/components/doc/listbox/filterdoc';
-import { FormikDoc } from '@/components/doc/listbox/form/formikdoc';
-import { HookFormDoc } from '@/components/doc/listbox/form/hookformdoc';
 import { GroupDoc } from '@/components/doc/listbox/groupdoc';
 import { ImportDoc } from '@/components/doc/listbox/importdoc';
 import { InvalidDoc } from '@/components/doc/listbox/invaliddoc';
@@ -64,24 +62,6 @@ const ListBoxDemo = () => {
             label: 'Disabled',
             component: DisabledDoc
         },
-        {
-            id: 'form',
-            label: 'Form',
-            description: 'Compatibility with popular React form libraries.',
-            children: [
-                {
-                    id: 'formik',
-                    label: 'Formik',
-                    component: FormikDoc
-                },
-                {
-                    id: 'hookform',
-                    label: 'Hook Form',
-                    component: HookFormDoc
-                }
-            ]
-        },
-
         {
             id: 'accessibility',
             label: 'Accessibility',
diff --git a/pages/mention/index.js b/pages/mention/index.js
index b5ebd00e9f..8359db0a74 100644
--- a/pages/mention/index.js
+++ b/pages/mention/index.js
@@ -5,8 +5,6 @@ import { AutoResizeDoc } from '@/components/doc/mention/autoresizedoc';
 import { BasicDoc } from '@/components/doc/mention/basicdoc';
 import { DisabledDoc } from '@/components/doc/mention/disableddoc';
 import { FloatLabelDoc } from '@/components/doc/mention/floatlabeldoc';
-import { FormikDoc } from '@/components/doc/mention/form/formikdoc';
-import { HookFormDoc } from '@/components/doc/mention/form/hookformdoc';
 import { ImportDoc } from '@/components/doc/mention/importdoc';
 import { InvalidDoc } from '@/components/doc/mention/invaliddoc';
 import { PTDoc } from '@/components/doc/mention/pt/ptdoc';
@@ -52,24 +50,6 @@ const MentionDemo = () => {
             label: 'Disabled',
             component: DisabledDoc
         },
-        {
-            id: 'form',
-            label: 'Form',
-            description: 'Compatibility with popular React form libraries.',
-            children: [
-                {
-                    id: 'formik',
-                    label: 'Formik',
-                    component: FormikDoc
-                },
-                {
-                    id: 'hookform',
-                    label: 'Hook Form',
-                    component: HookFormDoc
-                }
-            ]
-        },
-
         {
             id: 'accessibility',
             label: 'Accessibility',
diff --git a/pages/multiselect/index.js b/pages/multiselect/index.js
index 3fa67f8004..463ba7a4a0 100644
--- a/pages/multiselect/index.js
+++ b/pages/multiselect/index.js
@@ -4,10 +4,9 @@ import { AccessibilityDoc } from '@/components/doc/multiselect/accessibilitydoc'
 import { BasicDoc } from '@/components/doc/multiselect/basicdoc';
 import { ChipsDoc } from '@/components/doc/multiselect/chipsdoc';
 import { DisabledDoc } from '@/components/doc/multiselect/disableddoc';
+import { FilledDoc } from '@/components/doc/multiselect/filleddoc';
 import { FilterDoc } from '@/components/doc/multiselect/filterdoc';
 import { FloatLabelDoc } from '@/components/doc/multiselect/floatlabeldoc';
-import { FormikDoc } from '@/components/doc/multiselect/form/formikdoc';
-import { HookFormDoc } from '@/components/doc/multiselect/form/hookformdoc';
 import { GroupDoc } from '@/components/doc/multiselect/groupdoc';
 import { ImportDoc } from '@/components/doc/multiselect/importdoc';
 import { InvalidDoc } from '@/components/doc/multiselect/invaliddoc';
@@ -66,6 +65,11 @@ const MultiSelectDemo = () => {
             label: 'Float Label',
             component: FloatLabelDoc
         },
+        {
+            id: 'filled',
+            label: 'Filled',
+            component: FilledDoc
+        },
         {
             id: 'invalid',
             label: 'Invalid',
@@ -76,24 +80,6 @@ const MultiSelectDemo = () => {
             label: 'Disabled',
             component: DisabledDoc
         },
-        {
-            id: 'form',
-            label: 'Form',
-            description: 'Compatibility with popular React form libraries.',
-            children: [
-                {
-                    id: 'formik',
-                    label: 'Formik',
-                    component: FormikDoc
-                },
-                {
-                    id: 'hookform',
-                    label: 'Hook Form',
-                    component: HookFormDoc
-                }
-            ]
-        },
-
         {
             id: 'accessibility',
             label: 'Accessibility',
diff --git a/pages/multistatecheckbox/index.js b/pages/multistatecheckbox/index.js
index 0b5cd13c1e..787c19f4a8 100644
--- a/pages/multistatecheckbox/index.js
+++ b/pages/multistatecheckbox/index.js
@@ -3,8 +3,6 @@ import { DocComponent } from '@/components/doc/common/doccomponent';
 import { AccessibilityDoc } from '@/components/doc/multistatecheckbox/accessibilitydoc';
 import { BasicDoc } from '@/components/doc/multistatecheckbox/basicdoc';
 import { DisabledDoc } from '@/components/doc/multistatecheckbox/disableddoc';
-import { FormikDoc } from '@/components/doc/multistatecheckbox/form/formikdoc';
-import { HookFormDoc } from '@/components/doc/multistatecheckbox/form/hookformdoc';
 import { ImportDoc } from '@/components/doc/multistatecheckbox/importdoc';
 import { InvalidDoc } from '@/components/doc/multistatecheckbox/invaliddoc';
 import { PTDoc } from '@/components/doc/multistatecheckbox/pt/ptdoc';
@@ -34,24 +32,6 @@ const MultiStateCheckboxDemo = () => {
             label: 'Disabled',
             component: DisabledDoc
         },
-        {
-            id: 'form',
-            label: 'Form',
-            description: 'Compatibility with popular React form libraries.',
-            children: [
-                {
-                    id: 'formik',
-                    label: 'Formik',
-                    component: FormikDoc
-                },
-                {
-                    id: 'hookform',
-                    label: 'Hook Form',
-                    component: HookFormDoc
-                }
-            ]
-        },
-
         {
             id: 'accessibility',
             label: 'Accessibility',
diff --git a/pages/password/index.js b/pages/password/index.js
index 7762c533d3..c1695e516a 100644
--- a/pages/password/index.js
+++ b/pages/password/index.js
@@ -3,9 +3,8 @@ import { DocComponent } from '@/components/doc/common/doccomponent';
 import { AccessibilityDoc } from '@/components/doc/password/accessibilitydoc';
 import { BasicDoc } from '@/components/doc/password/basicdoc';
 import { DisabledDoc } from '@/components/doc/password/disableddoc';
+import { FilledDoc } from '@/components/doc/password/filleddoc';
 import { FloatLabelDoc } from '@/components/doc/password/floatlabeldoc';
-import { FormikDoc } from '@/components/doc/password/form/formikdoc';
-import { HookFormDoc } from '@/components/doc/password/form/hookformdoc';
 import { ImportDoc } from '@/components/doc/password/importdoc';
 import { InvalidDoc } from '@/components/doc/password/invaliddoc';
 import { LocaleDoc } from '@/components/doc/password/localedoc';
@@ -54,6 +53,11 @@ const PasswordDemo = () => {
             label: 'Float Label',
             component: FloatLabelDoc
         },
+        {
+            id: 'filled',
+            label: 'Filled',
+            component: FilledDoc
+        },
         {
             id: 'invalid',
             label: 'Invalid',
@@ -64,24 +68,6 @@ const PasswordDemo = () => {
             label: 'Disabled',
             component: DisabledDoc
         },
-        {
-            id: 'form',
-            label: 'Form',
-            description: 'Compatibility with popular React form libraries.',
-            children: [
-                {
-                    id: 'formik',
-                    label: 'Formik',
-                    component: FormikDoc
-                },
-                {
-                    id: 'hookform',
-                    label: 'Hook Form',
-                    component: HookFormDoc
-                }
-            ]
-        },
-
         {
             id: 'accessibility',
             label: 'Accessibility',
diff --git a/pages/radiobutton/index.js b/pages/radiobutton/index.js
index 854703c289..883a210365 100644
--- a/pages/radiobutton/index.js
+++ b/pages/radiobutton/index.js
@@ -3,8 +3,7 @@ import { DocComponent } from '@/components/doc/common/doccomponent';
 import { AccessibilityDoc } from '@/components/doc/radiobutton/accessibilitydoc';
 import { DisabledDoc } from '@/components/doc/radiobutton/disableddoc';
 import { DynamicDoc } from '@/components/doc/radiobutton/dynamicdoc';
-import { FormikDoc } from '@/components/doc/radiobutton/form/formikdoc';
-import { HookFormDoc } from '@/components/doc/radiobutton/form/hookformdoc';
+import { FilledDoc } from '@/components/doc/radiobutton/filleddoc';
 import { GroupDoc } from '@/components/doc/radiobutton/groupdoc';
 import { ImportDoc } from '@/components/doc/radiobutton/importdoc';
 import { InvalidDoc } from '@/components/doc/radiobutton/invaliddoc';
@@ -30,6 +29,11 @@ const RadioButtonDemo = () => {
             label: 'Dynamic',
             component: DynamicDoc
         },
+        {
+            id: 'filled',
+            label: 'Filled',
+            component: FilledDoc
+        },
         {
             id: 'invalid',
             label: 'Invalid',
@@ -40,24 +44,6 @@ const RadioButtonDemo = () => {
             label: 'Disabled',
             component: DisabledDoc
         },
-        {
-            id: 'form',
-            label: 'Form',
-            description: 'Compatibility with popular React form libraries.',
-            children: [
-                {
-                    id: 'formik',
-                    label: 'Formik',
-                    component: FormikDoc
-                },
-                {
-                    id: 'hookform',
-                    label: 'Hook Form',
-                    component: HookFormDoc
-                }
-            ]
-        },
-
         {
             id: 'accessibility',
             label: 'Accessibility',
diff --git a/pages/selectbutton/index.js b/pages/selectbutton/index.js
index a075c59fa9..dfe016caf9 100644
--- a/pages/selectbutton/index.js
+++ b/pages/selectbutton/index.js
@@ -3,8 +3,6 @@ import { DocComponent } from '@/components/doc/common/doccomponent';
 import { AccessibilityDoc } from '@/components/doc/selectbutton/accessibilitydoc';
 import { BasicDoc } from '@/components/doc/selectbutton/basicdoc';
 import { DisabledDoc } from '@/components/doc/selectbutton/disableddoc';
-import { FormikDoc } from '@/components/doc/selectbutton/form/formikdoc';
-import { HookFormDoc } from '@/components/doc/selectbutton/form/hookformdoc';
 import { ImportDoc } from '@/components/doc/selectbutton/importdoc';
 import { InvalidDoc } from '@/components/doc/selectbutton/invaliddoc';
 import { MultipleDoc } from '@/components/doc/selectbutton/multipledoc';
@@ -46,23 +44,6 @@ const SelectButtonDemo = () => {
             label: 'Disabled',
             component: DisabledDoc
         },
-        {
-            id: 'form',
-            label: 'Form',
-            description: 'Compatibility with popular React form libraries.',
-            children: [
-                {
-                    id: 'formik',
-                    label: 'Formik',
-                    component: FormikDoc
-                },
-                {
-                    id: 'hookform',
-                    label: 'Hook Form',
-                    component: HookFormDoc
-                }
-            ]
-        },
         {
             id: 'accessibility',
             label: 'Accessibility',
diff --git a/pages/slider/index.js b/pages/slider/index.js
index 7aa0400fab..d3c9d15bc4 100644
--- a/pages/slider/index.js
+++ b/pages/slider/index.js
@@ -2,6 +2,7 @@ import DocApiTable from '@/components/doc/common/docapitable';
 import { DocComponent } from '@/components/doc/common/doccomponent';
 import { AccessibilityDoc } from '@/components/doc/slider/accessibilitydoc';
 import { BasicDoc } from '@/components/doc/slider/basicdoc';
+import { FilterDoc } from '@/components/doc/slider/filterdoc';
 import { ImportDoc } from '@/components/doc/slider/importdoc';
 import { InputDoc } from '@/components/doc/slider/inputdoc';
 import { PTDoc } from '@/components/doc/slider/pt/ptdoc';
@@ -39,12 +40,16 @@ const SliderDemo = () => {
             label: 'Range',
             component: RangeDoc
         },
+        {
+            id: 'filter',
+            label: 'Filter',
+            component: FilterDoc
+        },
         {
             id: 'vertical',
             label: 'Vertical',
             component: VerticalDoc
         },
-
         {
             id: 'accessibility',
             label: 'Accessibility',
diff --git a/pages/splitbutton/index.js b/pages/splitbutton/index.js
index da342d8ad7..c3e8a3d5b0 100644
--- a/pages/splitbutton/index.js
+++ b/pages/splitbutton/index.js
@@ -3,6 +3,7 @@ import { DocComponent } from '@/components/doc/common/doccomponent';
 import { AccessibilityDoc } from '@/components/doc/splitbutton/accessibilitydoc';
 import { BasicDoc } from '@/components/doc/splitbutton/basicdoc';
 import { DisabledDoc } from '@/components/doc/splitbutton/disableddoc';
+import { IconsDoc } from '@/components/doc/splitbutton/iconsdoc';
 import { ImportDoc } from '@/components/doc/splitbutton/importdoc';
 import { LoadingDoc } from '@/components/doc/splitbutton/loadingdoc';
 import { OutlinedDoc } from '@/components/doc/splitbutton/outlineddoc';
@@ -13,10 +14,10 @@ import { RaisedTextDoc } from '@/components/doc/splitbutton/raisedtextdoc';
 import { RoundedDoc } from '@/components/doc/splitbutton/roundeddoc';
 import { SeverityDoc } from '@/components/doc/splitbutton/severitydoc';
 import { SizesDoc } from '@/components/doc/splitbutton/sizesdoc';
+import { TemplateDoc } from '@/components/doc/splitbutton/templatedoc';
 import { TextDoc } from '@/components/doc/splitbutton/textdoc';
 import { StyledDoc } from '@/components/doc/splitbutton/theming/styleddoc';
 import { TailwindDoc } from '@/components/doc/splitbutton/theming/tailwinddoc';
-import { TemplateDoc } from '@/components/doc/splitbutton/templatedoc';
 
 const SplitButtonDemo = () => {
     const docs = [
@@ -30,6 +31,16 @@ const SplitButtonDemo = () => {
             label: 'Basic',
             component: BasicDoc
         },
+        {
+            id: 'icons',
+            label: 'Icons',
+            component: IconsDoc
+        },
+        {
+            id: 'severity',
+            label: 'Severity',
+            component: SeverityDoc
+        },
         {
             id: 'loading',
             label: 'Loading',
@@ -40,11 +51,6 @@ const SplitButtonDemo = () => {
             label: 'Disabled',
             component: DisabledDoc
         },
-        {
-            id: 'severity',
-            label: 'Severity',
-            component: SeverityDoc
-        },
         {
             id: 'raised',
             label: 'Raised',
diff --git a/pages/steps/index.js b/pages/steps/index.js
index ac7ed83aa1..d26a60e255 100644
--- a/pages/steps/index.js
+++ b/pages/steps/index.js
@@ -5,6 +5,7 @@ import { BasicDoc } from '@/components/doc/steps/basicdoc';
 import { ControlledDoc } from '@/components/doc/steps/controlleddoc';
 import { ImportDoc } from '@/components/doc/steps/importdoc';
 import { InteractiveDoc } from '@/components/doc/steps/interactivedoc';
+import { LinearDoc } from '@/components/doc/steps/lineardoc';
 import { PTDoc } from '@/components/doc/steps/pt/ptdoc';
 import { Wireframe } from '@/components/doc/steps/pt/wireframe';
 import { TemplateDoc } from '@/components/doc/steps/templatedoc';
@@ -28,6 +29,11 @@ const StepsDemo = () => {
             label: 'Controlled',
             component: ControlledDoc
         },
+        {
+            id: 'linear',
+            label: 'Linear',
+            component: LinearDoc
+        },
         {
             id: 'interactive',
             label: 'Interactive',
diff --git a/pages/togglebutton/index.js b/pages/togglebutton/index.js
index b0b088f0ef..6577f6e37e 100644
--- a/pages/togglebutton/index.js
+++ b/pages/togglebutton/index.js
@@ -3,9 +3,9 @@ import { DocComponent } from '@/components/doc/common/doccomponent';
 import { AccessibilityDoc } from '@/components/doc/togglebutton/accessibilitydoc';
 import { BasicDoc } from '@/components/doc/togglebutton/basicdoc';
 import { CustomizedDoc } from '@/components/doc/togglebutton/customizeddoc';
-import { FormikDoc } from '@/components/doc/togglebutton/form/formikdoc';
-import { HookFormDoc } from '@/components/doc/togglebutton/form/hookformdoc';
+import { DisabledDoc } from '@/components/doc/togglebutton/disableddoc';
 import { ImportDoc } from '@/components/doc/togglebutton/importdoc';
+import { InvalidDoc } from '@/components/doc/togglebutton/invaliddoc';
 import { PTDoc } from '@/components/doc/togglebutton/pt/ptdoc';
 import { Wireframe } from '@/components/doc/togglebutton/pt/wireframe';
 import { StyledDoc } from '@/components/doc/togglebutton/theming/styleddoc';
@@ -29,23 +29,15 @@ const ToggleButtonDemo = () => {
             component: CustomizedDoc
         },
         {
-            id: 'form',
-            label: 'Form',
-            description: 'Compatibility with popular React form libraries.',
-            children: [
-                {
-                    id: 'formik',
-                    label: 'Formik',
-                    component: FormikDoc
-                },
-                {
-                    id: 'hookform',
-                    label: 'Hook Form',
-                    component: HookFormDoc
-                }
-            ]
+            id: 'invalid',
+            label: 'Invalid',
+            component: InvalidDoc
+        },
+        {
+            id: 'disabled',
+            label: 'Disabled',
+            component: DisabledDoc
         },
-
         {
             id: 'accessibility',
             label: 'Accessibility',
diff --git a/pages/treeselect/index.js b/pages/treeselect/index.js
index d658d82f0f..51d76c209a 100644
--- a/pages/treeselect/index.js
+++ b/pages/treeselect/index.js
@@ -6,10 +6,9 @@ import { CheckboxDoc } from '@/components/doc/treeselect/checkboxdoc';
 import { ClearIconDoc } from '@/components/doc/treeselect/clearicondoc';
 import { ControlledDoc } from '@/components/doc/treeselect/controlleddoc';
 import { DisabledDoc } from '@/components/doc/treeselect/disableddoc';
+import { FilledDoc } from '@/components/doc/treeselect/filleddoc';
 import { FilterDoc } from '@/components/doc/treeselect/filterdoc';
 import { FloatLabelDoc } from '@/components/doc/treeselect/floatlabeldoc';
-import { FormikDoc } from '@/components/doc/treeselect/form/formikdoc';
-import { HookFormDoc } from '@/components/doc/treeselect/form/hookformdoc';
 import { ImportDoc } from '@/components/doc/treeselect/importdoc';
 import { InvalidDoc } from '@/components/doc/treeselect/invaliddoc';
 import { MultipleDoc } from '@/components/doc/treeselect/multipledoc';
@@ -60,6 +59,11 @@ const TreeSelectDemo = () => {
             label: 'Float Label',
             component: FloatLabelDoc
         },
+        {
+            id: 'filled',
+            label: 'Filled',
+            component: FilledDoc
+        },
         {
             id: 'invalid',
             label: 'Invalid',
@@ -70,24 +74,6 @@ const TreeSelectDemo = () => {
             label: 'Disabled',
             component: DisabledDoc
         },
-        {
-            id: 'form',
-            label: 'Form',
-            description: 'Compatibility with popular React form libraries.',
-            children: [
-                {
-                    id: 'formik',
-                    label: 'Formik',
-                    component: FormikDoc
-                },
-                {
-                    id: 'hookform',
-                    label: 'Hook Form',
-                    component: HookFormDoc
-                }
-            ]
-        },
-
         {
             id: 'accessibility',
             label: 'Accessibility',
diff --git a/pages/tristatecheckbox/index.js b/pages/tristatecheckbox/index.js
index c129e25637..edd2880e29 100644
--- a/pages/tristatecheckbox/index.js
+++ b/pages/tristatecheckbox/index.js
@@ -3,8 +3,7 @@ import { DocComponent } from '@/components/doc/common/doccomponent';
 import { AccessibilityDoc } from '@/components/doc/tristatecheckbox/accessibilitydoc';
 import { BasicDoc } from '@/components/doc/tristatecheckbox/basicdoc';
 import { DisabledDoc } from '@/components/doc/tristatecheckbox/disableddoc';
-import { FormikDoc } from '@/components/doc/tristatecheckbox/form/formikdoc';
-import { HookFormDoc } from '@/components/doc/tristatecheckbox/form/hookformdoc';
+import { FilledDoc } from '@/components/doc/tristatecheckbox/filleddoc';
 import { ImportDoc } from '@/components/doc/tristatecheckbox/importdoc';
 import { InvalidDoc } from '@/components/doc/tristatecheckbox/invaliddoc';
 import { PTDoc } from '@/components/doc/tristatecheckbox/pt/ptdoc';
@@ -24,6 +23,11 @@ const TriStateCheckboxDemo = () => {
             label: 'Basic',
             component: BasicDoc
         },
+        {
+            id: 'filled',
+            label: 'Filled',
+            component: FilledDoc
+        },
         {
             id: 'invalid',
             label: 'Invalid',
@@ -34,24 +38,6 @@ const TriStateCheckboxDemo = () => {
             label: 'Disabled',
             component: DisabledDoc
         },
-        {
-            id: 'form',
-            label: 'Form',
-            description: 'Compatibility with popular React form libraries.',
-            children: [
-                {
-                    id: 'formik',
-                    label: 'Formik',
-                    component: FormikDoc
-                },
-                {
-                    id: 'hookform',
-                    label: 'Hook Form',
-                    component: HookFormDoc
-                }
-            ]
-        },
-
         {
             id: 'accessibility',
             label: 'Accessibility',
diff --git a/public/themes/arya-blue/theme.css b/public/themes/arya-blue/theme.css
index d27b1e785c..b9886cdb22 100644
--- a/public/themes/arya-blue/theme.css
+++ b/public/themes/arya-blue/theme.css
@@ -639,6 +639,7 @@
     border: 1px solid #383838;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
     border-radius: 3px;
+    outline-color: transparent;
   }
   .p-cascadeselect:not(.p-disabled):hover {
     border-color: #64b5f6;
@@ -649,6 +650,15 @@
     box-shadow: 0 0 0 1px #93cbf9;
     border-color: #64b5f6;
   }
+  .p-cascadeselect.p-variant-filled {
+    background-color: #383838;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:hover {
+    background-color: #383838;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:focus {
+    background-color: #383838;
+  }
   .p-cascadeselect .p-cascadeselect-label {
     background: transparent;
     border: 0 none;
@@ -689,38 +699,29 @@
     transition: box-shadow 0.2s;
     border-radius: 0;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
-    padding: 0.5rem 1rem;
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+    margin-top: 0;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: inset 0 0 0 0.15rem #93cbf9;
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+    margin-bottom: 0;
   }
   .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
     color: rgba(255, 255, 255, 0.87);
     background: rgba(100, 181, 246, 0.16);
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+    background: rgba(100, 181, 246, 0.24);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: rgba(255, 255, 255, 0.87);
     background: rgba(255, 255, 255, 0.03);
   }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+    padding: 0.5rem 1rem;
+  }
   .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
     font-size: 0.875rem;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon.p-icon {
-    width: 0.875rem;
-    height: 0.875rem;
-  }
-  .p-input-filled .p-cascadeselect {
-    background: #383838;
-  }
-  .p-input-filled .p-cascadeselect:not(.p-disabled):hover {
-    background-color: #383838;
-  }
-  .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
-    background-color: #383838;
-  }
   .p-checkbox {
     position: relative;
     display: inline-flex;
@@ -1314,6 +1315,7 @@
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
     appearance: none;
     border-radius: 3px;
+    outline-color: transparent;
   }
   .p-inputtext:enabled:hover {
     border-color: #64b5f6;
@@ -1327,6 +1329,15 @@
   .p-inputtext.p-invalid.p-component {
     border-color: #ef9a9a;
   }
+  .p-inputtext.p-variant-filled {
+    background-color: #383838;
+  }
+  .p-inputtext.p-variant-filled:enabled:hover {
+    background-color: #383838;
+  }
+  .p-inputtext.p-variant-filled:enabled:focus {
+    background-color: #383838;
+  }
   .p-inputtext.p-inputtext-sm {
     font-size: 0.875rem;
     padding: 0.4375rem 0.4375rem;
@@ -1340,30 +1351,9 @@
     color: rgba(255, 255, 255, 0.6);
     transition-duration: 0.2s;
   }
-  .p-float-label > label.p-error {
+  .p-float-label > .p-invalid + label {
     color: #ef9a9a;
   }
-  .p-input-icon-left > i:first-of-type,
-  .p-input-icon-left > svg:first-of-type,
-  .p-input-icon-left > .p-input-prefix {
-    left: 0.5rem;
-    color: rgba(255, 255, 255, 0.6);
-  }
-  .p-input-icon-left > .p-inputtext {
-    padding-left: 2rem;
-  }
-  .p-input-icon-left.p-float-label > label {
-    left: 2rem;
-  }
-  .p-input-icon-right > i:last-of-type,
-  .p-input-icon-right > svg:last-of-type,
-  .p-input-icon-right > .p-input-suffix {
-    right: 0.5rem;
-    color: rgba(255, 255, 255, 0.6);
-  }
-  .p-input-icon-right > .p-inputtext {
-    padding-right: 2rem;
-  }
   .p-icon-field-left > .p-inputtext {
     padding-left: 2rem;
   }
@@ -2065,6 +2055,15 @@
   .p-treeselect.p-treeselect-clearable .p-treeselect-label {
     padding-right: 1.5rem;
   }
+  .p-treeselect.p-variant-filled {
+    background: #383838;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #383838;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #383838;
+  }
   .p-treeselect .p-treeselect-label {
     padding: 0.5rem 0.5rem;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
diff --git a/public/themes/arya-green/theme.css b/public/themes/arya-green/theme.css
index 53038d0c89..64cff960cd 100644
--- a/public/themes/arya-green/theme.css
+++ b/public/themes/arya-green/theme.css
@@ -639,6 +639,7 @@
     border: 1px solid #383838;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
     border-radius: 3px;
+    outline-color: transparent;
   }
   .p-cascadeselect:not(.p-disabled):hover {
     border-color: #81c784;
@@ -649,6 +650,15 @@
     box-shadow: 0 0 0 1px #a7d8a9;
     border-color: #81c784;
   }
+  .p-cascadeselect.p-variant-filled {
+    background-color: #383838;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:hover {
+    background-color: #383838;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:focus {
+    background-color: #383838;
+  }
   .p-cascadeselect .p-cascadeselect-label {
     background: transparent;
     border: 0 none;
@@ -689,38 +699,29 @@
     transition: box-shadow 0.2s;
     border-radius: 0;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
-    padding: 0.5rem 1rem;
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+    margin-top: 0;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: inset 0 0 0 0.15rem #a7d8a9;
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+    margin-bottom: 0;
   }
   .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
     color: rgba(255, 255, 255, 0.87);
     background: rgba(129, 199, 132, 0.16);
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+    background: rgba(129, 199, 132, 0.24);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: rgba(255, 255, 255, 0.87);
     background: rgba(255, 255, 255, 0.03);
   }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+    padding: 0.5rem 1rem;
+  }
   .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
     font-size: 0.875rem;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon.p-icon {
-    width: 0.875rem;
-    height: 0.875rem;
-  }
-  .p-input-filled .p-cascadeselect {
-    background: #383838;
-  }
-  .p-input-filled .p-cascadeselect:not(.p-disabled):hover {
-    background-color: #383838;
-  }
-  .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
-    background-color: #383838;
-  }
   .p-checkbox {
     position: relative;
     display: inline-flex;
@@ -1314,6 +1315,7 @@
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
     appearance: none;
     border-radius: 3px;
+    outline-color: transparent;
   }
   .p-inputtext:enabled:hover {
     border-color: #81c784;
@@ -1327,6 +1329,15 @@
   .p-inputtext.p-invalid.p-component {
     border-color: #ef9a9a;
   }
+  .p-inputtext.p-variant-filled {
+    background-color: #383838;
+  }
+  .p-inputtext.p-variant-filled:enabled:hover {
+    background-color: #383838;
+  }
+  .p-inputtext.p-variant-filled:enabled:focus {
+    background-color: #383838;
+  }
   .p-inputtext.p-inputtext-sm {
     font-size: 0.875rem;
     padding: 0.4375rem 0.4375rem;
@@ -1340,30 +1351,9 @@
     color: rgba(255, 255, 255, 0.6);
     transition-duration: 0.2s;
   }
-  .p-float-label > label.p-error {
+  .p-float-label > .p-invalid + label {
     color: #ef9a9a;
   }
-  .p-input-icon-left > i:first-of-type,
-  .p-input-icon-left > svg:first-of-type,
-  .p-input-icon-left > .p-input-prefix {
-    left: 0.5rem;
-    color: rgba(255, 255, 255, 0.6);
-  }
-  .p-input-icon-left > .p-inputtext {
-    padding-left: 2rem;
-  }
-  .p-input-icon-left.p-float-label > label {
-    left: 2rem;
-  }
-  .p-input-icon-right > i:last-of-type,
-  .p-input-icon-right > svg:last-of-type,
-  .p-input-icon-right > .p-input-suffix {
-    right: 0.5rem;
-    color: rgba(255, 255, 255, 0.6);
-  }
-  .p-input-icon-right > .p-inputtext {
-    padding-right: 2rem;
-  }
   .p-icon-field-left > .p-inputtext {
     padding-left: 2rem;
   }
@@ -2065,6 +2055,15 @@
   .p-treeselect.p-treeselect-clearable .p-treeselect-label {
     padding-right: 1.5rem;
   }
+  .p-treeselect.p-variant-filled {
+    background: #383838;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #383838;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #383838;
+  }
   .p-treeselect .p-treeselect-label {
     padding: 0.5rem 0.5rem;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
diff --git a/public/themes/arya-orange/theme.css b/public/themes/arya-orange/theme.css
index a2d4387a6a..6a8e7ce549 100644
--- a/public/themes/arya-orange/theme.css
+++ b/public/themes/arya-orange/theme.css
@@ -639,6 +639,7 @@
     border: 1px solid #383838;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
     border-radius: 3px;
+    outline-color: transparent;
   }
   .p-cascadeselect:not(.p-disabled):hover {
     border-color: #ffd54f;
@@ -649,6 +650,15 @@
     box-shadow: 0 0 0 1px #ffe284;
     border-color: #ffd54f;
   }
+  .p-cascadeselect.p-variant-filled {
+    background-color: #383838;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:hover {
+    background-color: #383838;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:focus {
+    background-color: #383838;
+  }
   .p-cascadeselect .p-cascadeselect-label {
     background: transparent;
     border: 0 none;
@@ -689,38 +699,29 @@
     transition: box-shadow 0.2s;
     border-radius: 0;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
-    padding: 0.5rem 1rem;
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+    margin-top: 0;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: inset 0 0 0 0.15rem #ffe284;
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+    margin-bottom: 0;
   }
   .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
     color: rgba(255, 255, 255, 0.87);
     background: rgba(255, 213, 79, 0.16);
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+    background: rgba(255, 213, 79, 0.24);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: rgba(255, 255, 255, 0.87);
     background: rgba(255, 255, 255, 0.03);
   }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+    padding: 0.5rem 1rem;
+  }
   .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
     font-size: 0.875rem;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon.p-icon {
-    width: 0.875rem;
-    height: 0.875rem;
-  }
-  .p-input-filled .p-cascadeselect {
-    background: #383838;
-  }
-  .p-input-filled .p-cascadeselect:not(.p-disabled):hover {
-    background-color: #383838;
-  }
-  .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
-    background-color: #383838;
-  }
   .p-checkbox {
     position: relative;
     display: inline-flex;
@@ -1314,6 +1315,7 @@
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
     appearance: none;
     border-radius: 3px;
+    outline-color: transparent;
   }
   .p-inputtext:enabled:hover {
     border-color: #ffd54f;
@@ -1327,6 +1329,15 @@
   .p-inputtext.p-invalid.p-component {
     border-color: #ef9a9a;
   }
+  .p-inputtext.p-variant-filled {
+    background-color: #383838;
+  }
+  .p-inputtext.p-variant-filled:enabled:hover {
+    background-color: #383838;
+  }
+  .p-inputtext.p-variant-filled:enabled:focus {
+    background-color: #383838;
+  }
   .p-inputtext.p-inputtext-sm {
     font-size: 0.875rem;
     padding: 0.4375rem 0.4375rem;
@@ -1340,30 +1351,9 @@
     color: rgba(255, 255, 255, 0.6);
     transition-duration: 0.2s;
   }
-  .p-float-label > label.p-error {
+  .p-float-label > .p-invalid + label {
     color: #ef9a9a;
   }
-  .p-input-icon-left > i:first-of-type,
-  .p-input-icon-left > svg:first-of-type,
-  .p-input-icon-left > .p-input-prefix {
-    left: 0.5rem;
-    color: rgba(255, 255, 255, 0.6);
-  }
-  .p-input-icon-left > .p-inputtext {
-    padding-left: 2rem;
-  }
-  .p-input-icon-left.p-float-label > label {
-    left: 2rem;
-  }
-  .p-input-icon-right > i:last-of-type,
-  .p-input-icon-right > svg:last-of-type,
-  .p-input-icon-right > .p-input-suffix {
-    right: 0.5rem;
-    color: rgba(255, 255, 255, 0.6);
-  }
-  .p-input-icon-right > .p-inputtext {
-    padding-right: 2rem;
-  }
   .p-icon-field-left > .p-inputtext {
     padding-left: 2rem;
   }
@@ -2065,6 +2055,15 @@
   .p-treeselect.p-treeselect-clearable .p-treeselect-label {
     padding-right: 1.5rem;
   }
+  .p-treeselect.p-variant-filled {
+    background: #383838;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #383838;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #383838;
+  }
   .p-treeselect .p-treeselect-label {
     padding: 0.5rem 0.5rem;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
diff --git a/public/themes/bootstrap4-dark-blue/theme.css b/public/themes/bootstrap4-dark-blue/theme.css
index eacbd16cfe..a68b8162bf 100644
--- a/public/themes/bootstrap4-dark-blue/theme.css
+++ b/public/themes/bootstrap4-dark-blue/theme.css
@@ -639,6 +639,7 @@
     border: 1px solid #3f4b5b;
     transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
     border-radius: 4px;
+    outline-color: transparent;
   }
   .p-cascadeselect:not(.p-disabled):hover {
     border-color: #3f4b5b;
@@ -649,6 +650,15 @@
     box-shadow: 0 0 0 1px #e3f3fe;
     border-color: #8dd0ff;
   }
+  .p-cascadeselect.p-variant-filled {
+    background-color: #3f4b5b;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:hover {
+    background-color: #3f4b5b;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:focus {
+    background-color: #3f4b5b;
+  }
   .p-cascadeselect .p-cascadeselect-label {
     background: transparent;
     border: 0 none;
@@ -689,38 +699,29 @@
     transition: box-shadow 0.15s;
     border-radius: 0;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
-    padding: 0.5rem 1.5rem;
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+    margin-top: 0;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: inset 0 0 0 0.15rem #e3f3fe;
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+    margin-bottom: 0;
   }
   .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
     color: #151515;
     background: #8dd0ff;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+    background: #64bfff;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: rgba(255, 255, 255, 0.87);
     background: rgba(255, 255, 255, 0.04);
   }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+    padding: 0.5rem 1.5rem;
+  }
   .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
     font-size: 0.875rem;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon.p-icon {
-    width: 0.875rem;
-    height: 0.875rem;
-  }
-  .p-input-filled .p-cascadeselect {
-    background: #3f4b5b;
-  }
-  .p-input-filled .p-cascadeselect:not(.p-disabled):hover {
-    background-color: #3f4b5b;
-  }
-  .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
-    background-color: #3f4b5b;
-  }
   .p-checkbox {
     position: relative;
     display: inline-flex;
@@ -1317,6 +1318,7 @@
     transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
     appearance: none;
     border-radius: 4px;
+    outline-color: transparent;
   }
   .p-inputtext:enabled:hover {
     border-color: #3f4b5b;
@@ -1330,6 +1332,15 @@
   .p-inputtext.p-invalid.p-component {
     border-color: #f19ea6;
   }
+  .p-inputtext.p-variant-filled {
+    background-color: #3f4b5b;
+  }
+  .p-inputtext.p-variant-filled:enabled:hover {
+    background-color: #3f4b5b;
+  }
+  .p-inputtext.p-variant-filled:enabled:focus {
+    background-color: #3f4b5b;
+  }
   .p-inputtext.p-inputtext-sm {
     font-size: 0.875rem;
     padding: 0.4375rem 0.65625rem;
@@ -1343,30 +1354,9 @@
     color: rgba(255, 255, 255, 0.6);
     transition-duration: 0.15s;
   }
-  .p-float-label > label.p-error {
+  .p-float-label > .p-invalid + label {
     color: #f19ea6;
   }
-  .p-input-icon-left > i:first-of-type,
-  .p-input-icon-left > svg:first-of-type,
-  .p-input-icon-left > .p-input-prefix {
-    left: 0.75rem;
-    color: rgba(255, 255, 255, 0.6);
-  }
-  .p-input-icon-left > .p-inputtext {
-    padding-left: 2.5rem;
-  }
-  .p-input-icon-left.p-float-label > label {
-    left: 2.5rem;
-  }
-  .p-input-icon-right > i:last-of-type,
-  .p-input-icon-right > svg:last-of-type,
-  .p-input-icon-right > .p-input-suffix {
-    right: 0.75rem;
-    color: rgba(255, 255, 255, 0.6);
-  }
-  .p-input-icon-right > .p-inputtext {
-    padding-right: 2.5rem;
-  }
   .p-icon-field-left > .p-inputtext {
     padding-left: 2.5rem;
   }
@@ -2074,6 +2064,15 @@
   .p-treeselect.p-treeselect-clearable .p-treeselect-label {
     padding-right: 1.75rem;
   }
+  .p-treeselect.p-variant-filled {
+    background: #3f4b5b;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #3f4b5b;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #3f4b5b;
+  }
   .p-treeselect .p-treeselect-label {
     padding: 0.5rem 0.75rem;
     transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
diff --git a/public/themes/bootstrap4-light-blue/theme.css b/public/themes/bootstrap4-light-blue/theme.css
index 5a0604409c..66d1b837d0 100644
--- a/public/themes/bootstrap4-light-blue/theme.css
+++ b/public/themes/bootstrap4-light-blue/theme.css
@@ -639,6 +639,7 @@
     border: 1px solid #ced4da;
     transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
     border-radius: 4px;
+    outline-color: transparent;
   }
   .p-cascadeselect:not(.p-disabled):hover {
     border-color: #ced4da;
@@ -649,6 +650,15 @@
     box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
     border-color: #007bff;
   }
+  .p-cascadeselect.p-variant-filled {
+    background-color: #efefef;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:hover {
+    background-color: #efefef;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:focus {
+    background-color: #efefef;
+  }
   .p-cascadeselect .p-cascadeselect-label {
     background: transparent;
     border: 0 none;
@@ -689,38 +699,29 @@
     transition: box-shadow 0.15s;
     border-radius: 0;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
-    padding: 0.5rem 1.5rem;
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+    margin-top: 0;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: inset 0 0 0 0.15rem rgba(38, 143, 255, 0.5);
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+    margin-bottom: 0;
   }
   .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
     color: #ffffff;
     background: #007bff;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+    background: #0067d6;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: #212529;
     background: #e9ecef;
   }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+    padding: 0.5rem 1.5rem;
+  }
   .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
     font-size: 0.875rem;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon.p-icon {
-    width: 0.875rem;
-    height: 0.875rem;
-  }
-  .p-input-filled .p-cascadeselect {
-    background: #efefef;
-  }
-  .p-input-filled .p-cascadeselect:not(.p-disabled):hover {
-    background-color: #efefef;
-  }
-  .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
-    background-color: #efefef;
-  }
   .p-checkbox {
     position: relative;
     display: inline-flex;
@@ -1317,6 +1318,7 @@
     transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
     appearance: none;
     border-radius: 4px;
+    outline-color: transparent;
   }
   .p-inputtext:enabled:hover {
     border-color: #ced4da;
@@ -1330,6 +1332,15 @@
   .p-inputtext.p-invalid.p-component {
     border-color: #dc3545;
   }
+  .p-inputtext.p-variant-filled {
+    background-color: #efefef;
+  }
+  .p-inputtext.p-variant-filled:enabled:hover {
+    background-color: #efefef;
+  }
+  .p-inputtext.p-variant-filled:enabled:focus {
+    background-color: #efefef;
+  }
   .p-inputtext.p-inputtext-sm {
     font-size: 0.875rem;
     padding: 0.4375rem 0.65625rem;
@@ -1343,30 +1354,9 @@
     color: #6c757d;
     transition-duration: 0.15s;
   }
-  .p-float-label > label.p-error {
+  .p-float-label > .p-invalid + label {
     color: #dc3545;
   }
-  .p-input-icon-left > i:first-of-type,
-  .p-input-icon-left > svg:first-of-type,
-  .p-input-icon-left > .p-input-prefix {
-    left: 0.75rem;
-    color: #495057;
-  }
-  .p-input-icon-left > .p-inputtext {
-    padding-left: 2.5rem;
-  }
-  .p-input-icon-left.p-float-label > label {
-    left: 2.5rem;
-  }
-  .p-input-icon-right > i:last-of-type,
-  .p-input-icon-right > svg:last-of-type,
-  .p-input-icon-right > .p-input-suffix {
-    right: 0.75rem;
-    color: #495057;
-  }
-  .p-input-icon-right > .p-inputtext {
-    padding-right: 2.5rem;
-  }
   .p-icon-field-left > .p-inputtext {
     padding-left: 2.5rem;
   }
@@ -2074,6 +2064,15 @@
   .p-treeselect.p-treeselect-clearable .p-treeselect-label {
     padding-right: 1.75rem;
   }
+  .p-treeselect.p-variant-filled {
+    background: #efefef;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #efefef;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #efefef;
+  }
   .p-treeselect .p-treeselect-label {
     padding: 0.5rem 0.75rem;
     transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
diff --git a/public/themes/fluent-light/theme.css b/public/themes/fluent-light/theme.css
index 183eb1491d..a0d4b82923 100644
--- a/public/themes/fluent-light/theme.css
+++ b/public/themes/fluent-light/theme.css
@@ -639,6 +639,7 @@
     border: 1px solid #605e5c;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
     border-radius: 2px;
+    outline-color: transparent;
   }
   .p-cascadeselect:not(.p-disabled):hover {
     border-color: #323130;
@@ -649,6 +650,15 @@
     box-shadow: inset 0 0 0 1px #605e5c;
     border-color: #0078d4;
   }
+  .p-cascadeselect.p-variant-filled {
+    background-color: #faf9f8;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:hover {
+    background-color: #faf9f8;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:focus {
+    background-color: #faf9f8;
+  }
   .p-cascadeselect .p-cascadeselect-label {
     background: transparent;
     border: 0 none;
@@ -689,38 +699,29 @@
     transition: box-shadow 0.2s;
     border-radius: 0;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
-    padding: 0.75rem 0.5rem;
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+    margin-top: 0;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: inset 0 0 0 0.15rem #605e5c;
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+    margin-bottom: 0;
   }
   .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
     color: #323130;
     background: #edebe9;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+    background: #e1dfdd;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: #323130;
     background: #f3f2f1;
   }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+    padding: 0.75rem 0.5rem;
+  }
   .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
     font-size: 0.875rem;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon.p-icon {
-    width: 0.875rem;
-    height: 0.875rem;
-  }
-  .p-input-filled .p-cascadeselect {
-    background: #faf9f8;
-  }
-  .p-input-filled .p-cascadeselect:not(.p-disabled):hover {
-    background-color: #faf9f8;
-  }
-  .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
-    background-color: #faf9f8;
-  }
   .p-checkbox {
     position: relative;
     display: inline-flex;
@@ -1314,6 +1315,7 @@
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
     appearance: none;
     border-radius: 2px;
+    outline-color: transparent;
   }
   .p-inputtext:enabled:hover {
     border-color: #323130;
@@ -1327,6 +1329,15 @@
   .p-inputtext.p-invalid.p-component {
     border-color: #a4252c;
   }
+  .p-inputtext.p-variant-filled {
+    background-color: #faf9f8;
+  }
+  .p-inputtext.p-variant-filled:enabled:hover {
+    background-color: #faf9f8;
+  }
+  .p-inputtext.p-variant-filled:enabled:focus {
+    background-color: #faf9f8;
+  }
   .p-inputtext.p-inputtext-sm {
     font-size: 0.875rem;
     padding: 0.4375rem 0.4375rem;
@@ -1340,30 +1351,9 @@
     color: #605e5c;
     transition-duration: 0.2s;
   }
-  .p-float-label > label.p-error {
+  .p-float-label > .p-invalid + label {
     color: #a4252c;
   }
-  .p-input-icon-left > i:first-of-type,
-  .p-input-icon-left > svg:first-of-type,
-  .p-input-icon-left > .p-input-prefix {
-    left: 0.5rem;
-    color: #605e5c;
-  }
-  .p-input-icon-left > .p-inputtext {
-    padding-left: 2rem;
-  }
-  .p-input-icon-left.p-float-label > label {
-    left: 2rem;
-  }
-  .p-input-icon-right > i:last-of-type,
-  .p-input-icon-right > svg:last-of-type,
-  .p-input-icon-right > .p-input-suffix {
-    right: 0.5rem;
-    color: #605e5c;
-  }
-  .p-input-icon-right > .p-inputtext {
-    padding-right: 2rem;
-  }
   .p-icon-field-left > .p-inputtext {
     padding-left: 2rem;
   }
@@ -2065,6 +2055,15 @@
   .p-treeselect.p-treeselect-clearable .p-treeselect-label {
     padding-right: 1.5rem;
   }
+  .p-treeselect.p-variant-filled {
+    background: #faf9f8;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #faf9f8;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #faf9f8;
+  }
   .p-treeselect .p-treeselect-label {
     padding: 0.5rem 0.5rem;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
diff --git a/public/themes/lara-dark-amber/theme.css b/public/themes/lara-dark-amber/theme.css
index 3a96c27dad..5ab3a789a6 100644
--- a/public/themes/lara-dark-amber/theme.css
+++ b/public/themes/lara-dark-amber/theme.css
@@ -656,6 +656,7 @@
     border: 1px solid #424b57;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
     border-radius: 6px;
+    outline-color: transparent;
   }
   .p-cascadeselect:not(.p-disabled):hover {
     border-color: #fbbf24;
@@ -666,6 +667,15 @@
     box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2);
     border-color: #fbbf24;
   }
+  .p-cascadeselect.p-variant-filled {
+    background-color: #424b57;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:hover {
+    background-color: #424b57;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:focus {
+    background-color: #424b57;
+  }
   .p-cascadeselect .p-cascadeselect-label {
     background: transparent;
     border: 0 none;
@@ -706,38 +716,29 @@
     transition: box-shadow 0.2s;
     border-radius: 0;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
-    padding: 0.75rem 1.25rem;
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+    margin-top: 0;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: inset 0 0 0 0.15rem rgba(251, 191, 36, 0.2);
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+    margin-bottom: 0;
   }
   .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
     color: rgba(255, 255, 255, 0.87);
     background: rgba(251, 191, 36, 0.16);
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+    background: rgba(251, 191, 36, 0.24);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: rgba(255, 255, 255, 0.87);
     background: rgba(255, 255, 255, 0.03);
   }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+    padding: 0.75rem 1.25rem;
+  }
   .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
     font-size: 0.875rem;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon.p-icon {
-    width: 0.875rem;
-    height: 0.875rem;
-  }
-  .p-input-filled .p-cascadeselect {
-    background: #424b57;
-  }
-  .p-input-filled .p-cascadeselect:not(.p-disabled):hover {
-    background-color: #424b57;
-  }
-  .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
-    background-color: #424b57;
-  }
   .p-checkbox {
     position: relative;
     display: inline-flex;
@@ -1331,6 +1332,7 @@
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
     appearance: none;
     border-radius: 6px;
+    outline-color: transparent;
   }
   .p-inputtext:enabled:hover {
     border-color: #fbbf24;
@@ -1344,6 +1346,15 @@
   .p-inputtext.p-invalid.p-component {
     border-color: #fca5a5;
   }
+  .p-inputtext.p-variant-filled {
+    background-color: #424b57;
+  }
+  .p-inputtext.p-variant-filled:enabled:hover {
+    background-color: #424b57;
+  }
+  .p-inputtext.p-variant-filled:enabled:focus {
+    background-color: #424b57;
+  }
   .p-inputtext.p-inputtext-sm {
     font-size: 0.875rem;
     padding: 0.65625rem 0.65625rem;
@@ -1357,30 +1368,9 @@
     color: rgba(255, 255, 255, 0.6);
     transition-duration: 0.2s;
   }
-  .p-float-label > label.p-error {
+  .p-float-label > .p-invalid + label {
     color: #fca5a5;
   }
-  .p-input-icon-left > i:first-of-type,
-  .p-input-icon-left > svg:first-of-type,
-  .p-input-icon-left > .p-input-prefix {
-    left: 0.75rem;
-    color: rgba(255, 255, 255, 0.6);
-  }
-  .p-input-icon-left > .p-inputtext {
-    padding-left: 2.5rem;
-  }
-  .p-input-icon-left.p-float-label > label {
-    left: 2.5rem;
-  }
-  .p-input-icon-right > i:last-of-type,
-  .p-input-icon-right > svg:last-of-type,
-  .p-input-icon-right > .p-input-suffix {
-    right: 0.75rem;
-    color: rgba(255, 255, 255, 0.6);
-  }
-  .p-input-icon-right > .p-inputtext {
-    padding-right: 2.5rem;
-  }
   .p-icon-field-left > .p-inputtext {
     padding-left: 2.5rem;
   }
@@ -2082,6 +2072,15 @@
   .p-treeselect.p-treeselect-clearable .p-treeselect-label {
     padding-right: 1.75rem;
   }
+  .p-treeselect.p-variant-filled {
+    background: #424b57;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #424b57;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #424b57;
+  }
   .p-treeselect .p-treeselect-label {
     padding: 0.75rem 0.75rem;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
diff --git a/public/themes/lara-dark-blue/theme.css b/public/themes/lara-dark-blue/theme.css
index 9fc3607064..5cf2622cb4 100644
--- a/public/themes/lara-dark-blue/theme.css
+++ b/public/themes/lara-dark-blue/theme.css
@@ -656,6 +656,7 @@
     border: 1px solid #424b57;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
     border-radius: 6px;
+    outline-color: transparent;
   }
   .p-cascadeselect:not(.p-disabled):hover {
     border-color: #60a5fa;
@@ -666,6 +667,15 @@
     box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2);
     border-color: #60a5fa;
   }
+  .p-cascadeselect.p-variant-filled {
+    background-color: #424b57;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:hover {
+    background-color: #424b57;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:focus {
+    background-color: #424b57;
+  }
   .p-cascadeselect .p-cascadeselect-label {
     background: transparent;
     border: 0 none;
@@ -706,38 +716,29 @@
     transition: box-shadow 0.2s;
     border-radius: 0;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
-    padding: 0.75rem 1.25rem;
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+    margin-top: 0;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: inset 0 0 0 0.15rem rgba(96, 165, 250, 0.2);
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+    margin-bottom: 0;
   }
   .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
     color: rgba(255, 255, 255, 0.87);
     background: rgba(96, 165, 250, 0.16);
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+    background: rgba(96, 165, 250, 0.24);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: rgba(255, 255, 255, 0.87);
     background: rgba(255, 255, 255, 0.03);
   }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+    padding: 0.75rem 1.25rem;
+  }
   .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
     font-size: 0.875rem;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon.p-icon {
-    width: 0.875rem;
-    height: 0.875rem;
-  }
-  .p-input-filled .p-cascadeselect {
-    background: #424b57;
-  }
-  .p-input-filled .p-cascadeselect:not(.p-disabled):hover {
-    background-color: #424b57;
-  }
-  .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
-    background-color: #424b57;
-  }
   .p-checkbox {
     position: relative;
     display: inline-flex;
@@ -1331,6 +1332,7 @@
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
     appearance: none;
     border-radius: 6px;
+    outline-color: transparent;
   }
   .p-inputtext:enabled:hover {
     border-color: #60a5fa;
@@ -1344,6 +1346,15 @@
   .p-inputtext.p-invalid.p-component {
     border-color: #fca5a5;
   }
+  .p-inputtext.p-variant-filled {
+    background-color: #424b57;
+  }
+  .p-inputtext.p-variant-filled:enabled:hover {
+    background-color: #424b57;
+  }
+  .p-inputtext.p-variant-filled:enabled:focus {
+    background-color: #424b57;
+  }
   .p-inputtext.p-inputtext-sm {
     font-size: 0.875rem;
     padding: 0.65625rem 0.65625rem;
@@ -1357,30 +1368,9 @@
     color: rgba(255, 255, 255, 0.6);
     transition-duration: 0.2s;
   }
-  .p-float-label > label.p-error {
+  .p-float-label > .p-invalid + label {
     color: #fca5a5;
   }
-  .p-input-icon-left > i:first-of-type,
-  .p-input-icon-left > svg:first-of-type,
-  .p-input-icon-left > .p-input-prefix {
-    left: 0.75rem;
-    color: rgba(255, 255, 255, 0.6);
-  }
-  .p-input-icon-left > .p-inputtext {
-    padding-left: 2.5rem;
-  }
-  .p-input-icon-left.p-float-label > label {
-    left: 2.5rem;
-  }
-  .p-input-icon-right > i:last-of-type,
-  .p-input-icon-right > svg:last-of-type,
-  .p-input-icon-right > .p-input-suffix {
-    right: 0.75rem;
-    color: rgba(255, 255, 255, 0.6);
-  }
-  .p-input-icon-right > .p-inputtext {
-    padding-right: 2.5rem;
-  }
   .p-icon-field-left > .p-inputtext {
     padding-left: 2.5rem;
   }
@@ -2082,6 +2072,15 @@
   .p-treeselect.p-treeselect-clearable .p-treeselect-label {
     padding-right: 1.75rem;
   }
+  .p-treeselect.p-variant-filled {
+    background: #424b57;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #424b57;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #424b57;
+  }
   .p-treeselect .p-treeselect-label {
     padding: 0.75rem 0.75rem;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
diff --git a/public/themes/lara-dark-cyan/theme.css b/public/themes/lara-dark-cyan/theme.css
index a57900349b..6387296b93 100644
--- a/public/themes/lara-dark-cyan/theme.css
+++ b/public/themes/lara-dark-cyan/theme.css
@@ -656,6 +656,7 @@
     border: 1px solid #424b57;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
     border-radius: 6px;
+    outline-color: transparent;
   }
   .p-cascadeselect:not(.p-disabled):hover {
     border-color: #22d3ee;
@@ -666,6 +667,15 @@
     box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2);
     border-color: #22d3ee;
   }
+  .p-cascadeselect.p-variant-filled {
+    background-color: #424b57;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:hover {
+    background-color: #424b57;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:focus {
+    background-color: #424b57;
+  }
   .p-cascadeselect .p-cascadeselect-label {
     background: transparent;
     border: 0 none;
@@ -706,38 +716,29 @@
     transition: box-shadow 0.2s;
     border-radius: 0;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
-    padding: 0.75rem 1.25rem;
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+    margin-top: 0;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: inset 0 0 0 0.15rem rgba(34, 211, 238, 0.2);
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+    margin-bottom: 0;
   }
   .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
     color: rgba(255, 255, 255, 0.87);
     background: rgba(34, 211, 238, 0.16);
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+    background: rgba(34, 211, 238, 0.24);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: rgba(255, 255, 255, 0.87);
     background: rgba(255, 255, 255, 0.03);
   }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+    padding: 0.75rem 1.25rem;
+  }
   .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
     font-size: 0.875rem;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon.p-icon {
-    width: 0.875rem;
-    height: 0.875rem;
-  }
-  .p-input-filled .p-cascadeselect {
-    background: #424b57;
-  }
-  .p-input-filled .p-cascadeselect:not(.p-disabled):hover {
-    background-color: #424b57;
-  }
-  .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
-    background-color: #424b57;
-  }
   .p-checkbox {
     position: relative;
     display: inline-flex;
@@ -1331,6 +1332,7 @@
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
     appearance: none;
     border-radius: 6px;
+    outline-color: transparent;
   }
   .p-inputtext:enabled:hover {
     border-color: #22d3ee;
@@ -1344,6 +1346,15 @@
   .p-inputtext.p-invalid.p-component {
     border-color: #fca5a5;
   }
+  .p-inputtext.p-variant-filled {
+    background-color: #424b57;
+  }
+  .p-inputtext.p-variant-filled:enabled:hover {
+    background-color: #424b57;
+  }
+  .p-inputtext.p-variant-filled:enabled:focus {
+    background-color: #424b57;
+  }
   .p-inputtext.p-inputtext-sm {
     font-size: 0.875rem;
     padding: 0.65625rem 0.65625rem;
@@ -1357,30 +1368,9 @@
     color: rgba(255, 255, 255, 0.6);
     transition-duration: 0.2s;
   }
-  .p-float-label > label.p-error {
+  .p-float-label > .p-invalid + label {
     color: #fca5a5;
   }
-  .p-input-icon-left > i:first-of-type,
-  .p-input-icon-left > svg:first-of-type,
-  .p-input-icon-left > .p-input-prefix {
-    left: 0.75rem;
-    color: rgba(255, 255, 255, 0.6);
-  }
-  .p-input-icon-left > .p-inputtext {
-    padding-left: 2.5rem;
-  }
-  .p-input-icon-left.p-float-label > label {
-    left: 2.5rem;
-  }
-  .p-input-icon-right > i:last-of-type,
-  .p-input-icon-right > svg:last-of-type,
-  .p-input-icon-right > .p-input-suffix {
-    right: 0.75rem;
-    color: rgba(255, 255, 255, 0.6);
-  }
-  .p-input-icon-right > .p-inputtext {
-    padding-right: 2.5rem;
-  }
   .p-icon-field-left > .p-inputtext {
     padding-left: 2.5rem;
   }
@@ -2082,6 +2072,15 @@
   .p-treeselect.p-treeselect-clearable .p-treeselect-label {
     padding-right: 1.75rem;
   }
+  .p-treeselect.p-variant-filled {
+    background: #424b57;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #424b57;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #424b57;
+  }
   .p-treeselect .p-treeselect-label {
     padding: 0.75rem 0.75rem;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
diff --git a/public/themes/lara-dark-green/theme.css b/public/themes/lara-dark-green/theme.css
index 882d6424b2..7d44112db0 100644
--- a/public/themes/lara-dark-green/theme.css
+++ b/public/themes/lara-dark-green/theme.css
@@ -656,6 +656,7 @@
     border: 1px solid #424b57;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
     border-radius: 6px;
+    outline-color: transparent;
   }
   .p-cascadeselect:not(.p-disabled):hover {
     border-color: #34d399;
@@ -666,6 +667,15 @@
     box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2);
     border-color: #34d399;
   }
+  .p-cascadeselect.p-variant-filled {
+    background-color: #424b57;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:hover {
+    background-color: #424b57;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:focus {
+    background-color: #424b57;
+  }
   .p-cascadeselect .p-cascadeselect-label {
     background: transparent;
     border: 0 none;
@@ -706,38 +716,29 @@
     transition: box-shadow 0.2s;
     border-radius: 0;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
-    padding: 0.75rem 1.25rem;
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+    margin-top: 0;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: inset 0 0 0 0.15rem rgba(52, 211, 153, 0.2);
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+    margin-bottom: 0;
   }
   .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
     color: rgba(255, 255, 255, 0.87);
     background: rgba(52, 211, 153, 0.16);
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+    background: rgba(52, 211, 153, 0.24);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: rgba(255, 255, 255, 0.87);
     background: rgba(255, 255, 255, 0.03);
   }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+    padding: 0.75rem 1.25rem;
+  }
   .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
     font-size: 0.875rem;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon.p-icon {
-    width: 0.875rem;
-    height: 0.875rem;
-  }
-  .p-input-filled .p-cascadeselect {
-    background: #424b57;
-  }
-  .p-input-filled .p-cascadeselect:not(.p-disabled):hover {
-    background-color: #424b57;
-  }
-  .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
-    background-color: #424b57;
-  }
   .p-checkbox {
     position: relative;
     display: inline-flex;
@@ -1331,6 +1332,7 @@
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
     appearance: none;
     border-radius: 6px;
+    outline-color: transparent;
   }
   .p-inputtext:enabled:hover {
     border-color: #34d399;
@@ -1344,6 +1346,15 @@
   .p-inputtext.p-invalid.p-component {
     border-color: #fca5a5;
   }
+  .p-inputtext.p-variant-filled {
+    background-color: #424b57;
+  }
+  .p-inputtext.p-variant-filled:enabled:hover {
+    background-color: #424b57;
+  }
+  .p-inputtext.p-variant-filled:enabled:focus {
+    background-color: #424b57;
+  }
   .p-inputtext.p-inputtext-sm {
     font-size: 0.875rem;
     padding: 0.65625rem 0.65625rem;
@@ -1357,30 +1368,9 @@
     color: rgba(255, 255, 255, 0.6);
     transition-duration: 0.2s;
   }
-  .p-float-label > label.p-error {
+  .p-float-label > .p-invalid + label {
     color: #fca5a5;
   }
-  .p-input-icon-left > i:first-of-type,
-  .p-input-icon-left > svg:first-of-type,
-  .p-input-icon-left > .p-input-prefix {
-    left: 0.75rem;
-    color: rgba(255, 255, 255, 0.6);
-  }
-  .p-input-icon-left > .p-inputtext {
-    padding-left: 2.5rem;
-  }
-  .p-input-icon-left.p-float-label > label {
-    left: 2.5rem;
-  }
-  .p-input-icon-right > i:last-of-type,
-  .p-input-icon-right > svg:last-of-type,
-  .p-input-icon-right > .p-input-suffix {
-    right: 0.75rem;
-    color: rgba(255, 255, 255, 0.6);
-  }
-  .p-input-icon-right > .p-inputtext {
-    padding-right: 2.5rem;
-  }
   .p-icon-field-left > .p-inputtext {
     padding-left: 2.5rem;
   }
@@ -2082,6 +2072,15 @@
   .p-treeselect.p-treeselect-clearable .p-treeselect-label {
     padding-right: 1.75rem;
   }
+  .p-treeselect.p-variant-filled {
+    background: #424b57;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #424b57;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #424b57;
+  }
   .p-treeselect .p-treeselect-label {
     padding: 0.75rem 0.75rem;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
diff --git a/public/themes/lara-dark-indigo/theme.css b/public/themes/lara-dark-indigo/theme.css
index 13cc223f94..d438317655 100644
--- a/public/themes/lara-dark-indigo/theme.css
+++ b/public/themes/lara-dark-indigo/theme.css
@@ -656,6 +656,7 @@
     border: 1px solid #424b57;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
     border-radius: 6px;
+    outline-color: transparent;
   }
   .p-cascadeselect:not(.p-disabled):hover {
     border-color: #818cf8;
@@ -666,6 +667,15 @@
     box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2);
     border-color: #818cf8;
   }
+  .p-cascadeselect.p-variant-filled {
+    background-color: #424b57;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:hover {
+    background-color: #424b57;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:focus {
+    background-color: #424b57;
+  }
   .p-cascadeselect .p-cascadeselect-label {
     background: transparent;
     border: 0 none;
@@ -706,38 +716,29 @@
     transition: box-shadow 0.2s;
     border-radius: 0;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
-    padding: 0.75rem 1.25rem;
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+    margin-top: 0;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: inset 0 0 0 0.15rem rgba(129, 140, 248, 0.2);
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+    margin-bottom: 0;
   }
   .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
     color: rgba(255, 255, 255, 0.87);
     background: rgba(129, 140, 248, 0.16);
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+    background: rgba(129, 140, 248, 0.24);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: rgba(255, 255, 255, 0.87);
     background: rgba(255, 255, 255, 0.03);
   }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+    padding: 0.75rem 1.25rem;
+  }
   .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
     font-size: 0.875rem;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon.p-icon {
-    width: 0.875rem;
-    height: 0.875rem;
-  }
-  .p-input-filled .p-cascadeselect {
-    background: #424b57;
-  }
-  .p-input-filled .p-cascadeselect:not(.p-disabled):hover {
-    background-color: #424b57;
-  }
-  .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
-    background-color: #424b57;
-  }
   .p-checkbox {
     position: relative;
     display: inline-flex;
@@ -1331,6 +1332,7 @@
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
     appearance: none;
     border-radius: 6px;
+    outline-color: transparent;
   }
   .p-inputtext:enabled:hover {
     border-color: #818cf8;
@@ -1344,6 +1346,15 @@
   .p-inputtext.p-invalid.p-component {
     border-color: #fca5a5;
   }
+  .p-inputtext.p-variant-filled {
+    background-color: #424b57;
+  }
+  .p-inputtext.p-variant-filled:enabled:hover {
+    background-color: #424b57;
+  }
+  .p-inputtext.p-variant-filled:enabled:focus {
+    background-color: #424b57;
+  }
   .p-inputtext.p-inputtext-sm {
     font-size: 0.875rem;
     padding: 0.65625rem 0.65625rem;
@@ -1357,30 +1368,9 @@
     color: rgba(255, 255, 255, 0.6);
     transition-duration: 0.2s;
   }
-  .p-float-label > label.p-error {
+  .p-float-label > .p-invalid + label {
     color: #fca5a5;
   }
-  .p-input-icon-left > i:first-of-type,
-  .p-input-icon-left > svg:first-of-type,
-  .p-input-icon-left > .p-input-prefix {
-    left: 0.75rem;
-    color: rgba(255, 255, 255, 0.6);
-  }
-  .p-input-icon-left > .p-inputtext {
-    padding-left: 2.5rem;
-  }
-  .p-input-icon-left.p-float-label > label {
-    left: 2.5rem;
-  }
-  .p-input-icon-right > i:last-of-type,
-  .p-input-icon-right > svg:last-of-type,
-  .p-input-icon-right > .p-input-suffix {
-    right: 0.75rem;
-    color: rgba(255, 255, 255, 0.6);
-  }
-  .p-input-icon-right > .p-inputtext {
-    padding-right: 2.5rem;
-  }
   .p-icon-field-left > .p-inputtext {
     padding-left: 2.5rem;
   }
@@ -2082,6 +2072,15 @@
   .p-treeselect.p-treeselect-clearable .p-treeselect-label {
     padding-right: 1.75rem;
   }
+  .p-treeselect.p-variant-filled {
+    background: #424b57;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #424b57;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #424b57;
+  }
   .p-treeselect .p-treeselect-label {
     padding: 0.75rem 0.75rem;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
diff --git a/public/themes/lara-dark-pink/theme.css b/public/themes/lara-dark-pink/theme.css
index 42f435e013..7438ea5fb1 100644
--- a/public/themes/lara-dark-pink/theme.css
+++ b/public/themes/lara-dark-pink/theme.css
@@ -656,6 +656,7 @@
     border: 1px solid #424b57;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
     border-radius: 6px;
+    outline-color: transparent;
   }
   .p-cascadeselect:not(.p-disabled):hover {
     border-color: #f472b6;
@@ -666,6 +667,15 @@
     box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2);
     border-color: #f472b6;
   }
+  .p-cascadeselect.p-variant-filled {
+    background-color: #424b57;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:hover {
+    background-color: #424b57;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:focus {
+    background-color: #424b57;
+  }
   .p-cascadeselect .p-cascadeselect-label {
     background: transparent;
     border: 0 none;
@@ -706,38 +716,29 @@
     transition: box-shadow 0.2s;
     border-radius: 0;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
-    padding: 0.75rem 1.25rem;
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+    margin-top: 0;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: inset 0 0 0 0.15rem rgba(244, 114, 182, 0.2);
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+    margin-bottom: 0;
   }
   .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
     color: rgba(255, 255, 255, 0.87);
     background: rgba(244, 114, 182, 0.16);
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+    background: rgba(244, 114, 182, 0.24);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: rgba(255, 255, 255, 0.87);
     background: rgba(255, 255, 255, 0.03);
   }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+    padding: 0.75rem 1.25rem;
+  }
   .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
     font-size: 0.875rem;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon.p-icon {
-    width: 0.875rem;
-    height: 0.875rem;
-  }
-  .p-input-filled .p-cascadeselect {
-    background: #424b57;
-  }
-  .p-input-filled .p-cascadeselect:not(.p-disabled):hover {
-    background-color: #424b57;
-  }
-  .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
-    background-color: #424b57;
-  }
   .p-checkbox {
     position: relative;
     display: inline-flex;
@@ -1331,6 +1332,7 @@
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
     appearance: none;
     border-radius: 6px;
+    outline-color: transparent;
   }
   .p-inputtext:enabled:hover {
     border-color: #f472b6;
@@ -1344,6 +1346,15 @@
   .p-inputtext.p-invalid.p-component {
     border-color: #fca5a5;
   }
+  .p-inputtext.p-variant-filled {
+    background-color: #424b57;
+  }
+  .p-inputtext.p-variant-filled:enabled:hover {
+    background-color: #424b57;
+  }
+  .p-inputtext.p-variant-filled:enabled:focus {
+    background-color: #424b57;
+  }
   .p-inputtext.p-inputtext-sm {
     font-size: 0.875rem;
     padding: 0.65625rem 0.65625rem;
@@ -1357,30 +1368,9 @@
     color: rgba(255, 255, 255, 0.6);
     transition-duration: 0.2s;
   }
-  .p-float-label > label.p-error {
+  .p-float-label > .p-invalid + label {
     color: #fca5a5;
   }
-  .p-input-icon-left > i:first-of-type,
-  .p-input-icon-left > svg:first-of-type,
-  .p-input-icon-left > .p-input-prefix {
-    left: 0.75rem;
-    color: rgba(255, 255, 255, 0.6);
-  }
-  .p-input-icon-left > .p-inputtext {
-    padding-left: 2.5rem;
-  }
-  .p-input-icon-left.p-float-label > label {
-    left: 2.5rem;
-  }
-  .p-input-icon-right > i:last-of-type,
-  .p-input-icon-right > svg:last-of-type,
-  .p-input-icon-right > .p-input-suffix {
-    right: 0.75rem;
-    color: rgba(255, 255, 255, 0.6);
-  }
-  .p-input-icon-right > .p-inputtext {
-    padding-right: 2.5rem;
-  }
   .p-icon-field-left > .p-inputtext {
     padding-left: 2.5rem;
   }
@@ -2082,6 +2072,15 @@
   .p-treeselect.p-treeselect-clearable .p-treeselect-label {
     padding-right: 1.75rem;
   }
+  .p-treeselect.p-variant-filled {
+    background: #424b57;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #424b57;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #424b57;
+  }
   .p-treeselect .p-treeselect-label {
     padding: 0.75rem 0.75rem;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
diff --git a/public/themes/lara-dark-teal/theme.css b/public/themes/lara-dark-teal/theme.css
index c7d71ddfee..4271eb4ab4 100644
--- a/public/themes/lara-dark-teal/theme.css
+++ b/public/themes/lara-dark-teal/theme.css
@@ -656,6 +656,7 @@
     border: 1px solid #424b57;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
     border-radius: 6px;
+    outline-color: transparent;
   }
   .p-cascadeselect:not(.p-disabled):hover {
     border-color: #2dd4bf;
@@ -666,6 +667,15 @@
     box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2);
     border-color: #2dd4bf;
   }
+  .p-cascadeselect.p-variant-filled {
+    background-color: #424b57;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:hover {
+    background-color: #424b57;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:focus {
+    background-color: #424b57;
+  }
   .p-cascadeselect .p-cascadeselect-label {
     background: transparent;
     border: 0 none;
@@ -706,38 +716,29 @@
     transition: box-shadow 0.2s;
     border-radius: 0;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
-    padding: 0.75rem 1.25rem;
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+    margin-top: 0;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: inset 0 0 0 0.15rem rgba(45, 212, 191, 0.2);
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+    margin-bottom: 0;
   }
   .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
     color: rgba(255, 255, 255, 0.87);
     background: rgba(45, 212, 191, 0.16);
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+    background: rgba(45, 212, 191, 0.24);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: rgba(255, 255, 255, 0.87);
     background: rgba(255, 255, 255, 0.03);
   }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+    padding: 0.75rem 1.25rem;
+  }
   .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
     font-size: 0.875rem;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon.p-icon {
-    width: 0.875rem;
-    height: 0.875rem;
-  }
-  .p-input-filled .p-cascadeselect {
-    background: #424b57;
-  }
-  .p-input-filled .p-cascadeselect:not(.p-disabled):hover {
-    background-color: #424b57;
-  }
-  .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
-    background-color: #424b57;
-  }
   .p-checkbox {
     position: relative;
     display: inline-flex;
@@ -1331,6 +1332,7 @@
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
     appearance: none;
     border-radius: 6px;
+    outline-color: transparent;
   }
   .p-inputtext:enabled:hover {
     border-color: #2dd4bf;
@@ -1344,6 +1346,15 @@
   .p-inputtext.p-invalid.p-component {
     border-color: #fca5a5;
   }
+  .p-inputtext.p-variant-filled {
+    background-color: #424b57;
+  }
+  .p-inputtext.p-variant-filled:enabled:hover {
+    background-color: #424b57;
+  }
+  .p-inputtext.p-variant-filled:enabled:focus {
+    background-color: #424b57;
+  }
   .p-inputtext.p-inputtext-sm {
     font-size: 0.875rem;
     padding: 0.65625rem 0.65625rem;
@@ -1357,30 +1368,9 @@
     color: rgba(255, 255, 255, 0.6);
     transition-duration: 0.2s;
   }
-  .p-float-label > label.p-error {
+  .p-float-label > .p-invalid + label {
     color: #fca5a5;
   }
-  .p-input-icon-left > i:first-of-type,
-  .p-input-icon-left > svg:first-of-type,
-  .p-input-icon-left > .p-input-prefix {
-    left: 0.75rem;
-    color: rgba(255, 255, 255, 0.6);
-  }
-  .p-input-icon-left > .p-inputtext {
-    padding-left: 2.5rem;
-  }
-  .p-input-icon-left.p-float-label > label {
-    left: 2.5rem;
-  }
-  .p-input-icon-right > i:last-of-type,
-  .p-input-icon-right > svg:last-of-type,
-  .p-input-icon-right > .p-input-suffix {
-    right: 0.75rem;
-    color: rgba(255, 255, 255, 0.6);
-  }
-  .p-input-icon-right > .p-inputtext {
-    padding-right: 2.5rem;
-  }
   .p-icon-field-left > .p-inputtext {
     padding-left: 2.5rem;
   }
@@ -2082,6 +2072,15 @@
   .p-treeselect.p-treeselect-clearable .p-treeselect-label {
     padding-right: 1.75rem;
   }
+  .p-treeselect.p-variant-filled {
+    background: #424b57;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #424b57;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #424b57;
+  }
   .p-treeselect .p-treeselect-label {
     padding: 0.75rem 0.75rem;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
diff --git a/public/themes/lara-light-amber/theme.css b/public/themes/lara-light-amber/theme.css
index 44d8bebbc3..c1e0ae7f21 100644
--- a/public/themes/lara-light-amber/theme.css
+++ b/public/themes/lara-light-amber/theme.css
@@ -656,6 +656,7 @@
     border: 1px solid #d1d5db;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
     border-radius: 6px;
+    outline-color: transparent;
   }
   .p-cascadeselect:not(.p-disabled):hover {
     border-color: #f59e0b;
@@ -666,6 +667,15 @@
     box-shadow: 0 0 0 0.2rem #fef08a;
     border-color: #f59e0b;
   }
+  .p-cascadeselect.p-variant-filled {
+    background-color: #f3f4f6;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:hover {
+    background-color: #f3f4f6;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:focus {
+    background-color: #ffffff;
+  }
   .p-cascadeselect .p-cascadeselect-label {
     background: transparent;
     border: 0 none;
@@ -706,38 +716,29 @@
     transition: box-shadow 0.2s;
     border-radius: 0;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
-    padding: 0.75rem 1.25rem;
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+    margin-top: 0;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: inset 0 0 0 0.15rem #fef08a;
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+    margin-bottom: 0;
   }
   .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
     color: #b45309;
     background: #fffbeb;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+    background: rgba(245, 158, 11, 0.24);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: #4b5563;
     background: #f3f4f6;
   }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+    padding: 0.75rem 1.25rem;
+  }
   .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
     font-size: 0.875rem;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon.p-icon {
-    width: 0.875rem;
-    height: 0.875rem;
-  }
-  .p-input-filled .p-cascadeselect {
-    background: #f3f4f6;
-  }
-  .p-input-filled .p-cascadeselect:not(.p-disabled):hover {
-    background-color: #f3f4f6;
-  }
-  .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
-    background-color: #ffffff;
-  }
   .p-checkbox {
     position: relative;
     display: inline-flex;
@@ -1331,6 +1332,7 @@
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
     appearance: none;
     border-radius: 6px;
+    outline-color: transparent;
   }
   .p-inputtext:enabled:hover {
     border-color: #f59e0b;
@@ -1344,6 +1346,15 @@
   .p-inputtext.p-invalid.p-component {
     border-color: #e24c4c;
   }
+  .p-inputtext.p-variant-filled {
+    background-color: #f3f4f6;
+  }
+  .p-inputtext.p-variant-filled:enabled:hover {
+    background-color: #f3f4f6;
+  }
+  .p-inputtext.p-variant-filled:enabled:focus {
+    background-color: #ffffff;
+  }
   .p-inputtext.p-inputtext-sm {
     font-size: 0.875rem;
     padding: 0.65625rem 0.65625rem;
@@ -1357,30 +1368,9 @@
     color: #6b7280;
     transition-duration: 0.2s;
   }
-  .p-float-label > label.p-error {
+  .p-float-label > .p-invalid + label {
     color: #e24c4c;
   }
-  .p-input-icon-left > i:first-of-type,
-  .p-input-icon-left > svg:first-of-type,
-  .p-input-icon-left > .p-input-prefix {
-    left: 0.75rem;
-    color: #6b7280;
-  }
-  .p-input-icon-left > .p-inputtext {
-    padding-left: 2.5rem;
-  }
-  .p-input-icon-left.p-float-label > label {
-    left: 2.5rem;
-  }
-  .p-input-icon-right > i:last-of-type,
-  .p-input-icon-right > svg:last-of-type,
-  .p-input-icon-right > .p-input-suffix {
-    right: 0.75rem;
-    color: #6b7280;
-  }
-  .p-input-icon-right > .p-inputtext {
-    padding-right: 2.5rem;
-  }
   .p-icon-field-left > .p-inputtext {
     padding-left: 2.5rem;
   }
@@ -2082,6 +2072,15 @@
   .p-treeselect.p-treeselect-clearable .p-treeselect-label {
     padding-right: 1.75rem;
   }
+  .p-treeselect.p-variant-filled {
+    background: #f3f4f6;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #f3f4f6;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #ffffff;
+  }
   .p-treeselect .p-treeselect-label {
     padding: 0.75rem 0.75rem;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
diff --git a/public/themes/lara-light-blue/theme.css b/public/themes/lara-light-blue/theme.css
index 71ab9ef24e..28f61f3a55 100644
--- a/public/themes/lara-light-blue/theme.css
+++ b/public/themes/lara-light-blue/theme.css
@@ -656,6 +656,7 @@
     border: 1px solid #d1d5db;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
     border-radius: 6px;
+    outline-color: transparent;
   }
   .p-cascadeselect:not(.p-disabled):hover {
     border-color: #3b82f6;
@@ -666,6 +667,15 @@
     box-shadow: 0 0 0 0.2rem #bfdbfe;
     border-color: #3b82f6;
   }
+  .p-cascadeselect.p-variant-filled {
+    background-color: #f3f4f6;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:hover {
+    background-color: #f3f4f6;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:focus {
+    background-color: #ffffff;
+  }
   .p-cascadeselect .p-cascadeselect-label {
     background: transparent;
     border: 0 none;
@@ -706,38 +716,29 @@
     transition: box-shadow 0.2s;
     border-radius: 0;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
-    padding: 0.75rem 1.25rem;
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+    margin-top: 0;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: inset 0 0 0 0.15rem #bfdbfe;
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+    margin-bottom: 0;
   }
   .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
     color: #1d4ed8;
     background: #eff6ff;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+    background: rgba(59, 130, 246, 0.24);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: #4b5563;
     background: #f3f4f6;
   }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+    padding: 0.75rem 1.25rem;
+  }
   .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
     font-size: 0.875rem;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon.p-icon {
-    width: 0.875rem;
-    height: 0.875rem;
-  }
-  .p-input-filled .p-cascadeselect {
-    background: #f3f4f6;
-  }
-  .p-input-filled .p-cascadeselect:not(.p-disabled):hover {
-    background-color: #f3f4f6;
-  }
-  .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
-    background-color: #ffffff;
-  }
   .p-checkbox {
     position: relative;
     display: inline-flex;
@@ -1331,6 +1332,7 @@
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
     appearance: none;
     border-radius: 6px;
+    outline-color: transparent;
   }
   .p-inputtext:enabled:hover {
     border-color: #3b82f6;
@@ -1344,6 +1346,15 @@
   .p-inputtext.p-invalid.p-component {
     border-color: #e24c4c;
   }
+  .p-inputtext.p-variant-filled {
+    background-color: #f3f4f6;
+  }
+  .p-inputtext.p-variant-filled:enabled:hover {
+    background-color: #f3f4f6;
+  }
+  .p-inputtext.p-variant-filled:enabled:focus {
+    background-color: #ffffff;
+  }
   .p-inputtext.p-inputtext-sm {
     font-size: 0.875rem;
     padding: 0.65625rem 0.65625rem;
@@ -1357,30 +1368,9 @@
     color: #6b7280;
     transition-duration: 0.2s;
   }
-  .p-float-label > label.p-error {
+  .p-float-label > .p-invalid + label {
     color: #e24c4c;
   }
-  .p-input-icon-left > i:first-of-type,
-  .p-input-icon-left > svg:first-of-type,
-  .p-input-icon-left > .p-input-prefix {
-    left: 0.75rem;
-    color: #6b7280;
-  }
-  .p-input-icon-left > .p-inputtext {
-    padding-left: 2.5rem;
-  }
-  .p-input-icon-left.p-float-label > label {
-    left: 2.5rem;
-  }
-  .p-input-icon-right > i:last-of-type,
-  .p-input-icon-right > svg:last-of-type,
-  .p-input-icon-right > .p-input-suffix {
-    right: 0.75rem;
-    color: #6b7280;
-  }
-  .p-input-icon-right > .p-inputtext {
-    padding-right: 2.5rem;
-  }
   .p-icon-field-left > .p-inputtext {
     padding-left: 2.5rem;
   }
@@ -2082,6 +2072,15 @@
   .p-treeselect.p-treeselect-clearable .p-treeselect-label {
     padding-right: 1.75rem;
   }
+  .p-treeselect.p-variant-filled {
+    background: #f3f4f6;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #f3f4f6;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #ffffff;
+  }
   .p-treeselect .p-treeselect-label {
     padding: 0.75rem 0.75rem;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
diff --git a/public/themes/lara-light-cyan/theme.css b/public/themes/lara-light-cyan/theme.css
index 552e27017b..6b27c9bf6b 100644
--- a/public/themes/lara-light-cyan/theme.css
+++ b/public/themes/lara-light-cyan/theme.css
@@ -656,6 +656,7 @@
     border: 1px solid #d1d5db;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
     border-radius: 6px;
+    outline-color: transparent;
   }
   .p-cascadeselect:not(.p-disabled):hover {
     border-color: #06b6d4;
@@ -666,6 +667,15 @@
     box-shadow: 0 0 0 0.2rem #a5f3fc;
     border-color: #06b6d4;
   }
+  .p-cascadeselect.p-variant-filled {
+    background-color: #f3f4f6;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:hover {
+    background-color: #f3f4f6;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:focus {
+    background-color: #ffffff;
+  }
   .p-cascadeselect .p-cascadeselect-label {
     background: transparent;
     border: 0 none;
@@ -706,38 +716,29 @@
     transition: box-shadow 0.2s;
     border-radius: 0;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
-    padding: 0.75rem 1.25rem;
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+    margin-top: 0;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: inset 0 0 0 0.15rem #a5f3fc;
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+    margin-bottom: 0;
   }
   .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
     color: #0e7490;
     background: #ecfeff;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+    background: rgba(6, 182, 212, 0.24);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: #4b5563;
     background: #f3f4f6;
   }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+    padding: 0.75rem 1.25rem;
+  }
   .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
     font-size: 0.875rem;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon.p-icon {
-    width: 0.875rem;
-    height: 0.875rem;
-  }
-  .p-input-filled .p-cascadeselect {
-    background: #f3f4f6;
-  }
-  .p-input-filled .p-cascadeselect:not(.p-disabled):hover {
-    background-color: #f3f4f6;
-  }
-  .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
-    background-color: #ffffff;
-  }
   .p-checkbox {
     position: relative;
     display: inline-flex;
@@ -1331,6 +1332,7 @@
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
     appearance: none;
     border-radius: 6px;
+    outline-color: transparent;
   }
   .p-inputtext:enabled:hover {
     border-color: #06b6d4;
@@ -1344,6 +1346,15 @@
   .p-inputtext.p-invalid.p-component {
     border-color: #e24c4c;
   }
+  .p-inputtext.p-variant-filled {
+    background-color: #f3f4f6;
+  }
+  .p-inputtext.p-variant-filled:enabled:hover {
+    background-color: #f3f4f6;
+  }
+  .p-inputtext.p-variant-filled:enabled:focus {
+    background-color: #ffffff;
+  }
   .p-inputtext.p-inputtext-sm {
     font-size: 0.875rem;
     padding: 0.65625rem 0.65625rem;
@@ -1357,30 +1368,9 @@
     color: #6b7280;
     transition-duration: 0.2s;
   }
-  .p-float-label > label.p-error {
+  .p-float-label > .p-invalid + label {
     color: #e24c4c;
   }
-  .p-input-icon-left > i:first-of-type,
-  .p-input-icon-left > svg:first-of-type,
-  .p-input-icon-left > .p-input-prefix {
-    left: 0.75rem;
-    color: #6b7280;
-  }
-  .p-input-icon-left > .p-inputtext {
-    padding-left: 2.5rem;
-  }
-  .p-input-icon-left.p-float-label > label {
-    left: 2.5rem;
-  }
-  .p-input-icon-right > i:last-of-type,
-  .p-input-icon-right > svg:last-of-type,
-  .p-input-icon-right > .p-input-suffix {
-    right: 0.75rem;
-    color: #6b7280;
-  }
-  .p-input-icon-right > .p-inputtext {
-    padding-right: 2.5rem;
-  }
   .p-icon-field-left > .p-inputtext {
     padding-left: 2.5rem;
   }
@@ -2082,6 +2072,15 @@
   .p-treeselect.p-treeselect-clearable .p-treeselect-label {
     padding-right: 1.75rem;
   }
+  .p-treeselect.p-variant-filled {
+    background: #f3f4f6;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #f3f4f6;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #ffffff;
+  }
   .p-treeselect .p-treeselect-label {
     padding: 0.75rem 0.75rem;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
diff --git a/public/themes/lara-light-green/theme.css b/public/themes/lara-light-green/theme.css
index e929fbb116..3dba9f535c 100644
--- a/public/themes/lara-light-green/theme.css
+++ b/public/themes/lara-light-green/theme.css
@@ -656,6 +656,7 @@
     border: 1px solid #d1d5db;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
     border-radius: 6px;
+    outline-color: transparent;
   }
   .p-cascadeselect:not(.p-disabled):hover {
     border-color: #10b981;
@@ -666,6 +667,15 @@
     box-shadow: 0 0 0 0.2rem #a7f3d0;
     border-color: #10b981;
   }
+  .p-cascadeselect.p-variant-filled {
+    background-color: #f3f4f6;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:hover {
+    background-color: #f3f4f6;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:focus {
+    background-color: #ffffff;
+  }
   .p-cascadeselect .p-cascadeselect-label {
     background: transparent;
     border: 0 none;
@@ -706,38 +716,29 @@
     transition: box-shadow 0.2s;
     border-radius: 0;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
-    padding: 0.75rem 1.25rem;
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+    margin-top: 0;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: inset 0 0 0 0.15rem #a7f3d0;
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+    margin-bottom: 0;
   }
   .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
     color: #047857;
     background: #f0fdfa;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+    background: rgba(16, 185, 129, 0.24);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: #4b5563;
     background: #f3f4f6;
   }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+    padding: 0.75rem 1.25rem;
+  }
   .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
     font-size: 0.875rem;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon.p-icon {
-    width: 0.875rem;
-    height: 0.875rem;
-  }
-  .p-input-filled .p-cascadeselect {
-    background: #f3f4f6;
-  }
-  .p-input-filled .p-cascadeselect:not(.p-disabled):hover {
-    background-color: #f3f4f6;
-  }
-  .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
-    background-color: #ffffff;
-  }
   .p-checkbox {
     position: relative;
     display: inline-flex;
@@ -1331,6 +1332,7 @@
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
     appearance: none;
     border-radius: 6px;
+    outline-color: transparent;
   }
   .p-inputtext:enabled:hover {
     border-color: #10b981;
@@ -1344,6 +1346,15 @@
   .p-inputtext.p-invalid.p-component {
     border-color: #e24c4c;
   }
+  .p-inputtext.p-variant-filled {
+    background-color: #f3f4f6;
+  }
+  .p-inputtext.p-variant-filled:enabled:hover {
+    background-color: #f3f4f6;
+  }
+  .p-inputtext.p-variant-filled:enabled:focus {
+    background-color: #ffffff;
+  }
   .p-inputtext.p-inputtext-sm {
     font-size: 0.875rem;
     padding: 0.65625rem 0.65625rem;
@@ -1357,30 +1368,9 @@
     color: #6b7280;
     transition-duration: 0.2s;
   }
-  .p-float-label > label.p-error {
+  .p-float-label > .p-invalid + label {
     color: #e24c4c;
   }
-  .p-input-icon-left > i:first-of-type,
-  .p-input-icon-left > svg:first-of-type,
-  .p-input-icon-left > .p-input-prefix {
-    left: 0.75rem;
-    color: #6b7280;
-  }
-  .p-input-icon-left > .p-inputtext {
-    padding-left: 2.5rem;
-  }
-  .p-input-icon-left.p-float-label > label {
-    left: 2.5rem;
-  }
-  .p-input-icon-right > i:last-of-type,
-  .p-input-icon-right > svg:last-of-type,
-  .p-input-icon-right > .p-input-suffix {
-    right: 0.75rem;
-    color: #6b7280;
-  }
-  .p-input-icon-right > .p-inputtext {
-    padding-right: 2.5rem;
-  }
   .p-icon-field-left > .p-inputtext {
     padding-left: 2.5rem;
   }
@@ -2082,6 +2072,15 @@
   .p-treeselect.p-treeselect-clearable .p-treeselect-label {
     padding-right: 1.75rem;
   }
+  .p-treeselect.p-variant-filled {
+    background: #f3f4f6;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #f3f4f6;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #ffffff;
+  }
   .p-treeselect .p-treeselect-label {
     padding: 0.75rem 0.75rem;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
diff --git a/public/themes/lara-light-indigo/theme.css b/public/themes/lara-light-indigo/theme.css
index be84648378..e0588d72fc 100644
--- a/public/themes/lara-light-indigo/theme.css
+++ b/public/themes/lara-light-indigo/theme.css
@@ -656,6 +656,7 @@
     border: 1px solid #d1d5db;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
     border-radius: 6px;
+    outline-color: transparent;
   }
   .p-cascadeselect:not(.p-disabled):hover {
     border-color: #6366f1;
@@ -666,6 +667,15 @@
     box-shadow: 0 0 0 0.2rem #c7d2fe;
     border-color: #6366f1;
   }
+  .p-cascadeselect.p-variant-filled {
+    background-color: #f3f4f6;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:hover {
+    background-color: #f3f4f6;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:focus {
+    background-color: #ffffff;
+  }
   .p-cascadeselect .p-cascadeselect-label {
     background: transparent;
     border: 0 none;
@@ -706,38 +716,29 @@
     transition: box-shadow 0.2s;
     border-radius: 0;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
-    padding: 0.75rem 1.25rem;
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+    margin-top: 0;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: inset 0 0 0 0.15rem #c7d2fe;
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+    margin-bottom: 0;
   }
   .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
     color: #4338ca;
     background: #eef2ff;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+    background: rgba(99, 102, 241, 0.24);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: #4b5563;
     background: #f3f4f6;
   }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+    padding: 0.75rem 1.25rem;
+  }
   .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
     font-size: 0.875rem;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon.p-icon {
-    width: 0.875rem;
-    height: 0.875rem;
-  }
-  .p-input-filled .p-cascadeselect {
-    background: #f3f4f6;
-  }
-  .p-input-filled .p-cascadeselect:not(.p-disabled):hover {
-    background-color: #f3f4f6;
-  }
-  .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
-    background-color: #ffffff;
-  }
   .p-checkbox {
     position: relative;
     display: inline-flex;
@@ -1331,6 +1332,7 @@
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
     appearance: none;
     border-radius: 6px;
+    outline-color: transparent;
   }
   .p-inputtext:enabled:hover {
     border-color: #6366f1;
@@ -1344,6 +1346,15 @@
   .p-inputtext.p-invalid.p-component {
     border-color: #e24c4c;
   }
+  .p-inputtext.p-variant-filled {
+    background-color: #f3f4f6;
+  }
+  .p-inputtext.p-variant-filled:enabled:hover {
+    background-color: #f3f4f6;
+  }
+  .p-inputtext.p-variant-filled:enabled:focus {
+    background-color: #ffffff;
+  }
   .p-inputtext.p-inputtext-sm {
     font-size: 0.875rem;
     padding: 0.65625rem 0.65625rem;
@@ -1357,30 +1368,9 @@
     color: #6b7280;
     transition-duration: 0.2s;
   }
-  .p-float-label > label.p-error {
+  .p-float-label > .p-invalid + label {
     color: #e24c4c;
   }
-  .p-input-icon-left > i:first-of-type,
-  .p-input-icon-left > svg:first-of-type,
-  .p-input-icon-left > .p-input-prefix {
-    left: 0.75rem;
-    color: #6b7280;
-  }
-  .p-input-icon-left > .p-inputtext {
-    padding-left: 2.5rem;
-  }
-  .p-input-icon-left.p-float-label > label {
-    left: 2.5rem;
-  }
-  .p-input-icon-right > i:last-of-type,
-  .p-input-icon-right > svg:last-of-type,
-  .p-input-icon-right > .p-input-suffix {
-    right: 0.75rem;
-    color: #6b7280;
-  }
-  .p-input-icon-right > .p-inputtext {
-    padding-right: 2.5rem;
-  }
   .p-icon-field-left > .p-inputtext {
     padding-left: 2.5rem;
   }
@@ -2082,6 +2072,15 @@
   .p-treeselect.p-treeselect-clearable .p-treeselect-label {
     padding-right: 1.75rem;
   }
+  .p-treeselect.p-variant-filled {
+    background: #f3f4f6;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #f3f4f6;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #ffffff;
+  }
   .p-treeselect .p-treeselect-label {
     padding: 0.75rem 0.75rem;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
diff --git a/public/themes/lara-light-pink/theme.css b/public/themes/lara-light-pink/theme.css
index ceec59fa62..8d2c4ddc4d 100644
--- a/public/themes/lara-light-pink/theme.css
+++ b/public/themes/lara-light-pink/theme.css
@@ -656,6 +656,7 @@
     border: 1px solid #d1d5db;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
     border-radius: 6px;
+    outline-color: transparent;
   }
   .p-cascadeselect:not(.p-disabled):hover {
     border-color: #ec4899;
@@ -666,6 +667,15 @@
     box-shadow: 0 0 0 0.2rem #fbcfe8;
     border-color: #ec4899;
   }
+  .p-cascadeselect.p-variant-filled {
+    background-color: #f3f4f6;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:hover {
+    background-color: #f3f4f6;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:focus {
+    background-color: #ffffff;
+  }
   .p-cascadeselect .p-cascadeselect-label {
     background: transparent;
     border: 0 none;
@@ -706,38 +716,29 @@
     transition: box-shadow 0.2s;
     border-radius: 0;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
-    padding: 0.75rem 1.25rem;
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+    margin-top: 0;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: inset 0 0 0 0.15rem #fbcfe8;
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+    margin-bottom: 0;
   }
   .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
     color: #be185d;
     background: #fdf2f8;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+    background: rgba(236, 72, 153, 0.24);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: #4b5563;
     background: #f3f4f6;
   }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+    padding: 0.75rem 1.25rem;
+  }
   .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
     font-size: 0.875rem;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon.p-icon {
-    width: 0.875rem;
-    height: 0.875rem;
-  }
-  .p-input-filled .p-cascadeselect {
-    background: #f3f4f6;
-  }
-  .p-input-filled .p-cascadeselect:not(.p-disabled):hover {
-    background-color: #f3f4f6;
-  }
-  .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
-    background-color: #ffffff;
-  }
   .p-checkbox {
     position: relative;
     display: inline-flex;
@@ -1331,6 +1332,7 @@
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
     appearance: none;
     border-radius: 6px;
+    outline-color: transparent;
   }
   .p-inputtext:enabled:hover {
     border-color: #ec4899;
@@ -1344,6 +1346,15 @@
   .p-inputtext.p-invalid.p-component {
     border-color: #e24c4c;
   }
+  .p-inputtext.p-variant-filled {
+    background-color: #f3f4f6;
+  }
+  .p-inputtext.p-variant-filled:enabled:hover {
+    background-color: #f3f4f6;
+  }
+  .p-inputtext.p-variant-filled:enabled:focus {
+    background-color: #ffffff;
+  }
   .p-inputtext.p-inputtext-sm {
     font-size: 0.875rem;
     padding: 0.65625rem 0.65625rem;
@@ -1357,30 +1368,9 @@
     color: #6b7280;
     transition-duration: 0.2s;
   }
-  .p-float-label > label.p-error {
+  .p-float-label > .p-invalid + label {
     color: #e24c4c;
   }
-  .p-input-icon-left > i:first-of-type,
-  .p-input-icon-left > svg:first-of-type,
-  .p-input-icon-left > .p-input-prefix {
-    left: 0.75rem;
-    color: #6b7280;
-  }
-  .p-input-icon-left > .p-inputtext {
-    padding-left: 2.5rem;
-  }
-  .p-input-icon-left.p-float-label > label {
-    left: 2.5rem;
-  }
-  .p-input-icon-right > i:last-of-type,
-  .p-input-icon-right > svg:last-of-type,
-  .p-input-icon-right > .p-input-suffix {
-    right: 0.75rem;
-    color: #6b7280;
-  }
-  .p-input-icon-right > .p-inputtext {
-    padding-right: 2.5rem;
-  }
   .p-icon-field-left > .p-inputtext {
     padding-left: 2.5rem;
   }
@@ -2082,6 +2072,15 @@
   .p-treeselect.p-treeselect-clearable .p-treeselect-label {
     padding-right: 1.75rem;
   }
+  .p-treeselect.p-variant-filled {
+    background: #f3f4f6;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #f3f4f6;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #ffffff;
+  }
   .p-treeselect .p-treeselect-label {
     padding: 0.75rem 0.75rem;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
diff --git a/public/themes/lara-light-teal/theme.css b/public/themes/lara-light-teal/theme.css
index 93f92db6c4..54d296f474 100644
--- a/public/themes/lara-light-teal/theme.css
+++ b/public/themes/lara-light-teal/theme.css
@@ -656,6 +656,7 @@
     border: 1px solid #d1d5db;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
     border-radius: 6px;
+    outline-color: transparent;
   }
   .p-cascadeselect:not(.p-disabled):hover {
     border-color: #14b8a6;
@@ -666,6 +667,15 @@
     box-shadow: 0 0 0 0.2rem #99f6e4;
     border-color: #14b8a6;
   }
+  .p-cascadeselect.p-variant-filled {
+    background-color: #f3f4f6;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:hover {
+    background-color: #f3f4f6;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:focus {
+    background-color: #ffffff;
+  }
   .p-cascadeselect .p-cascadeselect-label {
     background: transparent;
     border: 0 none;
@@ -706,38 +716,29 @@
     transition: box-shadow 0.2s;
     border-radius: 0;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
-    padding: 0.75rem 1.25rem;
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+    margin-top: 0;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: inset 0 0 0 0.15rem #99f6e4;
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+    margin-bottom: 0;
   }
   .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
     color: #0f766e;
     background: #0f766e;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+    background: rgba(20, 184, 166, 0.24);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: #4b5563;
     background: #f3f4f6;
   }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+    padding: 0.75rem 1.25rem;
+  }
   .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
     font-size: 0.875rem;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon.p-icon {
-    width: 0.875rem;
-    height: 0.875rem;
-  }
-  .p-input-filled .p-cascadeselect {
-    background: #f3f4f6;
-  }
-  .p-input-filled .p-cascadeselect:not(.p-disabled):hover {
-    background-color: #f3f4f6;
-  }
-  .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
-    background-color: #ffffff;
-  }
   .p-checkbox {
     position: relative;
     display: inline-flex;
@@ -1331,6 +1332,7 @@
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
     appearance: none;
     border-radius: 6px;
+    outline-color: transparent;
   }
   .p-inputtext:enabled:hover {
     border-color: #14b8a6;
@@ -1344,6 +1346,15 @@
   .p-inputtext.p-invalid.p-component {
     border-color: #e24c4c;
   }
+  .p-inputtext.p-variant-filled {
+    background-color: #f3f4f6;
+  }
+  .p-inputtext.p-variant-filled:enabled:hover {
+    background-color: #f3f4f6;
+  }
+  .p-inputtext.p-variant-filled:enabled:focus {
+    background-color: #ffffff;
+  }
   .p-inputtext.p-inputtext-sm {
     font-size: 0.875rem;
     padding: 0.65625rem 0.65625rem;
@@ -1357,30 +1368,9 @@
     color: #6b7280;
     transition-duration: 0.2s;
   }
-  .p-float-label > label.p-error {
+  .p-float-label > .p-invalid + label {
     color: #e24c4c;
   }
-  .p-input-icon-left > i:first-of-type,
-  .p-input-icon-left > svg:first-of-type,
-  .p-input-icon-left > .p-input-prefix {
-    left: 0.75rem;
-    color: #6b7280;
-  }
-  .p-input-icon-left > .p-inputtext {
-    padding-left: 2.5rem;
-  }
-  .p-input-icon-left.p-float-label > label {
-    left: 2.5rem;
-  }
-  .p-input-icon-right > i:last-of-type,
-  .p-input-icon-right > svg:last-of-type,
-  .p-input-icon-right > .p-input-suffix {
-    right: 0.75rem;
-    color: #6b7280;
-  }
-  .p-input-icon-right > .p-inputtext {
-    padding-right: 2.5rem;
-  }
   .p-icon-field-left > .p-inputtext {
     padding-left: 2.5rem;
   }
@@ -2082,6 +2072,15 @@
   .p-treeselect.p-treeselect-clearable .p-treeselect-label {
     padding-right: 1.75rem;
   }
+  .p-treeselect.p-variant-filled {
+    background: #f3f4f6;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #f3f4f6;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #ffffff;
+  }
   .p-treeselect .p-treeselect-label {
     padding: 0.75rem 0.75rem;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
diff --git a/public/themes/luna-amber/theme.css b/public/themes/luna-amber/theme.css
index 50de091e7c..97efc4189f 100644
--- a/public/themes/luna-amber/theme.css
+++ b/public/themes/luna-amber/theme.css
@@ -639,6 +639,7 @@
     border: 1px solid #4b4b4b;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
     border-radius: 3px;
+    outline-color: transparent;
   }
   .p-cascadeselect:not(.p-disabled):hover {
     border-color: #ffe082;
@@ -649,6 +650,15 @@
     box-shadow: 0 0 0 0.1rem white;
     border-color: #ffe082;
   }
+  .p-cascadeselect.p-variant-filled {
+    background-color: #4b4b4b;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:hover {
+    background-color: #4b4b4b;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:focus {
+    background-color: #4b4b4b;
+  }
   .p-cascadeselect .p-cascadeselect-label {
     background: transparent;
     border: 0 none;
@@ -689,38 +699,29 @@
     transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
     border-radius: 0;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
-    padding: 0.429rem 0.857rem;
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+    margin-top: 0;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: inset 0 0 0 0.15rem white;
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+    margin-bottom: 0;
   }
   .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
     color: #212529;
     background: #ffe082;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+    background: rgba(255, 224, 130, 0.24);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: #dedede;
     background: #4c4c4c;
   }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+    padding: 0.429rem 0.857rem;
+  }
   .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
     font-size: 0.875rem;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon.p-icon {
-    width: 0.875rem;
-    height: 0.875rem;
-  }
-  .p-input-filled .p-cascadeselect {
-    background: #4b4b4b;
-  }
-  .p-input-filled .p-cascadeselect:not(.p-disabled):hover {
-    background-color: #4b4b4b;
-  }
-  .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
-    background-color: #4b4b4b;
-  }
   .p-checkbox {
     position: relative;
     display: inline-flex;
@@ -1317,6 +1318,7 @@
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
     appearance: none;
     border-radius: 3px;
+    outline-color: transparent;
   }
   .p-inputtext:enabled:hover {
     border-color: #ffe082;
@@ -1330,6 +1332,15 @@
   .p-inputtext.p-invalid.p-component {
     border-color: #e57373;
   }
+  .p-inputtext.p-variant-filled {
+    background-color: #4b4b4b;
+  }
+  .p-inputtext.p-variant-filled:enabled:hover {
+    background-color: #4b4b4b;
+  }
+  .p-inputtext.p-variant-filled:enabled:focus {
+    background-color: #4b4b4b;
+  }
   .p-inputtext.p-inputtext-sm {
     font-size: 0.875rem;
     padding: 0.375375rem 0.375375rem;
@@ -1343,30 +1354,9 @@
     color: #9b9b9b;
     transition-duration: 0.2s;
   }
-  .p-float-label > label.p-error {
+  .p-float-label > .p-invalid + label {
     color: #e57373;
   }
-  .p-input-icon-left > i:first-of-type,
-  .p-input-icon-left > svg:first-of-type,
-  .p-input-icon-left > .p-input-prefix {
-    left: 0.429rem;
-    color: #888888;
-  }
-  .p-input-icon-left > .p-inputtext {
-    padding-left: 1.858rem;
-  }
-  .p-input-icon-left.p-float-label > label {
-    left: 1.858rem;
-  }
-  .p-input-icon-right > i:last-of-type,
-  .p-input-icon-right > svg:last-of-type,
-  .p-input-icon-right > .p-input-suffix {
-    right: 0.429rem;
-    color: #888888;
-  }
-  .p-input-icon-right > .p-inputtext {
-    padding-right: 1.858rem;
-  }
   .p-icon-field-left > .p-inputtext {
     padding-left: 1.858rem;
   }
@@ -2074,6 +2064,15 @@
   .p-treeselect.p-treeselect-clearable .p-treeselect-label {
     padding-right: 1.429rem;
   }
+  .p-treeselect.p-variant-filled {
+    background: #4b4b4b;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #4b4b4b;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #4b4b4b;
+  }
   .p-treeselect .p-treeselect-label {
     padding: 0.429rem 0.429rem;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
diff --git a/public/themes/luna-blue/theme.css b/public/themes/luna-blue/theme.css
index 8640928be4..9cfb769aae 100644
--- a/public/themes/luna-blue/theme.css
+++ b/public/themes/luna-blue/theme.css
@@ -639,6 +639,7 @@
     border: 1px solid #4b4b4b;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
     border-radius: 3px;
+    outline-color: transparent;
   }
   .p-cascadeselect:not(.p-disabled):hover {
     border-color: #81d4fa;
@@ -649,6 +650,15 @@
     box-shadow: 0 0 0 0.1rem white;
     border-color: #81d4fa;
   }
+  .p-cascadeselect.p-variant-filled {
+    background-color: #4b4b4b;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:hover {
+    background-color: #4b4b4b;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:focus {
+    background-color: #4b4b4b;
+  }
   .p-cascadeselect .p-cascadeselect-label {
     background: transparent;
     border: 0 none;
@@ -689,38 +699,29 @@
     transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
     border-radius: 0;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
-    padding: 0.429rem 0.857rem;
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+    margin-top: 0;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: inset 0 0 0 0.15rem white;
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+    margin-bottom: 0;
   }
   .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
     color: #212529;
     background: #81d4fa;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+    background: rgba(129, 212, 250, 0.24);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: #dedede;
     background: #4c4c4c;
   }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+    padding: 0.429rem 0.857rem;
+  }
   .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
     font-size: 0.875rem;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon.p-icon {
-    width: 0.875rem;
-    height: 0.875rem;
-  }
-  .p-input-filled .p-cascadeselect {
-    background: #4b4b4b;
-  }
-  .p-input-filled .p-cascadeselect:not(.p-disabled):hover {
-    background-color: #4b4b4b;
-  }
-  .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
-    background-color: #4b4b4b;
-  }
   .p-checkbox {
     position: relative;
     display: inline-flex;
@@ -1317,6 +1318,7 @@
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
     appearance: none;
     border-radius: 3px;
+    outline-color: transparent;
   }
   .p-inputtext:enabled:hover {
     border-color: #81d4fa;
@@ -1330,6 +1332,15 @@
   .p-inputtext.p-invalid.p-component {
     border-color: #e57373;
   }
+  .p-inputtext.p-variant-filled {
+    background-color: #4b4b4b;
+  }
+  .p-inputtext.p-variant-filled:enabled:hover {
+    background-color: #4b4b4b;
+  }
+  .p-inputtext.p-variant-filled:enabled:focus {
+    background-color: #4b4b4b;
+  }
   .p-inputtext.p-inputtext-sm {
     font-size: 0.875rem;
     padding: 0.375375rem 0.375375rem;
@@ -1343,30 +1354,9 @@
     color: #9b9b9b;
     transition-duration: 0.2s;
   }
-  .p-float-label > label.p-error {
+  .p-float-label > .p-invalid + label {
     color: #e57373;
   }
-  .p-input-icon-left > i:first-of-type,
-  .p-input-icon-left > svg:first-of-type,
-  .p-input-icon-left > .p-input-prefix {
-    left: 0.429rem;
-    color: #888888;
-  }
-  .p-input-icon-left > .p-inputtext {
-    padding-left: 1.858rem;
-  }
-  .p-input-icon-left.p-float-label > label {
-    left: 1.858rem;
-  }
-  .p-input-icon-right > i:last-of-type,
-  .p-input-icon-right > svg:last-of-type,
-  .p-input-icon-right > .p-input-suffix {
-    right: 0.429rem;
-    color: #888888;
-  }
-  .p-input-icon-right > .p-inputtext {
-    padding-right: 1.858rem;
-  }
   .p-icon-field-left > .p-inputtext {
     padding-left: 1.858rem;
   }
@@ -2074,6 +2064,15 @@
   .p-treeselect.p-treeselect-clearable .p-treeselect-label {
     padding-right: 1.429rem;
   }
+  .p-treeselect.p-variant-filled {
+    background: #4b4b4b;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #4b4b4b;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #4b4b4b;
+  }
   .p-treeselect .p-treeselect-label {
     padding: 0.429rem 0.429rem;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
diff --git a/public/themes/luna-green/theme.css b/public/themes/luna-green/theme.css
index 80509a8d03..20e8198f9f 100644
--- a/public/themes/luna-green/theme.css
+++ b/public/themes/luna-green/theme.css
@@ -639,6 +639,7 @@
     border: 1px solid #4b4b4b;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
     border-radius: 3px;
+    outline-color: transparent;
   }
   .p-cascadeselect:not(.p-disabled):hover {
     border-color: #c5e1a5;
@@ -649,6 +650,15 @@
     box-shadow: 0 0 0 0.1rem white;
     border-color: #c5e1a5;
   }
+  .p-cascadeselect.p-variant-filled {
+    background-color: #4b4b4b;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:hover {
+    background-color: #4b4b4b;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:focus {
+    background-color: #4b4b4b;
+  }
   .p-cascadeselect .p-cascadeselect-label {
     background: transparent;
     border: 0 none;
@@ -689,38 +699,29 @@
     transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
     border-radius: 0;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
-    padding: 0.429rem 0.857rem;
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+    margin-top: 0;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: inset 0 0 0 0.15rem white;
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+    margin-bottom: 0;
   }
   .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
     color: #212529;
     background: #c5e1a5;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+    background: rgba(197, 225, 165, 0.24);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: #dedede;
     background: #4c4c4c;
   }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+    padding: 0.429rem 0.857rem;
+  }
   .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
     font-size: 0.875rem;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon.p-icon {
-    width: 0.875rem;
-    height: 0.875rem;
-  }
-  .p-input-filled .p-cascadeselect {
-    background: #4b4b4b;
-  }
-  .p-input-filled .p-cascadeselect:not(.p-disabled):hover {
-    background-color: #4b4b4b;
-  }
-  .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
-    background-color: #4b4b4b;
-  }
   .p-checkbox {
     position: relative;
     display: inline-flex;
@@ -1317,6 +1318,7 @@
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
     appearance: none;
     border-radius: 3px;
+    outline-color: transparent;
   }
   .p-inputtext:enabled:hover {
     border-color: #c5e1a5;
@@ -1330,6 +1332,15 @@
   .p-inputtext.p-invalid.p-component {
     border-color: #e57373;
   }
+  .p-inputtext.p-variant-filled {
+    background-color: #4b4b4b;
+  }
+  .p-inputtext.p-variant-filled:enabled:hover {
+    background-color: #4b4b4b;
+  }
+  .p-inputtext.p-variant-filled:enabled:focus {
+    background-color: #4b4b4b;
+  }
   .p-inputtext.p-inputtext-sm {
     font-size: 0.875rem;
     padding: 0.375375rem 0.375375rem;
@@ -1343,30 +1354,9 @@
     color: #9b9b9b;
     transition-duration: 0.2s;
   }
-  .p-float-label > label.p-error {
+  .p-float-label > .p-invalid + label {
     color: #e57373;
   }
-  .p-input-icon-left > i:first-of-type,
-  .p-input-icon-left > svg:first-of-type,
-  .p-input-icon-left > .p-input-prefix {
-    left: 0.429rem;
-    color: #888888;
-  }
-  .p-input-icon-left > .p-inputtext {
-    padding-left: 1.858rem;
-  }
-  .p-input-icon-left.p-float-label > label {
-    left: 1.858rem;
-  }
-  .p-input-icon-right > i:last-of-type,
-  .p-input-icon-right > svg:last-of-type,
-  .p-input-icon-right > .p-input-suffix {
-    right: 0.429rem;
-    color: #888888;
-  }
-  .p-input-icon-right > .p-inputtext {
-    padding-right: 1.858rem;
-  }
   .p-icon-field-left > .p-inputtext {
     padding-left: 1.858rem;
   }
@@ -2074,6 +2064,15 @@
   .p-treeselect.p-treeselect-clearable .p-treeselect-label {
     padding-right: 1.429rem;
   }
+  .p-treeselect.p-variant-filled {
+    background: #4b4b4b;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #4b4b4b;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #4b4b4b;
+  }
   .p-treeselect .p-treeselect-label {
     padding: 0.429rem 0.429rem;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
diff --git a/public/themes/luna-pink/theme.css b/public/themes/luna-pink/theme.css
index 119822249c..21e08fbfd9 100644
--- a/public/themes/luna-pink/theme.css
+++ b/public/themes/luna-pink/theme.css
@@ -639,6 +639,7 @@
     border: 1px solid #4b4b4b;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
     border-radius: 3px;
+    outline-color: transparent;
   }
   .p-cascadeselect:not(.p-disabled):hover {
     border-color: #f48fb1;
@@ -649,6 +650,15 @@
     box-shadow: 0 0 0 0.1rem white;
     border-color: #f48fb1;
   }
+  .p-cascadeselect.p-variant-filled {
+    background-color: #4b4b4b;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:hover {
+    background-color: #4b4b4b;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:focus {
+    background-color: #4b4b4b;
+  }
   .p-cascadeselect .p-cascadeselect-label {
     background: transparent;
     border: 0 none;
@@ -689,38 +699,29 @@
     transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
     border-radius: 0;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
-    padding: 0.429rem 0.857rem;
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+    margin-top: 0;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: inset 0 0 0 0.15rem white;
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+    margin-bottom: 0;
   }
   .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
     color: #212529;
     background: #f48fb1;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+    background: rgba(244, 143, 177, 0.24);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: #dedede;
     background: #4c4c4c;
   }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+    padding: 0.429rem 0.857rem;
+  }
   .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
     font-size: 0.875rem;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon.p-icon {
-    width: 0.875rem;
-    height: 0.875rem;
-  }
-  .p-input-filled .p-cascadeselect {
-    background: #4b4b4b;
-  }
-  .p-input-filled .p-cascadeselect:not(.p-disabled):hover {
-    background-color: #4b4b4b;
-  }
-  .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
-    background-color: #4b4b4b;
-  }
   .p-checkbox {
     position: relative;
     display: inline-flex;
@@ -1317,6 +1318,7 @@
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
     appearance: none;
     border-radius: 3px;
+    outline-color: transparent;
   }
   .p-inputtext:enabled:hover {
     border-color: #f48fb1;
@@ -1330,6 +1332,15 @@
   .p-inputtext.p-invalid.p-component {
     border-color: #e57373;
   }
+  .p-inputtext.p-variant-filled {
+    background-color: #4b4b4b;
+  }
+  .p-inputtext.p-variant-filled:enabled:hover {
+    background-color: #4b4b4b;
+  }
+  .p-inputtext.p-variant-filled:enabled:focus {
+    background-color: #4b4b4b;
+  }
   .p-inputtext.p-inputtext-sm {
     font-size: 0.875rem;
     padding: 0.375375rem 0.375375rem;
@@ -1343,30 +1354,9 @@
     color: #9b9b9b;
     transition-duration: 0.2s;
   }
-  .p-float-label > label.p-error {
+  .p-float-label > .p-invalid + label {
     color: #e57373;
   }
-  .p-input-icon-left > i:first-of-type,
-  .p-input-icon-left > svg:first-of-type,
-  .p-input-icon-left > .p-input-prefix {
-    left: 0.429rem;
-    color: #888888;
-  }
-  .p-input-icon-left > .p-inputtext {
-    padding-left: 1.858rem;
-  }
-  .p-input-icon-left.p-float-label > label {
-    left: 1.858rem;
-  }
-  .p-input-icon-right > i:last-of-type,
-  .p-input-icon-right > svg:last-of-type,
-  .p-input-icon-right > .p-input-suffix {
-    right: 0.429rem;
-    color: #888888;
-  }
-  .p-input-icon-right > .p-inputtext {
-    padding-right: 1.858rem;
-  }
   .p-icon-field-left > .p-inputtext {
     padding-left: 1.858rem;
   }
@@ -2074,6 +2064,15 @@
   .p-treeselect.p-treeselect-clearable .p-treeselect-label {
     padding-right: 1.429rem;
   }
+  .p-treeselect.p-variant-filled {
+    background: #4b4b4b;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #4b4b4b;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #4b4b4b;
+  }
   .p-treeselect .p-treeselect-label {
     padding: 0.429rem 0.429rem;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
diff --git a/public/themes/md-dark-indigo/theme.css b/public/themes/md-dark-indigo/theme.css
index 5aa09c8992..cfb995cf4a 100644
--- a/public/themes/md-dark-indigo/theme.css
+++ b/public/themes/md-dark-indigo/theme.css
@@ -241,7 +241,7 @@
 }
 .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover {
   color: rgba(255, 255, 255, 0.87);
-  background: hsla(0, 0%, 100%, 0.04);
+  background: hsla(0deg, 0%, 100%, 0.04);
 }
 .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item {
   padding: 1rem 1rem;
@@ -419,7 +419,7 @@
   }
   .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover {
     color: rgba(255, 255, 255, 0.87);
-    background: hsla(0, 0%, 100%, 0.04);
+    background: hsla(0deg, 0%, 100%, 0.04);
   }
   .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight {
     color: #9FA8DA;
@@ -445,7 +445,7 @@
     padding: 0.5rem;
     background: #1e1e1e;
     color: rgba(255, 255, 255, 0.87);
-    border: 1px solid hsla(0, 0%, 100%, 0.3);
+    border: 1px solid hsla(0deg, 0%, 100%, 0.3);
     border-radius: 4px;
   }
   .p-datepicker:not(.p-datepicker-inline) {
@@ -462,7 +462,7 @@
     background: #1e1e1e;
     font-weight: 500;
     margin: 0;
-    border-bottom: 1px solid hsla(0, 0%, 100%, 0.12);
+    border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12);
     border-top-right-radius: 4px;
     border-top-left-radius: 4px;
   }
@@ -546,13 +546,13 @@
   }
   .p-datepicker .p-datepicker-buttonbar {
     padding: 1rem 0;
-    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
+    border-top: 1px solid hsla(0deg, 0%, 100%, 0.12);
   }
   .p-datepicker .p-datepicker-buttonbar .p-button {
     width: auto;
   }
   .p-datepicker .p-timepicker {
-    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
+    border-top: 1px solid hsla(0deg, 0%, 100%, 0.12);
     padding: 0.5rem;
   }
   .p-datepicker .p-timepicker button {
@@ -611,7 +611,7 @@
     background: rgba(159, 168, 218, 0.16);
   }
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group {
-    border-left: 1px solid hsla(0, 0%, 100%, 0.12);
+    border-left: 1px solid hsla(0deg, 0%, 100%, 0.12);
     padding-right: 0.5rem;
     padding-left: 0.5rem;
     padding-top: 0;
@@ -656,9 +656,10 @@
   }
   .p-cascadeselect {
     background: #1e1e1e;
-    border: 1px solid hsla(0, 0%, 100%, 0.3);
+    border: 1px solid hsla(0deg, 0%, 100%, 0.3);
     transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
     border-radius: 4px;
+    outline-color: transparent;
   }
   .p-cascadeselect:not(.p-disabled):hover {
     border-color: rgba(255, 255, 255, 0.6);
@@ -669,6 +670,15 @@
     box-shadow: none;
     border-color: #9FA8DA;
   }
+  .p-cascadeselect.p-variant-filled {
+    background-color: hsla(0deg, 0%, 100%, 0.06);
+  }
+  .p-cascadeselect.p-variant-filled:enabled:hover {
+    background-color: hsla(0deg, 0%, 100%, 0.08);
+  }
+  .p-cascadeselect.p-variant-filled:enabled:focus {
+    background-color: hsla(0deg, 0%, 100%, 0.1);
+  }
   .p-cascadeselect .p-cascadeselect-label {
     background: transparent;
     border: 0 none;
@@ -709,38 +719,29 @@
     transition: none;
     border-radius: 0;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
-    padding: 1rem 1rem;
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+    margin-top: 0;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: none;
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+    margin-bottom: 0;
   }
   .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
     color: #9FA8DA;
     background: rgba(159, 168, 218, 0.16);
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+    background: rgba(159, 168, 218, 0.24);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: rgba(255, 255, 255, 0.87);
-    background: hsla(0, 0%, 100%, 0.04);
+    background: hsla(0deg, 0%, 100%, 0.04);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+    padding: 1rem 1rem;
   }
   .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
     font-size: 0.875rem;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon.p-icon {
-    width: 0.875rem;
-    height: 0.875rem;
-  }
-  .p-input-filled .p-cascadeselect {
-    background: hsla(0, 0%, 100%, 0.06);
-  }
-  .p-input-filled .p-cascadeselect:not(.p-disabled):hover {
-    background-color: hsla(0, 0%, 100%, 0.08);
-  }
-  .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
-    background-color: hsla(0, 0%, 100%, 0.1);
-  }
   .p-checkbox {
     position: relative;
     display: inline-flex;
@@ -771,11 +772,11 @@
     height: 18px;
   }
   .p-checkbox .p-checkbox-input {
-    border: 2px solid hsla(0, 0%, 100%, 0.7);
+    border: 2px solid hsla(0deg, 0%, 100%, 0.7);
     border-radius: 4px;
   }
   .p-checkbox .p-checkbox-box {
-    border: 2px solid hsla(0, 0%, 100%, 0.7);
+    border: 2px solid hsla(0deg, 0%, 100%, 0.7);
     background: #1e1e1e;
     width: 18px;
     height: 18px;
@@ -794,7 +795,7 @@
     height: 14px;
   }
   .p-checkbox .p-checkbox-box {
-    border: 2px solid hsla(0, 0%, 100%, 0.7);
+    border: 2px solid hsla(0deg, 0%, 100%, 0.7);
     background: #1e1e1e;
     width: 18px;
     height: 18px;
@@ -834,25 +835,25 @@
     border-color: #f44435;
   }
   .p-checkbox.p-variant-filled .p-checkbox-box {
-    background-color: hsla(0, 0%, 100%, 0.06);
+    background-color: hsla(0deg, 0%, 100%, 0.06);
   }
   .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box {
     background: #9FA8DA;
   }
   .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
-    background-color: hsla(0, 0%, 100%, 0.08);
+    background-color: hsla(0deg, 0%, 100%, 0.08);
   }
   .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
     background: #9FA8DA;
   }
   .p-input-filled .p-checkbox .p-checkbox-box {
-    background-color: hsla(0, 0%, 100%, 0.06);
+    background-color: hsla(0deg, 0%, 100%, 0.06);
   }
   .p-input-filled .p-checkbox.p-highlight .p-checkbox-box {
     background: #9FA8DA;
   }
   .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
-    background-color: hsla(0, 0%, 100%, 0.08);
+    background-color: hsla(0deg, 0%, 100%, 0.08);
   }
   .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
     background: #9FA8DA;
@@ -872,13 +873,13 @@
     align-items: center;
   }
   .p-tristatecheckbox.p-variant-filled .p-checkbox-box {
-    background-color: hsla(0, 0%, 100%, 0.06);
+    background-color: hsla(0deg, 0%, 100%, 0.06);
   }
   .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box {
     background: #9FA8DA;
   }
   .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
-    background-color: hsla(0, 0%, 100%, 0.08);
+    background-color: hsla(0deg, 0%, 100%, 0.08);
   }
   .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
     background: #9FA8DA;
@@ -938,12 +939,12 @@
   .p-chips .p-chips-multiple-container .p-chips-token {
     padding: 0.5rem 1rem;
     margin-right: 0.5rem;
-    background: hsla(0, 0%, 100%, 0.12);
+    background: hsla(0deg, 0%, 100%, 0.12);
     color: rgba(255, 255, 255, 0.87);
     border-radius: 16px;
   }
   .p-chips .p-chips-multiple-container .p-chips-token.p-focus {
-    background: hsla(0, 0%, 100%, 0.24);
+    background: hsla(0deg, 0%, 100%, 0.24);
     color: rgba(255, 255, 255, 0.87);
   }
   .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon {
@@ -1058,7 +1059,7 @@
   }
   .p-dropdown {
     background: #1e1e1e;
-    border: 1px solid hsla(0, 0%, 100%, 0.3);
+    border: 1px solid hsla(0deg, 0%, 100%, 0.3);
     transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
     border-radius: 4px;
     outline-color: transparent;
@@ -1073,13 +1074,13 @@
     border-color: #9FA8DA;
   }
   .p-dropdown.p-variant-filled {
-    background: hsla(0, 0%, 100%, 0.06);
+    background: hsla(0deg, 0%, 100%, 0.06);
   }
   .p-dropdown.p-variant-filled:not(.p-disabled):hover {
-    background-color: hsla(0, 0%, 100%, 0.08);
+    background-color: hsla(0deg, 0%, 100%, 0.08);
   }
   .p-dropdown.p-variant-filled:not(.p-disabled).p-focus {
-    background-color: hsla(0, 0%, 100%, 0.1);
+    background-color: hsla(0deg, 0%, 100%, 0.1);
   }
   .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext {
     background-color: transparent;
@@ -1121,7 +1122,7 @@
   }
   .p-dropdown-panel .p-dropdown-header {
     padding: 1rem;
-    border-bottom: 1px solid hsla(0, 0%, 100%, 0.12);
+    border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12);
     color: rgba(255, 255, 255, 0.87);
     background: #2b2b2b;
     margin: 0;
@@ -1163,7 +1164,7 @@
   }
   .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: rgba(255, 255, 255, 0.87);
-    background: hsla(0, 0%, 100%, 0.04);
+    background: hsla(0deg, 0%, 100%, 0.04);
   }
   .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon {
     position: relative;
@@ -1185,14 +1186,14 @@
   .p-inputgroup-addon {
     background: #1e1e1e;
     color: rgba(255, 255, 255, 0.6);
-    border-top: 1px solid hsla(0, 0%, 100%, 0.3);
-    border-left: 1px solid hsla(0, 0%, 100%, 0.3);
-    border-bottom: 1px solid hsla(0, 0%, 100%, 0.3);
+    border-top: 1px solid hsla(0deg, 0%, 100%, 0.3);
+    border-left: 1px solid hsla(0deg, 0%, 100%, 0.3);
+    border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.3);
     padding: 1rem 1rem;
     min-width: 2.357rem;
   }
   .p-inputgroup-addon:last-child {
-    border-right: 1px solid hsla(0, 0%, 100%, 0.3);
+    border-right: 1px solid hsla(0deg, 0%, 100%, 0.3);
   }
   .p-inputgroup > .p-component,
   .p-inputgroup > .p-inputwrapper > .p-inputtext,
@@ -1288,7 +1289,7 @@
     border-radius: 0.5rem;
   }
   .p-inputswitch .p-inputswitch-slider {
-    background: hsla(0, 0%, 100%, 0.3);
+    background: hsla(0deg, 0%, 100%, 0.3);
     transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
     border-radius: 0.5rem;
     outline-color: transparent;
@@ -1310,7 +1311,7 @@
     transform: translateX(1.5rem);
   }
   .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider {
-    background: hsla(0, 0%, 100%, 0.3);
+    background: hsla(0deg, 0%, 100%, 0.3);
   }
   .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider {
     background: rgba(159, 168, 218, 0.5);
@@ -1330,10 +1331,11 @@
     color: rgba(255, 255, 255, 0.87);
     background: #1e1e1e;
     padding: 1rem 1rem;
-    border: 1px solid hsla(0, 0%, 100%, 0.3);
+    border: 1px solid hsla(0deg, 0%, 100%, 0.3);
     transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
     appearance: none;
     border-radius: 4px;
+    outline-color: transparent;
   }
   .p-inputtext:enabled:hover {
     border-color: rgba(255, 255, 255, 0.6);
@@ -1347,6 +1349,15 @@
   .p-inputtext.p-invalid.p-component {
     border-color: #f44435;
   }
+  .p-inputtext.p-variant-filled {
+    background-color: hsla(0deg, 0%, 100%, 0.06);
+  }
+  .p-inputtext.p-variant-filled:enabled:hover {
+    background-color: hsla(0deg, 0%, 100%, 0.08);
+  }
+  .p-inputtext.p-variant-filled:enabled:focus {
+    background-color: hsla(0deg, 0%, 100%, 0.1);
+  }
   .p-inputtext.p-inputtext-sm {
     font-size: 0.875rem;
     padding: 0.875rem 0.875rem;
@@ -1360,30 +1371,9 @@
     color: rgba(255, 255, 255, 0.6);
     transition-duration: 0.2s;
   }
-  .p-float-label > label.p-error {
+  .p-float-label > .p-invalid + label {
     color: #f44435;
   }
-  .p-input-icon-left > i:first-of-type,
-  .p-input-icon-left > svg:first-of-type,
-  .p-input-icon-left > .p-input-prefix {
-    left: 1rem;
-    color: rgba(255, 255, 255, 0.6);
-  }
-  .p-input-icon-left > .p-inputtext {
-    padding-left: 3rem;
-  }
-  .p-input-icon-left.p-float-label > label {
-    left: 3rem;
-  }
-  .p-input-icon-right > i:last-of-type,
-  .p-input-icon-right > svg:last-of-type,
-  .p-input-icon-right > .p-input-suffix {
-    right: 1rem;
-    color: rgba(255, 255, 255, 0.6);
-  }
-  .p-input-icon-right > .p-inputtext {
-    padding-right: 3rem;
-  }
   .p-icon-field-left > .p-inputtext {
     padding-left: 3rem;
   }
@@ -1406,13 +1396,13 @@
     color: rgba(255, 255, 255, 0.6);
   }
   .p-input-filled .p-inputtext {
-    background-color: hsla(0, 0%, 100%, 0.06);
+    background-color: hsla(0deg, 0%, 100%, 0.06);
   }
   .p-input-filled .p-inputtext:enabled:hover {
-    background-color: hsla(0, 0%, 100%, 0.08);
+    background-color: hsla(0deg, 0%, 100%, 0.08);
   }
   .p-input-filled .p-inputtext:enabled:focus {
-    background-color: hsla(0, 0%, 100%, 0.1);
+    background-color: hsla(0deg, 0%, 100%, 0.1);
   }
   .p-inputtext-sm .p-inputtext {
     font-size: 0.875rem;
@@ -1472,14 +1462,14 @@
   .p-listbox {
     background: #1e1e1e;
     color: rgba(255, 255, 255, 0.87);
-    border: 1px solid hsla(0, 0%, 100%, 0.3);
+    border: 1px solid hsla(0deg, 0%, 100%, 0.3);
     border-radius: 4px;
     transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
     outline-color: transparent;
   }
   .p-listbox .p-listbox-header {
     padding: 1rem;
-    border-bottom: 1px solid hsla(0, 0%, 100%, 0.12);
+    border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12);
     color: rgba(255, 255, 255, 0.87);
     background: #1e1e1e;
     margin: 0;
@@ -1532,15 +1522,15 @@
   }
   .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: rgba(255, 255, 255, 0.87);
-    background: hsla(0, 0%, 100%, 0.04);
+    background: hsla(0deg, 0%, 100%, 0.04);
   }
   .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover {
     color: rgba(255, 255, 255, 0.87);
-    background: hsla(0, 0%, 100%, 0.04);
+    background: hsla(0deg, 0%, 100%, 0.04);
   }
   .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus {
     color: rgba(255, 255, 255, 0.87);
-    background: hsla(0, 0%, 100%, 0.04);
+    background: hsla(0deg, 0%, 100%, 0.04);
   }
   .p-listbox.p-focus {
     outline: 0 none;
@@ -1572,7 +1562,7 @@
   }
   .p-mention-panel .p-mention-items .p-mention-item:hover {
     color: rgba(255, 255, 255, 0.87);
-    background: hsla(0, 0%, 100%, 0.04);
+    background: hsla(0deg, 0%, 100%, 0.04);
   }
   .p-mention-panel .p-mention-items .p-mention-item.p-highlight {
     color: #9FA8DA;
@@ -1668,7 +1658,7 @@
   }
   .p-multiselect {
     background: #1e1e1e;
-    border: 1px solid hsla(0, 0%, 100%, 0.3);
+    border: 1px solid hsla(0deg, 0%, 100%, 0.3);
     transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
     border-radius: 4px;
     outline-color: transparent;
@@ -1683,13 +1673,13 @@
     border-color: #9FA8DA;
   }
   .p-multiselect.p-variant-filled {
-    background: hsla(0, 0%, 100%, 0.06);
+    background: hsla(0deg, 0%, 100%, 0.06);
   }
   .p-multiselect.p-variant-filled:not(.p-disabled):hover {
-    background-color: hsla(0, 0%, 100%, 0.08);
+    background-color: hsla(0deg, 0%, 100%, 0.08);
   }
   .p-multiselect.p-variant-filled:not(.p-disabled).p-focus {
-    background-color: hsla(0, 0%, 100%, 0.1);
+    background-color: hsla(0deg, 0%, 100%, 0.1);
   }
   .p-multiselect .p-multiselect-label {
     padding: 1rem 1rem;
@@ -1701,7 +1691,7 @@
   .p-multiselect.p-multiselect-chip .p-multiselect-token {
     padding: 0.5rem 1rem;
     margin-right: 0.5rem;
-    background: hsla(0, 0%, 100%, 0.12);
+    background: hsla(0deg, 0%, 100%, 0.12);
     color: rgba(255, 255, 255, 0.87);
     border-radius: 16px;
   }
@@ -1730,7 +1720,7 @@
   }
   .p-multiselect-panel .p-multiselect-header {
     padding: 1rem;
-    border-bottom: 1px solid hsla(0, 0%, 100%, 0.12);
+    border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12);
     color: rgba(255, 255, 255, 0.87);
     background: #2b2b2b;
     margin: 0;
@@ -1794,7 +1784,7 @@
   }
   .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: rgba(255, 255, 255, 0.87);
-    background: hsla(0, 0%, 100%, 0.04);
+    background: hsla(0deg, 0%, 100%, 0.04);
   }
   .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox {
     margin-right: 0.5rem;
@@ -1876,11 +1866,11 @@
     opacity: 0;
     z-index: 1;
     outline: 0 none;
-    border: 2px solid hsla(0, 0%, 100%, 0.7);
+    border: 2px solid hsla(0deg, 0%, 100%, 0.7);
     border-radius: 50%;
   }
   .p-radiobutton .p-radiobutton-box {
-    border: 2px solid hsla(0, 0%, 100%, 0.7);
+    border: 2px solid hsla(0deg, 0%, 100%, 0.7);
     background: #1e1e1e;
     width: 20px;
     height: 20px;
@@ -1919,25 +1909,25 @@
     border-color: #f44435;
   }
   .p-radiobutton.p-variant-filled .p-radiobutton-box {
-    background-color: hsla(0, 0%, 100%, 0.06);
+    background-color: hsla(0deg, 0%, 100%, 0.06);
   }
   .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box {
     background: #121212;
   }
   .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
-    background-color: hsla(0, 0%, 100%, 0.08);
+    background-color: hsla(0deg, 0%, 100%, 0.08);
   }
   .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
     background: #121212;
   }
   .p-input-filled .p-radiobutton .p-radiobutton-box {
-    background-color: hsla(0, 0%, 100%, 0.06);
+    background-color: hsla(0deg, 0%, 100%, 0.06);
   }
   .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box {
     background: #121212;
   }
   .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
-    background-color: hsla(0, 0%, 100%, 0.08);
+    background-color: hsla(0deg, 0%, 100%, 0.08);
   }
   .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
     background: #121212;
@@ -2029,7 +2019,7 @@
     border-color: #f44435;
   }
   .p-slider {
-    background: hsla(0, 0%, 100%, 0.3);
+    background: hsla(0deg, 0%, 100%, 0.3);
     border: 0 none;
     border-radius: 4px;
   }
@@ -2069,7 +2059,7 @@
   }
   .p-treeselect {
     background: #1e1e1e;
-    border: 1px solid hsla(0, 0%, 100%, 0.3);
+    border: 1px solid hsla(0deg, 0%, 100%, 0.3);
     transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
     border-radius: 4px;
   }
@@ -2085,6 +2075,15 @@
   .p-treeselect.p-treeselect-clearable .p-treeselect-label {
     padding-right: 2rem;
   }
+  .p-treeselect.p-variant-filled {
+    background: hsla(0deg, 0%, 100%, 0.06);
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: hsla(0deg, 0%, 100%, 0.08);
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: hsla(0deg, 0%, 100%, 0.1);
+  }
   .p-treeselect .p-treeselect-label {
     padding: 1rem 1rem;
     transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
@@ -2095,7 +2094,7 @@
   .p-treeselect.p-treeselect-chip .p-treeselect-token {
     padding: 0.5rem 1rem;
     margin-right: 0.5rem;
-    background: hsla(0, 0%, 100%, 0.12);
+    background: hsla(0deg, 0%, 100%, 0.12);
     color: rgba(255, 255, 255, 0.87);
     border-radius: 16px;
   }
@@ -2125,7 +2124,7 @@
   }
   .p-treeselect-panel .p-treeselect-header {
     padding: 1rem;
-    border-bottom: 1px solid hsla(0, 0%, 100%, 0.12);
+    border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12);
     color: rgba(255, 255, 255, 0.87);
     background: #2b2b2b;
     margin: 0;
@@ -2176,13 +2175,13 @@
     background: transparent;
   }
   .p-input-filled .p-treeselect {
-    background: hsla(0, 0%, 100%, 0.06);
+    background: hsla(0deg, 0%, 100%, 0.06);
   }
   .p-input-filled .p-treeselect:not(.p-disabled):hover {
-    background-color: hsla(0, 0%, 100%, 0.08);
+    background-color: hsla(0deg, 0%, 100%, 0.08);
   }
   .p-input-filled .p-treeselect:not(.p-disabled).p-focus {
-    background-color: hsla(0, 0%, 100%, 0.1);
+    background-color: hsla(0deg, 0%, 100%, 0.1);
   }
   .p-togglebutton {
     position: relative;
@@ -3575,7 +3574,7 @@
   }
   .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:not(.p-highlight):not(.p-disabled):hover {
     color: rgba(255, 255, 255, 0.87);
-    background: hsla(0, 0%, 100%, 0.04);
+    background: hsla(0deg, 0%, 100%, 0.04);
   }
   .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus-visible {
     outline: 0 none;
@@ -3583,12 +3582,12 @@
     box-shadow: none;
   }
   .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator {
-    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
+    border-top: 1px solid hsla(0deg, 0%, 100%, 0.12);
     margin: 0.5rem 0;
   }
   .p-column-filter-overlay-menu .p-column-filter-operator {
     padding: 1rem;
-    border-bottom: 1px solid hsla(0, 0%, 100%, 0.12);
+    border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12);
     color: rgba(255, 255, 255, 0.87);
     background: #2b2b2b;
     margin: 0;
@@ -3597,7 +3596,7 @@
   }
   .p-column-filter-overlay-menu .p-column-filter-constraint {
     padding: 1rem;
-    border-bottom: 1px solid hsla(0, 0%, 100%, 0.12);
+    border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12);
   }
   .p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-matchmode-dropdown {
     margin-bottom: 0.5rem;
@@ -3661,12 +3660,12 @@
     transition: transform 0.2s, none;
   }
   .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
-    background: hsla(0, 0%, 100%, 0.04);
+    background: hsla(0deg, 0%, 100%, 0.04);
     color: rgba(255, 255, 255, 0.87);
   }
   .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus {
     color: rgba(255, 255, 255, 0.87);
-    background: hsla(0, 0%, 100%, 0.12);
+    background: hsla(0deg, 0%, 100%, 0.12);
   }
   .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight {
     color: #9FA8DA;
@@ -3679,10 +3678,10 @@
     background: rgba(255, 255, 255, 0.02);
   }
   .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover {
-    background: hsla(0, 0%, 100%, 0.04);
+    background: hsla(0deg, 0%, 100%, 0.04);
   }
   .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
-    background: hsla(0, 0%, 100%, 0.04);
+    background: hsla(0deg, 0%, 100%, 0.04);
     color: rgba(255, 255, 255, 0.87);
   }
   .p-organizationchart .p-organizationchart-node-content.p-highlight {
@@ -3846,12 +3845,12 @@
     transition: transform 0.2s, none;
   }
   .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
-    background: hsla(0, 0%, 100%, 0.04);
+    background: hsla(0deg, 0%, 100%, 0.04);
     color: rgba(255, 255, 255, 0.87);
   }
   .p-picklist .p-picklist-list .p-picklist-item.p-focus {
     color: rgba(255, 255, 255, 0.87);
-    background: hsla(0, 0%, 100%, 0.12);
+    background: hsla(0deg, 0%, 100%, 0.12);
   }
   .p-picklist .p-picklist-list .p-picklist-item.p-highlight {
     color: #9FA8DA;
@@ -3980,11 +3979,11 @@
     color: #9FA8DA;
   }
   .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover {
-    background: hsla(0, 0%, 100%, 0.04);
+    background: hsla(0deg, 0%, 100%, 0.04);
     color: rgba(255, 255, 255, 0.87);
   }
   .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
-    background: hsla(0, 0%, 100%, 0.04);
+    background: hsla(0deg, 0%, 100%, 0.04);
     color: rgba(255, 255, 255, 0.87);
   }
   .p-tree .p-tree-filter-container {
@@ -4523,7 +4522,7 @@
     padding: 0 1.25rem;
   }
   .p-divider.p-divider-horizontal:before {
-    border-top: 1px hsla(0, 0%, 100%, 0.12);
+    border-top: 1px hsla(0deg, 0%, 100%, 0.12);
   }
   .p-divider.p-divider-horizontal .p-divider-content {
     padding: 0 0.5rem;
@@ -4533,7 +4532,7 @@
     padding: 1.25rem 0;
   }
   .p-divider.p-divider-vertical:before {
-    border-left: 1px hsla(0, 0%, 100%, 0.12);
+    border-left: 1px hsla(0deg, 0%, 100%, 0.12);
   }
   .p-divider.p-divider-vertical .p-divider-content {
     padding: 0.5rem 0;
@@ -4595,10 +4594,10 @@
   }
   .p-splitter .p-splitter-gutter {
     transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-    background: hsla(0, 0%, 100%, 0.04);
+    background: hsla(0deg, 0%, 100%, 0.04);
   }
   .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
-    background: hsla(0, 0%, 100%, 0.12);
+    background: hsla(0deg, 0%, 100%, 0.12);
   }
   .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
     outline: 0 none;
@@ -4606,7 +4605,7 @@
     box-shadow: none;
   }
   .p-splitter .p-splitter-gutter-resizing {
-    background: hsla(0, 0%, 100%, 0.12);
+    background: hsla(0deg, 0%, 100%, 0.12);
   }
   .p-stepper .p-stepper-nav {
     display: flex;
@@ -5124,7 +5123,7 @@
   }
   .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
     color: rgba(255, 255, 255, 0.87);
-    background: hsla(0, 0%, 100%, 0.12);
+    background: hsla(0deg, 0%, 100%, 0.12);
   }
   .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
     color: rgba(255, 255, 255, 0.87);
@@ -5145,7 +5144,7 @@
     color: rgba(255, 255, 255, 0.6);
   }
   .p-contextmenu .p-menuitem-separator {
-    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
+    border-top: 1px solid hsla(0deg, 0%, 100%, 0.12);
     margin: 0.5rem 0;
   }
   .p-contextmenu .p-submenu-icon {
@@ -5287,7 +5286,7 @@
   }
   .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
     color: rgba(255, 255, 255, 0.87);
-    background: hsla(0, 0%, 100%, 0.12);
+    background: hsla(0deg, 0%, 100%, 0.12);
   }
   .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
     color: rgba(255, 255, 255, 0.87);
@@ -5327,7 +5326,7 @@
     width: 12.5rem;
   }
   .p-megamenu .p-submenu-list .p-menuitem-separator {
-    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
+    border-top: 1px solid hsla(0deg, 0%, 100%, 0.12);
     margin: 0.5rem 0;
   }
   .p-megamenu.p-megamenu-vertical {
@@ -5388,7 +5387,7 @@
     box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
   }
   .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-menu-separator {
-    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
+    border-top: 1px solid hsla(0deg, 0%, 100%, 0.12);
     margin: 0.5rem 0;
   }
   .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon {
@@ -5438,7 +5437,7 @@
   }
   .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
     color: rgba(255, 255, 255, 0.87);
-    background: hsla(0, 0%, 100%, 0.12);
+    background: hsla(0deg, 0%, 100%, 0.12);
   }
   .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
     color: rgba(255, 255, 255, 0.87);
@@ -5525,7 +5524,7 @@
   }
   .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
     color: rgba(255, 255, 255, 0.87);
-    background: hsla(0, 0%, 100%, 0.12);
+    background: hsla(0deg, 0%, 100%, 0.12);
   }
   .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
     color: rgba(255, 255, 255, 0.87);
@@ -5560,7 +5559,7 @@
     border-top-left-radius: 0;
   }
   .p-menu .p-menu-separator {
-    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
+    border-top: 1px solid hsla(0deg, 0%, 100%, 0.12);
     margin: 0.5rem 0;
   }
   .p-menubar {
@@ -5640,7 +5639,7 @@
   }
   .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
     color: rgba(255, 255, 255, 0.87);
-    background: hsla(0, 0%, 100%, 0.12);
+    background: hsla(0deg, 0%, 100%, 0.12);
   }
   .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
     color: rgba(255, 255, 255, 0.87);
@@ -5668,7 +5667,7 @@
     width: 12.5rem;
   }
   .p-menubar .p-submenu-list .p-menuitem-separator {
-    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
+    border-top: 1px solid hsla(0deg, 0%, 100%, 0.12);
     margin: 0.5rem 0;
   }
   .p-menubar .p-submenu-list .p-submenu-icon {
@@ -5697,7 +5696,7 @@
     box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
   }
   .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem-separator {
-    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
+    border-top: 1px solid hsla(0deg, 0%, 100%, 0.12);
     margin: 0.5rem 0;
   }
   .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-icon {
@@ -5763,7 +5762,7 @@
       width: 100%;
     }
     .p-menubar .p-menubar-root-list .p-menu-separator {
-      border-top: 1px solid hsla(0, 0%, 100%, 0.12);
+      border-top: 1px solid hsla(0deg, 0%, 100%, 0.12);
       margin: 0.5rem 0;
     }
     .p-menubar .p-menubar-root-list .p-submenu-icon {
@@ -5813,7 +5812,7 @@
     }
     .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
       color: rgba(255, 255, 255, 0.87);
-      background: hsla(0, 0%, 100%, 0.12);
+      background: hsla(0deg, 0%, 100%, 0.12);
     }
     .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
       color: rgba(255, 255, 255, 0.87);
@@ -5974,7 +5973,7 @@
   }
   .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
     color: rgba(255, 255, 255, 0.87);
-    background: hsla(0, 0%, 100%, 0.12);
+    background: hsla(0deg, 0%, 100%, 0.12);
   }
   .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
     color: rgba(255, 255, 255, 0.87);
@@ -5998,7 +5997,7 @@
     margin-right: 0.5rem;
   }
   .p-panelmenu .p-panelmenu-content .p-menuitem-separator {
-    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
+    border-top: 1px solid hsla(0deg, 0%, 100%, 0.12);
     margin: 0.5rem 0;
   }
   .p-panelmenu .p-panelmenu-content .p-submenu-list:not(.p-panelmenu-root-list) {
@@ -6075,7 +6074,7 @@
   }
   .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
     color: rgba(255, 255, 255, 0.87);
-    background: hsla(0, 0%, 100%, 0.12);
+    background: hsla(0deg, 0%, 100%, 0.12);
   }
   .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
     color: rgba(255, 255, 255, 0.87);
@@ -6116,7 +6115,7 @@
     color: rgba(255, 255, 255, 0.6);
   }
   .p-slidemenu .p-slidemenu-separator {
-    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
+    border-top: 1px solid hsla(0deg, 0%, 100%, 0.12);
     margin: 0.5rem 0;
   }
   .p-slidemenu .p-slidemenu-icon {
@@ -6166,7 +6165,7 @@
   }
   .p-steps .p-steps-item:before {
     content: " ";
-    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
+    border-top: 1px solid hsla(0deg, 0%, 100%, 0.12);
     width: 100%;
     top: 50%;
     left: 0;
@@ -6272,7 +6271,7 @@
   }
   .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
     color: rgba(255, 255, 255, 0.87);
-    background: hsla(0, 0%, 100%, 0.12);
+    background: hsla(0deg, 0%, 100%, 0.12);
   }
   .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
     color: rgba(255, 255, 255, 0.87);
@@ -6293,7 +6292,7 @@
     color: rgba(255, 255, 255, 0.6);
   }
   .p-tieredmenu .p-menuitem-separator {
-    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
+    border-top: 1px solid hsla(0deg, 0%, 100%, 0.12);
     margin: 0.5rem 0;
   }
   .p-tieredmenu .p-submenu-icon {
@@ -6684,7 +6683,7 @@
     height: 1.5rem;
   }
   .p-avatar {
-    background-color: hsla(0, 0%, 100%, 0.12);
+    background-color: hsla(0deg, 0%, 100%, 0.12);
     border-radius: 4px;
   }
   .p-avatar.p-avatar-lg {
@@ -6710,7 +6709,7 @@
     border: 2px solid #1e1e1e;
   }
   .p-chip {
-    background-color: hsla(0, 0%, 100%, 0.12);
+    background-color: hsla(0deg, 0%, 100%, 0.12);
     color: rgba(255, 255, 255, 0.87);
     border-radius: 16px;
     padding: 0 1rem;
@@ -7012,8 +7011,8 @@
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
     border: 1px solid transparent;
-    background: hsla(0, 0%, 100%, 0.06) no-repeat;
-    background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3));
+    background: hsla(0deg, 0%, 100%, 0.06) no-repeat;
+    background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3));
     background-size: 0 2px, 100% 1px;
     background-position: 50% 100%, 50% 100%;
     background-origin: border-box;
@@ -7023,13 +7022,13 @@
     background: transparent;
   }
   .p-input-filled .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled):hover {
-    background-color: hsla(0, 0%, 100%, 0.08);
+    background-color: hsla(0deg, 0%, 100%, 0.08);
     border-color: transparent;
     background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87));
   }
   .p-input-filled .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled).p-focus, .p-input-filled .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled).p-inputwrapper-focus {
     box-shadow: none;
-    background-color: hsla(0, 0%, 100%, 0.1);
+    background-color: hsla(0deg, 0%, 100%, 0.1);
     border-color: transparent;
     background-size: 100% 2px, 100% 1px;
   }
@@ -7258,7 +7257,7 @@
     background-color: rgba(255, 255, 255, 0.16);
   }
   .p-calendar-w-btn {
-    border: 1px solid hsla(0, 0%, 100%, 0.3);
+    border: 1px solid hsla(0deg, 0%, 100%, 0.3);
     background: #1e1e1e;
     border-radius: 4px;
     transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
@@ -7308,7 +7307,7 @@
     order: 3;
   }
   .p-datepicker table th {
-    border-bottom: 1px solid hsla(0, 0%, 100%, 0.12);
+    border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12);
     color: rgba(255, 255, 255, 0.38);
     font-weight: 400;
     font-size: 0.875rem;
@@ -7335,8 +7334,8 @@
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
     border: 1px solid transparent;
-    background: hsla(0, 0%, 100%, 0.06) no-repeat;
-    background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3));
+    background: hsla(0deg, 0%, 100%, 0.06) no-repeat;
+    background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3));
     background-size: 0 2px, 100% 1px;
     background-position: 50% 100%, 50% 100%;
     background-origin: border-box;
@@ -7346,13 +7345,13 @@
     background: transparent;
   }
   .p-input-filled .p-calendar-w-btn:not(.p-disabled):hover {
-    background-color: hsla(0, 0%, 100%, 0.08);
+    background-color: hsla(0deg, 0%, 100%, 0.08);
     border-color: transparent;
     background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87));
   }
   .p-input-filled .p-calendar-w-btn:not(.p-disabled).p-focus, .p-input-filled .p-calendar-w-btn:not(.p-disabled).p-inputwrapper-focus {
     box-shadow: none;
-    background-color: hsla(0, 0%, 100%, 0.1);
+    background-color: hsla(0deg, 0%, 100%, 0.1);
     border-color: transparent;
     background-size: 100% 2px, 100% 1px;
   }
@@ -7413,8 +7412,8 @@
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
     border: 1px solid transparent;
-    background: hsla(0, 0%, 100%, 0.06) no-repeat;
-    background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3));
+    background: hsla(0deg, 0%, 100%, 0.06) no-repeat;
+    background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3));
     background-size: 0 2px, 100% 1px;
     background-position: 50% 100%, 50% 100%;
     background-origin: border-box;
@@ -7424,13 +7423,13 @@
     background: transparent;
   }
   .p-input-filled .p-cascadeselect:not(.p-disabled):hover {
-    background-color: hsla(0, 0%, 100%, 0.08);
+    background-color: hsla(0deg, 0%, 100%, 0.08);
     border-color: transparent;
     background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87));
   }
   .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus, .p-input-filled .p-cascadeselect:not(.p-disabled).p-inputwrapper-focus {
     box-shadow: none;
-    background-color: hsla(0, 0%, 100%, 0.1);
+    background-color: hsla(0deg, 0%, 100%, 0.1);
     border-color: transparent;
     background-size: 100% 2px, 100% 1px;
   }
@@ -7472,7 +7471,7 @@
     border-radius: 2px;
   }
   .p-checkbox .p-checkbox-box {
-    border-color: hsla(0, 0%, 100%, 0.7);
+    border-color: hsla(0deg, 0%, 100%, 0.7);
     border-radius: 2px;
     position: relative;
   }
@@ -7491,7 +7490,7 @@
     box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.04);
   }
   .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
-    border-color: hsla(0, 0%, 100%, 0.7);
+    border-color: hsla(0deg, 0%, 100%, 0.7);
   }
   .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight {
     box-shadow: 0 0 1px 10px rgba(159, 168, 218, 0.04);
@@ -7500,7 +7499,7 @@
     box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.12);
   }
   .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box {
-    border-color: hsla(0, 0%, 100%, 0.7);
+    border-color: hsla(0deg, 0%, 100%, 0.7);
   }
   .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible).p-highlight {
     box-shadow: 0 0 1px 10px rgba(159, 168, 218, 0.12);
@@ -7546,8 +7545,8 @@
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
     border: 1px solid transparent;
-    background: hsla(0, 0%, 100%, 0.06) no-repeat;
-    background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3));
+    background: hsla(0deg, 0%, 100%, 0.06) no-repeat;
+    background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3));
     background-size: 0 2px, 100% 1px;
     background-position: 50% 100%, 50% 100%;
     background-origin: border-box;
@@ -7557,13 +7556,13 @@
     background: transparent;
   }
   .p-input-filled .p-chips-multiple-container:not(.p-disabled):hover {
-    background-color: hsla(0, 0%, 100%, 0.08);
+    background-color: hsla(0deg, 0%, 100%, 0.08);
     border-color: transparent;
     background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87));
   }
   .p-input-filled .p-chips-multiple-container:not(.p-disabled).p-focus, .p-input-filled .p-chips-multiple-container:not(.p-disabled).p-inputwrapper-focus {
     box-shadow: none;
-    background-color: hsla(0, 0%, 100%, 0.1);
+    background-color: hsla(0deg, 0%, 100%, 0.1);
     border-color: transparent;
     background-size: 100% 2px, 100% 1px;
   }
@@ -7633,8 +7632,8 @@
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
     border: 1px solid transparent;
-    background: hsla(0, 0%, 100%, 0.06) no-repeat;
-    background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3));
+    background: hsla(0deg, 0%, 100%, 0.06) no-repeat;
+    background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3));
     background-size: 0 2px, 100% 1px;
     background-position: 50% 100%, 50% 100%;
     background-origin: border-box;
@@ -7644,13 +7643,13 @@
     background: transparent;
   }
   .p-input-filled .p-dropdown:not(.p-disabled):hover {
-    background-color: hsla(0, 0%, 100%, 0.08);
+    background-color: hsla(0deg, 0%, 100%, 0.08);
     border-color: transparent;
     background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87));
   }
   .p-input-filled .p-dropdown:not(.p-disabled).p-focus, .p-input-filled .p-dropdown:not(.p-disabled).p-inputwrapper-focus {
     box-shadow: none;
-    background-color: hsla(0, 0%, 100%, 0.1);
+    background-color: hsla(0deg, 0%, 100%, 0.1);
     border-color: transparent;
     background-size: 100% 2px, 100% 1px;
   }
@@ -7696,20 +7695,20 @@
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
     border: 1px solid transparent;
-    background: hsla(0, 0%, 100%, 0.06) no-repeat;
-    background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3));
+    background: hsla(0deg, 0%, 100%, 0.06) no-repeat;
+    background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3));
     background-size: 0 2px, 100% 1px;
     background-position: 50% 100%, 50% 100%;
     background-origin: border-box;
   }
   .p-input-filled .p-inputtext:enabled:hover {
-    background-color: hsla(0, 0%, 100%, 0.08);
+    background-color: hsla(0deg, 0%, 100%, 0.08);
     border-color: transparent;
     background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6));
   }
   .p-input-filled .p-inputtext:enabled:focus {
     box-shadow: none;
-    background-color: hsla(0, 0%, 100%, 0.1);
+    background-color: hsla(0deg, 0%, 100%, 0.1);
     border-color: transparent;
     background-size: 100% 2px, 100% 1px;
   }
@@ -7729,8 +7728,8 @@
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
     border: 1px solid transparent;
-    background: hsla(0, 0%, 100%, 0.06) no-repeat;
-    background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3));
+    background: hsla(0deg, 0%, 100%, 0.06) no-repeat;
+    background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3));
     background-size: 0 2px, 100% 1px;
     background-position: 50% 100%, 50% 100%;
     background-origin: border-box;
@@ -7875,8 +7874,8 @@
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
     border: 1px solid transparent;
-    background: hsla(0, 0%, 100%, 0.06) no-repeat;
-    background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3));
+    background: hsla(0deg, 0%, 100%, 0.06) no-repeat;
+    background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3));
     background-size: 0 2px, 100% 1px;
     background-position: 50% 100%, 50% 100%;
     background-origin: border-box;
@@ -7886,13 +7885,13 @@
     background: transparent;
   }
   .p-input-filled .p-multiselect:not(.p-disabled):hover {
-    background-color: hsla(0, 0%, 100%, 0.08);
+    background-color: hsla(0deg, 0%, 100%, 0.08);
     border-color: transparent;
     background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87));
   }
   .p-input-filled .p-multiselect:not(.p-disabled).p-focus, .p-input-filled .p-multiselect:not(.p-disabled).p-inputwrapper-focus {
     box-shadow: none;
-    background-color: hsla(0, 0%, 100%, 0.1);
+    background-color: hsla(0deg, 0%, 100%, 0.1);
     border-color: transparent;
     background-size: 100% 2px, 100% 1px;
   }
@@ -8043,7 +8042,7 @@
     box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.04);
   }
   .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
-    border: 2px solid hsla(0, 0%, 100%, 0.7);
+    border: 2px solid hsla(0deg, 0%, 100%, 0.7);
   }
   .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight {
     box-shadow: 0 0 1px 10px rgba(159, 168, 218, 0.04);
@@ -8052,7 +8051,7 @@
     box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.12);
   }
   .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box {
-    border: 2px solid hsla(0, 0%, 100%, 0.7);
+    border: 2px solid hsla(0deg, 0%, 100%, 0.7);
   }
   .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible).p-highlight {
     box-shadow: 0 0 1px 10px rgba(159, 168, 218, 0.12);
@@ -8309,8 +8308,8 @@
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
     border: 1px solid transparent;
-    background: hsla(0, 0%, 100%, 0.06) no-repeat;
-    background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3));
+    background: hsla(0deg, 0%, 100%, 0.06) no-repeat;
+    background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3));
     background-size: 0 2px, 100% 1px;
     background-position: 50% 100%, 50% 100%;
     background-origin: border-box;
@@ -8320,13 +8319,13 @@
     background: transparent;
   }
   .p-input-filled .p-treeselect:not(.p-disabled):hover {
-    background-color: hsla(0, 0%, 100%, 0.08);
+    background-color: hsla(0deg, 0%, 100%, 0.08);
     border-color: transparent;
     background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87));
   }
   .p-input-filled .p-treeselect:not(.p-disabled).p-focus, .p-input-filled .p-treeselect:not(.p-disabled).p-inputwrapper-focus {
     box-shadow: none;
-    background-color: hsla(0, 0%, 100%, 0.1);
+    background-color: hsla(0deg, 0%, 100%, 0.1);
     border-color: transparent;
     background-size: 100% 2px, 100% 1px;
   }
diff --git a/public/themes/md-light-indigo/theme.css b/public/themes/md-light-indigo/theme.css
index 22f3ff1824..c25c3a1418 100644
--- a/public/themes/md-light-indigo/theme.css
+++ b/public/themes/md-light-indigo/theme.css
@@ -659,6 +659,7 @@
     border: 1px solid rgba(0, 0, 0, 0.38);
     transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
     border-radius: 4px;
+    outline-color: transparent;
   }
   .p-cascadeselect:not(.p-disabled):hover {
     border-color: rgba(0, 0, 0, 0.87);
@@ -669,6 +670,15 @@
     box-shadow: none;
     border-color: #3F51B5;
   }
+  .p-cascadeselect.p-variant-filled {
+    background-color: #f5f5f5;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:hover {
+    background-color: #ececec;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:focus {
+    background-color: #dcdcdc;
+  }
   .p-cascadeselect .p-cascadeselect-label {
     background: transparent;
     border: 0 none;
@@ -709,38 +719,29 @@
     transition: none;
     border-radius: 0;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
-    padding: 1rem 1rem;
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+    margin-top: 0;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: none;
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+    margin-bottom: 0;
   }
   .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
     color: #3F51B5;
     background: rgba(63, 81, 181, 0.12);
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+    background: rgba(63, 81, 181, 0.24);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: rgba(0, 0, 0, 0.87);
     background: rgba(0, 0, 0, 0.04);
   }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+    padding: 1rem 1rem;
+  }
   .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
     font-size: 0.875rem;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon.p-icon {
-    width: 0.875rem;
-    height: 0.875rem;
-  }
-  .p-input-filled .p-cascadeselect {
-    background: #f5f5f5;
-  }
-  .p-input-filled .p-cascadeselect:not(.p-disabled):hover {
-    background-color: #ececec;
-  }
-  .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
-    background-color: #dcdcdc;
-  }
   .p-checkbox {
     position: relative;
     display: inline-flex;
@@ -1334,6 +1335,7 @@
     transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
     appearance: none;
     border-radius: 4px;
+    outline-color: transparent;
   }
   .p-inputtext:enabled:hover {
     border-color: rgba(0, 0, 0, 0.87);
@@ -1347,6 +1349,15 @@
   .p-inputtext.p-invalid.p-component {
     border-color: #b00020;
   }
+  .p-inputtext.p-variant-filled {
+    background-color: #f5f5f5;
+  }
+  .p-inputtext.p-variant-filled:enabled:hover {
+    background-color: #ececec;
+  }
+  .p-inputtext.p-variant-filled:enabled:focus {
+    background-color: #dcdcdc;
+  }
   .p-inputtext.p-inputtext-sm {
     font-size: 0.875rem;
     padding: 0.875rem 0.875rem;
@@ -1360,30 +1371,9 @@
     color: rgba(0, 0, 0, 0.6);
     transition-duration: 0.2s;
   }
-  .p-float-label > label.p-error {
+  .p-float-label > .p-invalid + label {
     color: #b00020;
   }
-  .p-input-icon-left > i:first-of-type,
-  .p-input-icon-left > svg:first-of-type,
-  .p-input-icon-left > .p-input-prefix {
-    left: 1rem;
-    color: rgba(0, 0, 0, 0.6);
-  }
-  .p-input-icon-left > .p-inputtext {
-    padding-left: 3rem;
-  }
-  .p-input-icon-left.p-float-label > label {
-    left: 3rem;
-  }
-  .p-input-icon-right > i:last-of-type,
-  .p-input-icon-right > svg:last-of-type,
-  .p-input-icon-right > .p-input-suffix {
-    right: 1rem;
-    color: rgba(0, 0, 0, 0.6);
-  }
-  .p-input-icon-right > .p-inputtext {
-    padding-right: 3rem;
-  }
   .p-icon-field-left > .p-inputtext {
     padding-left: 3rem;
   }
@@ -2085,6 +2075,15 @@
   .p-treeselect.p-treeselect-clearable .p-treeselect-label {
     padding-right: 2rem;
   }
+  .p-treeselect.p-variant-filled {
+    background: #f5f5f5;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #ececec;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #dcdcdc;
+  }
   .p-treeselect .p-treeselect-label {
     padding: 1rem 1rem;
     transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
diff --git a/public/themes/mdc-dark-indigo/theme.css b/public/themes/mdc-dark-indigo/theme.css
index 1151d57f1d..4fcad7abf7 100644
--- a/public/themes/mdc-dark-indigo/theme.css
+++ b/public/themes/mdc-dark-indigo/theme.css
@@ -241,7 +241,7 @@
 }
 .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover {
   color: rgba(255, 255, 255, 0.87);
-  background: hsla(0, 0%, 100%, 0.04);
+  background: hsla(0deg, 0%, 100%, 0.04);
 }
 .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item {
   padding: 0.75rem 0.75rem;
@@ -419,7 +419,7 @@
   }
   .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover {
     color: rgba(255, 255, 255, 0.87);
-    background: hsla(0, 0%, 100%, 0.04);
+    background: hsla(0deg, 0%, 100%, 0.04);
   }
   .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight {
     color: #9FA8DA;
@@ -445,7 +445,7 @@
     padding: 0.5rem;
     background: #1e1e1e;
     color: rgba(255, 255, 255, 0.87);
-    border: 1px solid hsla(0, 0%, 100%, 0.3);
+    border: 1px solid hsla(0deg, 0%, 100%, 0.3);
     border-radius: 4px;
   }
   .p-datepicker:not(.p-datepicker-inline) {
@@ -462,7 +462,7 @@
     background: #1e1e1e;
     font-weight: 500;
     margin: 0;
-    border-bottom: 1px solid hsla(0, 0%, 100%, 0.12);
+    border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12);
     border-top-right-radius: 4px;
     border-top-left-radius: 4px;
   }
@@ -546,13 +546,13 @@
   }
   .p-datepicker .p-datepicker-buttonbar {
     padding: 0.75rem 0;
-    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
+    border-top: 1px solid hsla(0deg, 0%, 100%, 0.12);
   }
   .p-datepicker .p-datepicker-buttonbar .p-button {
     width: auto;
   }
   .p-datepicker .p-timepicker {
-    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
+    border-top: 1px solid hsla(0deg, 0%, 100%, 0.12);
     padding: 0.5rem;
   }
   .p-datepicker .p-timepicker button {
@@ -611,7 +611,7 @@
     background: rgba(159, 168, 218, 0.16);
   }
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group {
-    border-left: 1px solid hsla(0, 0%, 100%, 0.12);
+    border-left: 1px solid hsla(0deg, 0%, 100%, 0.12);
     padding-right: 0.5rem;
     padding-left: 0.5rem;
     padding-top: 0;
@@ -656,9 +656,10 @@
   }
   .p-cascadeselect {
     background: #1e1e1e;
-    border: 1px solid hsla(0, 0%, 100%, 0.3);
+    border: 1px solid hsla(0deg, 0%, 100%, 0.3);
     transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
     border-radius: 4px;
+    outline-color: transparent;
   }
   .p-cascadeselect:not(.p-disabled):hover {
     border-color: rgba(255, 255, 255, 0.6);
@@ -669,6 +670,15 @@
     box-shadow: none;
     border-color: #9FA8DA;
   }
+  .p-cascadeselect.p-variant-filled {
+    background-color: hsla(0deg, 0%, 100%, 0.06);
+  }
+  .p-cascadeselect.p-variant-filled:enabled:hover {
+    background-color: hsla(0deg, 0%, 100%, 0.08);
+  }
+  .p-cascadeselect.p-variant-filled:enabled:focus {
+    background-color: hsla(0deg, 0%, 100%, 0.1);
+  }
   .p-cascadeselect .p-cascadeselect-label {
     background: transparent;
     border: 0 none;
@@ -709,38 +719,29 @@
     transition: none;
     border-radius: 0;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
-    padding: 0.75rem 0.75rem;
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+    margin-top: 0;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: none;
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+    margin-bottom: 0;
   }
   .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
     color: #9FA8DA;
     background: rgba(159, 168, 218, 0.16);
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+    background: rgba(159, 168, 218, 0.24);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: rgba(255, 255, 255, 0.87);
-    background: hsla(0, 0%, 100%, 0.04);
+    background: hsla(0deg, 0%, 100%, 0.04);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+    padding: 0.75rem 0.75rem;
   }
   .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
     font-size: 0.875rem;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon.p-icon {
-    width: 0.875rem;
-    height: 0.875rem;
-  }
-  .p-input-filled .p-cascadeselect {
-    background: hsla(0, 0%, 100%, 0.06);
-  }
-  .p-input-filled .p-cascadeselect:not(.p-disabled):hover {
-    background-color: hsla(0, 0%, 100%, 0.08);
-  }
-  .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
-    background-color: hsla(0, 0%, 100%, 0.1);
-  }
   .p-checkbox {
     position: relative;
     display: inline-flex;
@@ -771,11 +772,11 @@
     height: 18px;
   }
   .p-checkbox .p-checkbox-input {
-    border: 2px solid hsla(0, 0%, 100%, 0.7);
+    border: 2px solid hsla(0deg, 0%, 100%, 0.7);
     border-radius: 4px;
   }
   .p-checkbox .p-checkbox-box {
-    border: 2px solid hsla(0, 0%, 100%, 0.7);
+    border: 2px solid hsla(0deg, 0%, 100%, 0.7);
     background: #1e1e1e;
     width: 18px;
     height: 18px;
@@ -794,7 +795,7 @@
     height: 14px;
   }
   .p-checkbox .p-checkbox-box {
-    border: 2px solid hsla(0, 0%, 100%, 0.7);
+    border: 2px solid hsla(0deg, 0%, 100%, 0.7);
     background: #1e1e1e;
     width: 18px;
     height: 18px;
@@ -834,25 +835,25 @@
     border-color: #f44435;
   }
   .p-checkbox.p-variant-filled .p-checkbox-box {
-    background-color: hsla(0, 0%, 100%, 0.06);
+    background-color: hsla(0deg, 0%, 100%, 0.06);
   }
   .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box {
     background: #9FA8DA;
   }
   .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
-    background-color: hsla(0, 0%, 100%, 0.08);
+    background-color: hsla(0deg, 0%, 100%, 0.08);
   }
   .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
     background: #9FA8DA;
   }
   .p-input-filled .p-checkbox .p-checkbox-box {
-    background-color: hsla(0, 0%, 100%, 0.06);
+    background-color: hsla(0deg, 0%, 100%, 0.06);
   }
   .p-input-filled .p-checkbox.p-highlight .p-checkbox-box {
     background: #9FA8DA;
   }
   .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
-    background-color: hsla(0, 0%, 100%, 0.08);
+    background-color: hsla(0deg, 0%, 100%, 0.08);
   }
   .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
     background: #9FA8DA;
@@ -872,13 +873,13 @@
     align-items: center;
   }
   .p-tristatecheckbox.p-variant-filled .p-checkbox-box {
-    background-color: hsla(0, 0%, 100%, 0.06);
+    background-color: hsla(0deg, 0%, 100%, 0.06);
   }
   .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box {
     background: #9FA8DA;
   }
   .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
-    background-color: hsla(0, 0%, 100%, 0.08);
+    background-color: hsla(0deg, 0%, 100%, 0.08);
   }
   .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
     background: #9FA8DA;
@@ -938,12 +939,12 @@
   .p-chips .p-chips-multiple-container .p-chips-token {
     padding: 0.375rem 0.75rem;
     margin-right: 0.5rem;
-    background: hsla(0, 0%, 100%, 0.12);
+    background: hsla(0deg, 0%, 100%, 0.12);
     color: rgba(255, 255, 255, 0.87);
     border-radius: 16px;
   }
   .p-chips .p-chips-multiple-container .p-chips-token.p-focus {
-    background: hsla(0, 0%, 100%, 0.24);
+    background: hsla(0deg, 0%, 100%, 0.24);
     color: rgba(255, 255, 255, 0.87);
   }
   .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon {
@@ -1058,7 +1059,7 @@
   }
   .p-dropdown {
     background: #1e1e1e;
-    border: 1px solid hsla(0, 0%, 100%, 0.3);
+    border: 1px solid hsla(0deg, 0%, 100%, 0.3);
     transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
     border-radius: 4px;
     outline-color: transparent;
@@ -1073,13 +1074,13 @@
     border-color: #9FA8DA;
   }
   .p-dropdown.p-variant-filled {
-    background: hsla(0, 0%, 100%, 0.06);
+    background: hsla(0deg, 0%, 100%, 0.06);
   }
   .p-dropdown.p-variant-filled:not(.p-disabled):hover {
-    background-color: hsla(0, 0%, 100%, 0.08);
+    background-color: hsla(0deg, 0%, 100%, 0.08);
   }
   .p-dropdown.p-variant-filled:not(.p-disabled).p-focus {
-    background-color: hsla(0, 0%, 100%, 0.1);
+    background-color: hsla(0deg, 0%, 100%, 0.1);
   }
   .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext {
     background-color: transparent;
@@ -1121,7 +1122,7 @@
   }
   .p-dropdown-panel .p-dropdown-header {
     padding: 0.75rem;
-    border-bottom: 1px solid hsla(0, 0%, 100%, 0.12);
+    border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12);
     color: rgba(255, 255, 255, 0.87);
     background: #2b2b2b;
     margin: 0;
@@ -1163,7 +1164,7 @@
   }
   .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: rgba(255, 255, 255, 0.87);
-    background: hsla(0, 0%, 100%, 0.04);
+    background: hsla(0deg, 0%, 100%, 0.04);
   }
   .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon {
     position: relative;
@@ -1185,14 +1186,14 @@
   .p-inputgroup-addon {
     background: #1e1e1e;
     color: rgba(255, 255, 255, 0.6);
-    border-top: 1px solid hsla(0, 0%, 100%, 0.3);
-    border-left: 1px solid hsla(0, 0%, 100%, 0.3);
-    border-bottom: 1px solid hsla(0, 0%, 100%, 0.3);
+    border-top: 1px solid hsla(0deg, 0%, 100%, 0.3);
+    border-left: 1px solid hsla(0deg, 0%, 100%, 0.3);
+    border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.3);
     padding: 0.75rem 0.75rem;
     min-width: 2.357rem;
   }
   .p-inputgroup-addon:last-child {
-    border-right: 1px solid hsla(0, 0%, 100%, 0.3);
+    border-right: 1px solid hsla(0deg, 0%, 100%, 0.3);
   }
   .p-inputgroup > .p-component,
   .p-inputgroup > .p-inputwrapper > .p-inputtext,
@@ -1288,7 +1289,7 @@
     border-radius: 0.5rem;
   }
   .p-inputswitch .p-inputswitch-slider {
-    background: hsla(0, 0%, 100%, 0.3);
+    background: hsla(0deg, 0%, 100%, 0.3);
     transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
     border-radius: 0.5rem;
     outline-color: transparent;
@@ -1310,7 +1311,7 @@
     transform: translateX(1.5rem);
   }
   .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider {
-    background: hsla(0, 0%, 100%, 0.3);
+    background: hsla(0deg, 0%, 100%, 0.3);
   }
   .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider {
     background: rgba(159, 168, 218, 0.5);
@@ -1330,10 +1331,11 @@
     color: rgba(255, 255, 255, 0.87);
     background: #1e1e1e;
     padding: 0.75rem 0.75rem;
-    border: 1px solid hsla(0, 0%, 100%, 0.3);
+    border: 1px solid hsla(0deg, 0%, 100%, 0.3);
     transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
     appearance: none;
     border-radius: 4px;
+    outline-color: transparent;
   }
   .p-inputtext:enabled:hover {
     border-color: rgba(255, 255, 255, 0.6);
@@ -1347,6 +1349,15 @@
   .p-inputtext.p-invalid.p-component {
     border-color: #f44435;
   }
+  .p-inputtext.p-variant-filled {
+    background-color: hsla(0deg, 0%, 100%, 0.06);
+  }
+  .p-inputtext.p-variant-filled:enabled:hover {
+    background-color: hsla(0deg, 0%, 100%, 0.08);
+  }
+  .p-inputtext.p-variant-filled:enabled:focus {
+    background-color: hsla(0deg, 0%, 100%, 0.1);
+  }
   .p-inputtext.p-inputtext-sm {
     font-size: 0.875rem;
     padding: 0.65625rem 0.65625rem;
@@ -1360,30 +1371,9 @@
     color: rgba(255, 255, 255, 0.6);
     transition-duration: 0.2s;
   }
-  .p-float-label > label.p-error {
+  .p-float-label > .p-invalid + label {
     color: #f44435;
   }
-  .p-input-icon-left > i:first-of-type,
-  .p-input-icon-left > svg:first-of-type,
-  .p-input-icon-left > .p-input-prefix {
-    left: 0.75rem;
-    color: rgba(255, 255, 255, 0.6);
-  }
-  .p-input-icon-left > .p-inputtext {
-    padding-left: 2.5rem;
-  }
-  .p-input-icon-left.p-float-label > label {
-    left: 2.5rem;
-  }
-  .p-input-icon-right > i:last-of-type,
-  .p-input-icon-right > svg:last-of-type,
-  .p-input-icon-right > .p-input-suffix {
-    right: 0.75rem;
-    color: rgba(255, 255, 255, 0.6);
-  }
-  .p-input-icon-right > .p-inputtext {
-    padding-right: 2.5rem;
-  }
   .p-icon-field-left > .p-inputtext {
     padding-left: 2.5rem;
   }
@@ -1406,13 +1396,13 @@
     color: rgba(255, 255, 255, 0.6);
   }
   .p-input-filled .p-inputtext {
-    background-color: hsla(0, 0%, 100%, 0.06);
+    background-color: hsla(0deg, 0%, 100%, 0.06);
   }
   .p-input-filled .p-inputtext:enabled:hover {
-    background-color: hsla(0, 0%, 100%, 0.08);
+    background-color: hsla(0deg, 0%, 100%, 0.08);
   }
   .p-input-filled .p-inputtext:enabled:focus {
-    background-color: hsla(0, 0%, 100%, 0.1);
+    background-color: hsla(0deg, 0%, 100%, 0.1);
   }
   .p-inputtext-sm .p-inputtext {
     font-size: 0.875rem;
@@ -1472,14 +1462,14 @@
   .p-listbox {
     background: #1e1e1e;
     color: rgba(255, 255, 255, 0.87);
-    border: 1px solid hsla(0, 0%, 100%, 0.3);
+    border: 1px solid hsla(0deg, 0%, 100%, 0.3);
     border-radius: 4px;
     transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
     outline-color: transparent;
   }
   .p-listbox .p-listbox-header {
     padding: 0.75rem;
-    border-bottom: 1px solid hsla(0, 0%, 100%, 0.12);
+    border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12);
     color: rgba(255, 255, 255, 0.87);
     background: #1e1e1e;
     margin: 0;
@@ -1532,15 +1522,15 @@
   }
   .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: rgba(255, 255, 255, 0.87);
-    background: hsla(0, 0%, 100%, 0.04);
+    background: hsla(0deg, 0%, 100%, 0.04);
   }
   .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover {
     color: rgba(255, 255, 255, 0.87);
-    background: hsla(0, 0%, 100%, 0.04);
+    background: hsla(0deg, 0%, 100%, 0.04);
   }
   .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus {
     color: rgba(255, 255, 255, 0.87);
-    background: hsla(0, 0%, 100%, 0.04);
+    background: hsla(0deg, 0%, 100%, 0.04);
   }
   .p-listbox.p-focus {
     outline: 0 none;
@@ -1572,7 +1562,7 @@
   }
   .p-mention-panel .p-mention-items .p-mention-item:hover {
     color: rgba(255, 255, 255, 0.87);
-    background: hsla(0, 0%, 100%, 0.04);
+    background: hsla(0deg, 0%, 100%, 0.04);
   }
   .p-mention-panel .p-mention-items .p-mention-item.p-highlight {
     color: #9FA8DA;
@@ -1668,7 +1658,7 @@
   }
   .p-multiselect {
     background: #1e1e1e;
-    border: 1px solid hsla(0, 0%, 100%, 0.3);
+    border: 1px solid hsla(0deg, 0%, 100%, 0.3);
     transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
     border-radius: 4px;
     outline-color: transparent;
@@ -1683,13 +1673,13 @@
     border-color: #9FA8DA;
   }
   .p-multiselect.p-variant-filled {
-    background: hsla(0, 0%, 100%, 0.06);
+    background: hsla(0deg, 0%, 100%, 0.06);
   }
   .p-multiselect.p-variant-filled:not(.p-disabled):hover {
-    background-color: hsla(0, 0%, 100%, 0.08);
+    background-color: hsla(0deg, 0%, 100%, 0.08);
   }
   .p-multiselect.p-variant-filled:not(.p-disabled).p-focus {
-    background-color: hsla(0, 0%, 100%, 0.1);
+    background-color: hsla(0deg, 0%, 100%, 0.1);
   }
   .p-multiselect .p-multiselect-label {
     padding: 0.75rem 0.75rem;
@@ -1701,7 +1691,7 @@
   .p-multiselect.p-multiselect-chip .p-multiselect-token {
     padding: 0.375rem 0.75rem;
     margin-right: 0.5rem;
-    background: hsla(0, 0%, 100%, 0.12);
+    background: hsla(0deg, 0%, 100%, 0.12);
     color: rgba(255, 255, 255, 0.87);
     border-radius: 16px;
   }
@@ -1730,7 +1720,7 @@
   }
   .p-multiselect-panel .p-multiselect-header {
     padding: 0.75rem;
-    border-bottom: 1px solid hsla(0, 0%, 100%, 0.12);
+    border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12);
     color: rgba(255, 255, 255, 0.87);
     background: #2b2b2b;
     margin: 0;
@@ -1794,7 +1784,7 @@
   }
   .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: rgba(255, 255, 255, 0.87);
-    background: hsla(0, 0%, 100%, 0.04);
+    background: hsla(0deg, 0%, 100%, 0.04);
   }
   .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox {
     margin-right: 0.5rem;
@@ -1876,11 +1866,11 @@
     opacity: 0;
     z-index: 1;
     outline: 0 none;
-    border: 2px solid hsla(0, 0%, 100%, 0.7);
+    border: 2px solid hsla(0deg, 0%, 100%, 0.7);
     border-radius: 50%;
   }
   .p-radiobutton .p-radiobutton-box {
-    border: 2px solid hsla(0, 0%, 100%, 0.7);
+    border: 2px solid hsla(0deg, 0%, 100%, 0.7);
     background: #1e1e1e;
     width: 20px;
     height: 20px;
@@ -1919,25 +1909,25 @@
     border-color: #f44435;
   }
   .p-radiobutton.p-variant-filled .p-radiobutton-box {
-    background-color: hsla(0, 0%, 100%, 0.06);
+    background-color: hsla(0deg, 0%, 100%, 0.06);
   }
   .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box {
     background: #121212;
   }
   .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
-    background-color: hsla(0, 0%, 100%, 0.08);
+    background-color: hsla(0deg, 0%, 100%, 0.08);
   }
   .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
     background: #121212;
   }
   .p-input-filled .p-radiobutton .p-radiobutton-box {
-    background-color: hsla(0, 0%, 100%, 0.06);
+    background-color: hsla(0deg, 0%, 100%, 0.06);
   }
   .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box {
     background: #121212;
   }
   .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
-    background-color: hsla(0, 0%, 100%, 0.08);
+    background-color: hsla(0deg, 0%, 100%, 0.08);
   }
   .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
     background: #121212;
@@ -2029,7 +2019,7 @@
     border-color: #f44435;
   }
   .p-slider {
-    background: hsla(0, 0%, 100%, 0.3);
+    background: hsla(0deg, 0%, 100%, 0.3);
     border: 0 none;
     border-radius: 4px;
   }
@@ -2069,7 +2059,7 @@
   }
   .p-treeselect {
     background: #1e1e1e;
-    border: 1px solid hsla(0, 0%, 100%, 0.3);
+    border: 1px solid hsla(0deg, 0%, 100%, 0.3);
     transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
     border-radius: 4px;
   }
@@ -2085,6 +2075,15 @@
   .p-treeselect.p-treeselect-clearable .p-treeselect-label {
     padding-right: 1.75rem;
   }
+  .p-treeselect.p-variant-filled {
+    background: hsla(0deg, 0%, 100%, 0.06);
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: hsla(0deg, 0%, 100%, 0.08);
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: hsla(0deg, 0%, 100%, 0.1);
+  }
   .p-treeselect .p-treeselect-label {
     padding: 0.75rem 0.75rem;
     transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
@@ -2095,7 +2094,7 @@
   .p-treeselect.p-treeselect-chip .p-treeselect-token {
     padding: 0.375rem 0.75rem;
     margin-right: 0.5rem;
-    background: hsla(0, 0%, 100%, 0.12);
+    background: hsla(0deg, 0%, 100%, 0.12);
     color: rgba(255, 255, 255, 0.87);
     border-radius: 16px;
   }
@@ -2125,7 +2124,7 @@
   }
   .p-treeselect-panel .p-treeselect-header {
     padding: 0.75rem;
-    border-bottom: 1px solid hsla(0, 0%, 100%, 0.12);
+    border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12);
     color: rgba(255, 255, 255, 0.87);
     background: #2b2b2b;
     margin: 0;
@@ -2176,13 +2175,13 @@
     background: transparent;
   }
   .p-input-filled .p-treeselect {
-    background: hsla(0, 0%, 100%, 0.06);
+    background: hsla(0deg, 0%, 100%, 0.06);
   }
   .p-input-filled .p-treeselect:not(.p-disabled):hover {
-    background-color: hsla(0, 0%, 100%, 0.08);
+    background-color: hsla(0deg, 0%, 100%, 0.08);
   }
   .p-input-filled .p-treeselect:not(.p-disabled).p-focus {
-    background-color: hsla(0, 0%, 100%, 0.1);
+    background-color: hsla(0deg, 0%, 100%, 0.1);
   }
   .p-togglebutton {
     position: relative;
@@ -3575,7 +3574,7 @@
   }
   .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:not(.p-highlight):not(.p-disabled):hover {
     color: rgba(255, 255, 255, 0.87);
-    background: hsla(0, 0%, 100%, 0.04);
+    background: hsla(0deg, 0%, 100%, 0.04);
   }
   .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus-visible {
     outline: 0 none;
@@ -3583,12 +3582,12 @@
     box-shadow: none;
   }
   .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator {
-    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
+    border-top: 1px solid hsla(0deg, 0%, 100%, 0.12);
     margin: 0.5rem 0;
   }
   .p-column-filter-overlay-menu .p-column-filter-operator {
     padding: 0.75rem;
-    border-bottom: 1px solid hsla(0, 0%, 100%, 0.12);
+    border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12);
     color: rgba(255, 255, 255, 0.87);
     background: #2b2b2b;
     margin: 0;
@@ -3597,7 +3596,7 @@
   }
   .p-column-filter-overlay-menu .p-column-filter-constraint {
     padding: 0.75rem;
-    border-bottom: 1px solid hsla(0, 0%, 100%, 0.12);
+    border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12);
   }
   .p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-matchmode-dropdown {
     margin-bottom: 0.5rem;
@@ -3661,12 +3660,12 @@
     transition: transform 0.2s, none;
   }
   .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
-    background: hsla(0, 0%, 100%, 0.04);
+    background: hsla(0deg, 0%, 100%, 0.04);
     color: rgba(255, 255, 255, 0.87);
   }
   .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus {
     color: rgba(255, 255, 255, 0.87);
-    background: hsla(0, 0%, 100%, 0.12);
+    background: hsla(0deg, 0%, 100%, 0.12);
   }
   .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight {
     color: #9FA8DA;
@@ -3679,10 +3678,10 @@
     background: rgba(255, 255, 255, 0.02);
   }
   .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover {
-    background: hsla(0, 0%, 100%, 0.04);
+    background: hsla(0deg, 0%, 100%, 0.04);
   }
   .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
-    background: hsla(0, 0%, 100%, 0.04);
+    background: hsla(0deg, 0%, 100%, 0.04);
     color: rgba(255, 255, 255, 0.87);
   }
   .p-organizationchart .p-organizationchart-node-content.p-highlight {
@@ -3846,12 +3845,12 @@
     transition: transform 0.2s, none;
   }
   .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
-    background: hsla(0, 0%, 100%, 0.04);
+    background: hsla(0deg, 0%, 100%, 0.04);
     color: rgba(255, 255, 255, 0.87);
   }
   .p-picklist .p-picklist-list .p-picklist-item.p-focus {
     color: rgba(255, 255, 255, 0.87);
-    background: hsla(0, 0%, 100%, 0.12);
+    background: hsla(0deg, 0%, 100%, 0.12);
   }
   .p-picklist .p-picklist-list .p-picklist-item.p-highlight {
     color: #9FA8DA;
@@ -3980,11 +3979,11 @@
     color: #9FA8DA;
   }
   .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover {
-    background: hsla(0, 0%, 100%, 0.04);
+    background: hsla(0deg, 0%, 100%, 0.04);
     color: rgba(255, 255, 255, 0.87);
   }
   .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
-    background: hsla(0, 0%, 100%, 0.04);
+    background: hsla(0deg, 0%, 100%, 0.04);
     color: rgba(255, 255, 255, 0.87);
   }
   .p-tree .p-tree-filter-container {
@@ -4523,7 +4522,7 @@
     padding: 0 1.25rem;
   }
   .p-divider.p-divider-horizontal:before {
-    border-top: 1px hsla(0, 0%, 100%, 0.12);
+    border-top: 1px hsla(0deg, 0%, 100%, 0.12);
   }
   .p-divider.p-divider-horizontal .p-divider-content {
     padding: 0 0.5rem;
@@ -4533,7 +4532,7 @@
     padding: 1.25rem 0;
   }
   .p-divider.p-divider-vertical:before {
-    border-left: 1px hsla(0, 0%, 100%, 0.12);
+    border-left: 1px hsla(0deg, 0%, 100%, 0.12);
   }
   .p-divider.p-divider-vertical .p-divider-content {
     padding: 0.5rem 0;
@@ -4595,10 +4594,10 @@
   }
   .p-splitter .p-splitter-gutter {
     transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-    background: hsla(0, 0%, 100%, 0.04);
+    background: hsla(0deg, 0%, 100%, 0.04);
   }
   .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
-    background: hsla(0, 0%, 100%, 0.12);
+    background: hsla(0deg, 0%, 100%, 0.12);
   }
   .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
     outline: 0 none;
@@ -4606,7 +4605,7 @@
     box-shadow: none;
   }
   .p-splitter .p-splitter-gutter-resizing {
-    background: hsla(0, 0%, 100%, 0.12);
+    background: hsla(0deg, 0%, 100%, 0.12);
   }
   .p-stepper .p-stepper-nav {
     display: flex;
@@ -5124,7 +5123,7 @@
   }
   .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
     color: rgba(255, 255, 255, 0.87);
-    background: hsla(0, 0%, 100%, 0.12);
+    background: hsla(0deg, 0%, 100%, 0.12);
   }
   .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
     color: rgba(255, 255, 255, 0.87);
@@ -5145,7 +5144,7 @@
     color: rgba(255, 255, 255, 0.6);
   }
   .p-contextmenu .p-menuitem-separator {
-    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
+    border-top: 1px solid hsla(0deg, 0%, 100%, 0.12);
     margin: 0.5rem 0;
   }
   .p-contextmenu .p-submenu-icon {
@@ -5287,7 +5286,7 @@
   }
   .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
     color: rgba(255, 255, 255, 0.87);
-    background: hsla(0, 0%, 100%, 0.12);
+    background: hsla(0deg, 0%, 100%, 0.12);
   }
   .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
     color: rgba(255, 255, 255, 0.87);
@@ -5327,7 +5326,7 @@
     width: 12.5rem;
   }
   .p-megamenu .p-submenu-list .p-menuitem-separator {
-    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
+    border-top: 1px solid hsla(0deg, 0%, 100%, 0.12);
     margin: 0.5rem 0;
   }
   .p-megamenu.p-megamenu-vertical {
@@ -5388,7 +5387,7 @@
     box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
   }
   .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-menu-separator {
-    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
+    border-top: 1px solid hsla(0deg, 0%, 100%, 0.12);
     margin: 0.5rem 0;
   }
   .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon {
@@ -5438,7 +5437,7 @@
   }
   .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
     color: rgba(255, 255, 255, 0.87);
-    background: hsla(0, 0%, 100%, 0.12);
+    background: hsla(0deg, 0%, 100%, 0.12);
   }
   .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
     color: rgba(255, 255, 255, 0.87);
@@ -5525,7 +5524,7 @@
   }
   .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
     color: rgba(255, 255, 255, 0.87);
-    background: hsla(0, 0%, 100%, 0.12);
+    background: hsla(0deg, 0%, 100%, 0.12);
   }
   .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
     color: rgba(255, 255, 255, 0.87);
@@ -5560,7 +5559,7 @@
     border-top-left-radius: 0;
   }
   .p-menu .p-menu-separator {
-    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
+    border-top: 1px solid hsla(0deg, 0%, 100%, 0.12);
     margin: 0.5rem 0;
   }
   .p-menubar {
@@ -5640,7 +5639,7 @@
   }
   .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
     color: rgba(255, 255, 255, 0.87);
-    background: hsla(0, 0%, 100%, 0.12);
+    background: hsla(0deg, 0%, 100%, 0.12);
   }
   .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
     color: rgba(255, 255, 255, 0.87);
@@ -5668,7 +5667,7 @@
     width: 12.5rem;
   }
   .p-menubar .p-submenu-list .p-menuitem-separator {
-    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
+    border-top: 1px solid hsla(0deg, 0%, 100%, 0.12);
     margin: 0.5rem 0;
   }
   .p-menubar .p-submenu-list .p-submenu-icon {
@@ -5697,7 +5696,7 @@
     box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
   }
   .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem-separator {
-    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
+    border-top: 1px solid hsla(0deg, 0%, 100%, 0.12);
     margin: 0.5rem 0;
   }
   .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-icon {
@@ -5763,7 +5762,7 @@
       width: 100%;
     }
     .p-menubar .p-menubar-root-list .p-menu-separator {
-      border-top: 1px solid hsla(0, 0%, 100%, 0.12);
+      border-top: 1px solid hsla(0deg, 0%, 100%, 0.12);
       margin: 0.5rem 0;
     }
     .p-menubar .p-menubar-root-list .p-submenu-icon {
@@ -5813,7 +5812,7 @@
     }
     .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
       color: rgba(255, 255, 255, 0.87);
-      background: hsla(0, 0%, 100%, 0.12);
+      background: hsla(0deg, 0%, 100%, 0.12);
     }
     .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
       color: rgba(255, 255, 255, 0.87);
@@ -5974,7 +5973,7 @@
   }
   .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
     color: rgba(255, 255, 255, 0.87);
-    background: hsla(0, 0%, 100%, 0.12);
+    background: hsla(0deg, 0%, 100%, 0.12);
   }
   .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
     color: rgba(255, 255, 255, 0.87);
@@ -5998,7 +5997,7 @@
     margin-right: 0.5rem;
   }
   .p-panelmenu .p-panelmenu-content .p-menuitem-separator {
-    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
+    border-top: 1px solid hsla(0deg, 0%, 100%, 0.12);
     margin: 0.5rem 0;
   }
   .p-panelmenu .p-panelmenu-content .p-submenu-list:not(.p-panelmenu-root-list) {
@@ -6075,7 +6074,7 @@
   }
   .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
     color: rgba(255, 255, 255, 0.87);
-    background: hsla(0, 0%, 100%, 0.12);
+    background: hsla(0deg, 0%, 100%, 0.12);
   }
   .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
     color: rgba(255, 255, 255, 0.87);
@@ -6116,7 +6115,7 @@
     color: rgba(255, 255, 255, 0.6);
   }
   .p-slidemenu .p-slidemenu-separator {
-    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
+    border-top: 1px solid hsla(0deg, 0%, 100%, 0.12);
     margin: 0.5rem 0;
   }
   .p-slidemenu .p-slidemenu-icon {
@@ -6166,7 +6165,7 @@
   }
   .p-steps .p-steps-item:before {
     content: " ";
-    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
+    border-top: 1px solid hsla(0deg, 0%, 100%, 0.12);
     width: 100%;
     top: 50%;
     left: 0;
@@ -6272,7 +6271,7 @@
   }
   .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
     color: rgba(255, 255, 255, 0.87);
-    background: hsla(0, 0%, 100%, 0.12);
+    background: hsla(0deg, 0%, 100%, 0.12);
   }
   .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
     color: rgba(255, 255, 255, 0.87);
@@ -6293,7 +6292,7 @@
     color: rgba(255, 255, 255, 0.6);
   }
   .p-tieredmenu .p-menuitem-separator {
-    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
+    border-top: 1px solid hsla(0deg, 0%, 100%, 0.12);
     margin: 0.5rem 0;
   }
   .p-tieredmenu .p-submenu-icon {
@@ -6684,7 +6683,7 @@
     height: 1.5rem;
   }
   .p-avatar {
-    background-color: hsla(0, 0%, 100%, 0.12);
+    background-color: hsla(0deg, 0%, 100%, 0.12);
     border-radius: 4px;
   }
   .p-avatar.p-avatar-lg {
@@ -6710,7 +6709,7 @@
     border: 2px solid #1e1e1e;
   }
   .p-chip {
-    background-color: hsla(0, 0%, 100%, 0.12);
+    background-color: hsla(0deg, 0%, 100%, 0.12);
     color: rgba(255, 255, 255, 0.87);
     border-radius: 16px;
     padding: 0 0.75rem;
@@ -7012,8 +7011,8 @@
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
     border: 1px solid transparent;
-    background: hsla(0, 0%, 100%, 0.06) no-repeat;
-    background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3));
+    background: hsla(0deg, 0%, 100%, 0.06) no-repeat;
+    background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3));
     background-size: 0 2px, 100% 1px;
     background-position: 50% 100%, 50% 100%;
     background-origin: border-box;
@@ -7023,13 +7022,13 @@
     background: transparent;
   }
   .p-input-filled .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled):hover {
-    background-color: hsla(0, 0%, 100%, 0.08);
+    background-color: hsla(0deg, 0%, 100%, 0.08);
     border-color: transparent;
     background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87));
   }
   .p-input-filled .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled).p-focus, .p-input-filled .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled).p-inputwrapper-focus {
     box-shadow: none;
-    background-color: hsla(0, 0%, 100%, 0.1);
+    background-color: hsla(0deg, 0%, 100%, 0.1);
     border-color: transparent;
     background-size: 100% 2px, 100% 1px;
   }
@@ -7258,7 +7257,7 @@
     background-color: rgba(255, 255, 255, 0.16);
   }
   .p-calendar-w-btn {
-    border: 1px solid hsla(0, 0%, 100%, 0.3);
+    border: 1px solid hsla(0deg, 0%, 100%, 0.3);
     background: #1e1e1e;
     border-radius: 4px;
     transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
@@ -7308,7 +7307,7 @@
     order: 3;
   }
   .p-datepicker table th {
-    border-bottom: 1px solid hsla(0, 0%, 100%, 0.12);
+    border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12);
     color: rgba(255, 255, 255, 0.38);
     font-weight: 400;
     font-size: 0.875rem;
@@ -7335,8 +7334,8 @@
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
     border: 1px solid transparent;
-    background: hsla(0, 0%, 100%, 0.06) no-repeat;
-    background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3));
+    background: hsla(0deg, 0%, 100%, 0.06) no-repeat;
+    background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3));
     background-size: 0 2px, 100% 1px;
     background-position: 50% 100%, 50% 100%;
     background-origin: border-box;
@@ -7346,13 +7345,13 @@
     background: transparent;
   }
   .p-input-filled .p-calendar-w-btn:not(.p-disabled):hover {
-    background-color: hsla(0, 0%, 100%, 0.08);
+    background-color: hsla(0deg, 0%, 100%, 0.08);
     border-color: transparent;
     background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87));
   }
   .p-input-filled .p-calendar-w-btn:not(.p-disabled).p-focus, .p-input-filled .p-calendar-w-btn:not(.p-disabled).p-inputwrapper-focus {
     box-shadow: none;
-    background-color: hsla(0, 0%, 100%, 0.1);
+    background-color: hsla(0deg, 0%, 100%, 0.1);
     border-color: transparent;
     background-size: 100% 2px, 100% 1px;
   }
@@ -7413,8 +7412,8 @@
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
     border: 1px solid transparent;
-    background: hsla(0, 0%, 100%, 0.06) no-repeat;
-    background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3));
+    background: hsla(0deg, 0%, 100%, 0.06) no-repeat;
+    background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3));
     background-size: 0 2px, 100% 1px;
     background-position: 50% 100%, 50% 100%;
     background-origin: border-box;
@@ -7424,13 +7423,13 @@
     background: transparent;
   }
   .p-input-filled .p-cascadeselect:not(.p-disabled):hover {
-    background-color: hsla(0, 0%, 100%, 0.08);
+    background-color: hsla(0deg, 0%, 100%, 0.08);
     border-color: transparent;
     background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87));
   }
   .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus, .p-input-filled .p-cascadeselect:not(.p-disabled).p-inputwrapper-focus {
     box-shadow: none;
-    background-color: hsla(0, 0%, 100%, 0.1);
+    background-color: hsla(0deg, 0%, 100%, 0.1);
     border-color: transparent;
     background-size: 100% 2px, 100% 1px;
   }
@@ -7472,7 +7471,7 @@
     border-radius: 2px;
   }
   .p-checkbox .p-checkbox-box {
-    border-color: hsla(0, 0%, 100%, 0.7);
+    border-color: hsla(0deg, 0%, 100%, 0.7);
     border-radius: 2px;
     position: relative;
   }
@@ -7491,7 +7490,7 @@
     box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.04);
   }
   .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
-    border-color: hsla(0, 0%, 100%, 0.7);
+    border-color: hsla(0deg, 0%, 100%, 0.7);
   }
   .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight {
     box-shadow: 0 0 1px 10px rgba(159, 168, 218, 0.04);
@@ -7500,7 +7499,7 @@
     box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.12);
   }
   .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box {
-    border-color: hsla(0, 0%, 100%, 0.7);
+    border-color: hsla(0deg, 0%, 100%, 0.7);
   }
   .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible).p-highlight {
     box-shadow: 0 0 1px 10px rgba(159, 168, 218, 0.12);
@@ -7546,8 +7545,8 @@
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
     border: 1px solid transparent;
-    background: hsla(0, 0%, 100%, 0.06) no-repeat;
-    background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3));
+    background: hsla(0deg, 0%, 100%, 0.06) no-repeat;
+    background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3));
     background-size: 0 2px, 100% 1px;
     background-position: 50% 100%, 50% 100%;
     background-origin: border-box;
@@ -7557,13 +7556,13 @@
     background: transparent;
   }
   .p-input-filled .p-chips-multiple-container:not(.p-disabled):hover {
-    background-color: hsla(0, 0%, 100%, 0.08);
+    background-color: hsla(0deg, 0%, 100%, 0.08);
     border-color: transparent;
     background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87));
   }
   .p-input-filled .p-chips-multiple-container:not(.p-disabled).p-focus, .p-input-filled .p-chips-multiple-container:not(.p-disabled).p-inputwrapper-focus {
     box-shadow: none;
-    background-color: hsla(0, 0%, 100%, 0.1);
+    background-color: hsla(0deg, 0%, 100%, 0.1);
     border-color: transparent;
     background-size: 100% 2px, 100% 1px;
   }
@@ -7633,8 +7632,8 @@
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
     border: 1px solid transparent;
-    background: hsla(0, 0%, 100%, 0.06) no-repeat;
-    background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3));
+    background: hsla(0deg, 0%, 100%, 0.06) no-repeat;
+    background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3));
     background-size: 0 2px, 100% 1px;
     background-position: 50% 100%, 50% 100%;
     background-origin: border-box;
@@ -7644,13 +7643,13 @@
     background: transparent;
   }
   .p-input-filled .p-dropdown:not(.p-disabled):hover {
-    background-color: hsla(0, 0%, 100%, 0.08);
+    background-color: hsla(0deg, 0%, 100%, 0.08);
     border-color: transparent;
     background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87));
   }
   .p-input-filled .p-dropdown:not(.p-disabled).p-focus, .p-input-filled .p-dropdown:not(.p-disabled).p-inputwrapper-focus {
     box-shadow: none;
-    background-color: hsla(0, 0%, 100%, 0.1);
+    background-color: hsla(0deg, 0%, 100%, 0.1);
     border-color: transparent;
     background-size: 100% 2px, 100% 1px;
   }
@@ -7696,20 +7695,20 @@
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
     border: 1px solid transparent;
-    background: hsla(0, 0%, 100%, 0.06) no-repeat;
-    background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3));
+    background: hsla(0deg, 0%, 100%, 0.06) no-repeat;
+    background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3));
     background-size: 0 2px, 100% 1px;
     background-position: 50% 100%, 50% 100%;
     background-origin: border-box;
   }
   .p-input-filled .p-inputtext:enabled:hover {
-    background-color: hsla(0, 0%, 100%, 0.08);
+    background-color: hsla(0deg, 0%, 100%, 0.08);
     border-color: transparent;
     background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6));
   }
   .p-input-filled .p-inputtext:enabled:focus {
     box-shadow: none;
-    background-color: hsla(0, 0%, 100%, 0.1);
+    background-color: hsla(0deg, 0%, 100%, 0.1);
     border-color: transparent;
     background-size: 100% 2px, 100% 1px;
   }
@@ -7729,8 +7728,8 @@
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
     border: 1px solid transparent;
-    background: hsla(0, 0%, 100%, 0.06) no-repeat;
-    background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3));
+    background: hsla(0deg, 0%, 100%, 0.06) no-repeat;
+    background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3));
     background-size: 0 2px, 100% 1px;
     background-position: 50% 100%, 50% 100%;
     background-origin: border-box;
@@ -7875,8 +7874,8 @@
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
     border: 1px solid transparent;
-    background: hsla(0, 0%, 100%, 0.06) no-repeat;
-    background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3));
+    background: hsla(0deg, 0%, 100%, 0.06) no-repeat;
+    background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3));
     background-size: 0 2px, 100% 1px;
     background-position: 50% 100%, 50% 100%;
     background-origin: border-box;
@@ -7886,13 +7885,13 @@
     background: transparent;
   }
   .p-input-filled .p-multiselect:not(.p-disabled):hover {
-    background-color: hsla(0, 0%, 100%, 0.08);
+    background-color: hsla(0deg, 0%, 100%, 0.08);
     border-color: transparent;
     background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87));
   }
   .p-input-filled .p-multiselect:not(.p-disabled).p-focus, .p-input-filled .p-multiselect:not(.p-disabled).p-inputwrapper-focus {
     box-shadow: none;
-    background-color: hsla(0, 0%, 100%, 0.1);
+    background-color: hsla(0deg, 0%, 100%, 0.1);
     border-color: transparent;
     background-size: 100% 2px, 100% 1px;
   }
@@ -8043,7 +8042,7 @@
     box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.04);
   }
   .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
-    border: 2px solid hsla(0, 0%, 100%, 0.7);
+    border: 2px solid hsla(0deg, 0%, 100%, 0.7);
   }
   .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight {
     box-shadow: 0 0 1px 10px rgba(159, 168, 218, 0.04);
@@ -8052,7 +8051,7 @@
     box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.12);
   }
   .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box {
-    border: 2px solid hsla(0, 0%, 100%, 0.7);
+    border: 2px solid hsla(0deg, 0%, 100%, 0.7);
   }
   .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible).p-highlight {
     box-shadow: 0 0 1px 10px rgba(159, 168, 218, 0.12);
@@ -8309,8 +8308,8 @@
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
     border: 1px solid transparent;
-    background: hsla(0, 0%, 100%, 0.06) no-repeat;
-    background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3));
+    background: hsla(0deg, 0%, 100%, 0.06) no-repeat;
+    background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3));
     background-size: 0 2px, 100% 1px;
     background-position: 50% 100%, 50% 100%;
     background-origin: border-box;
@@ -8320,13 +8319,13 @@
     background: transparent;
   }
   .p-input-filled .p-treeselect:not(.p-disabled):hover {
-    background-color: hsla(0, 0%, 100%, 0.08);
+    background-color: hsla(0deg, 0%, 100%, 0.08);
     border-color: transparent;
     background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87));
   }
   .p-input-filled .p-treeselect:not(.p-disabled).p-focus, .p-input-filled .p-treeselect:not(.p-disabled).p-inputwrapper-focus {
     box-shadow: none;
-    background-color: hsla(0, 0%, 100%, 0.1);
+    background-color: hsla(0deg, 0%, 100%, 0.1);
     border-color: transparent;
     background-size: 100% 2px, 100% 1px;
   }
diff --git a/public/themes/mdc-light-indigo/theme.css b/public/themes/mdc-light-indigo/theme.css
index 123a2154b9..8b63f7fd85 100644
--- a/public/themes/mdc-light-indigo/theme.css
+++ b/public/themes/mdc-light-indigo/theme.css
@@ -659,6 +659,7 @@
     border: 1px solid rgba(0, 0, 0, 0.38);
     transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
     border-radius: 4px;
+    outline-color: transparent;
   }
   .p-cascadeselect:not(.p-disabled):hover {
     border-color: rgba(0, 0, 0, 0.87);
@@ -669,6 +670,15 @@
     box-shadow: none;
     border-color: #3F51B5;
   }
+  .p-cascadeselect.p-variant-filled {
+    background-color: #f5f5f5;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:hover {
+    background-color: #ececec;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:focus {
+    background-color: #dcdcdc;
+  }
   .p-cascadeselect .p-cascadeselect-label {
     background: transparent;
     border: 0 none;
@@ -709,38 +719,29 @@
     transition: none;
     border-radius: 0;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
-    padding: 0.75rem 0.75rem;
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+    margin-top: 0;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: none;
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+    margin-bottom: 0;
   }
   .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
     color: #3F51B5;
     background: rgba(63, 81, 181, 0.12);
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+    background: rgba(63, 81, 181, 0.24);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: rgba(0, 0, 0, 0.87);
     background: rgba(0, 0, 0, 0.04);
   }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+    padding: 0.75rem 0.75rem;
+  }
   .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
     font-size: 0.875rem;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon.p-icon {
-    width: 0.875rem;
-    height: 0.875rem;
-  }
-  .p-input-filled .p-cascadeselect {
-    background: #f5f5f5;
-  }
-  .p-input-filled .p-cascadeselect:not(.p-disabled):hover {
-    background-color: #ececec;
-  }
-  .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
-    background-color: #dcdcdc;
-  }
   .p-checkbox {
     position: relative;
     display: inline-flex;
@@ -1334,6 +1335,7 @@
     transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
     appearance: none;
     border-radius: 4px;
+    outline-color: transparent;
   }
   .p-inputtext:enabled:hover {
     border-color: rgba(0, 0, 0, 0.87);
@@ -1347,6 +1349,15 @@
   .p-inputtext.p-invalid.p-component {
     border-color: #b00020;
   }
+  .p-inputtext.p-variant-filled {
+    background-color: #f5f5f5;
+  }
+  .p-inputtext.p-variant-filled:enabled:hover {
+    background-color: #ececec;
+  }
+  .p-inputtext.p-variant-filled:enabled:focus {
+    background-color: #dcdcdc;
+  }
   .p-inputtext.p-inputtext-sm {
     font-size: 0.875rem;
     padding: 0.65625rem 0.65625rem;
@@ -1360,30 +1371,9 @@
     color: rgba(0, 0, 0, 0.6);
     transition-duration: 0.2s;
   }
-  .p-float-label > label.p-error {
+  .p-float-label > .p-invalid + label {
     color: #b00020;
   }
-  .p-input-icon-left > i:first-of-type,
-  .p-input-icon-left > svg:first-of-type,
-  .p-input-icon-left > .p-input-prefix {
-    left: 0.75rem;
-    color: rgba(0, 0, 0, 0.6);
-  }
-  .p-input-icon-left > .p-inputtext {
-    padding-left: 2.5rem;
-  }
-  .p-input-icon-left.p-float-label > label {
-    left: 2.5rem;
-  }
-  .p-input-icon-right > i:last-of-type,
-  .p-input-icon-right > svg:last-of-type,
-  .p-input-icon-right > .p-input-suffix {
-    right: 0.75rem;
-    color: rgba(0, 0, 0, 0.6);
-  }
-  .p-input-icon-right > .p-inputtext {
-    padding-right: 2.5rem;
-  }
   .p-icon-field-left > .p-inputtext {
     padding-left: 2.5rem;
   }
@@ -2085,6 +2075,15 @@
   .p-treeselect.p-treeselect-clearable .p-treeselect-label {
     padding-right: 1.75rem;
   }
+  .p-treeselect.p-variant-filled {
+    background: #f5f5f5;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #ececec;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #dcdcdc;
+  }
   .p-treeselect .p-treeselect-label {
     padding: 0.75rem 0.75rem;
     transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
diff --git a/public/themes/mira/theme.css b/public/themes/mira/theme.css
index fccf607f80..0c18717ea0 100644
--- a/public/themes/mira/theme.css
+++ b/public/themes/mira/theme.css
@@ -661,6 +661,7 @@
     border: 1px solid #d8dee9;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
     border-radius: 4px;
+    outline-color: transparent;
   }
   .p-cascadeselect:not(.p-disabled):hover {
     border-color: #81a1c1;
@@ -671,6 +672,15 @@
     box-shadow: 0 0 0 0.2rem #c0d0e0;
     border-color: #81a1c1;
   }
+  .p-cascadeselect.p-variant-filled {
+    background-color: #eceff4;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:hover {
+    background-color: #eceff4;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:focus {
+    background-color: #ffffff;
+  }
   .p-cascadeselect .p-cascadeselect-label {
     background: transparent;
     border: 0 none;
@@ -711,38 +721,29 @@
     transition: none;
     border-radius: 0;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
-    padding: 0.5rem 1rem;
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+    margin-top: 0;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: inset 0 0 0 0.15rem #c0d0e0;
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+    margin-bottom: 0;
   }
   .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
     color: #2e3440;
     background: #d8dee9;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+    background: #bec8da;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: #4c566a;
     background: transparent;
   }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+    padding: 0.5rem 1rem;
+  }
   .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
     font-size: 0.875rem;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon.p-icon {
-    width: 0.875rem;
-    height: 0.875rem;
-  }
-  .p-input-filled .p-cascadeselect {
-    background: #eceff4;
-  }
-  .p-input-filled .p-cascadeselect:not(.p-disabled):hover {
-    background-color: #eceff4;
-  }
-  .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
-    background-color: #ffffff;
-  }
   .p-checkbox {
     position: relative;
     display: inline-flex;
@@ -1336,6 +1337,7 @@
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
     appearance: none;
     border-radius: 4px;
+    outline-color: transparent;
   }
   .p-inputtext:enabled:hover {
     border-color: #81a1c1;
@@ -1349,6 +1351,15 @@
   .p-inputtext.p-invalid.p-component {
     border-color: #bf616a;
   }
+  .p-inputtext.p-variant-filled {
+    background-color: #eceff4;
+  }
+  .p-inputtext.p-variant-filled:enabled:hover {
+    background-color: #eceff4;
+  }
+  .p-inputtext.p-variant-filled:enabled:focus {
+    background-color: #ffffff;
+  }
   .p-inputtext.p-inputtext-sm {
     font-size: 0.875rem;
     padding: 0.4375rem 0.4375rem;
@@ -1362,30 +1373,9 @@
     color: #4c566a;
     transition-duration: 0.2s;
   }
-  .p-float-label > label.p-error {
+  .p-float-label > .p-invalid + label {
     color: #bf616a;
   }
-  .p-input-icon-left > i:first-of-type,
-  .p-input-icon-left > svg:first-of-type,
-  .p-input-icon-left > .p-input-prefix {
-    left: 0.5rem;
-    color: #81a1c1;
-  }
-  .p-input-icon-left > .p-inputtext {
-    padding-left: 2rem;
-  }
-  .p-input-icon-left.p-float-label > label {
-    left: 2rem;
-  }
-  .p-input-icon-right > i:last-of-type,
-  .p-input-icon-right > svg:last-of-type,
-  .p-input-icon-right > .p-input-suffix {
-    right: 0.5rem;
-    color: #81a1c1;
-  }
-  .p-input-icon-right > .p-inputtext {
-    padding-right: 2rem;
-  }
   .p-icon-field-left > .p-inputtext {
     padding-left: 2rem;
   }
@@ -2087,6 +2077,15 @@
   .p-treeselect.p-treeselect-clearable .p-treeselect-label {
     padding-right: 1.5rem;
   }
+  .p-treeselect.p-variant-filled {
+    background: #eceff4;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #eceff4;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #ffffff;
+  }
   .p-treeselect .p-treeselect-label {
     padding: 0.5rem 0.5rem;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
diff --git a/public/themes/nano/theme.css b/public/themes/nano/theme.css
index 382547b844..ac4f054ba2 100644
--- a/public/themes/nano/theme.css
+++ b/public/themes/nano/theme.css
@@ -639,6 +639,7 @@
     border: 1px solid #a5acb3;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
     border-radius: 1px;
+    outline-color: transparent;
   }
   .p-cascadeselect:not(.p-disabled):hover {
     border-color: #1174c0;
@@ -649,6 +650,15 @@
     box-shadow: 0 0 0 0.2rem #90c9f5;
     border-color: #1174c0;
   }
+  .p-cascadeselect.p-variant-filled {
+    background-color: #f2f4f8;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:hover {
+    background-color: #f2f4f8;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:focus {
+    background-color: #ffffff;
+  }
   .p-cascadeselect .p-cascadeselect-label {
     background: transparent;
     border: 0 none;
@@ -689,38 +699,29 @@
     transition: box-shadow 0.2s;
     border-radius: 0;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
-    padding: 0.25rem 0.5rem;
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+    margin-top: 0;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: inset 0 0 0 0.15rem #90c9f5;
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+    margin-bottom: 0;
   }
   .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
     color: #ffffff;
     background: #44a1d9;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+    background: #1174c0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: #343a3f;
     background: #dde1e6;
   }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+    padding: 0.25rem 0.5rem;
+  }
   .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
     font-size: 0.875rem;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon.p-icon {
-    width: 0.875rem;
-    height: 0.875rem;
-  }
-  .p-input-filled .p-cascadeselect {
-    background: #f2f4f8;
-  }
-  .p-input-filled .p-cascadeselect:not(.p-disabled):hover {
-    background-color: #f2f4f8;
-  }
-  .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
-    background-color: #ffffff;
-  }
   .p-checkbox {
     position: relative;
     display: inline-flex;
@@ -1314,6 +1315,7 @@
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
     appearance: none;
     border-radius: 1px;
+    outline-color: transparent;
   }
   .p-inputtext:enabled:hover {
     border-color: #1174c0;
@@ -1327,6 +1329,15 @@
   .p-inputtext.p-invalid.p-component {
     border-color: #d8222f;
   }
+  .p-inputtext.p-variant-filled {
+    background-color: #f2f4f8;
+  }
+  .p-inputtext.p-variant-filled:enabled:hover {
+    background-color: #f2f4f8;
+  }
+  .p-inputtext.p-variant-filled:enabled:focus {
+    background-color: #ffffff;
+  }
   .p-inputtext.p-inputtext-sm {
     font-size: 0.875rem;
     padding: 0.21875rem 0.21875rem;
@@ -1340,30 +1351,9 @@
     color: #697077;
     transition-duration: 0.2s;
   }
-  .p-float-label > label.p-error {
+  .p-float-label > .p-invalid + label {
     color: #d8222f;
   }
-  .p-input-icon-left > i:first-of-type,
-  .p-input-icon-left > svg:first-of-type,
-  .p-input-icon-left > .p-input-prefix {
-    left: 0.25rem;
-    color: #697077;
-  }
-  .p-input-icon-left > .p-inputtext {
-    padding-left: 1.5rem;
-  }
-  .p-input-icon-left.p-float-label > label {
-    left: 1.5rem;
-  }
-  .p-input-icon-right > i:last-of-type,
-  .p-input-icon-right > svg:last-of-type,
-  .p-input-icon-right > .p-input-suffix {
-    right: 0.25rem;
-    color: #697077;
-  }
-  .p-input-icon-right > .p-inputtext {
-    padding-right: 1.5rem;
-  }
   .p-icon-field-left > .p-inputtext {
     padding-left: 1.5rem;
   }
@@ -2065,6 +2055,15 @@
   .p-treeselect.p-treeselect-clearable .p-treeselect-label {
     padding-right: 1.25rem;
   }
+  .p-treeselect.p-variant-filled {
+    background: #f2f4f8;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #f2f4f8;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #ffffff;
+  }
   .p-treeselect .p-treeselect-label {
     padding: 0.25rem 0.25rem;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
diff --git a/public/themes/nova-accent/theme.css b/public/themes/nova-accent/theme.css
index 5a1369b399..0c93fc143e 100644
--- a/public/themes/nova-accent/theme.css
+++ b/public/themes/nova-accent/theme.css
@@ -639,6 +639,7 @@
     border: 1px solid #a6a6a6;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
     border-radius: 3px;
+    outline-color: transparent;
   }
   .p-cascadeselect:not(.p-disabled):hover {
     border-color: #212121;
@@ -649,6 +650,15 @@
     box-shadow: 0 0 0 0.2rem #8dcdff;
     border-color: #007ad9;
   }
+  .p-cascadeselect.p-variant-filled {
+    background-color: #f4f4f4;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:hover {
+    background-color: #f4f4f4;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:focus {
+    background-color: #f4f4f4;
+  }
   .p-cascadeselect .p-cascadeselect-label {
     background: transparent;
     border: 0 none;
@@ -689,38 +699,29 @@
     transition: background-color 0.2s, box-shadow 0.2s;
     border-radius: 0;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
-    padding: 0.429rem 0.857rem;
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+    margin-top: 0;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: inset 0 0 0 0.15rem #8dcdff;
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+    margin-bottom: 0;
   }
   .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
     color: #ffffff;
     background: #e02365;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+    background: #e02365;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: #333333;
     background: #eaeaea;
   }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+    padding: 0.429rem 0.857rem;
+  }
   .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
     font-size: 0.875rem;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon.p-icon {
-    width: 0.875rem;
-    height: 0.875rem;
-  }
-  .p-input-filled .p-cascadeselect {
-    background: #f4f4f4;
-  }
-  .p-input-filled .p-cascadeselect:not(.p-disabled):hover {
-    background-color: #f4f4f4;
-  }
-  .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
-    background-color: #f4f4f4;
-  }
   .p-checkbox {
     position: relative;
     display: inline-flex;
@@ -1314,6 +1315,7 @@
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
     appearance: none;
     border-radius: 3px;
+    outline-color: transparent;
   }
   .p-inputtext:enabled:hover {
     border-color: #212121;
@@ -1327,6 +1329,15 @@
   .p-inputtext.p-invalid.p-component {
     border-color: #a80000;
   }
+  .p-inputtext.p-variant-filled {
+    background-color: #f4f4f4;
+  }
+  .p-inputtext.p-variant-filled:enabled:hover {
+    background-color: #f4f4f4;
+  }
+  .p-inputtext.p-variant-filled:enabled:focus {
+    background-color: #f4f4f4;
+  }
   .p-inputtext.p-inputtext-sm {
     font-size: 0.875rem;
     padding: 0.375375rem 0.375375rem;
@@ -1340,30 +1351,9 @@
     color: #666666;
     transition-duration: 0.2s;
   }
-  .p-float-label > label.p-error {
+  .p-float-label > .p-invalid + label {
     color: #a80000;
   }
-  .p-input-icon-left > i:first-of-type,
-  .p-input-icon-left > svg:first-of-type,
-  .p-input-icon-left > .p-input-prefix {
-    left: 0.429rem;
-    color: #848484;
-  }
-  .p-input-icon-left > .p-inputtext {
-    padding-left: 1.858rem;
-  }
-  .p-input-icon-left.p-float-label > label {
-    left: 1.858rem;
-  }
-  .p-input-icon-right > i:last-of-type,
-  .p-input-icon-right > svg:last-of-type,
-  .p-input-icon-right > .p-input-suffix {
-    right: 0.429rem;
-    color: #848484;
-  }
-  .p-input-icon-right > .p-inputtext {
-    padding-right: 1.858rem;
-  }
   .p-icon-field-left > .p-inputtext {
     padding-left: 1.858rem;
   }
@@ -2065,6 +2055,15 @@
   .p-treeselect.p-treeselect-clearable .p-treeselect-label {
     padding-right: 1.429rem;
   }
+  .p-treeselect.p-variant-filled {
+    background: #f4f4f4;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #f4f4f4;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #f4f4f4;
+  }
   .p-treeselect .p-treeselect-label {
     padding: 0.429rem 0.429rem;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
diff --git a/public/themes/nova-alt/theme.css b/public/themes/nova-alt/theme.css
index 30b6a74e7b..e81e8598ce 100644
--- a/public/themes/nova-alt/theme.css
+++ b/public/themes/nova-alt/theme.css
@@ -639,6 +639,7 @@
     border: 1px solid #a6a6a6;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
     border-radius: 3px;
+    outline-color: transparent;
   }
   .p-cascadeselect:not(.p-disabled):hover {
     border-color: #212121;
@@ -649,6 +650,15 @@
     box-shadow: 0 0 0 0.2rem #8dcdff;
     border-color: #007ad9;
   }
+  .p-cascadeselect.p-variant-filled {
+    background-color: #f4f4f4;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:hover {
+    background-color: #f4f4f4;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:focus {
+    background-color: #f4f4f4;
+  }
   .p-cascadeselect .p-cascadeselect-label {
     background: transparent;
     border: 0 none;
@@ -689,38 +699,29 @@
     transition: background-color 0.2s, box-shadow 0.2s;
     border-radius: 0;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
-    padding: 0.429rem 0.857rem;
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+    margin-top: 0;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: inset 0 0 0 0.15rem #8dcdff;
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+    margin-bottom: 0;
   }
   .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
     color: #ffffff;
     background: #007ad9;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+    background: #007ad9;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: #333333;
     background: #eaeaea;
   }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+    padding: 0.429rem 0.857rem;
+  }
   .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
     font-size: 0.875rem;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon.p-icon {
-    width: 0.875rem;
-    height: 0.875rem;
-  }
-  .p-input-filled .p-cascadeselect {
-    background: #f4f4f4;
-  }
-  .p-input-filled .p-cascadeselect:not(.p-disabled):hover {
-    background-color: #f4f4f4;
-  }
-  .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
-    background-color: #f4f4f4;
-  }
   .p-checkbox {
     position: relative;
     display: inline-flex;
@@ -1317,6 +1318,7 @@
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
     appearance: none;
     border-radius: 3px;
+    outline-color: transparent;
   }
   .p-inputtext:enabled:hover {
     border-color: #212121;
@@ -1330,6 +1332,15 @@
   .p-inputtext.p-invalid.p-component {
     border-color: #a80000;
   }
+  .p-inputtext.p-variant-filled {
+    background-color: #f4f4f4;
+  }
+  .p-inputtext.p-variant-filled:enabled:hover {
+    background-color: #f4f4f4;
+  }
+  .p-inputtext.p-variant-filled:enabled:focus {
+    background-color: #f4f4f4;
+  }
   .p-inputtext.p-inputtext-sm {
     font-size: 0.875rem;
     padding: 0.375375rem 0.375375rem;
@@ -1343,30 +1354,9 @@
     color: #666666;
     transition-duration: 0.2s;
   }
-  .p-float-label > label.p-error {
+  .p-float-label > .p-invalid + label {
     color: #a80000;
   }
-  .p-input-icon-left > i:first-of-type,
-  .p-input-icon-left > svg:first-of-type,
-  .p-input-icon-left > .p-input-prefix {
-    left: 0.429rem;
-    color: #848484;
-  }
-  .p-input-icon-left > .p-inputtext {
-    padding-left: 1.858rem;
-  }
-  .p-input-icon-left.p-float-label > label {
-    left: 1.858rem;
-  }
-  .p-input-icon-right > i:last-of-type,
-  .p-input-icon-right > svg:last-of-type,
-  .p-input-icon-right > .p-input-suffix {
-    right: 0.429rem;
-    color: #848484;
-  }
-  .p-input-icon-right > .p-inputtext {
-    padding-right: 1.858rem;
-  }
   .p-icon-field-left > .p-inputtext {
     padding-left: 1.858rem;
   }
@@ -2074,6 +2064,15 @@
   .p-treeselect.p-treeselect-clearable .p-treeselect-label {
     padding-right: 1.429rem;
   }
+  .p-treeselect.p-variant-filled {
+    background: #f4f4f4;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #f4f4f4;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #f4f4f4;
+  }
   .p-treeselect .p-treeselect-label {
     padding: 0.429rem 0.429rem;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
diff --git a/public/themes/nova/theme.css b/public/themes/nova/theme.css
index f9f75834c2..1f7f4c1ae6 100644
--- a/public/themes/nova/theme.css
+++ b/public/themes/nova/theme.css
@@ -639,6 +639,7 @@
     border: 1px solid #a6a6a6;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
     border-radius: 3px;
+    outline-color: transparent;
   }
   .p-cascadeselect:not(.p-disabled):hover {
     border-color: #212121;
@@ -649,6 +650,15 @@
     box-shadow: 0 0 0 0.2rem #8dcdff;
     border-color: #007ad9;
   }
+  .p-cascadeselect.p-variant-filled {
+    background-color: #f4f4f4;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:hover {
+    background-color: #f4f4f4;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:focus {
+    background-color: #f4f4f4;
+  }
   .p-cascadeselect .p-cascadeselect-label {
     background: transparent;
     border: 0 none;
@@ -689,38 +699,29 @@
     transition: background-color 0.2s, box-shadow 0.2s;
     border-radius: 0;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
-    padding: 0.429rem 0.857rem;
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+    margin-top: 0;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: inset 0 0 0 0.15rem #8dcdff;
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+    margin-bottom: 0;
   }
   .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
     color: #ffffff;
     background: #007ad9;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+    background: #007ad9;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: #333333;
     background: #eaeaea;
   }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+    padding: 0.429rem 0.857rem;
+  }
   .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
     font-size: 0.875rem;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon.p-icon {
-    width: 0.875rem;
-    height: 0.875rem;
-  }
-  .p-input-filled .p-cascadeselect {
-    background: #f4f4f4;
-  }
-  .p-input-filled .p-cascadeselect:not(.p-disabled):hover {
-    background-color: #f4f4f4;
-  }
-  .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
-    background-color: #f4f4f4;
-  }
   .p-checkbox {
     position: relative;
     display: inline-flex;
@@ -1317,6 +1318,7 @@
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
     appearance: none;
     border-radius: 3px;
+    outline-color: transparent;
   }
   .p-inputtext:enabled:hover {
     border-color: #212121;
@@ -1330,6 +1332,15 @@
   .p-inputtext.p-invalid.p-component {
     border-color: #a80000;
   }
+  .p-inputtext.p-variant-filled {
+    background-color: #f4f4f4;
+  }
+  .p-inputtext.p-variant-filled:enabled:hover {
+    background-color: #f4f4f4;
+  }
+  .p-inputtext.p-variant-filled:enabled:focus {
+    background-color: #f4f4f4;
+  }
   .p-inputtext.p-inputtext-sm {
     font-size: 0.875rem;
     padding: 0.375375rem 0.375375rem;
@@ -1343,30 +1354,9 @@
     color: #666666;
     transition-duration: 0.2s;
   }
-  .p-float-label > label.p-error {
+  .p-float-label > .p-invalid + label {
     color: #a80000;
   }
-  .p-input-icon-left > i:first-of-type,
-  .p-input-icon-left > svg:first-of-type,
-  .p-input-icon-left > .p-input-prefix {
-    left: 0.429rem;
-    color: #848484;
-  }
-  .p-input-icon-left > .p-inputtext {
-    padding-left: 1.858rem;
-  }
-  .p-input-icon-left.p-float-label > label {
-    left: 1.858rem;
-  }
-  .p-input-icon-right > i:last-of-type,
-  .p-input-icon-right > svg:last-of-type,
-  .p-input-icon-right > .p-input-suffix {
-    right: 0.429rem;
-    color: #848484;
-  }
-  .p-input-icon-right > .p-inputtext {
-    padding-right: 1.858rem;
-  }
   .p-icon-field-left > .p-inputtext {
     padding-left: 1.858rem;
   }
@@ -2074,6 +2064,15 @@
   .p-treeselect.p-treeselect-clearable .p-treeselect-label {
     padding-right: 1.429rem;
   }
+  .p-treeselect.p-variant-filled {
+    background: #f4f4f4;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #f4f4f4;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #f4f4f4;
+  }
   .p-treeselect .p-treeselect-label {
     padding: 0.429rem 0.429rem;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
diff --git a/public/themes/rhea/theme.css b/public/themes/rhea/theme.css
index 5bbbc9303e..1d54b22050 100644
--- a/public/themes/rhea/theme.css
+++ b/public/themes/rhea/theme.css
@@ -639,6 +639,7 @@
     border: 1px solid #dadada;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
     border-radius: 2px;
+    outline-color: transparent;
   }
   .p-cascadeselect:not(.p-disabled):hover {
     border-color: #a6a6a6;
@@ -649,6 +650,15 @@
     box-shadow: 0 0 0 0.2rem #e4e9ec;
     border-color: #7b95a3;
   }
+  .p-cascadeselect.p-variant-filled {
+    background-color: #f4f4f4;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:hover {
+    background-color: #f4f4f4;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:focus {
+    background-color: #f4f4f4;
+  }
   .p-cascadeselect .p-cascadeselect-label {
     background: transparent;
     border: 0 none;
@@ -689,38 +699,29 @@
     transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
     border-radius: 0;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
-    padding: 0.429rem 0.857rem;
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+    margin-top: 0;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: inset 0 0 0 0.15rem #e4e9ec;
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+    margin-bottom: 0;
   }
   .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
     color: #385048;
     background: #afd3c8;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+    background: #aed3c7;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: #666666;
     background: #f4f4f4;
   }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+    padding: 0.429rem 0.857rem;
+  }
   .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
     font-size: 0.875rem;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon.p-icon {
-    width: 0.875rem;
-    height: 0.875rem;
-  }
-  .p-input-filled .p-cascadeselect {
-    background: #f4f4f4;
-  }
-  .p-input-filled .p-cascadeselect:not(.p-disabled):hover {
-    background-color: #f4f4f4;
-  }
-  .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
-    background-color: #f4f4f4;
-  }
   .p-checkbox {
     position: relative;
     display: inline-flex;
@@ -1314,6 +1315,7 @@
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
     appearance: none;
     border-radius: 2px;
+    outline-color: transparent;
   }
   .p-inputtext:enabled:hover {
     border-color: #a6a6a6;
@@ -1327,6 +1329,15 @@
   .p-inputtext.p-invalid.p-component {
     border-color: #e7a3a3;
   }
+  .p-inputtext.p-variant-filled {
+    background-color: #f4f4f4;
+  }
+  .p-inputtext.p-variant-filled:enabled:hover {
+    background-color: #f4f4f4;
+  }
+  .p-inputtext.p-variant-filled:enabled:focus {
+    background-color: #f4f4f4;
+  }
   .p-inputtext.p-inputtext-sm {
     font-size: 0.875rem;
     padding: 0.375375rem 0.375375rem;
@@ -1340,30 +1351,9 @@
     color: #a6a6a6;
     transition-duration: 0.2s;
   }
-  .p-float-label > label.p-error {
+  .p-float-label > .p-invalid + label {
     color: #e7a3a3;
   }
-  .p-input-icon-left > i:first-of-type,
-  .p-input-icon-left > svg:first-of-type,
-  .p-input-icon-left > .p-input-prefix {
-    left: 0.429rem;
-    color: #a6a6a6;
-  }
-  .p-input-icon-left > .p-inputtext {
-    padding-left: 1.858rem;
-  }
-  .p-input-icon-left.p-float-label > label {
-    left: 1.858rem;
-  }
-  .p-input-icon-right > i:last-of-type,
-  .p-input-icon-right > svg:last-of-type,
-  .p-input-icon-right > .p-input-suffix {
-    right: 0.429rem;
-    color: #a6a6a6;
-  }
-  .p-input-icon-right > .p-inputtext {
-    padding-right: 1.858rem;
-  }
   .p-icon-field-left > .p-inputtext {
     padding-left: 1.858rem;
   }
@@ -2065,6 +2055,15 @@
   .p-treeselect.p-treeselect-clearable .p-treeselect-label {
     padding-right: 1.429rem;
   }
+  .p-treeselect.p-variant-filled {
+    background: #f4f4f4;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #f4f4f4;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #f4f4f4;
+  }
   .p-treeselect .p-treeselect-label {
     padding: 0.429rem 0.429rem;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
diff --git a/public/themes/saga-blue/theme.css b/public/themes/saga-blue/theme.css
index 92ed8e13b9..b19ac0e203 100644
--- a/public/themes/saga-blue/theme.css
+++ b/public/themes/saga-blue/theme.css
@@ -639,6 +639,7 @@
     border: 1px solid #ced4da;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
     border-radius: 3px;
+    outline-color: transparent;
   }
   .p-cascadeselect:not(.p-disabled):hover {
     border-color: #2196f3;
@@ -649,6 +650,15 @@
     box-shadow: 0 0 0 0.2rem #a6d5fa;
     border-color: #2196f3;
   }
+  .p-cascadeselect.p-variant-filled {
+    background-color: #f8f9fa;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:hover {
+    background-color: #f8f9fa;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:focus {
+    background-color: #ffffff;
+  }
   .p-cascadeselect .p-cascadeselect-label {
     background: transparent;
     border: 0 none;
@@ -689,38 +699,29 @@
     transition: box-shadow 0.2s;
     border-radius: 0;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
-    padding: 0.5rem 1rem;
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+    margin-top: 0;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: inset 0 0 0 0.15rem #a6d5fa;
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+    margin-bottom: 0;
   }
   .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
     color: #495057;
     background: #e3f2fd;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+    background: rgba(33, 150, 243, 0.24);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: #495057;
     background: #e9ecef;
   }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+    padding: 0.5rem 1rem;
+  }
   .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
     font-size: 0.875rem;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon.p-icon {
-    width: 0.875rem;
-    height: 0.875rem;
-  }
-  .p-input-filled .p-cascadeselect {
-    background: #f8f9fa;
-  }
-  .p-input-filled .p-cascadeselect:not(.p-disabled):hover {
-    background-color: #f8f9fa;
-  }
-  .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
-    background-color: #ffffff;
-  }
   .p-checkbox {
     position: relative;
     display: inline-flex;
@@ -1314,6 +1315,7 @@
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
     appearance: none;
     border-radius: 3px;
+    outline-color: transparent;
   }
   .p-inputtext:enabled:hover {
     border-color: #2196f3;
@@ -1327,6 +1329,15 @@
   .p-inputtext.p-invalid.p-component {
     border-color: #f44336;
   }
+  .p-inputtext.p-variant-filled {
+    background-color: #f8f9fa;
+  }
+  .p-inputtext.p-variant-filled:enabled:hover {
+    background-color: #f8f9fa;
+  }
+  .p-inputtext.p-variant-filled:enabled:focus {
+    background-color: #ffffff;
+  }
   .p-inputtext.p-inputtext-sm {
     font-size: 0.875rem;
     padding: 0.4375rem 0.4375rem;
@@ -1340,30 +1351,9 @@
     color: #6c757d;
     transition-duration: 0.2s;
   }
-  .p-float-label > label.p-error {
+  .p-float-label > .p-invalid + label {
     color: #f44336;
   }
-  .p-input-icon-left > i:first-of-type,
-  .p-input-icon-left > svg:first-of-type,
-  .p-input-icon-left > .p-input-prefix {
-    left: 0.5rem;
-    color: #6c757d;
-  }
-  .p-input-icon-left > .p-inputtext {
-    padding-left: 2rem;
-  }
-  .p-input-icon-left.p-float-label > label {
-    left: 2rem;
-  }
-  .p-input-icon-right > i:last-of-type,
-  .p-input-icon-right > svg:last-of-type,
-  .p-input-icon-right > .p-input-suffix {
-    right: 0.5rem;
-    color: #6c757d;
-  }
-  .p-input-icon-right > .p-inputtext {
-    padding-right: 2rem;
-  }
   .p-icon-field-left > .p-inputtext {
     padding-left: 2rem;
   }
@@ -2065,6 +2055,15 @@
   .p-treeselect.p-treeselect-clearable .p-treeselect-label {
     padding-right: 1.5rem;
   }
+  .p-treeselect.p-variant-filled {
+    background: #f8f9fa;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #f8f9fa;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #ffffff;
+  }
   .p-treeselect .p-treeselect-label {
     padding: 0.5rem 0.5rem;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
diff --git a/public/themes/saga-green/theme.css b/public/themes/saga-green/theme.css
index 942ae9fb7a..8f4f936409 100644
--- a/public/themes/saga-green/theme.css
+++ b/public/themes/saga-green/theme.css
@@ -639,6 +639,7 @@
     border: 1px solid #ced4da;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
     border-radius: 3px;
+    outline-color: transparent;
   }
   .p-cascadeselect:not(.p-disabled):hover {
     border-color: #4caf50;
@@ -649,6 +650,15 @@
     box-shadow: 0 0 0 0.2rem #b7e0b8;
     border-color: #4caf50;
   }
+  .p-cascadeselect.p-variant-filled {
+    background-color: #f8f9fa;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:hover {
+    background-color: #f8f9fa;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:focus {
+    background-color: #ffffff;
+  }
   .p-cascadeselect .p-cascadeselect-label {
     background: transparent;
     border: 0 none;
@@ -689,38 +699,29 @@
     transition: box-shadow 0.2s;
     border-radius: 0;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
-    padding: 0.5rem 1rem;
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+    margin-top: 0;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: inset 0 0 0 0.15rem #b7e0b8;
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+    margin-bottom: 0;
   }
   .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
     color: #495057;
     background: #e8f5e9;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+    background: rgba(76, 175, 80, 0.24);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: #495057;
     background: #e9ecef;
   }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+    padding: 0.5rem 1rem;
+  }
   .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
     font-size: 0.875rem;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon.p-icon {
-    width: 0.875rem;
-    height: 0.875rem;
-  }
-  .p-input-filled .p-cascadeselect {
-    background: #f8f9fa;
-  }
-  .p-input-filled .p-cascadeselect:not(.p-disabled):hover {
-    background-color: #f8f9fa;
-  }
-  .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
-    background-color: #ffffff;
-  }
   .p-checkbox {
     position: relative;
     display: inline-flex;
@@ -1314,6 +1315,7 @@
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
     appearance: none;
     border-radius: 3px;
+    outline-color: transparent;
   }
   .p-inputtext:enabled:hover {
     border-color: #4caf50;
@@ -1327,6 +1329,15 @@
   .p-inputtext.p-invalid.p-component {
     border-color: #f44336;
   }
+  .p-inputtext.p-variant-filled {
+    background-color: #f8f9fa;
+  }
+  .p-inputtext.p-variant-filled:enabled:hover {
+    background-color: #f8f9fa;
+  }
+  .p-inputtext.p-variant-filled:enabled:focus {
+    background-color: #ffffff;
+  }
   .p-inputtext.p-inputtext-sm {
     font-size: 0.875rem;
     padding: 0.4375rem 0.4375rem;
@@ -1340,30 +1351,9 @@
     color: #6c757d;
     transition-duration: 0.2s;
   }
-  .p-float-label > label.p-error {
+  .p-float-label > .p-invalid + label {
     color: #f44336;
   }
-  .p-input-icon-left > i:first-of-type,
-  .p-input-icon-left > svg:first-of-type,
-  .p-input-icon-left > .p-input-prefix {
-    left: 0.5rem;
-    color: #6c757d;
-  }
-  .p-input-icon-left > .p-inputtext {
-    padding-left: 2rem;
-  }
-  .p-input-icon-left.p-float-label > label {
-    left: 2rem;
-  }
-  .p-input-icon-right > i:last-of-type,
-  .p-input-icon-right > svg:last-of-type,
-  .p-input-icon-right > .p-input-suffix {
-    right: 0.5rem;
-    color: #6c757d;
-  }
-  .p-input-icon-right > .p-inputtext {
-    padding-right: 2rem;
-  }
   .p-icon-field-left > .p-inputtext {
     padding-left: 2rem;
   }
@@ -2065,6 +2055,15 @@
   .p-treeselect.p-treeselect-clearable .p-treeselect-label {
     padding-right: 1.5rem;
   }
+  .p-treeselect.p-variant-filled {
+    background: #f8f9fa;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #f8f9fa;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #ffffff;
+  }
   .p-treeselect .p-treeselect-label {
     padding: 0.5rem 0.5rem;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
diff --git a/public/themes/saga-orange/theme.css b/public/themes/saga-orange/theme.css
index 6aa2c42475..a31fe592f3 100644
--- a/public/themes/saga-orange/theme.css
+++ b/public/themes/saga-orange/theme.css
@@ -639,6 +639,7 @@
     border: 1px solid #ced4da;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
     border-radius: 3px;
+    outline-color: transparent;
   }
   .p-cascadeselect:not(.p-disabled):hover {
     border-color: #ffc107;
@@ -649,6 +650,15 @@
     box-shadow: 0 0 0 0.2rem #ffe69c;
     border-color: #ffc107;
   }
+  .p-cascadeselect.p-variant-filled {
+    background-color: #f8f9fa;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:hover {
+    background-color: #f8f9fa;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:focus {
+    background-color: #ffffff;
+  }
   .p-cascadeselect .p-cascadeselect-label {
     background: transparent;
     border: 0 none;
@@ -689,38 +699,29 @@
     transition: box-shadow 0.2s;
     border-radius: 0;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
-    padding: 0.5rem 1rem;
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+    margin-top: 0;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: inset 0 0 0 0.15rem #ffe69c;
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+    margin-bottom: 0;
   }
   .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
     color: #495057;
     background: #fff3e0;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+    background: rgba(255, 193, 7, 0.24);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: #495057;
     background: #e9ecef;
   }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+    padding: 0.5rem 1rem;
+  }
   .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
     font-size: 0.875rem;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon.p-icon {
-    width: 0.875rem;
-    height: 0.875rem;
-  }
-  .p-input-filled .p-cascadeselect {
-    background: #f8f9fa;
-  }
-  .p-input-filled .p-cascadeselect:not(.p-disabled):hover {
-    background-color: #f8f9fa;
-  }
-  .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
-    background-color: #ffffff;
-  }
   .p-checkbox {
     position: relative;
     display: inline-flex;
@@ -1314,6 +1315,7 @@
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
     appearance: none;
     border-radius: 3px;
+    outline-color: transparent;
   }
   .p-inputtext:enabled:hover {
     border-color: #ffc107;
@@ -1327,6 +1329,15 @@
   .p-inputtext.p-invalid.p-component {
     border-color: #f44336;
   }
+  .p-inputtext.p-variant-filled {
+    background-color: #f8f9fa;
+  }
+  .p-inputtext.p-variant-filled:enabled:hover {
+    background-color: #f8f9fa;
+  }
+  .p-inputtext.p-variant-filled:enabled:focus {
+    background-color: #ffffff;
+  }
   .p-inputtext.p-inputtext-sm {
     font-size: 0.875rem;
     padding: 0.4375rem 0.4375rem;
@@ -1340,30 +1351,9 @@
     color: #6c757d;
     transition-duration: 0.2s;
   }
-  .p-float-label > label.p-error {
+  .p-float-label > .p-invalid + label {
     color: #f44336;
   }
-  .p-input-icon-left > i:first-of-type,
-  .p-input-icon-left > svg:first-of-type,
-  .p-input-icon-left > .p-input-prefix {
-    left: 0.5rem;
-    color: #6c757d;
-  }
-  .p-input-icon-left > .p-inputtext {
-    padding-left: 2rem;
-  }
-  .p-input-icon-left.p-float-label > label {
-    left: 2rem;
-  }
-  .p-input-icon-right > i:last-of-type,
-  .p-input-icon-right > svg:last-of-type,
-  .p-input-icon-right > .p-input-suffix {
-    right: 0.5rem;
-    color: #6c757d;
-  }
-  .p-input-icon-right > .p-inputtext {
-    padding-right: 2rem;
-  }
   .p-icon-field-left > .p-inputtext {
     padding-left: 2rem;
   }
@@ -2065,6 +2055,15 @@
   .p-treeselect.p-treeselect-clearable .p-treeselect-label {
     padding-right: 1.5rem;
   }
+  .p-treeselect.p-variant-filled {
+    background: #f8f9fa;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #f8f9fa;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #ffffff;
+  }
   .p-treeselect .p-treeselect-label {
     padding: 0.5rem 0.5rem;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
diff --git a/public/themes/soho-dark/theme.css b/public/themes/soho-dark/theme.css
index b9742543d6..8c77f963a3 100644
--- a/public/themes/soho-dark/theme.css
+++ b/public/themes/soho-dark/theme.css
@@ -10,7 +10,7 @@
   --text-color: rgba(255, 255, 255, 0.87);
   --text-color-secondary: rgba(255, 255, 255, 0.6);
   --primary-color: #b19df7;
-  --primary-color-text: hsl(234, 15%, 13%);
+  --primary-color-text: hsl(234deg, 15%, 13%);
   --surface-0: #1d1e27;
   --surface-50: #34343d;
   --surface-100: #4a4b52;
@@ -658,6 +658,7 @@
     border: 1px solid #3e4053;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
     border-radius: 6px;
+    outline-color: transparent;
   }
   .p-cascadeselect:not(.p-disabled):hover {
     border-color: #b19df7;
@@ -668,6 +669,15 @@
     box-shadow: 0 0 0 1px #e0d8fc;
     border-color: #b19df7;
   }
+  .p-cascadeselect.p-variant-filled {
+    background-color: #3e4053;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:hover {
+    background-color: #3e4053;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:focus {
+    background-color: #3e4053;
+  }
   .p-cascadeselect .p-cascadeselect-label {
     background: transparent;
     border: 0 none;
@@ -708,38 +718,29 @@
     transition: box-shadow 0.2s;
     border-radius: 0;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
-    padding: 0.75rem 1.25rem;
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+    margin-top: 0;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: inset 0 0 0 0.15rem #e0d8fc;
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+    margin-bottom: 0;
   }
   .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
     color: #b19df7;
     background: rgba(177, 157, 247, 0.16);
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+    background: rgba(177, 157, 247, 0.24);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: rgba(255, 255, 255, 0.87);
     background: rgba(255, 255, 255, 0.03);
   }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+    padding: 0.75rem 1.25rem;
+  }
   .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
     font-size: 0.875rem;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon.p-icon {
-    width: 0.875rem;
-    height: 0.875rem;
-  }
-  .p-input-filled .p-cascadeselect {
-    background: #3e4053;
-  }
-  .p-input-filled .p-cascadeselect:not(.p-disabled):hover {
-    background-color: #3e4053;
-  }
-  .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
-    background-color: #3e4053;
-  }
   .p-checkbox {
     position: relative;
     display: inline-flex;
@@ -785,7 +786,7 @@
   }
   .p-checkbox .p-checkbox-box .p-checkbox-icon {
     transition-duration: 0.2s;
-    color: hsl(234, 15%, 13%);
+    color: hsl(234deg, 15%, 13%);
     font-size: 14px;
   }
   .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
@@ -804,7 +805,7 @@
   }
   .p-checkbox .p-checkbox-box .p-checkbox-icon {
     transition-duration: 0.2s;
-    color: hsl(234, 15%, 13%);
+    color: hsl(234deg, 15%, 13%);
     font-size: 14px;
   }
   .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
@@ -821,7 +822,7 @@
   .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
     border-color: #9378f4;
     background: #9378f4;
-    color: hsl(234, 15%, 13%);
+    color: hsl(234deg, 15%, 13%);
   }
   .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box {
     outline: 0 none;
@@ -1333,6 +1334,7 @@
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
     appearance: none;
     border-radius: 6px;
+    outline-color: transparent;
   }
   .p-inputtext:enabled:hover {
     border-color: #b19df7;
@@ -1346,6 +1348,15 @@
   .p-inputtext.p-invalid.p-component {
     border-color: #ff9a9a;
   }
+  .p-inputtext.p-variant-filled {
+    background-color: #3e4053;
+  }
+  .p-inputtext.p-variant-filled:enabled:hover {
+    background-color: #3e4053;
+  }
+  .p-inputtext.p-variant-filled:enabled:focus {
+    background-color: #3e4053;
+  }
   .p-inputtext.p-inputtext-sm {
     font-size: 0.875rem;
     padding: 0.65625rem 0.65625rem;
@@ -1359,30 +1370,9 @@
     color: rgba(255, 255, 255, 0.6);
     transition-duration: 0.2s;
   }
-  .p-float-label > label.p-error {
+  .p-float-label > .p-invalid + label {
     color: #ff9a9a;
   }
-  .p-input-icon-left > i:first-of-type,
-  .p-input-icon-left > svg:first-of-type,
-  .p-input-icon-left > .p-input-prefix {
-    left: 0.75rem;
-    color: rgba(255, 255, 255, 0.6);
-  }
-  .p-input-icon-left > .p-inputtext {
-    padding-left: 2.5rem;
-  }
-  .p-input-icon-left.p-float-label > label {
-    left: 2.5rem;
-  }
-  .p-input-icon-right > i:last-of-type,
-  .p-input-icon-right > svg:last-of-type,
-  .p-input-icon-right > .p-input-suffix {
-    right: 0.75rem;
-    color: rgba(255, 255, 255, 0.6);
-  }
-  .p-input-icon-right > .p-inputtext {
-    padding-right: 2.5rem;
-  }
   .p-icon-field-left > .p-inputtext {
     padding-left: 2.5rem;
   }
@@ -1892,7 +1882,7 @@
     width: 12px;
     height: 12px;
     transition-duration: 0.2s;
-    background-color: hsl(234, 15%, 13%);
+    background-color: hsl(234deg, 15%, 13%);
   }
   .p-radiobutton.p-highlight .p-radiobutton-box {
     border-color: #b19df7;
@@ -1906,7 +1896,7 @@
     background: #9378f4;
   }
   .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon {
-    background-color: hsl(234, 15%, 13%);
+    background-color: hsl(234deg, 15%, 13%);
   }
   .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box {
     outline: 0 none;
@@ -2009,20 +1999,20 @@
   .p-selectbutton .p-button.p-highlight {
     background: #b19df7;
     border-color: #b19df7;
-    color: hsl(234, 15%, 13%);
+    color: hsl(234deg, 15%, 13%);
   }
   .p-selectbutton .p-button.p-highlight .p-button-icon-left,
   .p-selectbutton .p-button.p-highlight .p-button-icon-right {
-    color: hsl(234, 15%, 13%);
+    color: hsl(234deg, 15%, 13%);
   }
   .p-selectbutton .p-button.p-highlight:hover {
     background: #a28af5;
     border-color: #a28af5;
-    color: hsl(234, 15%, 13%);
+    color: hsl(234deg, 15%, 13%);
   }
   .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left,
   .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right {
-    color: hsl(234, 15%, 13%);
+    color: hsl(234deg, 15%, 13%);
   }
   .p-selectbutton.p-invalid > .p-button {
     border-color: #ff9a9a;
@@ -2084,6 +2074,15 @@
   .p-treeselect.p-treeselect-clearable .p-treeselect-label {
     padding-right: 1.75rem;
   }
+  .p-treeselect.p-variant-filled {
+    background: #3e4053;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #3e4053;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #3e4053;
+  }
   .p-treeselect .p-treeselect-label {
     padding: 0.75rem 0.75rem;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
@@ -2224,11 +2223,11 @@
   .p-togglebutton.p-highlight .p-button {
     background: #b19df7;
     border-color: #b19df7;
-    color: hsl(234, 15%, 13%);
+    color: hsl(234deg, 15%, 13%);
   }
   .p-togglebutton.p-highlight .p-button .p-button-icon-left,
   .p-togglebutton.p-highlight .p-button .p-button-icon-right {
-    color: hsl(234, 15%, 13%);
+    color: hsl(234deg, 15%, 13%);
   }
   .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button {
     background: rgba(255, 255, 255, 0.03);
@@ -2242,11 +2241,11 @@
   .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button {
     background: #a28af5;
     border-color: #a28af5;
-    color: hsl(234, 15%, 13%);
+    color: hsl(234deg, 15%, 13%);
   }
   .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-left,
   .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-right {
-    color: hsl(234, 15%, 13%);
+    color: hsl(234deg, 15%, 13%);
   }
   .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button {
     outline: 0 none;
@@ -2258,7 +2257,7 @@
     border-color: #ff9a9a;
   }
   .p-button {
-    color: hsl(234, 15%, 13%);
+    color: hsl(234deg, 15%, 13%);
     background: #b19df7;
     border: 1px solid #b19df7;
     padding: 0.75rem 1.25rem;
@@ -2268,12 +2267,12 @@
   }
   .p-button:not(:disabled):hover {
     background: #a28af5;
-    color: hsl(234, 15%, 13%);
+    color: hsl(234deg, 15%, 13%);
     border-color: #a28af5;
   }
   .p-button:not(:disabled):active {
     background: #9378f4;
-    color: hsl(234, 15%, 13%);
+    color: hsl(234deg, 15%, 13%);
     border-color: #9378f4;
   }
   .p-button.p-button-outlined {
@@ -2355,7 +2354,7 @@
     height: 1rem;
     line-height: 1rem;
     color: #b19df7;
-    background-color: hsl(234, 15%, 13%);
+    background-color: hsl(234deg, 15%, 13%);
   }
   .p-button.p-button-raised {
     box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
@@ -4357,7 +4356,7 @@
     border-radius: 50%;
     width: 1rem;
     height: 1rem;
-    background-color: hsl(234, 15%, 13%);
+    background-color: hsl(234deg, 15%, 13%);
   }
   .p-timeline .p-timeline-event-connector {
     background-color: #3e4053;
@@ -4897,7 +4896,7 @@
   }
   .p-overlaypanel .p-overlaypanel-close {
     background: #b19df7;
-    color: hsl(234, 15%, 13%);
+    color: hsl(234deg, 15%, 13%);
     width: 2rem;
     height: 2rem;
     transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
@@ -4908,7 +4907,7 @@
   }
   .p-overlaypanel .p-overlaypanel-close:enabled:hover {
     background: #a28af5;
-    color: hsl(234, 15%, 13%);
+    color: hsl(234deg, 15%, 13%);
   }
   .p-overlaypanel:after {
     border: solid transparent;
@@ -6722,7 +6721,7 @@
   }
   .p-tag {
     background: #b19df7;
-    color: hsl(234, 15%, 13%);
+    color: hsl(234deg, 15%, 13%);
     font-size: 0.75rem;
     font-weight: 700;
     padding: 0.25rem 0.4rem;
@@ -6836,7 +6835,7 @@
     background: #b19df7;
   }
   .p-progressbar .p-progressbar-label {
-    color: hsl(234, 15%, 13%);
+    color: hsl(234deg, 15%, 13%);
     line-height: 1.5rem;
   }
   .p-terminal {
@@ -6852,7 +6851,7 @@
   }
   .p-badge {
     background: #b19df7;
-    color: hsl(234, 15%, 13%);
+    color: hsl(234deg, 15%, 13%);
     font-size: 0.75rem;
     font-weight: 700;
     min-width: 1.5rem;
@@ -6893,7 +6892,7 @@
   }
   .p-tag {
     background: #b19df7;
-    color: hsl(234, 15%, 13%);
+    color: hsl(234deg, 15%, 13%);
     font-size: 0.75rem;
     font-weight: 700;
     padding: 0.25rem 0.4rem;
diff --git a/public/themes/soho-light/theme.css b/public/themes/soho-light/theme.css
index e8d4ee3988..9dbdcbb241 100644
--- a/public/themes/soho-light/theme.css
+++ b/public/themes/soho-light/theme.css
@@ -658,6 +658,7 @@
     border: 1px solid #d3dbe3;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
     border-radius: 6px;
+    outline-color: transparent;
   }
   .p-cascadeselect:not(.p-disabled):hover {
     border-color: #7254f3;
@@ -668,6 +669,15 @@
     box-shadow: 0 0 0 1px #c7bbfa;
     border-color: #7254f3;
   }
+  .p-cascadeselect.p-variant-filled {
+    background-color: #f6f9fc;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:hover {
+    background-color: #f6f9fc;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:focus {
+    background-color: #ffffff;
+  }
   .p-cascadeselect .p-cascadeselect-label {
     background: transparent;
     border: 0 none;
@@ -708,38 +718,29 @@
     transition: box-shadow 0.2s;
     border-radius: 0;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
-    padding: 0.75rem 1.25rem;
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+    margin-top: 0;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: inset 0 0 0 0.15rem #c7bbfa;
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+    margin-bottom: 0;
   }
   .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
     color: #7254f3;
     background: #e2dcfc;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+    background: #cbc0fa;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: #043d75;
     background: #f6f9fc;
   }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+    padding: 0.75rem 1.25rem;
+  }
   .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
     font-size: 0.875rem;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon.p-icon {
-    width: 0.875rem;
-    height: 0.875rem;
-  }
-  .p-input-filled .p-cascadeselect {
-    background: #f6f9fc;
-  }
-  .p-input-filled .p-cascadeselect:not(.p-disabled):hover {
-    background-color: #f6f9fc;
-  }
-  .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
-    background-color: #ffffff;
-  }
   .p-checkbox {
     position: relative;
     display: inline-flex;
@@ -1333,6 +1334,7 @@
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
     appearance: none;
     border-radius: 6px;
+    outline-color: transparent;
   }
   .p-inputtext:enabled:hover {
     border-color: #7254f3;
@@ -1346,6 +1348,15 @@
   .p-inputtext.p-invalid.p-component {
     border-color: #ff6767;
   }
+  .p-inputtext.p-variant-filled {
+    background-color: #f6f9fc;
+  }
+  .p-inputtext.p-variant-filled:enabled:hover {
+    background-color: #f6f9fc;
+  }
+  .p-inputtext.p-variant-filled:enabled:focus {
+    background-color: #ffffff;
+  }
   .p-inputtext.p-inputtext-sm {
     font-size: 0.875rem;
     padding: 0.65625rem 0.65625rem;
@@ -1359,30 +1370,9 @@
     color: #708da9;
     transition-duration: 0.2s;
   }
-  .p-float-label > label.p-error {
+  .p-float-label > .p-invalid + label {
     color: #ff6767;
   }
-  .p-input-icon-left > i:first-of-type,
-  .p-input-icon-left > svg:first-of-type,
-  .p-input-icon-left > .p-input-prefix {
-    left: 0.75rem;
-    color: #708da9;
-  }
-  .p-input-icon-left > .p-inputtext {
-    padding-left: 2.5rem;
-  }
-  .p-input-icon-left.p-float-label > label {
-    left: 2.5rem;
-  }
-  .p-input-icon-right > i:last-of-type,
-  .p-input-icon-right > svg:last-of-type,
-  .p-input-icon-right > .p-input-suffix {
-    right: 0.75rem;
-    color: #708da9;
-  }
-  .p-input-icon-right > .p-inputtext {
-    padding-right: 2.5rem;
-  }
   .p-icon-field-left > .p-inputtext {
     padding-left: 2.5rem;
   }
@@ -2084,6 +2074,15 @@
   .p-treeselect.p-treeselect-clearable .p-treeselect-label {
     padding-right: 1.75rem;
   }
+  .p-treeselect.p-variant-filled {
+    background: #f6f9fc;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #f6f9fc;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #ffffff;
+  }
   .p-treeselect .p-treeselect-label {
     padding: 0.75rem 0.75rem;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
diff --git a/public/themes/tailwind-light/theme.css b/public/themes/tailwind-light/theme.css
index f5859be644..143e6c0904 100644
--- a/public/themes/tailwind-light/theme.css
+++ b/public/themes/tailwind-light/theme.css
@@ -667,6 +667,7 @@
     border: 1px solid #d4d4d8;
     transition: none;
     border-radius: 0.375rem;
+    outline-color: transparent;
   }
   .p-cascadeselect:not(.p-disabled):hover {
     border-color: #d4d4d8;
@@ -677,6 +678,15 @@
     box-shadow: 0 0 0 1px #6366f1;
     border-color: #4f46e5;
   }
+  .p-cascadeselect.p-variant-filled {
+    background-color: #fafafa;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:hover {
+    background-color: #fafafa;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:focus {
+    background-color: #ffffff;
+  }
   .p-cascadeselect .p-cascadeselect-label {
     background: transparent;
     border: 0 none;
@@ -717,38 +727,29 @@
     transition: none;
     border-radius: 0;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
-    padding: 0.75rem 1rem;
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+    margin-top: 0;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: inset 0 0 0 0.15rem #6366f1;
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+    margin-bottom: 0;
   }
   .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
     color: #312e81;
     background: #eef2ff;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+    background: #e0e7ff;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: #18181b;
     background: #f4f4f5;
   }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+    padding: 0.75rem 1rem;
+  }
   .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
     font-size: 0.875rem;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon.p-icon {
-    width: 0.875rem;
-    height: 0.875rem;
-  }
-  .p-input-filled .p-cascadeselect {
-    background: #fafafa;
-  }
-  .p-input-filled .p-cascadeselect:not(.p-disabled):hover {
-    background-color: #fafafa;
-  }
-  .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
-    background-color: #ffffff;
-  }
   .p-checkbox {
     position: relative;
     display: inline-flex;
@@ -1342,6 +1343,7 @@
     transition: none;
     appearance: none;
     border-radius: 0.375rem;
+    outline-color: transparent;
   }
   .p-inputtext:enabled:hover {
     border-color: #d4d4d8;
@@ -1355,6 +1357,15 @@
   .p-inputtext.p-invalid.p-component {
     border-color: #f0a9a7;
   }
+  .p-inputtext.p-variant-filled {
+    background-color: #fafafa;
+  }
+  .p-inputtext.p-variant-filled:enabled:hover {
+    background-color: #fafafa;
+  }
+  .p-inputtext.p-variant-filled:enabled:focus {
+    background-color: #ffffff;
+  }
   .p-inputtext.p-inputtext-sm {
     font-size: 0.875rem;
     padding: 0.65625rem 0.65625rem;
@@ -1368,29 +1379,8 @@
     color: #71717a;
     transition-duration: 0.2s;
   }
-  .p-float-label > label.p-error {
-    color: #e24c4c;
-  }
-  .p-input-icon-left > i:first-of-type,
-  .p-input-icon-left > svg:first-of-type,
-  .p-input-icon-left > .p-input-prefix {
-    left: 0.75rem;
-    color: #71717a;
-  }
-  .p-input-icon-left > .p-inputtext {
-    padding-left: 2.5rem;
-  }
-  .p-input-icon-left.p-float-label > label {
-    left: 2.5rem;
-  }
-  .p-input-icon-right > i:last-of-type,
-  .p-input-icon-right > svg:last-of-type,
-  .p-input-icon-right > .p-input-suffix {
-    right: 0.75rem;
-    color: #71717a;
-  }
-  .p-input-icon-right > .p-inputtext {
-    padding-right: 2.5rem;
+  .p-float-label > .p-invalid + label {
+    color: #f0a9a7;
   }
   .p-icon-field-left > .p-inputtext {
     padding-left: 2.5rem;
@@ -2093,6 +2083,15 @@
   .p-treeselect.p-treeselect-clearable .p-treeselect-label {
     padding-right: 1.75rem;
   }
+  .p-treeselect.p-variant-filled {
+    background: #fafafa;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #fafafa;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #ffffff;
+  }
   .p-treeselect .p-treeselect-label {
     padding: 0.75rem 0.75rem;
     transition: none;
diff --git a/public/themes/vela-blue/theme.css b/public/themes/vela-blue/theme.css
index b4102aafee..2e9108e8f9 100644
--- a/public/themes/vela-blue/theme.css
+++ b/public/themes/vela-blue/theme.css
@@ -639,6 +639,7 @@
     border: 1px solid #304562;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
     border-radius: 3px;
+    outline-color: transparent;
   }
   .p-cascadeselect:not(.p-disabled):hover {
     border-color: #64b5f6;
@@ -649,6 +650,15 @@
     box-shadow: 0 0 0 1px #93cbf9;
     border-color: #64b5f6;
   }
+  .p-cascadeselect.p-variant-filled {
+    background-color: #304562;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:hover {
+    background-color: #304562;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:focus {
+    background-color: #304562;
+  }
   .p-cascadeselect .p-cascadeselect-label {
     background: transparent;
     border: 0 none;
@@ -689,38 +699,29 @@
     transition: box-shadow 0.2s;
     border-radius: 0;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
-    padding: 0.5rem 1rem;
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+    margin-top: 0;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: inset 0 0 0 0.15rem #93cbf9;
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+    margin-bottom: 0;
   }
   .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
     color: rgba(255, 255, 255, 0.87);
     background: rgba(100, 181, 246, 0.16);
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+    background: rgba(100, 181, 246, 0.24);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: rgba(255, 255, 255, 0.87);
     background: rgba(255, 255, 255, 0.03);
   }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+    padding: 0.5rem 1rem;
+  }
   .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
     font-size: 0.875rem;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon.p-icon {
-    width: 0.875rem;
-    height: 0.875rem;
-  }
-  .p-input-filled .p-cascadeselect {
-    background: #304562;
-  }
-  .p-input-filled .p-cascadeselect:not(.p-disabled):hover {
-    background-color: #304562;
-  }
-  .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
-    background-color: #304562;
-  }
   .p-checkbox {
     position: relative;
     display: inline-flex;
@@ -1314,6 +1315,7 @@
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
     appearance: none;
     border-radius: 3px;
+    outline-color: transparent;
   }
   .p-inputtext:enabled:hover {
     border-color: #64b5f6;
@@ -1327,6 +1329,15 @@
   .p-inputtext.p-invalid.p-component {
     border-color: #ef9a9a;
   }
+  .p-inputtext.p-variant-filled {
+    background-color: #304562;
+  }
+  .p-inputtext.p-variant-filled:enabled:hover {
+    background-color: #304562;
+  }
+  .p-inputtext.p-variant-filled:enabled:focus {
+    background-color: #304562;
+  }
   .p-inputtext.p-inputtext-sm {
     font-size: 0.875rem;
     padding: 0.4375rem 0.4375rem;
@@ -1340,30 +1351,9 @@
     color: rgba(255, 255, 255, 0.6);
     transition-duration: 0.2s;
   }
-  .p-float-label > label.p-error {
+  .p-float-label > .p-invalid + label {
     color: #ef9a9a;
   }
-  .p-input-icon-left > i:first-of-type,
-  .p-input-icon-left > svg:first-of-type,
-  .p-input-icon-left > .p-input-prefix {
-    left: 0.5rem;
-    color: rgba(255, 255, 255, 0.6);
-  }
-  .p-input-icon-left > .p-inputtext {
-    padding-left: 2rem;
-  }
-  .p-input-icon-left.p-float-label > label {
-    left: 2rem;
-  }
-  .p-input-icon-right > i:last-of-type,
-  .p-input-icon-right > svg:last-of-type,
-  .p-input-icon-right > .p-input-suffix {
-    right: 0.5rem;
-    color: rgba(255, 255, 255, 0.6);
-  }
-  .p-input-icon-right > .p-inputtext {
-    padding-right: 2rem;
-  }
   .p-icon-field-left > .p-inputtext {
     padding-left: 2rem;
   }
@@ -2065,6 +2055,15 @@
   .p-treeselect.p-treeselect-clearable .p-treeselect-label {
     padding-right: 1.5rem;
   }
+  .p-treeselect.p-variant-filled {
+    background: #304562;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #304562;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #304562;
+  }
   .p-treeselect .p-treeselect-label {
     padding: 0.5rem 0.5rem;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
diff --git a/public/themes/vela-green/theme.css b/public/themes/vela-green/theme.css
index 703e012ca8..d3f374ad6c 100644
--- a/public/themes/vela-green/theme.css
+++ b/public/themes/vela-green/theme.css
@@ -639,6 +639,7 @@
     border: 1px solid #304562;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
     border-radius: 3px;
+    outline-color: transparent;
   }
   .p-cascadeselect:not(.p-disabled):hover {
     border-color: #81c784;
@@ -649,6 +650,15 @@
     box-shadow: 0 0 0 1px #a7d8a9;
     border-color: #81c784;
   }
+  .p-cascadeselect.p-variant-filled {
+    background-color: #304562;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:hover {
+    background-color: #304562;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:focus {
+    background-color: #304562;
+  }
   .p-cascadeselect .p-cascadeselect-label {
     background: transparent;
     border: 0 none;
@@ -689,38 +699,29 @@
     transition: box-shadow 0.2s;
     border-radius: 0;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
-    padding: 0.5rem 1rem;
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+    margin-top: 0;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: inset 0 0 0 0.15rem #a7d8a9;
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+    margin-bottom: 0;
   }
   .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
     color: rgba(255, 255, 255, 0.87);
     background: rgba(129, 199, 132, 0.16);
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+    background: rgba(129, 199, 132, 0.24);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: rgba(255, 255, 255, 0.87);
     background: rgba(255, 255, 255, 0.03);
   }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+    padding: 0.5rem 1rem;
+  }
   .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
     font-size: 0.875rem;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon.p-icon {
-    width: 0.875rem;
-    height: 0.875rem;
-  }
-  .p-input-filled .p-cascadeselect {
-    background: #304562;
-  }
-  .p-input-filled .p-cascadeselect:not(.p-disabled):hover {
-    background-color: #304562;
-  }
-  .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
-    background-color: #304562;
-  }
   .p-checkbox {
     position: relative;
     display: inline-flex;
@@ -1314,6 +1315,7 @@
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
     appearance: none;
     border-radius: 3px;
+    outline-color: transparent;
   }
   .p-inputtext:enabled:hover {
     border-color: #81c784;
@@ -1327,6 +1329,15 @@
   .p-inputtext.p-invalid.p-component {
     border-color: #ef9a9a;
   }
+  .p-inputtext.p-variant-filled {
+    background-color: #304562;
+  }
+  .p-inputtext.p-variant-filled:enabled:hover {
+    background-color: #304562;
+  }
+  .p-inputtext.p-variant-filled:enabled:focus {
+    background-color: #304562;
+  }
   .p-inputtext.p-inputtext-sm {
     font-size: 0.875rem;
     padding: 0.4375rem 0.4375rem;
@@ -1340,30 +1351,9 @@
     color: rgba(255, 255, 255, 0.6);
     transition-duration: 0.2s;
   }
-  .p-float-label > label.p-error {
+  .p-float-label > .p-invalid + label {
     color: #ef9a9a;
   }
-  .p-input-icon-left > i:first-of-type,
-  .p-input-icon-left > svg:first-of-type,
-  .p-input-icon-left > .p-input-prefix {
-    left: 0.5rem;
-    color: rgba(255, 255, 255, 0.6);
-  }
-  .p-input-icon-left > .p-inputtext {
-    padding-left: 2rem;
-  }
-  .p-input-icon-left.p-float-label > label {
-    left: 2rem;
-  }
-  .p-input-icon-right > i:last-of-type,
-  .p-input-icon-right > svg:last-of-type,
-  .p-input-icon-right > .p-input-suffix {
-    right: 0.5rem;
-    color: rgba(255, 255, 255, 0.6);
-  }
-  .p-input-icon-right > .p-inputtext {
-    padding-right: 2rem;
-  }
   .p-icon-field-left > .p-inputtext {
     padding-left: 2rem;
   }
@@ -2065,6 +2055,15 @@
   .p-treeselect.p-treeselect-clearable .p-treeselect-label {
     padding-right: 1.5rem;
   }
+  .p-treeselect.p-variant-filled {
+    background: #304562;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #304562;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #304562;
+  }
   .p-treeselect .p-treeselect-label {
     padding: 0.5rem 0.5rem;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
diff --git a/public/themes/vela-orange/theme.css b/public/themes/vela-orange/theme.css
index 0c801a0ab0..5bb41305ba 100644
--- a/public/themes/vela-orange/theme.css
+++ b/public/themes/vela-orange/theme.css
@@ -639,6 +639,7 @@
     border: 1px solid #304562;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
     border-radius: 3px;
+    outline-color: transparent;
   }
   .p-cascadeselect:not(.p-disabled):hover {
     border-color: #ffd54f;
@@ -649,6 +650,15 @@
     box-shadow: 0 0 0 1px #ffe284;
     border-color: #ffd54f;
   }
+  .p-cascadeselect.p-variant-filled {
+    background-color: #304562;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:hover {
+    background-color: #304562;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:focus {
+    background-color: #304562;
+  }
   .p-cascadeselect .p-cascadeselect-label {
     background: transparent;
     border: 0 none;
@@ -689,38 +699,29 @@
     transition: box-shadow 0.2s;
     border-radius: 0;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
-    padding: 0.5rem 1rem;
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+    margin-top: 0;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: inset 0 0 0 0.15rem #ffe284;
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+    margin-bottom: 0;
   }
   .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
     color: rgba(255, 255, 255, 0.87);
     background: rgba(255, 213, 79, 0.16);
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+    background: rgba(255, 213, 79, 0.24);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: rgba(255, 255, 255, 0.87);
     background: rgba(255, 255, 255, 0.03);
   }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+    padding: 0.5rem 1rem;
+  }
   .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
     font-size: 0.875rem;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon.p-icon {
-    width: 0.875rem;
-    height: 0.875rem;
-  }
-  .p-input-filled .p-cascadeselect {
-    background: #304562;
-  }
-  .p-input-filled .p-cascadeselect:not(.p-disabled):hover {
-    background-color: #304562;
-  }
-  .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
-    background-color: #304562;
-  }
   .p-checkbox {
     position: relative;
     display: inline-flex;
@@ -1314,6 +1315,7 @@
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
     appearance: none;
     border-radius: 3px;
+    outline-color: transparent;
   }
   .p-inputtext:enabled:hover {
     border-color: #ffd54f;
@@ -1327,6 +1329,15 @@
   .p-inputtext.p-invalid.p-component {
     border-color: #ef9a9a;
   }
+  .p-inputtext.p-variant-filled {
+    background-color: #304562;
+  }
+  .p-inputtext.p-variant-filled:enabled:hover {
+    background-color: #304562;
+  }
+  .p-inputtext.p-variant-filled:enabled:focus {
+    background-color: #304562;
+  }
   .p-inputtext.p-inputtext-sm {
     font-size: 0.875rem;
     padding: 0.4375rem 0.4375rem;
@@ -1340,30 +1351,9 @@
     color: rgba(255, 255, 255, 0.6);
     transition-duration: 0.2s;
   }
-  .p-float-label > label.p-error {
+  .p-float-label > .p-invalid + label {
     color: #ef9a9a;
   }
-  .p-input-icon-left > i:first-of-type,
-  .p-input-icon-left > svg:first-of-type,
-  .p-input-icon-left > .p-input-prefix {
-    left: 0.5rem;
-    color: rgba(255, 255, 255, 0.6);
-  }
-  .p-input-icon-left > .p-inputtext {
-    padding-left: 2rem;
-  }
-  .p-input-icon-left.p-float-label > label {
-    left: 2rem;
-  }
-  .p-input-icon-right > i:last-of-type,
-  .p-input-icon-right > svg:last-of-type,
-  .p-input-icon-right > .p-input-suffix {
-    right: 0.5rem;
-    color: rgba(255, 255, 255, 0.6);
-  }
-  .p-input-icon-right > .p-inputtext {
-    padding-right: 2rem;
-  }
   .p-icon-field-left > .p-inputtext {
     padding-left: 2rem;
   }
@@ -2065,6 +2055,15 @@
   .p-treeselect.p-treeselect-clearable .p-treeselect-label {
     padding-right: 1.5rem;
   }
+  .p-treeselect.p-variant-filled {
+    background: #304562;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #304562;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #304562;
+  }
   .p-treeselect .p-treeselect-label {
     padding: 0.5rem 0.5rem;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
diff --git a/public/themes/viva-dark/theme.css b/public/themes/viva-dark/theme.css
index 860f9bdf42..91674dfed7 100644
--- a/public/themes/viva-dark/theme.css
+++ b/public/themes/viva-dark/theme.css
@@ -665,6 +665,7 @@
     border: 2px solid #263238;
     transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s;
     border-radius: 6px;
+    outline-color: transparent;
   }
   .p-cascadeselect:not(.p-disabled):hover {
     border-color: #2d3e44;
@@ -675,6 +676,15 @@
     box-shadow: 0 0 0 1px #9eade6;
     border-color: #9eade6;
   }
+  .p-cascadeselect.p-variant-filled {
+    background-color: #263238;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:hover {
+    background-color: #263238;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:focus {
+    background-color: #263238;
+  }
   .p-cascadeselect .p-cascadeselect-label {
     background: transparent;
     border: 0 none;
@@ -715,38 +725,29 @@
     transition: box-shadow 0.3s;
     border-radius: 6px;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
-    padding: 0.5rem 1rem;
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+    margin-top: 0;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: inset 0 0 0 0.15rem #9eade6;
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+    margin-bottom: 0;
   }
   .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
     color: #9eade6;
     background: rgba(158, 173, 230, 0.16);
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+    background: rgba(158, 173, 230, 0.24);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: rgba(255, 255, 255, 0.87);
     background: rgba(158, 173, 230, 0.08);
   }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+    padding: 0.5rem 1rem;
+  }
   .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
     font-size: 0.875rem;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon.p-icon {
-    width: 0.875rem;
-    height: 0.875rem;
-  }
-  .p-input-filled .p-cascadeselect {
-    background: #263238;
-  }
-  .p-input-filled .p-cascadeselect:not(.p-disabled):hover {
-    background-color: #263238;
-  }
-  .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
-    background-color: #263238;
-  }
   .p-checkbox {
     position: relative;
     display: inline-flex;
@@ -1340,6 +1341,7 @@
     transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s;
     appearance: none;
     border-radius: 6px;
+    outline-color: transparent;
   }
   .p-inputtext:enabled:hover {
     border-color: #2d3e44;
@@ -1353,6 +1355,15 @@
   .p-inputtext.p-invalid.p-component {
     border-color: #f78c79;
   }
+  .p-inputtext.p-variant-filled {
+    background-color: #263238;
+  }
+  .p-inputtext.p-variant-filled:enabled:hover {
+    background-color: #263238;
+  }
+  .p-inputtext.p-variant-filled:enabled:focus {
+    background-color: #263238;
+  }
   .p-inputtext.p-inputtext-sm {
     font-size: 0.875rem;
     padding: 0.4375rem 0.65625rem;
@@ -1366,30 +1377,9 @@
     color: rgba(255, 255, 255, 0.6);
     transition-duration: 0.3s;
   }
-  .p-float-label > label.p-error {
+  .p-float-label > .p-invalid + label {
     color: #f78c79;
   }
-  .p-input-icon-left > i:first-of-type,
-  .p-input-icon-left > svg:first-of-type,
-  .p-input-icon-left > .p-input-prefix {
-    left: 0.75rem;
-    color: rgba(255, 255, 255, 0.6);
-  }
-  .p-input-icon-left > .p-inputtext {
-    padding-left: 2.5rem;
-  }
-  .p-input-icon-left.p-float-label > label {
-    left: 2.5rem;
-  }
-  .p-input-icon-right > i:last-of-type,
-  .p-input-icon-right > svg:last-of-type,
-  .p-input-icon-right > .p-input-suffix {
-    right: 0.75rem;
-    color: rgba(255, 255, 255, 0.6);
-  }
-  .p-input-icon-right > .p-inputtext {
-    padding-right: 2.5rem;
-  }
   .p-icon-field-left > .p-inputtext {
     padding-left: 2.5rem;
   }
@@ -2091,6 +2081,15 @@
   .p-treeselect.p-treeselect-clearable .p-treeselect-label {
     padding-right: 1.75rem;
   }
+  .p-treeselect.p-variant-filled {
+    background: #263238;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #263238;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #263238;
+  }
   .p-treeselect .p-treeselect-label {
     padding: 0.5rem 0.75rem;
     transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s;
diff --git a/public/themes/viva-light/theme.css b/public/themes/viva-light/theme.css
index 4931c66a7d..a10589e8b0 100644
--- a/public/themes/viva-light/theme.css
+++ b/public/themes/viva-light/theme.css
@@ -665,6 +665,7 @@
     border: 2px solid #e1e1e1;
     transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s;
     border-radius: 6px;
+    outline-color: transparent;
   }
   .p-cascadeselect:not(.p-disabled):hover {
     border-color: #cecece;
@@ -675,6 +676,15 @@
     box-shadow: 0 0 0 0.1rem #bbc7ee;
     border-color: #91a4e3;
   }
+  .p-cascadeselect.p-variant-filled {
+    background-color: #f2f2f2;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:hover {
+    background-color: #f2f2f2;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:focus {
+    background-color: #f2f2f2;
+  }
   .p-cascadeselect .p-cascadeselect-label {
     background: transparent;
     border: 0 none;
@@ -715,38 +725,29 @@
     transition: box-shadow 0.3s;
     border-radius: 6px;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
-    padding: 0.5rem 1rem;
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+    margin-top: 0;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: inset 0 0 0 0.15rem #bbc7ee;
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+    margin-bottom: 0;
   }
   .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
     color: #585858;
     background: #ced6f1;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+    background: #aebbe8;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: #6c6c6c;
     background: #edf0fa;
   }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+    padding: 0.5rem 1rem;
+  }
   .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
     font-size: 0.875rem;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon.p-icon {
-    width: 0.875rem;
-    height: 0.875rem;
-  }
-  .p-input-filled .p-cascadeselect {
-    background: #f2f2f2;
-  }
-  .p-input-filled .p-cascadeselect:not(.p-disabled):hover {
-    background-color: #f2f2f2;
-  }
-  .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
-    background-color: #f2f2f2;
-  }
   .p-checkbox {
     position: relative;
     display: inline-flex;
@@ -1340,6 +1341,7 @@
     transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s;
     appearance: none;
     border-radius: 6px;
+    outline-color: transparent;
   }
   .p-inputtext:enabled:hover {
     border-color: #cecece;
@@ -1353,6 +1355,15 @@
   .p-inputtext.p-invalid.p-component {
     border-color: #f88c79;
   }
+  .p-inputtext.p-variant-filled {
+    background-color: #f2f2f2;
+  }
+  .p-inputtext.p-variant-filled:enabled:hover {
+    background-color: #f2f2f2;
+  }
+  .p-inputtext.p-variant-filled:enabled:focus {
+    background-color: #f2f2f2;
+  }
   .p-inputtext.p-inputtext-sm {
     font-size: 0.875rem;
     padding: 0.4375rem 0.65625rem;
@@ -1366,30 +1377,9 @@
     color: #898989;
     transition-duration: 0.3s;
   }
-  .p-float-label > label.p-error {
+  .p-float-label > .p-invalid + label {
     color: #f88c79;
   }
-  .p-input-icon-left > i:first-of-type,
-  .p-input-icon-left > svg:first-of-type,
-  .p-input-icon-left > .p-input-prefix {
-    left: 0.75rem;
-    color: #898989;
-  }
-  .p-input-icon-left > .p-inputtext {
-    padding-left: 2.5rem;
-  }
-  .p-input-icon-left.p-float-label > label {
-    left: 2.5rem;
-  }
-  .p-input-icon-right > i:last-of-type,
-  .p-input-icon-right > svg:last-of-type,
-  .p-input-icon-right > .p-input-suffix {
-    right: 0.75rem;
-    color: #898989;
-  }
-  .p-input-icon-right > .p-inputtext {
-    padding-right: 2.5rem;
-  }
   .p-icon-field-left > .p-inputtext {
     padding-left: 2.5rem;
   }
@@ -2091,6 +2081,15 @@
   .p-treeselect.p-treeselect-clearable .p-treeselect-label {
     padding-right: 1.75rem;
   }
+  .p-treeselect.p-variant-filled {
+    background: #f2f2f2;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #f2f2f2;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #f2f2f2;
+  }
   .p-treeselect .p-treeselect-label {
     padding: 0.5rem 0.75rem;
     transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s;